본문 바로가기

FrontEnd84

[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.
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.
Tailwind CSS 설치 및 적용법 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.. 2022. 11. 30.
next.js 의 장단점 2022. 11. 25.
CLS 함수를 이용해서 속성값 주기 블라 2022. 11. 25.

티스토리툴바