20231226 TIL

Today 요약

[✅] 코딩테스트 1문제

[✅] react 기초 개념 강의 (2개)

---

배운 점

1. react

1-1 React Hook ?

• react hook을 사용하면 함수형 컴포넌트에서도 상태 및 생명주기와 관련된 작업을 수행할 수 있어
• 코드를 더 간결하고 이해하기 쉽게 만들어준다

React Hook에 대해 알아보자

1-2 Next.js? 

• react를 빌드하기 위한 React 프레임 워크이다. 
• 특징

1. 서버 사이드 렌더링(SSR) 및 정적사이트 생성 (Static Site Generation, SSG)

- SSR은 페이지를 서버에서 렌더링하여 초기 로딩 속도를 개선하고, SSG는 빌드 시점에 페이지를 생성하여 성능을 최적화한다 

2. 라우팅 시스템

- 파일 시스템 기반의 라우팅 시스템을 제공, pages 디렉터리 안에 생성한 파일들이 자동으로 라우팅으로 매핑되기 때문에 추가적인 설정 없이도 빠르게 페이지를 만들 수 있다 

3. 데이터 페칭 

- 'getStaticProps' 및 'getServerSideProps'를 사용하여 데이터를 가져올 수 있다. 이것은 정적 페이지와 서버 사이드 렌더링 페이지에서 사용할 수 있어 데이터 미리 가져오기에 유용

4. API 라우팅 

- 디렉터리에 파일을 생성하여 서버리스 함수로 API를 만들수 있다 이러한 파일은 자동으로 /api 경로로 매핑된다

5. 자동 코드 분할

- 페이지 별로 자동으로 코드를 분할하여 필요한 코드만 로드되도록 한다. 이는 초기 로딩 성능을 향상시키고 사용자 경험을 최적화 하는데 도움이 된다.