This is a Next.js project bootstrapped with [create-next-app]

진행하며 필기 및 공부한 내용

• 코드 미리보기 명령어: npm run dev

• page.js: 코드 작성하는 메인 페이지

• layout.js: page.js를 감싸는 감싸는 파일 (layout.js 안에 page.js이 들어가서 구성됨)

  • head 태그 안에 있는 것들
  • 페이지간에 공유하고싶은 UI, 상단바
  • 등등을 넣을 때 사용

• globals.css: 모든 페이지에 적용할 스타일

• {페이지이름}.module.css: 특정 페이지에만 적용할 스타일

• api 폴더: 서버기능을 만들 수 있는 공간

• node_modules 폴더: 설치한 라이브러리를 보관하는 공간

• public 폴더: 이미지, 폰트파일 등 소스코드 외의 파일 보관용

• package.json: 프로젝트 구동에 필요한 라이브러리 버전, 터미널에서 쓸 수 있는 명령어 등을 정의하는 파일

• HTML, CSS 작성 시 React 문법을 사용해야 함

  • next.js는 react위에서 사용되는 프레임워크이기 때문
  • 리액트 HTML 문법: JSX라고 함
  • 그러니,HTML, CSS 작성 시 JSX로 작성해야 함
  • JSX(리액트버전 HTML) 특징:
    • return()안에 넣을 때, 태그는 반드시 하나의 태그로 감싸져야 함(평행해서 작성 못함)
    • css 넣을 때 class를 className으로 작성해야 함
      • why? class는 자바스크립트 키워드이기 때문
      • js에서 html을 작성하고 있기 때문에 class를 사용하면 안됨
  • HTML안에 변수넣고 싶으면
    • function Home() { 뒤에 return() 앞에 변수를 선언 하고 return() 안에 변수를 넣으면 됨
    • {변수명} 형태로 작성
    • 데이터바인딩 문법이라 함
  • style 속성 넣으려면
    • style={{ 스타일:값 }} 형태로 작성
    • {{}}의 안쪽 {}는 js object 자료형이기 때문에 -를 사용할 수 없음. 따라서 font-size를 fontSize로 뒤에 오는걸 대문자로(카멜케이스)로 작성해야 함

• /list로 접속하면 상품목록페이지 보여주기

  • 이때 REST API 원칙 참고하면 이쁘게 작명가능
  • url로 페이지를 나누는 행위를 라우팅(routing)이라고 함
    • 일반적 웹프레임워크는 누가 접속하면 서버에 특정 정보를 달라고 요청하는 코드가 있어야 하는데, next.js는 없어도 됨(자동 라우팅)
    • 폴더, 파일 하나 만들면 라우팅 끝
  • 방법:
    • url이름 폴더 만들고, page.js 파일 만들면 됨
    • list 폴더 만들면 https://localhost:3000/list 로 접속 가능
  • 만들어진 페이지 내용:
    • 컴포넌트(component)를 만든다고 하는데, function 작명 () {}로 함. 이때 작명 부분에 폴더명(url) 따라가는 경우가 많음
    • 이후에 return() 작성
    • export default도 붙여야하는데, 컴포넌트를 만들어서 export default를 만들어야 자동으로 html페이지가 된다고 함
  • 상단바처럼 여러페이지들이 공통적으로 써야되는 부분은 layout.js에 작성
    • link 태그 작성 시 import Link from "next/link"; 까먹지 않기 (<Link>쓰다가 알아서 import 코드 작성해주는 기능 뜸)
    • layout.js에 코드짜면 모든 페이지에 보여지는 이유
      • layout.js 안에 page.js를 담아서 보여줌
      • {children}이 page.js의 내용을 가져오는 부분
      • 개별 폴더의 경우:
        • 폴더 안에 layout.js가 있으면 그 안에 page.js를 담아주는 것은 동일.
        • 그러나 상위 폴더에 layout.js가 있으면 이미 담긴 내용(폴더 내 layout.js+page.js)을 담아서 보여줌
        • 상위 layout.js + 하위 layout.js + 하위 page.js 이런 형식
        • 
        • (유치원버전) page.js 보여줄 때는 옆에, 상위에 있는 모든 layout.js 합쳐서 보여줌
    • 결론: 페이지변경과 상관없이 계속 보여줄 UI는 layout.js쓰자
  • 상품명을 array에 넣고 보여줄 때, 상품이 100개가 넘는다면?
    • 각각을 타이핑하면 너무 힘듦 -> 반복문 사용
    • JSX는 for문을 쓸 수 없기 때문에 map() 함수를 사용해 html 반복생성 가능
    • 배열.map((a, i)=>{}) 형태로 작성
      • 사용예시:

        let 상품 = ['Tomatoes', 'Pasta', 'Coconut'];
        상품.map((a, i)=>{
            console.log(a, i)
        })
        // Tomatoes 0
        // Pasta 1
        // Coconut 2
        // a는 배열의 요소, i는 배열의 인덱스
        
        <!-- 여기서 return 을적으면, return에 적은걸 array로 담아줌 -->
        
        let result = 상품.map((a, i)=>{
            return 10
        })
        console.log(result)   
        // result = [10, 10, 10]
        // 각 a에 10을 담은 것을 볼 수 있음
        // = html 반복생성 가능해짐
        // return을 안쓰면 처리하고 그냥 지나가기 때문에(반환 x) 아무런 표시 없음

      • return을 쓰자.