Programming/Javascript, Typescript30

• 

  [JavaScript] new 연산자 예전에 정리해봐야지~ 했던 new 연산자. 왜 정리하고 싶었는지는 잊어버렸지만, 종종 만나게 되기에 정리해보자. 정의 new 연산자는 '생성자 함수' 앞에 붙여 객체를 만들어주는 연산자라고 할 수 있다. new라는 이름이 암시하듯이 새로운 객체입니다~! 라는 의미로 받아들였다. JavaScript에서 생성자 함수는 객체를 만드는 함수다. 아래에서 Person함수는 생성자 함수이며, 일반 함수와 구분하기 위해 대문자로 시작한다. function Person(name){ this.name = name; this.introduce = function(){ return 'My name is '+this.name; } } var p1 = new Person('river'); document.write(p1.int.. Programming/Javascript, Typescript 2023. 7. 13.

• [HTML, JS] onClick="location.href='주소'" 회사에서 순수 HTML 페이지를 구현하면서 button에 onClick 이벤트로 특정 URL로 이동하는 기능을 구현하려고 했다. MDN 문서에도 나와 있는 Location 객체를 구현해봤다! location.href란? href는 location 객체에 속해있는 프로퍼티로, 현재 접속중인 페이지 정보를 갖고 있다. 값을 변경할 수 있어서, 주소 위치에 원하는 페이지 주소를 넣으면 다른 페이지로 이동할 수도 있다 Location? https://developer.mozilla.org/ko/docs/Web/API/Location Location - Web API | MDN Location 인터페이스는 객체가 연결된 장소(URL)를 표현합니다. Location 인터페이스에 변경을 가하면 연결된 객체에도 반영되.. Programming/Javascript, Typescript 2023. 3. 17.

• 

  Promise.all, 무엇이고 언제 사용해야 할까? 코드 리뷰 스터디에서 동료분으로부터 Promise.all의 존재를 알게 되었다. 들어본 적은 없었지만 설명해주신 걸 들어보니 복수의 요청을 한 번에 보내고, 프로미스도 전부 합쳐 한 번에 반환하는 핸들러였다. 하나라도 오류가 나면 Promise.all 전체가 거부되고 .catch가 실행된다. 해당 에러가 Promise.all 전체의 결과가 되는 거다. Promise.all(iterable) Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행(fulfill)한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환한다. 주어진 프로미스 중 하나가 거부하는경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부한다.(MDN 문서) const promise1.. Programming/Javascript, Typescript 2023. 3. 6.

• 

  [JavaScript] new Date()로 생성된 시간을 한국 시간으로 바꾸기 최근 일하면서 특정 시간대에만 배너를 표시하는 작업을 한 일이 있었다. 당연히 쉽게 반영이 될 거라고 생각했는데, 실제 사이트에서는 마치 코드가 잘못된 것처럼 작동하지 않았다. 이유는 기업 서버가 미국(혹은 다른 나라)을 거쳐 가면서 new Date() 시간이 한국 시간이 아닌 다른 어딘가의 시간으로 출력됐던 것이었고, 이 때문에 항상 한국 기준 (UTC +8)으로 바꿔주는 작업이 필요했다. 소스코드 const now = new Date() // 서버 시간 기준 현재 로컬 시간 const GMTNow = now.getTime() + now.getTimezoneOffset() * 60 * 1000 // GMT 현재 시간 // now.getTime(): 1970년 1월 1일 00:00:00 GMT와 주어진 .. Programming/Javascript, Typescript 2023. 2. 18.

• 

  [JavaScript] 화살표 함수 정의 전통적인 함수 표현보다 더 간편하게 함수를 작성할 수 있는 대안이다. 기본 형태 let func = (arg1, arg2, ...argN) => expression // 아래 함수 표현식의 축약 버전이다. let func = function(arg1, arg2, ...argN) { return expression; } // 인수가 하나도 없다면, 괄호를 비워 놓는다. 이 때 괄호는 생략 불가하다. let sayHi = () => alert("안녕하세요!") sayHi() 본문이 여러 줄인 화살표 함수는 '중괄호'와 'return'을 사용해야 한다. let sum = (a, b) => { let result = a + b retun result } alert(sum(1, 2)) // 3 + 화살표 함.. Programming/Javascript, Typescript 2023. 2. 9.

• 

  [Javscript] window.scrollTo() 메서드 scrollTo는 document의 특정 좌표로 이동시켜주는 메서드다. 좌표의 숫자 단위는 픽셀이다. 숫자를 지정하면 직접 DOM 조작을 하지 않고 스크롤을 컨트롤할 수 있어 좋다. 내가 실제로 사용해 본 아래 예시처럼 behavior: smooth와 같이 움직임에 대한 옵션을 줄 수도 있다. 주의할 건 IE에서는 작동하지 않는다는 점이다. IE가 공식 지원 종료되면서 고려해야 하는 경우가 많이 줄어들기는 했겠지만, 만약 IE에서도 같은 동작을 하고 싶다면 우선 사용자의 브라우저 정보를 읽어 조건문 처리한 뒤, 비슷하지만 조금 다른 메서드를 사용해야 한다. const handleClick = () => { if (!window.scrollY) return window.scrollTo({ top: 0, b.. Programming/Javascript, Typescript 2023. 1. 3.

• 

  [Javascript] reduce() 함수 회사에서 개발하던 중 리스트의 요소들을 누적하여 다시 return하고 싶은 경우가 있었다. 이를 테면 조각조각 떨어져 있는 URL 안의 요소들을 합치고 싶을 때다. 이럴 때는 map 함수가 아니라 reduce 함수를 쓰면 가장 효율적으로 구현할 수 있다.정의reduce() 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 예시const array1 = [1, 2, 3, 4];// 0 + 1 + 2 + 3 + 4const initialValue = 0;const sumWithInitial = array1.reduce( (accumulator, currentValue) => accumulator + currentValue, initialValue);.. Programming/Javascript, Typescript 2023. 1. 2.