TIL

폴더 구조 및 파일 설명

• .next
  • layout.js
    • page.js를 감싸고 있는 파일 (헤더같은 부분 집어넣으면 유용하게 쓰일 수 있다)
  • page.js
    • 실질적으로 랜더링 되는 파일
  • globals.css
    • 모든 페이지에 적용할 스타일
  • page.module.css
    • 특정 페이지에만 적용하는 모듈 css
• app
  • api
    • 서버 기능 만드는곳
• node_modules
• public

라우팅

1. app폴더안에 원하는 페이지 이름의 폴더를 하나 만든다(페이지 만들기 성공)
2. 페이지 이름으로 된 폴더 안에 page.js라는 파일을 하나 만든다

link

<Link href="/list">List</Link>

공통 컴포넌트

layout.jsx는 하위에 있는 page.jsx를 감싼다 즉 공통 컴포넌트는 layout.js에 넣어서 사용하면 매우 편하다

map

let array = [1, 2, 3]
array.map((item, i) => {})

map은 item 과 i를 매개변수로 받을 수 있는데 i는 각각의 인덱스를 나타낸다

코딩하다가 각각의 인덱스가 필요하다면 i를 두번째 인수로 사용하면 된다.

키 값 넣어주는 것도 잊지 말자!!

img 넣기

이미지를 임포트 하여 추가하면 최적화된 이미지를 보여준다

• lazy loading
• 사이즈 최적화
• layout shift 방지

보통 이미지 최적화는 페이지를 다 만들고 나서 한다

문자열 안에 변수를 넣고 싶을때는 백틱을 사용하는걸 기억하자

이미지를 차례로 랜더링 하고 싶을때는 이미지이름을 ‘food0, food1, food2’

이런식으로 지어서

<img src={`/food${i}.png`} className="food-img" />

이렇게 코드를 짜면 이미지를 차례대로 보여주기 쉽다

---

에러사항

Q2. "npx command not found 어쩌구" 에러

• 터미널 다시 껐다 켭시다.
• 대부분 nodejs 설치가 제대로 안되어서 그렇습니다. 18버전 이상으로 재설치 해봅시다.
• 윈도우는 작업폴더를 VScode 에디터로 오픈한 뒤에 상단 Terminal 메뉴에서 터미널 열어서 npx 어쩌구 입력해봅시다.

(또는 VSCode에서 Terminal 열면 여러 버튼이 있는데 Command prompt 눌러서 입력해봅시다)

Q3. 맥북인데 프로젝트 생성시 "permission이 없어요 어쩌구" 에러

npx 어쩌구 명령어 왼쪽에 sudo라는 단어 포함해서 sudo npx 어쩌구 입력해보면 됩니다.

비번입력하라고 하면 맥북 비번 입력하면 됩니다.