분류 전체보기

CORS 에러 발생오늘도 어김없이 CORS에러가 나를 찾아왔다..ㅎㅎ 에러의 원인http://localhost:3000(프론트)에서 https://www.test.co.kr(백앤드)로 요청을 날려서로 다른 Origin이기 때문에 브라우저에서 SOP(동일 출처 정책)에 의하여 차단한 것이다axios.get('https://www.test.co.kr/api/item/diver.gate.php', { params: { searchType: 'REVIEW', sortOption: 'UPDATE', caType: 1, displaySize: 10, },}) CORS란?CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유 정책이다 기본적으로 브라우저가..

지난 글에 이어(Pagination comonent) 오늘은 Pagination component를 잘 관리하기 위한 custom hook에 대해서 소개하겠다 Pagination custom hook 반복되는 페이지 관련 상태관리 로직을 어떻게 처리하지? 입점사 프로젝트를 진행 중이었기 때문에 거의 모든 페이지에 페이지네이션이 들어갔다 이때마다 페이지 관련 상태 관리 로직이 생겨났고 🥲 하나 잘못된 로직이 있다면 다른 부분도 소스 검색해서 똑같이 수정해줘야 했다 비효율적인 일은 없애고자 페이지네이션 관련 로직을 한 곳에서 한 번에 관리하기 위해 custom hook으로 만들어주기로 결심했다 💪 전체 소스 src/hooks/usePageInfo.ts import { useRouter } from 'next..

우리만의 디자인 시스템을 만들고 싶다 새롭게 입점사 프로젝트에 들어가며 디자인시스템대로 컴포넌트를 만들어 회사 내 다른 프로젝트에서도 사용하고 싶었다! 지금까지는 디자인 시스템이 정해져 있는 것이 아니라 그때그때 시안에 맞춰서 작업해서 소스가 더러웠다 이번 기회에 우리만의 디자인 시스템을 만들고자 했다 위처럼 버튼에 대한 디자인 시스템이 정의되어 있다면 색상, 사이즈에 따라 버튼 컴포넌트를 만들면 된다! Button Component 만들기 어떻게 만들면 좋을까에 대해서 고민하며 찾아보다가 velog의 오픈소스를 봤는데 size, color를 따로 정의하고 props로 받는 부분이 너무 깔끔하게 잘되어 있어 이를 참고하여 만들었다 사이즈 스타일링 피그마에 정의된 대로 사이즈를 나누어 각각의 사이즈를 상..

카카오, 네이버와 애플까지! 소셜 로그인 구현이 필요했다. 소셜 로그인을 구현하며 고민했던 부분들 위주로 작성해 보겠다. 소셜 로그인 구현 각 redirect uri이 있는데, 이는 소셜 로그인이 성공 후(카카오, 네이버 등에서 로그인 후) 다시 서비스 페이지로 돌아올 페이지 위치이다. 성공 후 발급된 인가코드가 포함되어서 redirect uri로 이동된다! 일반적인 로그인 구현 과정은 다른 블로그 분들이 설명을 너무 잘해주셔서 내가 고민했던 부분들 위주로 작성해 보겠다. 소셜 로그인 성공 후 이전 페이지로 어떻게 보내지? 예를 들어 서비스에서 로그인 전 상태일 경우! 구매하기 클릭 -> 로그인 화면으로 이동 -> 로그인 성공 -> 메인 페이지로 이동이 아니라 구매하기 클릭 -> 로그인 화면으로 이동 -..

Storybook에서 모달을 만들던 중! Error: Target container is not a DOM element.라는 에러가 났다! 느낌 상 createPortal에서 사용되는 id="modal"이 없어서 나타나는 게 아닐까 싶었고 해당 키워드로 검색하니 바로 나왔다 ㅎㅎ .storybook/preview-body.html 파일 생성 후 아래 소스를 추가해 준다. npm run storybook으로 재실행!! 참고 자료 - https://stackoverflow.com/questions/70768370/how-to-preview-component-with-react-portal-using-storybook-js

