오늘은 웹 개발 중 자주 마주치는 HTTP 요청 관련 개념들을 정리했다.Axios를 사용하면서 겪은 궁금증들을 하나씩 정리하며 개념을 명확히 했다. HTTP 요청 헤더: Authorization과 쿠키 인증Access Token은 보통 Authorization: Bearer 헤더에 넣어 전송.하지만 토큰을 쿠키에 저장하는 경우, 별도로 Authorization 헤더는 비어있거나, 없어도 된다. 브라우저가 자동으로 쿠키를 보내주기 때문. (withCredentials: true를 설정하면 쿠키가 자동 전송)Refresh Token은 보통 별도의 엔드포인트(/auth/refresh)를 호출해서 새로운 Access Token을 받아오는 방식으로 사용. Referer를 활용한 뒤로 가기 처리찾아보던 중에 R..
🐡 TIL
ref 사용 시, input 초기값 설정controlled component = value + onChange → react가 제어, 입력값 상태로 유지uncontorlled component = defaultValue → DOM에 직접 접근 Object.keys(res).length>> "res(객체)에 요소가 있으면" 이라는 조건이 필요했는데 습관처럼 res.length 사용해서 undefined 나옴 res는 객체 (배열이 아님) ⇒ res.length는 undefined가 될 수 있다Object.keys는 객체 속성 이름을 배열로 반환const object1 = { a: 'somestring', b: 42, c: false,};console.log(Object.keys(object1)); ..
vite.config에서 alias 를 사용해서 찾을 경로와 바꿀 경로를 연결 해주면 된다import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import path from 'path';export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, 'src'), 'components': path.resolve(__dirname, 'src/components'), 'assets': path.resolve(__dirname, 'src/assets'), // 추가적인 경..
vercel에서 배포 후, 특정 링크로 이동하거나 새로고침을 할 때 404 Not Found가 뜨는 경우가 있다. vercel은 기본적으로 index.html 파일을 루트 디렉토리에서 찾는다.이때, vercel이 번들링 프로세스를 시작지점을 찾는데 어려움을 겪을 때 발생한다. 루트 디렉토리에 vercel.json 파일을 만들고, 아래 코드를 작성한다.이미 깃허브에서 배포한 경우, 파일을 만들고 푸시하면 적용된다! 1. routes 설정첫번째 방법은 먼저 filesystem의 경로를 확인하고,실제로 존재하는 파일들을 우선적으로 제공하고, 이외에 다른 모든 경로는 index.html로 리디렉션 하는 것이다.{ "routes": [{ "handle": "filesystem" }, { "src": "/...
전역에서 한번에 바꾸기1. fn + f2 2. search 창에서 변경Window : ctrl + H Mac : cmd + shift + H 한 페이지에서 여러 단어 바꾸기1. cmd + D2. option + cmd + f
프로젝트 설정 중 CRA에서는 tailwindcss가 작동되는데, vite에서는 작동이 되지 않았다. 1. 공식 문서 방법기존 tailwind 설치 이외에 2개의 패키지 설치가 필요하다.npm install -D tailwindcss postcss autoprefixer Install Tailwind CSS with Vite - Tailwind CSSSetting up Tailwind CSS in a Vite project.tailwindcss.com 2. 기존 방법 + vite.config 수정1번 방법을 찾기 전에 다른 방법을 찾아서 적용했다.이미 공식문서대로 설치 후 작동 안되는 것을 발견했을 때, vite.config파일에서 css파트만 넣어주면 된다.import react from '@vitej..
