본문 바로가기

분류 전체보기233

[Next.js] API Route에 대해 ( NextApiRequest ,NextApiResponse ) API Route 란? 등장배경 React 애플리케이션을 개발하다보면 backend API가 필요한 시점이 온다 (Eg.) DB의 데이터 조회| 사용자가 요청하는 데이터 처리 작업(html page가 아닌 입력받은 데이터만 필요) 이를 위해 노드.js 을 활용한 custom server 파이프라인을 구축해서 작업하는 방식이 있다. 하지만 이럴 경우 Next.js의 성능 최적화를 해침 (+TS 및 Es6 방식의 모듈 시스템 사용 못함) 이를 위해 API Routes 라는 기능을 추가해서 Next.js 안에서 필요한 serverless API Endpoint를 구축 가능해짐 API란? 여러 종류가 있지만 REST API가 대표적임 REST API란 REST 규칙의 특수한 규칙을 가진 웹 API를 말한다. (.. 2022. 12. 9.
[TypeScript] declare module 에 대해 (feat. import, export ) 모듈(module) 이란? import | export 가 있는 파일을 모듈이라고 한다. 외부에서 직접적으로 모듈을 불러오지 않으면 그 모듈의 데이터는 사용X import : 모듈에서 데이터를 불러올 때 사용 export: 모듈에서 데이터를 내보낼 때 사용 [TypeScript] 컴파일 될 때 import, export 데이터의 행방 변수, 상수, 함수, 클래스: JS 모듈 로더 코드로 컴파일 된다. 타입: JS 코드로는 컴파일 되지 않음. ( JS 코드에서는 삭제 ) 네임스페이스: JS 일반 객체로 컴파일 된다. 등장 배경 사용 빈도가 높은 라이브러리의 타입들은 @types/라이브러리를 통해 알 수 있다. 하지만 기능이 약한 라이브러리는 모듈 정의가 안되어 있는 경우가 많음 또한, 여러 문서에서 반복적.. 2022. 12. 9.
[Next.js] Iron Session에 대해 알아보자 // 참고: sinclairr 님의 벨로그 1. Iron-Session 이란? 암호화된 쿠키를 이용하는 Node.js stateless session utilituy 이다. 기본적으론 JWT와 흡사합지만, 토큰 정보에 대해 암호화,복호화를 한다는 점이 다름 2. 동작방식 user(Browser)가 server에 req을 보냄 server 에서 해당 정보를 암호화한 cookie를 만듬 이후 user에게 res를 보낼떄 cookie를 같이 보냄 user는 암호화된 cookie를 가지고, 이후 req에 이 cookie가 같이 보내짐 server는 cookie를 받게 되면 복호화를 진행 후 정보를 활용함 => 쿠키를 만들고, 유저에게 보내는 작업을 직접 할 필요 x . Iron Session에서 제공하는 hel.. 2022. 12. 7.
Axios에 대하여 (vs Fetch) 무엇을 선택할까? 결론적으로 말하자면 개발 환경에 따라 다르겠지만 React 프로젝트를 진행할경우 Axios 를 선호하는 경향이 있다고 한다. Axios는 크로스 브라우징에 신경을 많이 쓴 모듈이고 기능또한 우수하기 때문. 어떻게보면 fetch의 상위 호환 Axios 장단점 장점 response timeout 처리 방법이 있다 (fetch 에는 x) promise 기반이라 다루기 쉽다 크로스 브라우징에 신경을 많이 써서 브라우저 호환성 뛰어남 단점 모듈 설치를 해줘야한다. Fetch 장단점 장점 내장 라이브러리여서 별도의 import 및 설치 x promise 기반 프레임워크가 불안정할때 사용하기 좋다 (내장 라이브러리이니까) 단점 internet Exporloer의 경우에 fetch를 지원하지 않는 버.. 2022. 12. 7.
React-Query에 대하여 ( useQuery, useMutation ) 1. useMutation은 언제 필요한가? 어떤 페이지(게시판,sns 등)에서 특정 댓글을 작성했거나 삭제 했을때 router.reload()를 통한 새로고침으로 사용자에게 보여주는 방법이 있다. 하지만 이러한 측면은 UX 측면에서 좋지 않기 때문에 새로고침 없이 업데이트 된 것을 보여주는 react-query의 useMutation() 훅을 사용한다. 2. react-query란? react-query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리이다. react-query hook의 종류 ( useQuery, useMutation, useInfiniteQuery .. 2022. 12. 7.
[Next.js] 환경 변수 사용하기 ( + 깃에 올리지 않는 법) 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 환경 변수 파일들의 적용 우선순위는 다음과 같이 결정된다. (환경에 .. 2022. 12. 5.
Prisma & PlanetScale 설치 및 연결 (yarn, next.js, mysql) 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") .. 2022. 12. 4.
JSON Fetch 사용하기 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()은 응답 본문 텍.. 2022. 12. 4.
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": .. 2022. 12. 4.

티스토리툴바