처음 해보는 엑셀 다운로드다! ㅎㅎ 백앤드에서 엑셀 파일이랑 엑셀 파일명을 response에 담아서 보내주신다고 해서 프론트에서 받아서 다운로드하는 부분을 구현해 봤다 그전에! Blob (Binary Large Object) 대용량의 바이너리를 다룰 수 있는 객체로, 백앤드에서 엑셀 파일을 만들어서 프론트에 받을 때 Blob객체를 활용하면 된다 1. api 호출 axiosT.post('/test/excel-download', { ...form }, { responseType: 'blob', headers: { 'Content-Type': 'multipart/form-data', }, }, ) 2. 엑셀 다운로드 api로 호출 결과값으로 Blob 객체를 생성해 준다 a 태그를 생성해서 href에 Blob ..

모바일에서 스크롤 없이 높이를 딱 맞게 사용하고 싶어서 height: 100vh로 설정했다 개발자도구(모바일)로 확인 했을 때는 잘 적용이 된 것처럼 보였다 하지만!! 실제 모바일 기기로 크롬, 사파리에서 확인 하니 높이가 딱 맞게 적용이 안되고 있었다 🥲 (화면의 오른쪽에 스크롤이 생겨버렸다..ㅎㅎ) 이 이유는 100vh가 상단 주소창 영역과 하단의 네비게이션 영역의 사이즈까지 반영을 못하기 때문이다 해결 방법 javascript에서 window.innerHeight를 이용해 1vh를 계산해 주면 된다 function setMobileVh() { let mobileVh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--..

.storybook/main.ts파일에서 webpackFinal 부분을 추가해주면 된다! 나는 svg파일은 잘 가져와지나 width, height 등이 적용되지 않았다 그럴 때는 아래 소스를 추가해줘야 한다 options: { icon: true } svg파일이 React 컴포넌트로 변환될 때, svg파일을 아이콘으로 사용할 수 있도록 해준다 즉, width, height, color..등 기능을 사용할 수 있도록 해준다 import type { StorybookConfig } from '@storybook/nextjs' const config: StorybookConfig = { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx..

모바일 웹을 이용하다 보면 "앱에서 보실래요?"라는 팝업과 함께 앱 설치를 유도한다 이때 모바일 웹에서 앱으로 이동하기 위해서는 두 가지 경우로 나뉘는데 앱이 있는 경우 앱에서 해당 링크 페이지를 보여준다 앱이 없는 경우 구글 스토어나 앱 스토어로 이동해 앱 설치를 유도한다 앱의 설치 여부를 알 수 있는 방법은 없다! 그래서 살짝의 꼼수를 써서 구현했다 function deeplinker(url) { let isChange = false; const userAgent = navigator.userAgent; if (userAgent.match(/Android/i)) { // 안드로이드일 때 setTimeout(()=>{ if (!isChange) { gotoappstore(); } } ,100); } e..

현재 상황나는 jwt방식을 사용하며accessToken과 refreshToken을 모두 쿠키에 보관하고 있다.모두 httpOnly, Secure 옵션을 주어 안전하게 사용하고자 했다.httpOnly: document.cookie를 통해 자바스크립트에서 접근을 막는다. Secure: HTTPS로 통신하는 경우에만 쿠키가 전송된다. 전체적인 큰 그림은 아래와 같다.accessToken 재발급 시 refreshToken을 왜 갱신하느냐... 할 수도 있지만 서비스 상 로그인 상태를 최대한 오래 유지하기 위해 이렇게 진행했다. token을 어디에 저장하고 어떻게 관리할지에 대해 정답은 없고 주어진 상황에 맞게 사용하면 되는 거 같다.axios 인스턴스 생성프론트에서 쿠키를 직접 다룰 수 없어(httpOnly옵션..