본문 바로가기

JavaScript48

리액트 컴포넌트 생명주기 (React Component Life Cycle) 리액트를 공부하며 이번에 리액트를 본격적으로 사용하게 되었습니다. 그동안 리액트 자체를 사용해보긴 했지만 어떻게 사용해야하는지에 대한 고민이나 공부없이 말 그대로 쓰기만 했었습니다. 그래서, 이번 기회에 기초부터 차근차근 공부해보려 합니다. 오늘은 리액트 컴포넌트의 생명주기에 대해 알아보겠습니다. 글을 쓰는 현재 리액트 18버젼이 나왔기 때문에, 17버젼에서 이미 deprecate된 일부 단계들은 다루지 않습니다. 1. componentDidMount 컴포넌트가 마운트(mount)되며 일어나는 단계입니다. 위키백과에서는 마운트(mount)에 대해 "컴퓨터 과학에서 저장 장치에 접근할 수 있는 경로를 디렉터리 구조에 편입시키는 작업을 말한다." 라고 설명합니다. 이처럼 컴포넌트가 처음 실행되면 컴포넌트의 .. 2022. 5. 1.
innerHTML과 insertAdjacentHTML 그동안 DOM 요소를 변경하거나 추가할 때, 별 생각 없이 innerHTML을 자주 사용해오곤 하였습니다. 그런데 얼마 전, DOM 요소를 조작할 때 사용되는 메서드가 innerHTML 뿐이 아니라는 것을 알게되었습니다. 심지어 innerHTML 보다 성능도 좋다고하여 놀랐습니다. 어떠한 동작 원리로 메서드 간의 성능 차이가 나게 되었는지, DOM 요소를 효율적으로 조작하는 방법은 무엇인지 알아보겠습니다. * 이 글은 각 방법의 동작 방식과 차이점에 초점을 두고 비교하는 글입니다. 단순 사용법이 궁금하시다면 MDN 공식 문서를 참고해주세요! Element.innerHTML innerHTML은 요소 내에 포함된 HTML (또는 XML) 마크업을 가져오거나 설정하는 Element의 속성입니다. 이 속성에는 .. 2022. 3. 31.
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.

티스토리툴바