김기지의 코딩노트

🖥️ Global Styles Global Style은 app 디렉토리 내의 모든 레이아웃, 페이지 또는 구성 요소에 모두 적용할 수 있다. 파일의 위치는 중요하지 않다. Global Styles 생성하기 // styles/global.css body { padding-top: 150px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; background-color: black; color: white; font-size: 18px; } Global Styles 사용하기 전역 스타일은 모..

🖥️ Metadata SEO와 웹 공유성을 향상시킬 수 있는 API 메타데이터를 추가하는 방법 구성 기반 메타데이터 : 정적 메타데이터 객체 또는 동적 generateMetadata 함수를 layout 또는 page로 내보냄 파일 기반 메타데이터 : 라우팅 세그먼트에 정적 또는 동적으로 생성된 특수 파일을 추가 이 두가지 옵션을 모두 사용하면 Next.js가 페이지에 대한 관련 요소를 자동으로 생성한다. ImageResponse 생성자를 이용해 동적 OG 이미지를 생성할 수도 있다. 정적 Metadata layout.js나 정적 page 파일에서 메타데이터 객체를 내보낸다. ※ 메타데이터는 서버 컴포넌트 요소이므로 클라이언트 컴포넌트에서는 사용할 수 없다. metadata의 title에 문자열 또는 객체..

🖥️ 데이터 추가하기 create 버튼을 눌러 /create 페이지로 이동해 title과 body를 작성한다. 1. 입력폼 만들기 // create/page.js export default function Create() { return ( ); } 2. 폼 제출하기 onSubmit 이벤트를 사용해 사용자의 입력을 받아 제출하는 동작을 수행해야한다. => 클라이언트 컴포넌트로 구현 "use client"; title과 body에 입력된 값을 담아 POST 요청을 보낸다. 서버는 json-server로 만든 서버를 사용한다. fetch로 POST 요청을 보낼 때는 options를 추가한다. method headers -> 콘텐츠 타입 정의 body -> 전송할 데이터. 통신 시 string 형태의 JSON..

Next.js 배포 전에 Github 레포지토리를 만들어 push를 하는데 에러가 발생했다. 문제 1. 파일의 용량이 너무 큼 remote: error: File node_modules/@next/swc-darwin-arm64/next-swc.darwin-arm64.node is 101.20 MB; this exceeds GitHub's file size limit of 100.00 MB remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com. 분명 .gitignore 파일에서 node-modules를 명시해 두었는데 왜 적용이 안된걸까? 우선 제안한 방..

노마드 Next.js 강의가 업데이트 되어 수강한 내용을 정리해 보았다. 🖥️ Client Component 클라이언트 컴포넌트에서 useState, useEffect, fetch를 사용해 데이터를 화면에 뿌린다. export default function HomePage(){ const [movies, setMovies] = useState([]); const getMovies = async () =>{ const response = await fetch(API_URL); const json = response.json(); setMovies(json); } useEffect(()=>{ getMovies(); },[]) return ( {movies.map((movie) => ( {movie.title..

🧑‍💻 Server Component vs Client Component React 18버전 이후부터 Server Component라는 개념이 추가되어 Server Component와 Client Component라는 개념이 구분되었다. 서버 컴포넌트와 클라이언트 컴포넌트에서 사용하는 api가 다르다. 따라서 클라이언트 컴포넌트에서 사용하는 useState, useEffect와 같은 함수를 서버 컴포넌트에서 사용하는 경우 오류가 발생한다. Server Component 서버에서 동작하는 컴포넌트 Next.js에서는 기본적으로 서버 컴포넌트로 동작한다. 서버 컴포넌트는 서버에서 먼저 해석이 된 이후에 클라이언트로 전달되어 표시된다. 서버 컴포넌트를 사용하면 서버에서 렌더링하고 선택적으로 캐시할 수 있는 U..

🧑‍💻 Next.JS 라우팅 Next.js에서는 URL을 수동으로 작성하지 않고 파일 시스템을 사용해 URL을 표현한다. 라우팅 네트워크 상의 주소로 이동하여 해당 주소에 연결되어 있는 데이터를 사용하는 일련의 과정 react의 경우 react-router-dom 패키지를 설치해 페이지 라우팅을 구현하지만 next에서는 정해둔 방식대로 폴더 구조를 구현하면 page 파일이 라우터 역할을 한다. (-> page 파일이 담긴 폴더의 이름이 경로가 됨) 1. 페이지 뼈대 만들기 상위 layout 파일에 공통으로 보여질 컴포넌트를 생성한다. 각 컴포넌트를 클릭하면 페이지가 이동할 수 있도록 a태그를 사용해 경로를 연결한다. export default function RootLayout({ children }) ..

🧑‍💻 Next.JS란? React를 기반으로 한 풀스택 웹 애플리케이션 프레임워크 React : 라이브러리, 다운받아 사용에 맞게 폴더 이름, 구조를 작성 => 사용자에게 주도권이 있음 Next : 프레임워크, 정해진 폴더 이름, 구조 등을 따름 => 사용자에게 주도권 없음 Next.js는 규칙에 맞게 코드를 작성하고 올바른 위치에 export하면 프레임워크가 알아서 처리하기 때문에 준수한 규격을 가진 웹앱을 만들 수 있다. Next.js의 특징 1. SSR SSR(Server Side Randering) 서버 측에서 먼저 자바스크립트를 실행해 HTML을 만들어 클라이언트 측에 전송해 렌더링하는 방식 Next.js는 React를 기반으로 하지만 CSR 방식을 사용하는 React와는 다르게 SSR 방식을..

🖥️ 포트폴리오 프로젝트에서 구현한 풀 페이지 스크롤링에 대한 정리... 처음엔 react-scroll 라이브러리를 사용해 네이게이션 메뉴를 구현했다. 스크롤 이동에 따라 컴포넌트를 인지해 표시하는 부분까지는 구현이 되었지만 스크롤 방향에 따른 풀 페이지 스크롤링 동작은 잘 되지 않아 라이브러리를 사용하지 않고 직접 구현했다. 참고한 블로그는 하단에 표기하였다. 1. 화면을 구성하는 컴포넌트 설정하기 각 컴포넌트는 전체 화면을 가득 채워야 하기 때문에 높이를 100vh로 설정한다. export const Page = styled.div` height: 100vh; `; 컴포넌트를 담고 있는 App 컴포넌트에서는 각 컴포넌트가 스크롤 이동으로 화면에 나타나도록 해야하므로 overflow-y를 scroll로..

이번 프로젝트에서 데이터의 날짜를 활용하는 동작이 많아 따로 정리해보려 한다. 배포 링크는 이전 게시물에서! 2023.12.11 - [코딩/프로젝트] - [개인 프로젝트] 투두 다이어리 (feat.Redux-Toolkit으로 여러 개의 상태 관리하기) ✏️ 투두 페이지 - 하루 데이터만 보여주기 캘린더에는 작성된 모든 투두가 보여지지만 투두 페이지로 가면 투두 데이터가 보이지 않는다. 프로젝트를 구상할 때 하루가 지나면 이전에 기록된 투두는 수정이 불가능하고 새로운 날짜에 맞는 투두를 작성하도록 구현하고 싶었다. (별다른 이유는 없고 그냥 그러고 싶었다,,, ) 1. new Date()로 현재 날짜 가져오기 new Date()를 사용해 현재 날짜를 받아와 투두 헤더에 날짜를 표시해준다. const dat..