[next.js 제로초] 섹션 0. 인트로

제로초님 강의 정리
https://www.inflearn.com/course/next-react-query-sns

리액트 압축 요약 강좌

React

• 현재 점유율 1위 라이브러리
• 경쟁자 : vue, angular, svelte 등
• 역사 : jQuery -> Angular -> React -> Vue -> Svelte

왜 나왔나

• 페이지 전환없이 앱같은 느낌을 원함
  ->한 페이지에서 다하는 SPA(Single Page Application) 방식의 유행
• 프론트의 비중이 점점 높아짐(데이터를 많이 다룸)
  -> MVC등의 개발 방식은 대규모 개발에 적합치 않음 -> 대안 필요

Angular의 등장

• Gmail(AJAX) -> SPA
• SPA으로 MVC 구현
• 앱같은 느낌은 성공함
• MVC라서 동일한 문제 -> 프론트에서 불편
• 2 way binding

현재 모델 (FLUX 패턴)

• Action -> Dispatcher -> Store -> View -> Action …
• 1 way binding (데이터 변경 시 추적이 쉬워짐)
• 대규모 웹사이트에서 추적이 쉬움

과거의 코드

• HTML은 구조, CSS는 디자인, JS는 동작
• 한페이지에 혼재

HTML을 전부 JS로 구현

• 가독성이 나쁨
• 변수 겸침등의 문제

React 컴포넌트로 전환

• 각자 JS와 CSS를 책임지자
• JSX 문법
• JS 실력이 매우 중요
• 컴포넌트를 만들어 조림함

JSX

• 확장자는 jsx (타입스크립트는 tsx)
• 브라우저가 알아듣지 못함
  -> 바벨, 웹팩, vite, swc 등으로 JS로 변환

React 대원칙

• 화면에서 바뀌는 데이터를 상태로 만들자
• 반복 사용되는 것을 컴포넌트로 만들자
• 비슷한데 다른 부분을 props로 만들자
• 화면은 미리 다 만들어두고 보였다 안보였다 한다(조건문을 통해)

부모 자식 데이터 바꾸기

• 부모가 자식의 데이터를 바꾸고 싶으면
  -> 데이터를 처음부터 부모의 ste로 만들어서 자식에게 props로 내려준다
• 자식이 부모의 데이터를 바꾸고 싶으면?
  -> 부모의 데이터를 props로 받아온 뒤, 부모의 데이터를 바꾸는 set 함수도 같이 받아온다.

함수 컴포넌트 vs 클래스 컴포넌트

• 함수이지 함수형이 아님. (순수함수가 아님)
• 클래스는 이제 거의 안 씀
• 다만, 함수 컴포넌트가 되면서 라이프사이클 관리가 복잡해짐

라이프 사이클

• useEffect 하나로 해결
  -> 마운트 시, 리렌더링 시, 언마운트 시

리렌더링 3가지

• state가 바뀔때
• props가 바뀔 때
• 부모 컴포넌트가 리렌더링 될 때

에러 잘 질문하는 법 & 삽질 덜하는 법

온라인에서 질문하는 법

• 질문을 바로 올리기

• 질문 제목을 구체적으로 달기

• 어떤 작업을 하는 코드인지 명확하게

• 에러메시지를 올리기

• 코드를 올리기

• 들여쓰기, 줄넘김 등 포맷팅이 잘된 코드를 올림

• 이미 시도한 것을 설명

• OS나 버전을 설명

• 코드를 짜달라고하지 않기

• 에러 메시지를 올리기전에 스스로 번역해보기

• 에러 메시지를 잘라서 올리지 않아야함(텍스트로 올리기)

• 가장 의심스럽다 생각하는 코드를 올리기(깃헙 주소 던지지 말기)

에러/삽질 해결법

• 에러메시지 확인/번역 필수
  -> 에러메시지 자르지말고 위에서부터 천천히 볼 것
  -> abs.js:80:12 이렇게 80번째줄, 12번째칸이라고 에러 위치가 있음
• 에러메시지가 내 코드 에러인지, 라이브러리 에러인지 분류
  -> 내 코드 에러라면 구글/스택오버플로우/챗GET 검색 (내 상황에 맞는지 확인)
  -> 라이브러리 에러면 github 검색 (과거 버전으로 되돌려보기, 버그일 경우 PR 보내기, patch-package 이용)
• 에러가 언제부터 또는 어디서 발생했는지 모르는 경우
  -> 과거 내가 했던 것을 되돌려봄. (틈틈이 commit 해두기 / 새로 브랜치 파고 reset 해보기)
  -> 정상적으로 되던 떄 -> 에러나는 순간을 포착