🔥 문제 상황이전 글에서 서버 → 클라이언트(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..
