넥스트 제이에스
-
[Next.js/코딩애플] 프로그램 만드는 법 (feat. 코딩애플)IT Study/FE 2023. 7. 10. 10:26
프로그램 만드는 방법 오늘은 복잡해 보이는 코드 작성 과정을 단순하게 바꾸는 방법에 대해 이야기하려고 합니다. 저는 이번에 Next.js를 공부하며 터득한 중요한 교훈이 있었는데, "그것은 바로 기능을 먼저 정의하고 코드를 작성하라"입니다. 처음에는 코드를 작성하는 과정이 어려울 수 있지만, 아래의 예시를 통해 기능 정의를 연습해 보세요 :) 처음 보는 기능 만들기 1. 기능의 동작 방법에 대해 한글로 상세히 정의하고 2. 코드로 번역하기 글 목록 페이지와 기능 만들기 (글 목록 조회 기능) 1. HTML 페이지 작성하고 2. 페이지 방문 시, DB에 저장된 글을 꺼내와서 3. 글을 HTML에 넣어 보여주기 상세 페이지 기능 만들기 1. 글 제목 클릭 시, 상세 페이지 이동 2. 상세페이지 방문 시, D..
-
[Next.js/코딩애플] Next.js의 시작IT Study/FE 2023. 6. 27. 14:17
Next.js의 독학을 시작하며, 주요한 내용을 기록하기 위해 블로그에 기록을 작성해보려고 합니다. 1. Next.js의 파일 구조 파일(폴더)명 내용 layout.js page.js를 감싸는 파일 페이지 간 공유하는 UI (상단 메뉴바 등) 내용 작성 layout.js의 {children}: page.js 들어가는 부분 page.js 메인 페이지 파일 page.module.css (____.module.css) 유일하게 한 페이지에 적용할 수 있는 css 파일 public 이미지, 폰트 파일 저장 폴더 2. JSX 사용 방법: React 버전 HTML (1) return() 내 HTML 작성 시 평행하여 태그 작성 불가: only 1개 태그로 시작/종료 필수 (2) className 사용 (class ..