🔥 문제 상황이전 글에서 서버 → 클라이언트(localhost)로 쿠키 전송 문제를 해결했었다그런데 클라이언트 → 서버로 POST 요청을 보냈는데 쿠키가 전송되지 않고 있었다. 왜냐하면 서버(https://custom-domain.com)에서 생성한 쿠키의 도메인은 [ custom-domain.com ] 이고, 클라이언트 도메인은 [ localhost ] 로 같은 도메인이 아니기 때문에 전송되지 않았던 것이다. (+ SameSite: Lax) 로그인 인증을 구현하기 위해선 도메인을 일치시킬 필요가 있었다.✅ (개발 환경) 백엔드 서버를 로컬에서 띄우자개발 환경에서 위 문제를 해결하기 위해 백엔드 서버를 로컬에서 띄우기로 했다. 그러면 클라이언트는 http://localhost:5173 이고, 서버는 h..
전체 글
🧷 출처이미지 출처: https://www.devyummi.com/page?id=66934f448a005e7d8f32213a🔥 문제 상황로그인 책임을 백엔드가 맡고 있는 카카오, 구글 소셜 로그인을 구현중이였다.소셜 로그인 성공 시, 백엔드에서 생성한 jwt 토큰 쿠키가 브라우저(localhost)에 저장되어야 하는데 저장이 되고 있지 않았다.🏃♀️ 첫 번째 시도개발 환경프론트엔드http://localhost:5173window.location.href = 'http://1.11.111.11:8080/oauth2/authorization/kakao';소셜 로그인 버튼 클릭 시, 페이지 이동http프로토콜서버 주소(아이피): 1.11.111.11:8080 (해당 주소는 실제 서버 아이피가 아님)백엔..
🔥 문제 상황스와이프 동작을 통해 snackbar를 없애는 Pointer 이벤트 로직을 구현했다. 데스크탑에서는 정상적으로 스와이프가 되었지만, 모바일에서는 snackbar가 화면 밖으로 이동하지 못하는 현상이 있었다.데스크탑모바일 ✅ 문제 해결모바일 브라우저는 터치 이벤트를 감지하면 스크롤 동작, 줌 등 기본 동작을 우선 처리하려고 해서 직접 구현한 스와이프 터치 반응이 제한될 수 있다고 한다. touch-action: none 속성을 추가하여 브라우저의 기본 터치 동작을 차단하고 직접 구현한 터치 동작을 우선적으로 처리하도록 변경했다. touch-action: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action auto: 브라우저가 터치 ..
📌 Exclude유니언 타입에서 특정 타입을 제거할 때 사용하는 유틸리티 타입.유니언 타입은 여러 타입 중 하나가 될 수 있는 값을 의미한다.type Fruit = 'apple' | 'banana' | 'orange'type MyFruit = Exclude // 'apple' | 'banana'MyFruit는 orange를 제외한 apple과 banana를 타입으로 가집니다. 📌 Omit객체 타입에서 특정 속성을 제거한 새로운 타입을 생성하는 유틸리티 타입.type Person = { name: string; age: number; email: string;};type PersonName = Omit; // { name: string }PersonName은 age, email 속성이 제거된 { ..
// theme.tsexport const theme = { colors: { blueGrey: colors.blueGrey, red: colors.red, },};// colors.tsexport const colors = { blueGrey: { 50: '#F9FAFB', 100: '#EBEEF2', 200: '#CED5DF', 300: '#B2BECC', 400: '#95A7BA', 500: '#788DA3', 600: '#627384', 700: '#53616F', 800: '#434D58', 900: '#323941', }, red: { 300: '#FFA59B', 600: '#D62D36', 700: '#..
👍 참고1. https://solo5star.dev/posts/42/2. https://velog.io/@velopert/react-context-tutorial#%EA%B0%92%EA%B3%BC-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%ED%95%A8%EC%88%98%EB%A5%BC-%EB%91%90%EA%B0%9C%EC%9D%98-context%EB%A1%9C-%EB%B6%84%EB%A6%AC%ED%95%98%EA%B8%B03. https://velog.io/@dahyeon405/Context-API%EC%9D%98-%EB%A6%AC%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%8C%80%ED%95%9C-%EC%98%A4%ED%95%B4 👀 Provider 내..
📌 설치 환경pnpm + vite + react + typescript + vscode 🎨 prettierprettier는 나 또는 팀원들이 작성한 코드를 일관된 스타일로 작성하도록 도와주는 도구이다. vscode setting에서 개인 설정을 적용할 수 있고, 팀원들의 코드 스타일을 맞추려면 프로젝트 루트 폴더에 .prettierrc.json 파일을 생성하고 원하는 설정을 넣어주면 된다.(프로젝트 prettierrc.json이 vscode 세팅보다 우선순위가 높다.){ "singleQuote": true, "jsxSingleQuote": true, "semi": true, "printWidth": 80}🧷 prettier 옵션: https://prettier.io/docs/en/opti..
🎨 Animation 이벤트https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_eventCSS 애니메이션이 시작, 종료, 반복될 때 발생하는 이벤트이다.animationstartanimationendanimationiteration// reactexport default function EventPage() { const animationStart = () => console.log('animation start'); const animationEnd = () => console.log('animation end'); const animationIteration = () => console.log('animation iter..
🚩 IntersectionObserverhttps://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API특정 요소가 뷰포트 또는 다른 특정 요소와 교차하는지를 비동기적으로 감지할 수 있게 해준다. 기존에는 scroll 이벤트를 통해 두 요소 사이의 가시성을 감지했지만, IntersectionObserver는 관찰 대상 요소가 뷰포트에 들어오거나 나갈 때만 콜백 함수를 실행한다. 이 과정은 비동기적으로 이루어지므로, 메인 스레드의 작업을 방해하지 않고 필요한 경우에만 콜백 함수를 실행한다. 옵션 설정const options = { root: document.querySelector("#scrollArea"), rootMargin: "0p..
📌 transform-origin 속성은?transform의 기준점을 설정하는 속성이다. 기준점을 변경하면 회전, 확대/축소 등의 변환 효과가 어디를 기준으로 발생할지 결정할 수 있다.기본값은 요소의 중앙(50% 50%)이다. 이미지 출처https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin See the Pen Untitled by presentKey (@reduaaws-the-styleful) on CodePen.
🏃♀️ 자바스크립트는 싱글 스레드자바스크립트는 한 번에 하나의 작업만 처리할 수 있는 싱글 스레드이다. 이는 한 작업을 처리하는데 시간이 오래 걸린다면 프로그램이 멈추는 blocking이 발생할 수 있다. 하지만 네트워크 요청, 타이머 등 작업이 발생했을 때, 프로그램이 멈추지 않고 다른 작업들이 실행되는 것을 볼 수 있다. 이는 setTimeout, Promise 등 Web APIs 중 비동기 작업을 자바스크립트 엔진이 아닌 브라우저가 담당하여 처리하기 때문이다. 🔥 자바스크립트 런타임 과정Call Stack: 함수 호출 시 함수 실행 컨텍스트가 콜 스택에 푸시되고 순차적 실행 된다. 실행이 완료되면 콜 스택에서 제거된다.Web APIs: setTimeout, Promise 등 비동기 작업을 콜 ..
🎁 Map1. 키-값 쌍을 저장하며, 키는 오직 단 하나만 존재한다.2. 키 값은 모든 값(객체와 원시 값)을 키로 사용할 수 있다.3. 키와 값의 삽입 순서를 기억한다. Map 기본 사용법 // Map(1) {'a' => 1} const map1 = new Map(); map1.set('a', 1); // Map(2) {'a' => 1, 'b' => 2} const map2 = new Map([ ['a', 1], ['b', 2], ]); Map과 Object의 차이점 MapObejct키 타입모든 값(객체와 원시값)문자열 또는 심볼키 순서삽입 순서 기억삽입된 순서와 다를 수 있음이터러블OX 이터러블(iterable)순회 가능한 객체를 뜻하며, for..of, 스프레드 문법, 구조분..
🛴 개선 전 애니메이션 'xxx마리' 숫자 영역 애니메이션 애니메이션 동작 방식은 css top 속성을 이용하여, 멈출 숫자의 위치로 이동합니다. css top을 이용해 요소의 위치를 변경했기 때문에, animation이 발생하는 동안 reflow가 계속 실행되는 것을 볼 수 있습니다. reflow: 브라우저 렌더링 과정 중 Layout → Paint → Composite 과정 재실행 🔧 성능 개선하기 성능 개선을 위해 reflow 대신 repaint를, repaint 대신 composite 과정만 발생되도록 하여 렌더링 비용을 줄일 수 있습니다. 요소 위치를 조정하기 위해 top 대신 transform 속성을 이용하면, 애니메이션 동작은 같지만 reflow가 발생하지 않고 composite 과정만 발생..
🔥 오류 발생 'JSX.IntrinsicElements' 인터페이스가 없으므로 JSX 요소는 암시적으로 'any' 형식입니다.ts(7026) 'react' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.ts(2307) 🔧 설정 방법 1. yarn 버전 변경 (vscode 터미널 입력) yarn set version berry 2. vscode extension - ZipFs 설치 3. 에디터 SDK 설정 yarn dlx @yarnpkg/sdks vscode 명령어 입력 후, 등장하는 모달의 '허용' 버튼을 클릭하거나 ts, tsx 파일에서 ctrl + shift + p를 눌러 'TypeScript 버전 선택...' 클릭 '작업 영역 버전 사용' 클릭 4. yarn cache clean 5. yarn in..
📝 태그의 의미 브라우저는 서버가 응답한 HTML 파일을 바이트(2진수) 형태로 응답받는데, 브라우저에게 어떤 인코딩 방식을 사용할 지 알려주는 태그이다. html 문서를 지정된 인코딩 방식(UTF-8)을 기준으로 문자열 변환 UTF-8 인코딩 방식은 대부분의 문자를 표현하기에 적합하여 많이 사용되고, 다른 인코딩 방식(euc-kr 등)을 사용하면 일부 문자가 깨져보일 수 있다. 📝 인코딩 이란? 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것이다. ASCII 코드 예를 들면 문자 십진법 이진법 A 65 1000001 Z 92 1011010 a 97 1100001 z 122 1111010 문자열 세트(표)에 따라 'A' 문자를 컴퓨터가 이해할 수 있는 '1000001' 변환하고, 다시 사용자에..
📝 렌더링이란? HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 파싱(parsing, 구문 분석): 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문접적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정 📝 렌더링 과정 1. 서버로부터 HTML 파일을 받는다. 2. HTML을 파싱하면서 CSS, 자바스크립트, 이미지 등 필요한 리소스를 요청. 3. DOM 트리 생성 4. CSSOM 트리 생성 5. DOM 트리와 CSSOM트리를 결합하여 Render 트리 생성 6. Layout - HTML 요소의 레이아웃(위치와 크기) 계산 7. Paint - 화면에 H..