여러 파일들을 한데 모아놓은, 빌드의 타겟이 되는 경로의 파일을 '엔트리' 파일이라고 한다. 엔트리 파일을 통해 만들어낸 번들링 결과물이 저장되는 경로의 파일을 '아웃풋'이라고 한다. webpack.config.js 에 웹팩 번들링에 필요한 명령어의 설정들을 담을 수 있다. 여기 담으면 npx webpack 명령어 만으로 번들링을 진행할 수 있다. Webpack 모드 개발자 모드 배포 모드 아무것도 설정하지 않은 모드(기본값) 당연하지만, 웹팩의 설정들은 너무 많아서, 개발자가 일일히 모두를 설정하기에는 어려움이 많습니다. 그래서 웹팩은 '설정 모음'의 차원에서 모드를 지원합니다. 모드를 설정해주면 자동으로 그 모드에 해당되는 설정들이 적용되어 번들링이 처리됩니다. 설정 파일 자체를 webpack.con..

웹 컴포넌트를 제작하는데 사용하는 프레임워크이다. 스텐실을 사용하면 타입스크립트와 자바스크립트를 쓸 수 있으며 자동적인 폴리필 추가가 가능하다. 컴포넌트를 lazy 하게 로드할 수 있기 때문에 번들 사이즈를 줄여준다. DOM 의 리렌더링 효율을 극대화한다.

리덕스에서 상태의 변경은 모두 동기적으로 일어납니다. 따라서 미들웨어를 통해 스토어 상태 변경 프로세스 중간에 비동기 로직을 끼워 넣어야만 API 요청에 따른 상태변경을 수행할 수 있습니다. 그러한 미들웨어가 redux-thunk 나 redux-saga 같은 리덕스 생태계 패키지입니다. 리덕스 사가가 제공하는 createSagaMiddleware() 함수를 실행시켜 반환된 객체를 미들웨어로 등록시키고, run 메서드를 실행하면 리덕스에 사가를 적용할 수 있습니다. 리덕스 사가로 할 수 있는 일 리덕스 사가는 단순히 비동기 처리를 위해 만들어진 패키지가 아닙니다. 그건 그냥 미들웨어로도 충분히 가능합니다. 리덕스 사가는 사이드 이펙트를 더 쉽게 관리하고 더 효과적으로 실행하며 더 쉽게 테스트하고 더 나은 ..

리액트는 어떤 과정을 통해 렌더링을 수행하는가? 전통적인 방식 자바스크립트를 이용한 전통적인 렌더링 방식은 단순했습니다.문자열로 HTML 을 생성하고 그 안에 Data 가 들어갈 부분을 지정하는 것이었죠. 이렇게 Data 와 HTML 이 조합된 문자열을 브라우저가 받아내서 렌더링하도록 만드는 것이었습니다. 하지만 이 전통적인 방식의 문제점은 조금의 변경사항을 반영하고 싶어도 브라우저가 전체를 다시 렌더링하도록 만들 수밖에 없다는 점과 실제로 렌더링 결과물이 바뀌지 않았음에도 새로운 데이터를 받았다는 이유만으로 렌더링이 다시 일어나는 비효율이 발생하는 문제가 있었죠. 리액트의 방식 리액트는 이러한 비효율을 줄이기 위해 JSX라는 새로운 파일 형식을 도입했습니다. JSX를 통해 데이터가 들어가야 할 부분을 ..

www.youtube.com/watch?v=vb7fkBeblcw 특성 로컬스토리지는 오직 문자열만을 저장할 수 있지만 Indexed DB 는 객체 자체를 저장할 수 있으며 다른 무거운 파일도 넣을 수 있습니다. 같은 도메인에 접근하면 같은 데이터를 사용하게 됩니다. API 가 '비동기적'입니다. 키-밸류 페어로 동작합니다 사용법 데이터베이스를 엽니다. 데이터베이스 안에 객체 Store를 생성합니다. 성공한다면, Transaction 을 수행합니다. 작업이 끝나면 Transaction 을 끝냅니다.

들어가면서 이 시리즈는 최신 트렌드를 반영하면서, 최대한 현업에 가깝되 간단한 웹 프론트엔드 프로젝트 구성을 목표로 합니다. 이 시리즈는 저 나름의 노하우를 공유하고 피드백을 받고 싶어서 만들었습니다. 어떤 기관이나 업체의 표준을 따르는 것이 아닌 그저 제가 프로젝트를 만들어나가는 과정을 정리했습니다. 하지만 그렇다고 해서 시리즈의 모든 내용들이 처음부터 끝까지 제 머리에서 나온 것은 아닙니다. 특정 부분마다 어느 저자의 어느 글을 참고했는지 그 출처 링크를 표시하도록 하겠습니다. 만들고자 하는 어플리케이션 만들고자 하는 어플리케이션은 간단한 시간관리 앱인 'Micro' 어플리케이션입니다. 제가 친하게 지내는 디자이너분께 사용에 동의를 구했습니다. 이 시리즈에서 이 어플리케이션 전체를 만드는 과정을 다루..