프로그래밍언어/React

모던 리액트 deep dive 스터디 - 12장 발표 정리

모던 리액트 deep dive 스터디 - 12장 발표 정리      주제: 12장. 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표 (775p ~ 812p) 핵심 웹 지표 - 최대 콘텐츠풀 페인트(LCP)- 최초 입력 지연(FID)- 누적 레이아웃 이동(CLS) - 최초 바이트까지의 시간(TTFB)- 최초 콘텐츠풀 시간(FCP)   1. 최대 콘텐츠풀 페인트(LCP) 페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지 또는 텍스트를 렌더링하는 데 걸리는 시간  큰 이미지와 텍스트 (가장 큰 요소로 고려됨) 내부의 poster 속성을 사용하는 url()을 통해 불러온 배경 이미지가 있는 요소텍스트와 같이 인라인 텍스트 요소를 포함하고 있는 블록 레벨 요소 (, ...) 크기가 크더라..

모던 리액트 deep dive 스터디 - 4장 발표 정리

모던 리액트 deep dive 스터디 - 4강 발표 정리     주제: 4장 서버 사이드 렌더링 (252p ~ 335p)   싱글 페이지 애플리케이션(SPA) 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식 최초에 서버에서 최소한의 데이터를 불러온 이후부터는 이미 가지고 있는 자바스크립트 리소스와 브라우저 API를 기반으로 모든 작동이 이뤄진다. # LAMP Linux, Apache, MySQL, PHP/Python # JAM JavaScript, API, Markup  JAM 스택을 사용하여 프런트엔드는 자바스크립트와 마크업을 미리 빌드해 두고 정적으로 사용자에게 제공하여 서버 확정성 문제에서 자유로워질 수 있게 됨.  시대가 지나면서 인터넷 속도, 하드웨어..

모던 리액트 deep dive 스터디 - 8주차 발표 정리

모던 리액트 deep dive 스터디 - 8주차 발표 정리     주제: 15장. 마치며   리액트 프로젝트를 시작할 때 고려해야 할 사항  1. 유지보수 중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.0.2로 올려두자. 리액트 17 버전은 새로운 기능 출시 및 호환성이 깨지는 변경 사항을 최소한으로 맞춘 업데이트라 가능하면 업데이트 해두는 것이 좋다. 그렇다고, 클래스형으로 작성한 컴포넌트를 함수형으로까지 바꿀 필요는 없음. 클래스형 컴포넌트는 사라질 계획이 없기 때문에 둘 다 능숙하게 다룰줄 알아야한다.   2. 인터넷 익스플로러 11지원을 목표로 했다면 각별히 더 주의를 기하기. 인터넷 익스플로러에 대해 지원을 공식적으로 하지 않기때문에 버전 업데이트시 주의하기  3. 서버 사이드 ..

모던 리액트 deep dive 스터디 - 7주차 발표 정리

모던 리액트 deep dive 스터디 - 7주차 발표 정리 주제: 13장. 웹페이지의 성능을 측정하는 다양한 방법 📌 create-react-app crate-react-app을 통해 프로젝트를 생성하면, reportWebVitals라는 함수를 볼 수 있을 것이다. - 누적 레이아웃 이동 (CLS) - 최초 입력 지연 (FID) - 최초 콘텐츠풀 페인트(FCP) - 최대 콘텐츠 페인팅 (LCP) - 첫 바이트까지의 시간 (TTFB) 이 함수는 위의 것들을 측정하는 용도로 사용된다. 이러한 지표는 web-vitals 라이브러리를 통해 웹페이지 성능을 측정하는데, 이는 PerformanceObserver라는 API를 사용하기 때문이다. ❓PerformanceObserver 브라우저에서 웹페이지의 성능을 측정..

모던 리액트 deep dive 스터디 - 6주차 발표 정리

모던 리액트 deep dive 스터디 - 6주차 발표 정리 주제: 11장. Next.js 13과 리액트 18 Next.js 13 📋 app 디렉터리의 등장 Next 13 버전 이전까지 모든 페이지는 각각의 물리적으로 구별된 파일로 독립되어 있었습니다. 만약 페이지 공통으로 무언가를 넣어야 한다면, 그곳은 _document와 _app이 유일했죠. 이마저도 _document와 _app은 목적이 서로 달랐습니다. _document는 , 태그를 수정하거나 서버 사이드 렌더링 시 CSS-in-JS를 지원하기 위한 코드를 삽입하는 제한적 용도, _app은 글로벌하게 React, Next 엘리먼트를 컨트롤 하는 용도로 사용되어야 했습니다. 무언가 페이지 공통 레이아웃을 유지할려면 그 방법은 _app에서만 했어야 했죠..

모던 리액트 deep dive 스터디 - 5주차 발표 정리

모던 리액트 deep dive 스터디 - 5주차 발표 정리 (9장) *본 글은 발표 대본용이라 상세 정보는 들어가 있지 않습니다. 9장 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 우리에게 편리함을 가져다주는 create-react-app과 create-next-app 편리한게 좋긴하지만 어떻게 프로젝트 구조가 잡히는지, 어떤 설정들이 필요한지에 대해서 깊게 생각하지 않고 만들게 된다. 이 편리한 CLI 도구를 사용해보지 않고 프로젝트 환경설정을 해보자. Next 프로젝트를 위해 설치할 것들 react react-dom next typescript @types/react @types/react-dom @types/node eslint eslint-config-next tsconfig.json {..

모던 리액트 deep dive 스터디 - 4주차 발표 정리

모던 리액트 deep dive 스터디 - 4주차 발표 정리 (8장) *본 글은 발표 대본용이라 상세 정보는 들어가 있지 않습니다. 8장 - 좋은 리액트 코드 작성을 위한 환경 구축하기 - EsLint - 리액트 테스트 라이브러리 ESLint - 정적 코드 분석 도구 ❓정적 코드 분석 도구란 코드의 실행과는 별개로 그 자체만으로 코드 스멜을 찾아내어 문제의 소지가 있는 코드를 사전에 수정한다. ESLint를 자주 사용하지만, 어떤 방식으로 코드를 분석하는 것에 대해서는 잘 알지 못한다. ESLint는 어떻게 코드를 분석할까? 자바스크립트 코드를 문자열로 읽는다. 자바스크립트 코드를 분석할 수 있는 파서로 코드를 구조화한다. => espree 사용 2번에서 구조화한 트리를 AST(추상구문트리)라 하며, 이 ..

모던 리액트 deep dive 스터디 - 3주차 발표 정리

모던 리액트 deep dive 스터디 - 3주차 발표 정리 (7장)  * 본 글은 발표 대본용이라 상세한 정보는 들어가있지 않습니다.   크롬 개발자 도구 - 크롬에서 제공하는 개발자용 도구, 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있다.- 제대로 디버깅 하고 싶다면, 시크릿 모드에서 페이지와 개발자 도구를 여는 것을 권장. (브라우저의 각종 확장 프로그램 때문. ex. 웹 애플리케이션이 제공하지 않은 전역객체 같은 다른 정보가 추가될 수 있음)   요소탭개발자 도구를 켰을때 가장 먼저 노출되는 탭  요소 화면 현재 웹 페이지를 구성하는 HTML을 나타냄. 보는 것 뿐만 아니라 수정도 가능하여 코드를 수정하게되면 화면에서 어떻게 보일지를 빠르게 확인할 수 있다. 또한, 코드의 중단 위치를 선택할..