Next.js (9) 썸네일형 리스트형 [TIL] Next.js에서 라우팅이 안되는 경우가 있다?! export const Navbar = () => { return ( 홈 로그인 마이페이지 ); }; 이렇게 라우팅을 해주려고 하는데 계속 에러가 났다 . export const LoginPage = () => { return ( 여긴 LoginPage ); }; 그래서 이것저것 해보다가 해결했는데 const ConsultPage = () => { return ( 여긴 ConsultPage ); }; export default ConsultPage; 이렇게 하니까 바로 해결! 그 이유는 " nextjs에서는 default로 export하지 않으면 사이트에 접속했을 때 에러가 발생한다 " 라는 설명이 있었다. [TIL] 팀프로젝트 회고 프로젝트 명 : CookHub 🌿 프로젝트 소개 : CookHub는 사용자들이 요리와 관련된 정보를 쉽게 찾고, 🔍 요리법에 대한 리뷰를 댓글로 남길 수 있는 사이트를 제공 다양한 요리 레시피 제공: 사용자들은 다양한 요리 레시피를 탐색할 수 있다. 사용자 참여: 사용자들은 요리 레시피에 대해서 다른 사람들과 의견을 공유할 수 있다. 직관적인 사용자 인터페이스: 리액트와 Next.js를 사용하여 사용자 친화적인 인터페이스를 제공한다. 개발 기간 : 2024.03.18 ~ 2024.03.25 (8일) 개발 환경 🚀 Stacks : html, css, typeScript, React 🛠 Tools : Figma, Git 👥 Collaboration : GitHub, Notion, Slack 📂 Package.. [TIL] Image 올리기 next.js에서는 Image를 올릴때 import Image from "next/image"; import 후에 이미지 크기같은걸 정해서 올리면 잘 올라간다! [TIL] changeEvent const onChangeHandler = (event: React.ChangeEvent) => { setChange(event.target.value); }; typeScript에서 이렇게만 input 에 썼었는데 export default function useInput() { const [value, setValue] = useState(""); const onChange = (e: React.ChangeEvent) => { setValue(e.target.value); }; return { value, setValue, onChange }; } 이렇게 따로 커스텀 훅인 useInput을 정의해서 선언했더니 다른 페이지에서 가져오기가 훨씬 편하고, 코드가 깔끔해졌다. const { value: ed.. [TIL] TailwindCSS 사용하기 next.js를 사용하면 TailWindCss를 사용할 수 있는데 프로젝트를 하다보니 className=" " 으로해서 css를 적용해줄 수 있었다. TailWindCSS를 쓸 수 있는 사이트이다. https://tailwindcss.com/ 완료 이렇게하면 padding right와 padding left가 늘어나고, text가 white로 바뀌고, border-radius 가 바뀐다. [TIL] nextJS에 이미지 url 넣기 /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: 'https', hostname: 'i.example', }, ], }, }; export default nextConfig; 이미지가 말썽.. next.config.mjs 에 찾아서 들어가보니 해결.. [TIL] Next.JS에서 제공하는 4가지 렌더링 기법 웹 렌더링(Web Rendering)이란 웹 페이지를 사용자에게 보여주는 과정을 의미한다. 이 렌더링 방식에 따라서 로딩 속도, 검색 엔진 최적화(SEO), 사용자 경험 등이 달라진다. Client - Side - Rendering (CSR) 브라우저에서 JavaScript를 사용해서 웹페이지를 렌더링 하는 방식이다. 사용자의 브라우저가 서버로부터 데이터를 받아와서 웹 페이지를 직접 생성한다. 렌더링의 주체는 클라이언트이다. build 할 때만 fetch 되기에 한번에 모두 다운로드해서 서버부하가 적고 상호작용이 높다. 하지만 TTV(Time To View)가 길어서 검색 엔진 최적화(SEO)에 좋지 않다. 좋은 비유를 봤기에 참고해서 가져와보자면 CSR은 Server로부터 빈 그릇(빈 HTML)과 요리.. [TIL] Next.js에서 Routing 설치하기 npx create-next-app@latest 터미널에 이렇게 입력하고 이렇게 다 Yes로 하면 다음과 같은 파일 구조가 보인다. 여기서 layout, page 이 두 컴포넌트를 굉장히 많이 다룬다! 1. layout.tsx 2. page.tsx 3. package.json scripts 부분에는 dev / build / start가 있다. 우리가 개발하는 중 사용하게 될 코드 npm run dev production 레벨로 배포하기 전 필요한 빌드 작업 과정을 실행! build하지 않고 start를 하는 경우 실행될 수 없다. npm run build 만들어진 build 파일을 이용하여 실행시키는 방법 npm run start dynamic routing const Router = () =>.. [TIL] Next.js 란? Next.js는 리액트 프레임워크이다. Next.js는 React 기반의 SSR(서버 사이드 렌더링)을 지원하는 프레임워크이자 CSR(클라이언트 사이드 렌더링)만 지원하는 React와는 다른점이 있다. 일반적으로 Next.js를 채택할 때 주요한 의사결정은 1) App router를 쓸 것인가 ? 2) Pages router를 쓸 것인가? 와 연관되어 있다. 왜 router를 기반으로 속성을 분류할까? - 웹사이트를 기획/설계할 때, 어떤 페이지가 존재하게 할지, 라우팅은 어떻게 하게 할지를 항상 먼저 고려한다. - React 기반의 SSR(서버 사이드 렌더링) 을 지원하는 프레임워크 & CSR(클라이언트 사이드 렌더링) 만 지원하는 React와는 차이가 있다. Next.js 사용 시 가장 중요한 핵심 .. 이전 1 다음
