프로그래밍언어

모던 리액트 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 {..

사내스터디 - GraphQL 스터디 1주차

사내스터디 - GraphQL 스터디 1주차 📋 범위 1장 *본 글은 발표 대본용이라 상세 정보는 들어가 있지 않습니다. GraphQL이란? - API를 만들 때 사용할 수 있는 쿼리 언어 - 쿼리에 대한 데이터를 받을 수 있는 런타임 보통 쿼리 언어라 하면 SQL이 먼저 떠오른다. SQL과 동일한 쿼리 언어지만, 차이가 있다. SQL은 데이터베이스 시스템에 저장된 데이터를 효율적으로 가져오는 것이 목적이라면 GraphQL은 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것이 목적이다. GraphQL에 대한 특징을 살펴보자. - 요청 값에 맞게 데이터들이 response되어 원하는 데이터 형태만을 받아올 수 있다. - HTTP 요청 하나가지고 입맛에 맞게 원하는 타입대로 요청을 진행할 수 있다. ..

모던 리액트 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를 써봤다면, 쉽게 배우고 쓸 ..