kohigowild

🔎 Overview 💡 Notion 💡 GitHub ✔ 저기요! 안 쓰는 티켓 있어요? 👀 그럼 넘겨요! = Hey! Toss Me! 🙋‍♀️ ❓ 전국구의 못 쓰게 된 서비스 거래만 모아둔 곳 없을까? 🙏 취소 수수료 물지 말고 간단하게 거래해요! 💪 미용실도! 뮤지컬도! 어떤 예약 서비스라도 좋아요! 📅 작업 기간 2023년 02월 24일 ~ 2023년 04월 06일 🤹 팀원 구성 BackEnd 3명 : 이보미, 최웅준, 허진혁 FrontEnd 2명 : 박주경, 김규리 📜 프로젝트 아키텍처 🔨 기술 스택 FrontEnd BackEnd CI / CD React Typescript Redux-toolkit Redux-persist React-router-dom Axios StompJS React-datep..

문제 상황 강조되고 반복되는 CORS 에러가 주경이를 불안하게 함 CORS (Cross Origin Resource Sharing) CORS는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘이다. CORS는 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식으로 CORS라는 이름으로 표준화 되었다. CORS는 최신 브라우저에서 구현된 동일 출처 정책(same-origin policy) 때문에 등장했다. Proxy CORS를 해결하기 위해서는 서버 측에서 Origin Allow 속성에 클라이언트에서 보내는 출처를 추가하고, 배포하는 곳에서도(AWS 같은 거) 따로 설정해 줘야 한다. 우리 프로젝..

처리 내용 1. 유저 로그인 시 액세스 토큰과 리프레시 토큰을 발급한다. 액세스 토큰은 클라이언트에서 store 변수에 담아 관리하고 리프레시 토큰은 서버에서 httpOnly 쿠키에 저장하도록 처리한다. 2. API 요청 시 액세스 토큰을 검증한다. 3. 액세스 토큰이 만료된 경우 401 error ▶ token refresh 요청 ▶ 액세스 토큰 발급 4. 새로 발급된 토큰으로 재요청한다. axios interceptors axios interceptors는 then이나 catch로 처리되기 전에 요청(request)나 응답(response)을 가로채 어떠한 작업을 수행할 수 있게 한다. // 요청 쌔벼서 가공 customAxios.interceptors.request.use( (config) => {..

PWA는 HTML, CSS, JS와 같은 웹 기술과 네이티브 앱의 장점을 결합한 것이다. 네이티브 앱을 개발하고 유지보수하는 것은 시간이나 비용이 상당히 소요되지만, PWA는 훨씬 더 빠르게 개발할 수 있고 푸시 알림이나 오프라인 지원과 같은 네이티브 앱의 특징들도 전부 제공할 수 있다. PWA의 세 가지 구성 요소 HTTPS: PWA는 신뢰할 수 있는 연결 상태에서만 동작하기 때문에, 보안 연결을 통해서 서비스를 제공해야 한다. 이번 프로젝트에서는 로컬 환경에서 시도했기 때문에 해당사항 X servise worker: 서비스 워커는 백그라운드에서 실행되는 스크립트이다. 네트워크와 관련된 요청의 처리를 돕는다. manifest: JSON 파일 형식이며 PWA가 표시되고 기능하는 방식에 대한 정보를 포함한..

🤯 유저가 로그인을 완료하게 되면 서버로부터 유저의 정보가 response로 들어오게 되고 클라이언트에서는 이 값을 store에 저장해서 필요 시에 꺼내 쓸 수 있는데, 기존의 store는 새로고침 시 초기화되는 정보이므로 이를 해결해 주어야 한다. redux-persist 설치 npm i redux-persist yarn add redux-persist persist store 정의 store.tsx import { combineReducers, configureStore } from "@reduxjs/toolkit"; import { useDispatch, useSelector } from "react-redux"; import storage from "redux-persist/lib/storage"..

Debounce 는 이벤트 핸들러의 과도한 횟수가 발생하는 경우를 효과적으로 제어하여 성능의 개선을 목표로 하는 프로그래밍 기법으로, 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 기법이다. 해당 프로젝트에서는 검색 페이지에서 키워드 입력 시, 키워드 입력 완료 후 특정 시간 이후 API를 요청하도록 적용하였다. 🗒️ 적용 전 코드 키워드를 담을 state를 선언해 주고 input에 onChange 이벤트를 적용한다 의존성 배열에 keyword를 전달해서 keyword의 값이 변동될 때마다 api를 요청한다 const [keyword, setKeyword] = useState(''); useEffect(() => { // api call searchFeedList(keyword, setFeed..

Problem 타입스크립트 환경에서 env 변수 사용 시 import.meta.env에서 타입 오류 발생 Property 'env' does not exist on type 'ImportMeta'. Reference https://github.com/vitejs/vite/issues/9539 Property 'env' does not exist on type 'ImportMeta' in 3.0.0 · Issue #9539 · vitejs/vite Describe the bug In vite 3.0.0 it still exists, even if it was previously closed. Can be recreated using react-ts template. Try to use env variabl..

https://heytossme.netlify.app/ HeyTossMe heytossme.netlify.app Problem 메인 페이지 등에서 사이트가 버벅거리거나 로딩이 느려지는 문제 이미지 최적화 관련 처리 X Reason 검색하다가 LightHouse라는 툴을 발견해서(!!) 한 번 적용해 봤는데 성능 점수 뭔 일임 메인 페이지 무한 슬라이드에서 성능 문제가 있을 거라는 예상은 했었는데, 무한 슬라이드 로직에 문제가 있는 게 아니라 고화질 이미지를 너무 많이 사용한 데서 크게 문제가 아닐까 싶었다 Try to solve 메인 페이지 무한 슬라이드 이미지 교체 대놓고 버벅거리는 문제는 해결됨 41점이긴 한데 410점 같음 이미지 업로드 시 이미지 압축 코드 작성 browser-image-compr..