애플 코딩 다음 js 강의 들으면서 녹음
다음 js 설치
- node.js LTS 설치 버전 18 이상
npx create-next-app@latest --experimental-app
프로젝트 이름 설정 후 TypeScript/ESLint/Tailwind/src 디렉토리 사용 여부를 확인합니다. (나는 모두 아니오)
다음 13.2.4로 진행
npm 실행 개발 함께 실행
타란
폴더 구조 보기
globals.css
: 모든 페이지에 적용할 css 파일
페이지.모듈.css
: 특정 페이지에만 css 파일
layout.js
: 자주 사용하는 파일(head, nav 등)
페이지.js
: 메인 페이지에 표시되는 파일
공용 폴더
: 이미지, 폰트 등이 있는 폴더입니다.
페이지 라우팅
자, 메인 페이지가 아닌 다른 페이지는 어떻게 만드나요?
라우팅URL로 페이지를 나눈다고 합니다.
다음 js는 루트 폴더(이 경우 앱의 페이지 또는 src/page)에 있습니다. 하위 폴더 추가자동으로 생성됩니다.
React는 별도의 패키지를 설치해야 합니다.
재사용 빈도가 높은 html을 주로 컴포넌트로 만드는 것이 좋다(재사용성 증가)
지도()
반복하다구성 요소를 효율적으로 표시하는 맵 기능
2개의 next.js 구성요소 유형
- 그들은 서버를 구성합니다
- 클라이언트 구성 요소
서버 구성 요소
- html에 자바스크립트 함수 삽입 불가(useState, useEffect 등 사용불가)
- js 기능이 없어서 로딩 속도가 빠름
- 검색엔진 노출 유리
클라이언트 구성 요소
- 느린 로딩 속도
- 하이드레이션 필요 (사용자에게 html을 보낸 후 다시 js로 html을 읽고 분석)
대형 페이지 서버 구성 요소 기능이 필요한 경우에만 클라이언트 구성 요소를 사용하는 것이 좋습니다.
useState
구성 요소가 가질 수 있는 상태를 나타냅니다.
const (상태값, 갱신상태값) = useState(초기값);
어려움
어색한 jsx 구문, React에 대한 이해 부족!
계속
나는 React의 구성 요소 개념과 JSX 구문에 흥미를 느꼈고 더 많은 것을 배워야 한다는 것을 깨달았습니다.
꾸준한 학습과 학습에 대한 집념으로 높은 수준의 발달능력을 갖췄습니다..!