코딩애플 next.js강의 정리

고구마·2024년 3월 4일

next.js

next.js 프로젝트 생성 명령어

npx create-next-app@latest

next.js 프로젝트 시작 명령어

npm run dev

프로젝트 파일들 설명

app 폴더 : 님들이 코드짤 폴더

page.js : 메인페이지

layout.js : 메인페이지 감싸는 용도의 페이지 <상단바, head태그>

public 폴더 : 이미지나 static 파일 보관용

api 폴더 : 서버기능 만드는 곳

next.config.js : nextjs 설정 파일

node_modules 폴더 : 설치한 라이브러리 보관용 폴더

package.json : 설치한 라이브러리 버전 기록용 파일

페이지 레이아웃 만들기 (JSX 문법)

1.return( ) 안에 HTML 넣을 때 언제나 하나의 html 태그로 시작해서 하나의 html 태그로 끝나야합니다.

ex)

<div> 2개 나란히 넣고 싶으면 하나의 <div>로 더 감싸야 합니다. 
<div>를 더 넣기 싫으면 <></> 이런 무의미한 태그로 감싸도 됩니다.

2.class 말고 className

3.html 안에 변수 넣을 땐 { }

4.style 넣고 싶으면 object 자료형으로

<h4 className="title" style={{ color : 'red', fontSize : '20px' }}>애플후레시</h4>

여러 페이지 만들기 (라우팅)

1.app 폴더안에 폴더하나 작명하고
2.폴더 page.js 파일 만들고 안에 html 작성하면
자동으로 url과 페이지가 완성됩니다.
3.import Link from "next/link"; - link 태그로 연결

중복되는 html은 layout.js 파일에 넣어준다

Next.js에서 이미지 넣는 법 2개

성능과 속도가 중요하다면 이미지 넣을 때 태그를 씁시다.
그럼 자동으로 이미지 lazy loading & 사이즈 최적화 & layout shift 방지를 해줍니다.

참고로 다른 사이트에 올려둔 이미지를 Image 절대경로로 집어넣고 싶으면width, height 옵션을 집어넣어야합니다.
혹은 fill="true" 이거 대신 넣고 부모 div가 width, height를 대신 조절해도 됩니다.

client/server component, import 문법

server component vs client component

그냥 만든 component -> server component
파일 상단에 'use client'을 넣으면 -> client component

server component(큰페이지) : 자바스크립트 불가능, 리액트 문법 불가능, 로딩속도 빠름, 검색엔진이 좋음

client component(js가 필요한 페이지) : 자바스크립트 가능, 리액트 문법 가능, 상대적으로 로딩속도가 느림, hudration 필요

Component에 데이터 전해주려면 props

1.자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={전해줄데이터} />
2.자식컴포넌트 만드는 곳에 가서 props라는 파라미터 등록 후 props.작명 사용하면 됩니다.

props 전송문법은 중요하니 외워두도록 합시다.

(참고1) props는 <CartItem 이런거={이런거} 저런거={저런거}> 이렇게 많이 전송가능
(참고2) 일반 문자데이터 전송하려면 중괄호 없이 <CartItem 어쩌구="어쩌구"> 해도 됩니다.

수량변경 버튼 만들기 (useState, onClick)

array/object 일때

export default function List() {
  let 상품 = ['Tomatoes', 'Pasta', 'Coconut'];
  let [수량, 수량변경] = useState([0,0,0]);
  return (
    <div>
      <h4 className="title">상품목록</h4>
      
      <span>{수량[0]}</span>
      <button onClick={()=>{ 
        let copy = [...수량]
        copy[0]++
        수량변경(copy)
       }}>+</button>
      (생략)
    </div>
  )
}