프로그래밍언어/React

모던 리액트 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장) * 본 글은 발표 대본용이라 상세한 정보는 들어가있지 않습니다. 크롬 개발자 도구 - 제대로 디버깅 하고 싶다면, 시크릿 모드나 프라이빗 모드에서 페이지와 개발자 도구를 여는 것을 권장. (브라우저의 각종 확장 프로그램 때문) 요소 화면 현재 웹 페이지를 구성하는 HTML을 나타냄. 보는 것 뿐만 아니라 수정도 가능하여 코드를 수정하게되면 화면에서 어떻게 보일지를 빠르게 확인할 수 있다. 또한, 코드의 중단 위치를 선택할 수 있어서 디버깅도 가능하다. 요소 정보 요소 탭 오른쪽에서 확인할 수 있는 정보 스타일: 요소와 관련된 스타일 정보 계산됨: 해당 요소의 크기, 패딩, 보더, 마진과 각종 CSS 적용 결괏값을 알 수 있는 탭 레이아웃..

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

모던 리액트 deep dive 스터디 - 1주차 발표 정리 리액트를 선호하는 이유는 뭘까? - 명시적인 상태 변경 리액트의 상태 변화는 '단방향' => 명시적이다. 양방향 데이터 흐름이 나쁜게 아니다. 다만, 단방향의 데이터 흐름은 변화가 단순하기 때문에 코드를 읽기가 쉽고 버그를 야기할 가능성이 비교적 적다는 장점이 있다. - JSX (JavaScript XML) Html에 JavaScript 문법을 더하다. 고유의 몇가지 특징만 이해하면 손쉽게 구현할 수 있다. ex) null은 아무것도 렌더링하지 않는다, JS 문법은 {}로 감싸야한다. 참고로, JSX는 리액트에 종속적이지 않은 독자적인 문법이다. - 비교적 배우기 쉽고 간결하다. 기존에 Html, JavaScript를 써봤다면, 쉽게 배우고 쓸 ..

React 잘못된 경로 페이지 만들기 (Router)

React 잘못된 경로 페이지 만들기 (Router) 프로젝트를 구현하면서 사용자가 잘못된 경로를 입력했을때 이런 페이지가 뜬다. 이대로 냅둬도 상관없긴하지만, 만약 이렇게 사용자가 주소를 잘못입력했을때 내가 원하는 화면을 보여주게 하고 싶다면 어떻게 해야할까? 바로 Router를 사용하면 된다. 이렇게 Router 경로를 * 로 설정하게 되면, localhost에서 지정한 경로들 외의 모든 경로들은 지정한 페이지로 이동하게 된다. 여기서 element에 있는 NotFound는 내가 따로 만든 NotFound.js 페이지이다. 사용자가 경로를 잘못입력하면 이 NotFound.js 페이지로 이동시켜라 라는 뜻이된다. NotFound.js 는 다음과 같이 만들었다. 참고해보시길. 사용자에게 보여지는 페이지는..