React Refresh 란? 코드가 중간에 수정 되더라도 컴포넌트의 state를 유지시켜주는 기능 Cf.) CRA(Create React App) 환경에서 셋업한 프로젝트는 기본 적용 되어있으므로 별도의 설정이 필요 없다. Why should we use this ? React app 개발을 하다보면 코드가 빈번히 수정되고 이 때마다 컴포넌트의 state가 초기화 되는 문제가 발생, 따라서 코드가 수정되더라도 컴포넌트 상태를 지속시켜주는 기능이 필요하다. Solution 아래의 두 모듈을 설치 yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh react-refresh React의 Fast Refresh 기능을 구현하는 데 사용되는 모듈, 컴..
dev , prod와 같은 다중 환경에서의 웹팩 설정하기. 현재까지의 설정 코드로는 development목적으로는 사용할 수 있지만, production 목적으로 사용할 때는 번들크기 및 환경 구성과 관련해 어느 정도 최적화가 필요하다. 1. dev,prod 환경에 재사용되는 파일로 Rename하기 (webpack.config.js ⇒ webpack.common.js) 기존 파일에서 mode : ‘development’ 옵션 제거 2. webpack.dev.js 추가 module.exports={ mode: 'development', devtool: 'cheap-module-source-map', //원본 소스와 변환된 코드 사이의 매핑을 제공하며, 빌드 속도와 파일 크기 사이에 좋은 균형을 제공, 하지..
문제 https://leetcode.com/problems/all-paths-from-source-to-target/ All Paths From Source to Target - LeetCode Can you solve this real interview question? All Paths From Source to Target - Given a directed acyclic graph (DAG) of n nodes labeled from 0 to n - 1, find all possible paths from node 0 to node n - 1 and return them in any order. The graph is given as fol leetcode.com - 시작점부터 종점까지 이어지는 가..
# 1. Style sheet 모듈로 불러오기 1. [src] > style.css 파일 생성 , App에서 import 하기 h1 { color: orange; } 2. css loader , style-loader 설치 yarn add -D css-loader style-loader css- loader ( css 모듈로 불러오기 ) 기능: css-loader 이 로더는 CSS 파일을 모듈로 변환하여 JavaScript에서 import할 수 있게 해줍니다. 사용 예: import ‘./style.css’ style-loader ( style 태그로 만들어 head에 삽입하기 ) 기능: style-loader는 JavaScript에서 불러온 CSS를 태그로 만들어 브라우저의 부분에 삽입합니다. css-..
코스 구성 webpack5와 TS를 이용한 react app basic setup [ Now We Are Here ! ] images 와 SVGs 렌더링 허용을 위한 웹팩 구성하기. dev , prod와 같은 다중 환경 웹팩 설정 셋업하기. react refesh 추가하기. ESLInt 로 린팅하기. 코드 포매터 with pretttier 사용하기 Husky 사용하기 ( local 환경에서 Git hooks 을 쉽게 관리할 수 있게 해주는 도구) next steps 초기 셋업 git init add .gitignore build 폴더 ignore에 추가 (빌드 생산물을 깃에 저장하지 않을 것임) node_modules add [src] folder 소스코드 add [build] folder 배포를 위한 ..
문제 https://leetcode.com/problems/find-center-of-star-graph/ Find Center of Star Graph - LeetCode Can you solve this real interview question? Find Center of Star Graph - There is an undirected star graph consisting of n nodes labeled from 1 to n. A star graph is a graph where there is one center node and exactly n - 1 edges that connect the center node leetcode.com 접근방법 1. [단순 접근 방법] 주어진 인접리스트에서 ..
프로세스 현재 실행중인 프로그램의 인스턴스 독립 메모리 영역을 할당받으며 다른 프로세스에 영향을 미치지 않음. 스레드 프로세스 내부에서 실행되는 실행 흐름의 단위 ( 프로세스 보다 작은 실행 단위 ) 프로세스 내에서 같은 메모리를 공유할 수 있음. 콜 스택 (Call Stack) : 함수 호출이 쌓이는 곳입니다. JavaScript는 단일 쓰레드 언어로, 한 번에 하나의 함수만 실행할 수 있습니다. 이벤트루프 (자바스크립트 런타임 외부에서 비동기 실행을 돕기위해 만들어진 장치) 이벤트루프의 역할: 콜스택이 비어있는지 지속적으로 확인하며, 비어있다면 태스크큐 마이크로태스크 큐의 대기중인작업들을 콜스택으로 이동시킨다. ( = Tick ) 태스크큐: setTimeout, setInteverval 등의 함수가 ..
일급함수 : 일급객체의 특성을지닌 함수 일급객체란? (다른 객체들이 가지는 권한을 모두 가지는 객체) 모든 일급 객체는 변수나 데이터에 담을 수 있어야 한다. 모든 일급 객체는 함수의 파라미터로 전달 할 수 있어야 한다. 모든 일급 객체는 함수의 반환값으로 사용할 수 있어야 한다. 프로그래밍 언어는 해당 언어의 함수가 변수처럼 취급될 때, 일급 함수(First-Class Function)을 가진다고 합니다. 즉, 함수가 다른 함수들에 인자로 전달되고, 다른 함수에 의해 반환되며, 변수에 값으로서 할당될 수 있음을 말하며 따라서 자바스크립트는 함수를 일급 객체(First-Class Object)로 취급합니다. 고차함수 : 다른 함수를 인자로 받거나 반환값으로 사용하는 함수 클로저(Closure) 함수와 함..
