개발일기

RORO(Receive, Object, Return Object) 패턴함수를 작성할 때 매개변수로 객체를 받고, 처리 후 객체를 반환하는 방식이다. 이 패턴은 매개변수의 순서와 개수를 기억할 필요가 없도록 하여 함수 호출을 더 유연하게 하고, 특히 많은 옵션을 가진 함수에 유용하다. 기본 함수와 RORO 패턴 적용 함수 기본 함수function createUser(name, age, email) { return { name: name, age: age, email: email };}const user = createUser('Alice', 25, 'alice@example.com');console.log(user); 위와 같이 사용한다면 함수는 'name'..

개요NextJs에서는 2가지의 폰트적용 방법을 제공한다. 첫번째로는 Google Fonts의 방법이고, 두번째는 Local Fonts의 방법이다. 첫번째 방법인 Google Fonts는 NextJs에 내장되어 있어서 간단하게 Import 하여 사용 가능하고, Local Fonts의 방법은 사용하고자 하는 폰트의 woff 파일을 다운받아서 사용하는 방법이다. 공식문서를 참고하면 누구나 다 적용할 수 있지만, 공부도 하면서 차이점도 쓰면서,, 그러려고 한다,, 프로젝트를 진행하면서 두 방법 모두 사용 보았으며, 그것에 대한 기록을 적어두려고 한다. 나는 App Router 방식이 아닌 Pages Router 방식을 사용했다. Google Fonts 적용하기공식문서에서도 나와 있듯이 적용방법은 너무나도 간단하..

1. 개요 전에 만들었을 때에는 pages를 포함한 주소가 만들어져 마음이 불편 했지만, 찾았다. 최적의 폴더구조를... 현재 만들고 있는 로그인/회원가입 폼이다. shadcn과 react-hook-form, zod를 사용할 예정이고, 차차 블로그에도 올릴 예정이다. 폴더 구조는 이렇다. 2.폴더 구조 전과 다르게 app폴더가 없고 src > pages로 들어간다. 여기에 custom app과 custom document를 만들어서 전역으로 관리해야 되는 것들을 추가할 때 효과적으로 사용하면 되고, src > pages > index.tsx를 만들면 기본 경로가 된다. 3.페이지 라우팅 페이지 라우팅을 하려면 pages폴더안에 라우팅할 폴더를 만들면 가능하다. 나는 signUp 폴더를 생성했고, inde..

react를 사용하면서 나는 보통 라우터 사용 시 파라미터 정보를 가져오기 위해 useParams를 사용했다. 아이디와 매칭 되는 데이터를 불러오기 위해서. 그러면 NextJs에서는 어떻게 아이디를 받을까? 1. useParams 다행히도 next/navigation의 useParams를 사용하여 id값을 받아 올 수 있었다. import { useParams } from "next/navigation"; const page = () => { const param = useParams() console.log(param) 2. params props로 아이디 값을 받아올 수 있다. 똑같은 결과를 얻을 수 있다. const page = ({ params }) => { const id = params;

대부분 알겠지만 NextJs는 폴더명이 라우팅 주소가 된다. app 이라는 폴더의 하위 요소부터 주소명이 될 수 있다. 이것이 페이지 라우팅 이다. 먼저 pages폴더를 생성하고, 그 안에 detail 폴더를 만들었다. 그리고 클릭한 todo의 id에 맞는 정보를 불러와야하기 때문에 [id] 라는 폴더를 만들었다. 이것이 동적 라우팅이다. NextJs 사용하기로 들어가면 http://localhost:3000/pages/detail/1의 주소가 되야하고, SWR 사용하기로 들어가면 http://localhost:3000/pages/detail/2의 주소가 되야되기 때문에 주소가 계속 변동된다. 그렇기 때문에 동적 라우팅을 사용한다. 그러면 디테일 페이지는 무엇으로 이동하는가, 바로 NextJs에서 제공하..

개발환경 NextJs Axios json-server 1. 문제 json-server의 포트 번호를 그대로 입력하면 문제가 없지만 env설정 후 사용하면 에러가 나옴 2. 해결 방법 변수명 앞에 NEXT_PUBLIC 사용 NEXT_PUBLIC_URL="http://localhost"

1. for of 배열의 요소를 반복한다. array = ["apple","banana",'orange'] for (const iterator of array) { console.log(iterator) } //Expected output : //apple //banana //orange 2. for in 배열의 인덱스를 반복한다. array = ["apple","banana",'orange'] for (const key of array) { console.log(key) } //Expected output : //0 //1 //2 3. for of, for in 객체 실행해 보기 object = {name:"Jhon", age:21, city : 'Busan'} for (const iterator of..

1. 폴더 생성 yarn create next-app 1. What is your project named? my-app (프로젝트 이름 정하기) 2. Would you like to use TypeScript? No / Yes (타입스크립트 사용 여부) 3. Would you like to use ESLint? No / Yes (틀린것에 대한 힌트 받기) 4. Would you like to use Tailwind CSS? No / Yes (Tailwind CSS 사용 여부) 5. Would you like to use `src/` directory? No / Yes (src 디렉토리 폴더 사용 여부) 6. Would you like to use App Router? (recommended) No / ..