찐빵이의 개발일기

Class Component state에 가지고 있는 상테와 데이터를 담을 수 있다. 라이프사이클 메소드를 사용할 수 있다. function Component state가 없다. 라이프사이클 메소드가 없다. 리액트 16.8 버전부터는 리액트 훅을 사용해서 state, life cycle을 사용할 수 있다. 함수에 리엑트 훅이 생긴 이유 클래스에서 멤버변수에 접근할 때는 앞에 this를 붙여야 한다. 이런 this의 중복이 불편하고, 바인딩 이슈가 있어서 불편하다. memo Higher Order Component

Chrome React Developer Tools 리액트 애플리케이션의 컴포넌트 구조를 확인할 수 있는 툴이다. 디버깅 시에도 유용하게 사용된다. React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 46a98cff2 on 3/30/2022. chrome.google.com reactjs snippet 컴포넌트를 rcc 명령어로 자동 생성할 수 있다. auto import 다른 리액트 컴포넌트를 자동으로 import 해준다.

Babel ECMA 2015년 이후 버전의 코드를 예전 버전으로 변환해주는 툴. 타입 스크립트, jsx 등의 코드를 브라우저가 이해할 수 있도록 순수 자바스크립트로 변환해준다. 예전 버전을 사용하는 브라우저는 최신 코드를 이해하지 못할 수 있어서 이런 변환이 필요하다. webpack 작성한 소스코드와 리소스 이미지를 묶어서 번들 단위로 사용자에게 제공한다. (번들링) 코드 길이를 줄여주고 minify, uglify를 담당하고 있다. ESLint 코드에 잘못된 점이 있으면 경고 사인을 보내주는 툴 Jest 유닛 테스트를 할 수 있게 도와주는 테스팅 프레임워크 PostCSS CSS 전처리기 중 하나. less, sass와 비슷하다. sass는 정해진 것들만 할 수 있는 반면에, PostCSS는 다양한 플러그..

yarn create react-app [project-name] 을 사용해서 리액트 프로젝트를 만들었다. 프로젝트 내부로 들어가면 이미 git init이 되어있는 걸 볼 수 있다. 즉, git이 숨겨져 있다! 어디에 있을까? yarn eject 명령어로 숨겨져있는 툴을 밖으로 꺼내서 확인할 수 있다. 주의해야 할 점은, eject를 하면 다시 되돌릴 수 없기 때문에 신중해야 한다. eject를 사용한 뒤, package.json 파일을 확인하면 많은 툴이 추가된 걸 확인할 수 있다. 결론 create react-app을 사용하면 많이 사용되는 툴들이 자동으로 설치된다. 회사에서는 create react-app을 사용하지 않고 수동적으로 프로젝트를 관리한다.

React 프로젝트 생성하는 방법 yarn create react-app my-app이후 yarn start로 실행할 수 있다. 공식문서 프로젝트 구조 .gitignore 형상관리를 하지 않을 리스트를 담고 있다. package.json 외부 라이브러리 정보나 스크립트에 대한 내용을 가지고 있다. manifest.json PWA를 만들 때 필요한 파일 robots.txt 크롤링을 할 때 필요한 파일 index.js 컴포넌트들을 화면에 나올 수 있게 해준다. public 폴더 html, 이미지 등 정적인 컨텐츠가 포함된 폴더 src 폴더 동적으로 변화하는 소스가 들어있는 폴더 웹팩 빌드 시 웹팩에서는 자바스크립트의 고유 버전이 할당된다. 변경되면 고유 버전이 업데이트 된다. 만약 자바스크립트가 변경되지 않..

Node JS 자바스크립트를 실행할 수 있는 환경. 자바스크립트는 원래 웹페이지를 위해 작성하는 언어였는데, NodeJS 덕분에 웹 브라우저 밖에서도 실행할 수 있게 되었다. 즉, 어떤 OS든, NodeJS 환경이 있다면 자바스크립트 코드를 작성하고 실행할 수 있고, OS 위에 있는 파일을 읽고, 수정하고 저장할 수 있다. 이런 NodeJS 덕분에 자바스크립트는 백엔드 서버를 만들 때도, 서버사이드 렌더링을 할 때도, 커맨드 라인 툴이나 스크립트를 만들 때도 사용된다. npm 이란? npm은 패키지 매니저이다. 외부 라이브러리가 필요하면, 아래와 같은 순서로 진행해야 한다. 라이브러리 소스코드를 다운로드한다. 소스코드를 프로젝트 안에 넣는다. 필요한 것을 임포트 해서 쓴다. 이 과정에서 매번 라이브러리 ..

서비스 워커는 웹 페이지와 별개의 생명주기를 가지고 있다. 서비스 워커의 생명주기 웹페이지에서 서비스 워커 스크립트를 호출한다. Installing : 브라우저 백그라운드에서 서비스 워커를 설치한다. 설치 과정에서 정적 자원을 캐싱한다. Activated : 설치 후 활성화한다. Error : 설치 과정에서 에러가 나면 그대로 종료된다. Idle : 사용하지 않을 때는 휴먼 상태에 있다가 필요시에만 해당 기능을 수행한다. Terminated : 메모리 상태에 따라 자체적으로 종료한다.

서비스 워커(Service Worker) 란? 브라우저와 서버 사이의 미들웨어 역할을 하는 스크립트 파일 오프라인 경험을 가능하게 한다. 동작 방식은 Shared Worker 자바스크립트 UI와 별개의 스레드로 동작한다. 서비스 워커 등장 배경 AppCache의 문제점(오동작, 파일 변화)을 보완하기 위해서 등장 서비스 워커의 특징 브라우저의 백그라운드에서 실행된다. 웹 페이지와 별개의 라이프 사이클을 가진다. 네트워크 요청을 가로챌 수 있다. 자원에 대한 캐쉬 또는 서버에 자원을 요청 가능하다. 프로그래밍 가능한 프록시 프록시 : 중계서버 브라우저 종속적인 생명주기로 백그라운드 동기화 기능을 제공한다. 브라우저가 끝나야 워커가 종료된다. 웹과 모바일 푸시 알림이 가능하다. navigator.servic..

PWA란? 모바일 앱과 같은 경험을 주는 최신 웹 앱이다. 앱과 같이 아이콘, 설치 배너, 푸시, 오프라인 경험을 제공한다. HTML, CSS, JS로 구현할 수 있다. PWA 적용 애플리케이션 인스타그램, 우버, 트위터, 스타벅스 등 전 세계적으로 사용하고 있다. PWA 등장배경 우리는 일상 속에서 모바일을 많이 사용한다. 하이브리드 앱으로 모바일 앱 영역을 커버하기에는 한계점이 있었다. only 웹 기술로 모바일을 점유하기 위해서 등장했다. PWA 특징 Responsive 반응형 웹 디자인. PC, 태블릿, 폰에서도 편리하게 사용 가능하다. App like & Discoverable 웹이지만 유저는 앱처럼 느낄 수 있다. Engageable 푸시 알림이 가능하다. Connectivity 온라인, 오프..

1. Nullish Coalescing​ function print(something){ const message = something ?? 'there is no message'; console.log(message); } something이 null/undefined 인 경우 "there is no message"가 message에 들어간다. default parameter를 사용하면 undefined 인 경우에만 적용되고, null인 경우에는 적용되지 않는다. 2. Object Destructuring function printStudent(student){ const { name, age } = student; console.log(name); console.log(age); } 객체의 반복을 줄..