본문 바로가기

이론/Frontend74

JS에서 날짜를 보여주기 전 고려해야 할 것들 왜 공부하게 되었지? 얼마 전 받았던 코드 리뷰에서 Date를 파싱할 때 고려해야 할 사항을 한 가지 알게 되었습니다. 수정 자체가 오래 걸리거나 어려운 내용은 아니지만, 앞으로도 Date를 제대로 다루기 위해선 이에 대한 이해가 꼭 필요할 것 같아 공부한 내용을 글로 정리해보았습니다. 문제가 무엇일까? 제 코드의 문제점은 api를 통해 받은 시간값이 ‘국제 표준시’ 에 해당하기 때문에, 한국에서 볼 때는 한국 시간과 표준 시간의 차이만큼 오차가 발생할 수 있다는 것입니다. 이 문제를 해결하기 위해서는 국제 표준시만큼의 격차를 먼저 알아야 합니다. 우리가 국제 표준시라고 부르는 그리니치 표준시(GMT)는 1972년 1월 1일부터 시행된 표준 시간이며 협정 세계시(UTC: Universal Time Coo.. 2022. 3. 25.
자바스크립트의 Array 이번 포스팅 주제는 자바스크립트의 Array 객체입니다. 자바스크립트를 시작했다면 누구나 한 번쯤은 써봤을 흔한 빌트인 객체이지만, 저는 아직 Array의 사용법에 대해 잘 모르고 있었습니다. 얼마 전 다양한 메서드들을 활용해보며 공부할 기회가 있었는데, 이 참에 잊어버리지 않도록 정리하게 되었습니다. 선언 Array의 선언 방법에는 두 가지가 있습니다. 배열 내용을 직접 선언하는 리터럴 방식과, new 키워드를 이용하는 생성자 방식이 그것입니다. 먼저 리터럴 방식입니다. const arr = ["literal", "way"]; 배열 기호인 대괄호[] 안쪽에 내용을 직접 입력해주는 것으로 Array를 생성할 수 있습니다. 다음은 생성자 방식입니다. const arr = new Array("construc.. 2022. 3. 22.
Webpack 빠르게 흝어보기 웹팩이란? 웹팩(Webpack)은 HTML, CSS, JavaScript 와 같은 코드들과 이미지, 동영상, 오디오 등 웹 페이지를 구성하는 자원들을 하나의 결과물로 묶어주는 모듈 번들러입니다. 여러 파일들이 상호작용하는 기존의 웹 환경에선 자바스크립트의 언어적 특성 때문에 발생하는 변수의 유효 범위 문제나, 개발과 배포시에 이루어지는 반복적인 작업에 대한 자동화의 필요성 등을 느끼게 되었는데요, 이러한 문제들을 해결하기 위해 AMD, Common.js, Grunt, Gulp 등과 같은 도구들을 이용해 왔습니다. 또한 좋은 사용자 경험을 위해 웹 사이트의 로딩 속도를 끌어올리려는 많은 시도가 있었는데, 그 중에서도 대표적인 것이 바로 서버에 요청하는 파일의 숫자를 가능한 줄이는 것이었습니다. 위에서 언급.. 2022. 3. 15.
함수의 호출을 간격을 제한하는 쓰로틀(Throttle) 쓰로틀이란? 어떠한 동작을 할 때마다 이벤트가 실행되도록 바인딩 되어있는 상황에서, 너무 잦은 이벤트의 호출은 프로그램의 성능을 떨어뜨리고 나쁜 유저 경험을 제공할 수 있습니다. 이를 해결할 수 있는 방법으로 바인딩 되어있는 이벤트가 최소한의 시간 간격을 갖고 실행되도록 제한하는 절차가 있는데, 이러한 기법을 쓰로틀(Throttle) 이라고 합니다. 개념 실행할 함수를 래핑하는 쓰로틀 함수를 만들고, 이 함수가 일정한 시간마다 실행되도록 setTimeout을 적용합니다. 정해준 주기에 한 번씩만 실행될 수 있도록 setTimeout 내부에서 플래그 변수를 제어해줍니다. 이렇게 되면, setTimeout 내부가 실행되면 플래그 변수의 상태가 변해 인자로 받게되는 함수(원래 이벤트에 바인딩 되었던 함수)가 .. 2022. 3. 12.
함수와 바인딩, this 이 글은 이 포스트의 연장선에 있습니다. 같은 동작을 가진 함수를 바인딩하더라도, 경우에 따라서 실제로는 다른 값을 가지는 경우가 있습니다. 함수의 선언 방식에 따라 이벤트를 어떻게 바인딩하는 것이 좋을지에 대해 알아보겠습니다. this 이벤트에 함수를 바인딩 할 때, this는 특히 신경써야 하는 부분입니다. this에 대한 정보는 아래 그림처럼 실행 콘텍스트 객체에 포함되어 있습니다. 그러나 호출에 따라 다른 값이 할당되기 때문에 함수 내부 구조만 보고서는 this 값을 정확히 예측하기란 어렵습니다. 때문에 this가 어느 곳을 바라보고 있는지 알아내려면 아래 내용들을 살펴보아야 합니다. 함수의 종류에 따라 일반적인 함수와 화살표 함수가 가리키는 this는 서로 다릅니다. const obj = { f.. 2022. 3. 3.
node.js에서 명령어로 브라우저 실행하기 이 글은 Windows OS 기반의 환경에서 작성되었습니다. CRA 등을 사용하여 프로젝트를 구성해보신 분이라면, npm run start 과 같은 명령어로 서버 구동부터 브라우저로 결과물을 확인하는 과정까지 한 번에 실행되는 것을 보셨으리라 생각합니다. 그러나 이런 사전 설정없이 단순히 node 프로젝트에서 start 명령을 사용하면 단순히 node ./bin/www 명령만 실행되고 끝입니다. 만약 결과물을 보고 싶다면 직접 브라우저에서 localhost:3000 처럼 자신이 설정한 주소를 입력해서 확인해야 합니다. 이번 포스트에서는 번거로웠던 이 과정을 한 번에 처리할 수 있도록 해보겠습니다. "scripts": { "start": "node ./bin/www" } 처음 node.js 프로젝트에 ex.. 2022. 1. 30.

티스토리툴바