본문 바로가기

Javascript

 (13)
[React] Props Drilling의 문제점과 해결방법 Props Drilling ? props drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다. 아래는 props drilling의 예시 코드입니다. import React from "react"; import "./styles.css"; export default function App() { return ( ); } function FirstComponent({content}) { return ( I am the first component; | ); } function SecondComponent({content}) { return ( I am the second..
[Javascript] Webpack의 개념과 실습 Webpack ? 여러 개의 리소스 파일(js, css, jpg 등등)을 하나의 js파일로 묶어주는 도구입니다. 여러개의 파일을 묶어주기 때문에 네트워크 접속 횟수를 줄여 빠른 서비스를 제공할 수 있습니다. 많은 자바스크립트 패키지를 사용하다 보면, 서로 다른 패키지들이 서로 같은 이름의 변수나 함수를 사용하면서 예상하지 못한 충돌로 인해서 오작동이 발생할 수 있는데, 이를 극복하기 위해서 등장한 것이 모듈입니다. 모듈(Module)? 웹팩 공식문서에서 모듈은 모듈 프로그래밍에서 개별적인 기능을 하는 작은 단위라고 설명합니다. javascript의 관점에서 본다면, javascript 파일을 모듈이라고 할 수 있을 것 같습니다. 웹팩의 관점에서 본다면 모듈은 javascript 뿐만 아니라 애플리케이션을..
[Javascript] 실행 컨텍스트 실행 컨텍스트 자바스크립트 엔진은 코드를 실행하기 위해 변수(전역 변수, 매개 변수 등)와 변수의 스코프, this와 같은 정보들이 필요합니다. 어떤 실행 컨텍스트가 활성화될 때, 자바스크립트 엔진은 해당 컨텍스트의 코드를 실행하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트에 저장합니다. 코드가 실행되기 위해서는 스코프, 식별자, 코드 실행 순서 등의 관리가 필요한데, 이 모든 것을 관리하는 것이 바로 실행 컨텍스트입니다. 실행 컨텍스트는 소스코드를 실행하는데 필요한 환경을 제공하고, 코드의 실행 결과를 실제로 관리하는 영역입니다. 이 중 식별자, 스코프, this 등은 실행 컨텍스트의 렉시컬 환경을 기반으로 관리되며, 코드의 실행순서는 콜스택(실행 컨텍스트 스택)을 통해서 관리됩니다. 소스코드의 타..
[React] useRef Hook의 이해와 활용 useRef ? React 컴포넌트는 기본적으로 내부 상태(state)가 변할 때마다 다시 렌더링이 됩니다. 대부분의 경우에는 상태가 변할 때마다 React 컴포넌트가 함수가 호출되어 화면이 갱신되기를 바랍니다. 하지만 그에 따른 부작용으로 함수 내부의 변수들이 기존에 저장하고 있는 값들을 잃어버리고 초기화하는데, 간혹 다시 렌더링이 되더라도 기존에 참조하고 있던 컴포넌트 함수 내의 값이 그대로 보존되어야 하는 경우가 있습니다. 이때 사용할 수 있는 Hook이 useRef입니다. useRef 함수는 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환합니다. 이 current 속성의 값은 상태를 변경할 때처럼 React 컴포넌트가 다시 렌더링 되지 않습니다. 또한 다시 렌더링..
[Javascript] 호이스팅(Hoisting) 호이스팅을 알아보기 전 숙지해야할 변수의 생성 단계 변수는 3가지 단계를 걸처 생성됩니다. 선언 단계 초기화 단계 할당 단계 var의 경우 선언 단계와 초기화 단계가 동시에 진행이 됩니다. 즉, 자바스크립트 내부적으로 실행 컨텍스트의 변수 객체에 변수를 등록하는 동시에 메모리를 undefined로 만듭니다. let과 const는 선언 단계와 초기화 단계가 분리되어 진행됩니다. 실행 컨텍스트의 변수 객체에 변수를 등록했지만, 메모리에 할당하지 않아 접근할 수 없고 Reference Error가 발생합니다. 이때 스코프의 시작과 초기화 시작 사이의 구간이 발생하게 되는데 이것을 TDZ(Temporal Dead Zone)라고 합니다. 호이스팅(Hoisting)? JavaScript에서 호이스팅(hoisting..
[Javascript] 자바스크립트의 프로토타입 자바스크립트의 상속 자바스크립트에서 상속이나 캡슐화 같은 개념이 명시적으로 존재하지는 않기 때문에 자바나 C++ 기반 클래스 기반 언어를 사용하던 개발자(OOP에 익숙한 개발자)들이 자바스크립트에서 이런 개념을 가져다 사용하기 위해 프로토타입을 사용하여 이를 유사하게 구현한 일종의 디자인 패턴입니다. 상속은 프로토타입 체인을 사용하여 구현하고, 캡슐화는 클로저를 사용해서 구현합니다. Prototype이란? JavaScript는 프로토타입 기반의 언어이며, 프로토타입이란 객체의 원형을 뜻합니다. 즉, 모든 객체는 프로토타입이라는 객체를 가지고 각각의 프로토타입으로부터 property와 method를 상속 받습니다. Prototype을 왜 사용해야 할까 ? 생성자 함수 이야기를 해보자면, 생성자 함수를 쓰는..
[React] React 렌더링 최적화와 Hooks 렌더링이란? 리액트에서 렌더링이란 화면에 특정한 요소를 그려내는 것을 의미합니다. 브러우저에서 렌더링이란 DOM 요소를 계산하고 그려내는 것을 의미합니다. HTML과 CSS를 통해서 만들어지고 계산된 DOM과 CSSOM은 렌터 트리를 형성하고 최종적으로 브라우저에 그려지게 됩니다. 그리고 우리는 브라우저에서 제공하는 DOM API를 Javascirpt를 통해 호출하면서 그려진 화면을 변화시킵니다. 하지만 Vanilla Javascript를 이용하여 DOM에 직접 접근하고 수정하는 것(명령형), 그리고 이를 최적화하는 것은 애플리케이션의 규모가 커지면 커질수록 관리하기가 힘들어집니다. 그래서 애플리케이션에서 보여주고 싶은 핵심 UI를 "선언"하기만 하면 실제로 DOM을 조작해서 UI를 그래내고, 변화시키는..
[React] React(Typescript)에 ESLint/Prettier/Airbnb Rule 적용하기 + Husky 코딩스타일은 팀마다 다르지만 이를 개인에게 지키도록 하는 것은 한계가 있고, 강제성이 없기에 취약합니다. 그리고 코딩 스타일과 관련한 논쟁이 이어지다 보면 정작 신경 써야 할 프로젝트에 에너지를 쏟지 못하는 상황이 발생합니다. 이러한 불필요한 에너지 소모를 줄이기 위해 코딩 스타일 자동화 툴이 필요합니다. 처음 설정은 복잡하지만 한번 적용해 두면 추후에 적용하기 쉽고, 처음에 적용해 둔 것이 지속적인 개발 생산성 향상에 도움이 됩니다. 협업 시 많이 사용되고 있는 ESLint Airbnb rule 세팅을 해보도록 하겠습니다. 1. CRA 먼저 터미널을 키고 create-react-app을 통해 Typescript 리액트 프로젝트를 만들어 줍니다. npx create-react-app [프로젝트 이름] -..
728x90

티스토리툴바