Weeeeey Weeeeey

1. useMutation은 언제 필요한가? 어떤 페이지(게시판,sns 등)에서 특정 댓글을 작성했거나 삭제 했을때 router.reload()를 통한 새로고침으로 사용자에게 보여주는 방법이 있다. 하지만 이러한 측면은 UX 측면에서 좋지 않기 때문에 새로고침 없이 업데이트 된 것을 보여주는 react-query의 useMutation() 훅을 사용한다. 2. react-query란? react-query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리이다. react-query hook의 종류 ( useQuery, useMutation, useInfiniteQuery ..

Next.js가 자체적으로 파일들을 통해 지원하는 환경 변수들 Next.js는 프로젝트 폴더에 존재하는 환경변수 파일(.env*) 로부터 변수들을 읽어서 Node.js 환경의 process.env객체에 주입한다. 환경 Default 환경 변수 (원격 저장소 푸시 o) Secret 환경 변수 (원격 저장소 푸시x) 모든 환경 .env .env.local 개발 환경(next dev) .env.development .env.development.local 배포 환경(next start) .env.production .env.production.local 테스트 환경(Jest, Cypress등등) .env.test .env.test.local 환경 변수 파일들의 적용 우선순위는 다음과 같이 결정된다. (환경에 ..

Prisma 설치 vs code extension 에서 prisma 서리 yarn add prisma --dev yarn add @prisma/cli env 파일과 schema.prisma 파일 생성 npx prisma init 생성된 schema.prisma에 데이터 model을 작성해줌 datasource db 안에 provider 속성에 사용할 db 입력 (mysql 등등) env 안에 넣을 DATABASE_URL은 pscale을 통해 db에 연결하면 나오는 ip값을 넣어주면 됨(아래에 자세히 작성) generator client { provider = "prisma-client-js" } datasource db { provider = "mysql" url = env("DATABASE_URL") ..

Fetch HTTP 파이프라인을 구성하는 요청 & 응답 등의 요소를 JS에서 접근하고 조작할 수 있는 인터페이스 제공 네트워크 리소스를 비동기적으로 가져옴 XMLhttpRequest 에 대한 좋은 대체제 요청 fetch("https://example.com/movies.json") .then((res) => res.json()) .then((data) => console.log(data)); 응답은 Response 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없다. Response는 HTTP 응답 본문을 그대로 포함하지는 않음 => Response는 HTTP응답 전체를 나타내는 객체이기 떄문 JSON 본문 컨텐츠를 추출하기 위해서는 json() 메소드를 호출해야함. json()은 응답 본문 텍..

JSON (JavaScript Object Notation) Data를 저장|전송 할 때 많이 사용되는 경량의 Data교환 형식 JS에서 Object를 만들 때 사용하는 표현식을 의미 용량이 작고 이해하기 쉬워서, XML을 대체 단순히 Data를 표현하는 방식일뿐(Data 포맷). 특징 Server & Client 간 통신에서 많이 사용됨. JS를 이용해서 JSON 형식의 문서를 JS object로 변환 가능 JSON은 일단 text 형식일 뿐이다. 다른 언어에서도 쉽게 접근 가능 형식 key/value 존재 객체, 배열 등의 표기 사용 중첩 가능 { "employee": [ { "name": "youngjin", "lastname": "we", }, { "name": "min", "lastname": ..

1. GitHub Pages 란? github repository 내용을 웹페이지로 만들어 주는 서비스. 자신의 프로젝트를 깃허브에 업로드하면 직접 호스팅을 해줌. (*public 프로젝트에 대해서만 무료로 해줌.) 2. 세팅방법 1) gh-pages 패키지 설치 yarn add gh-pages --dev 2) package.json 수정 내 git repository 주소 적어줌. "homepage":"https://[user_name].github.io/[repository_name]" deploy 추가 "predeploy": "yarn build", "deploy": "gh-pages -d build" predeploy : deploy 전에 수행함 yarn build : 현재 프로젝트 코드를 빌드함..

1. Shell yarn add tailwindcss postcss autoprefixer -D npx tailwindcss init -p 2. tailwind.config.js 설정 파일의 content 에 tailwind를 사용할 모든 경로를 입력합니다. module.exports = { content: [ // tailwind를 사용할 경로들을 입력 "./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], } 4. _app.tsx 에 import 되어있는 styles/globals.css 내부 내용들을 모두 삭제하고 @tailwind base @tailwind c..