찐빵이의 개발일기

yarn으로 설치 yarn add @fortawesome/fontawesome-free index.js import '@fortawesome/fontawesome-free/js/all.js'; ... 사용시 원하는 아이콘의 html 태그를 복사해서 붙여넣으면 된다. FontAwesome

html은 마크업 언어이고 jsx는 자바스크립트 코드이다. jsx로 작성한 코드를 Babel이 html과 javascript로 변환하게 된다. jsx는 장점은 UI를 만드는 코드에 비즈니스 로직을 작성할 수 있다는 장점이 있다. {}(중괄호)로 감싸서 코드를 넣으면 된다. return 부분에 ui가 들어가는데 꼭 하나의 노드로 만들어서 리턴해줘야 한다. 스타일링을 해줘야 할 때는 div 태그를, 그게 아니라면 비어있는 를 사용하면 된다.

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..