코딩이 모래?

기존 NEXT에선 react-hook-form을 사용했었는데현재는 서버 액션으로 쉽게 바꿀 수 있다 ! 어떻게 하는지 살펴보자 Server Action사실 너무너무너무 간단하다 기존 form 태그에 action으로 함수를 전달해주면 된다import Button from "@/components/Button";import Input from "@/components/Input";const Login = () => { const handleForm = async (formData: FormData) => { "use server" console.log(formData) } return ( 안녕하세요! ..

React/Next 2024. 7. 10. 18:16

NEXT.js 14버전에서는 hook을 사용하기 위해 상단에 use client를 사용해 주어야 한다.왜 이런 사용이 필요할까? 이것을 이해하려면 next가 컴포넌트를 렌더링 하는 방식을 알아야 한다.그전에 기본 리액트에서 사용하는 CSR에 대해 알아보자 CSR (Client Side Rendering)CSR은 말 그대로 렌더링이 클라이언트에서 일어난다는 뜻이다CSR의 동작 방식은 위 사진과 같다 유저가 웹사이트에 요청을 보냄CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 보냄 (CDN이란 쉽게 말해 웹사이트를 방문할때 그 사이트의 콘텐츠를 빠르게 받을 수 있도록 하는 시스템이다)브라우저가 HTML과 JS 다운, 이 동안 유저는 사이트를 보지 못 함다운로드JS 실행, 데이터를 위한 API 호출, ..

React/Next 2024. 7. 8. 15:15

구글 솔루션 챌린지에 참여했을 때 팀 구성원 중에 프론트엔드 담당이 나 혼자여서 오랜만에 NEXT를 써봤다 근데!! 내가 배웠을 당시와 다르게 업데이트 된 부분이 너무 많아서 얼레벌레 문서를 찾아가며 프로젝트를 마무리 했다... 아무래도 업데이트 된 내용을 다시 공부해야 할 것 같아서 오랜만에 강의를 들어본다 시작하기 npx create-next-app@latest --typescript 시작 설치는 이전과 똑같다 생성하는 과정에서 아래의 질문들이 뜰것이다 EsLint 적용해? => EsLint는 자바스크립트 문법에서 에러를 표시해주는 도구이다. 이왕이면 적용하는 것이 좋다. src 폴더 만들어? => src폴더를 만들게 되면 안에 app폴더가 필수적으로 들어가있고 components와 같은 폴더들을 사..

React/Next 2024. 3. 18. 21:19

Next.js에서는 page에 대괄호([param])을 추가하여 Dynamic Route를 생성할 수 있음 만든 페이지로 예를 들어보자 해당 영화를 누를시 링크 설정을 다음과 같이 설정하였다. //index.js export default function Home({results}) { return ( {results?.map(m => ... 이러면 pages/movies폴더 안 에 있는 [...params].js로 이동할 것이다 ...은 moives뒤에 오는 모든 변수들을 의미한다. 그 후 [...params].js에서 params정보를 받아 getServerSideProps에서 다음과 같이 이용해준다. //[...params].js export default function Detail({data})..

React/Next 2023. 1. 19. 15:51

page에서 서버 측 랜더링 함수은 getServerSiderProps함수(이름 중요!)를 export하는 겨웅 Next.js는 getServerSideProps에서 반환된 데이터를 사용하여 각 request에서 이 페이지를 pre-rendering함 getSerSideProps는 서브 측에서만 실행되며 브라우저에서는 실행x getServerSideProps를 사용하여 request시 데이터 fetch하기 export default function Home({data}) { //데이터 렌더링 } //매 request마다 실행 export async function getServerSideProps() { const data = await ( await fetch(`https://.../data`)).js..

React/Next 2023. 1. 19. 15:42

개발 시 API를 사용하기 위해 API key 정보를 같이 적어주어야 한다. 그런데 이 key값은 외부에 노출이 되기 싫을 수도 있다 그럴때 ! Next.js의 기능을 활용하여 API key를 숨겨보자! next.config.js API key를 숨기기위해 사용되는 파일이다. 처음 디렉터리에 생성되어 있을 것이다. next.config.js는 JSON 파일이 아닌 일반 Node.js 모듈이다 Next.js 서버 및 빌드 단계에서 사용되며 브라우저 빌드에는 포함되지 않는다. 이 파일을 수정할 경우 Next.js를 종료했다 다시 실행해야 한다 Redirects 들어오는 request 경로를 다른 destination 경로로 Redirect할 수 있다. URL 변경 source : 들어오는 request 경로..

React/Next 2023. 1. 16. 19:50

웹페이지 제목 나타내기 기존 html에서 title태그를 사용하면 웹페이지의 제목을 나타낼 수 있다. Next.js에서도 비슷하다 대신 next/head를 이용해준다. //Seo.js import Head from "next/head"; export default function Seo({title}) { return ( ) } 이러면 사용하는 곳에서 children ( = title) 값에 따라 다르게 설정이 가능하다. //index.js ... import Seo from "../components/Seo"; export default function Home({results}) { ... return ( ); } 이미지 설정하기 img태그를 사용하는 건 똑같다!! 원래 상대경로 혹은 절대 경로를 이..

React/Next 2023. 1. 16. 19:02

이 포스팅에서는 해당 컴포넌트에서만 스타일를 적용하는 방법과 전역으로 스타일(Global Style)을 적용하는 방법에 대해 다룰 것이다. import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar() { const router = useRouter(); return ( Home About ); } NavBar이라는 컴포넌트를 만들어서 적용해보자 한 컴포넌트에만! 1️⃣ style속성 태그 안에 직접 style을 작성해주는 방법이다 Home 참고로 Next 13버전이 올라오면서 a태그에 사용하던 속성들을 Link에도 적용할 수 있게 되었다. 하지만 legacyBehavior을 넣어주..

React/Next 2023. 1. 11. 17:07