전체 글

1. 문제 상황프로젝트를 진행하면서, React.js 프론트엔드와 Node.js 백엔드를 사용해 JWT 기반 로그인을 구현했다. refreshtoken은 7일로 설정된 jwt을 통해 로그인을 구현했다.accessToken은 15분, refreshToken은 7일로 설정되어 있으며, FE에서 accessToken이 만료된 경우 refreshToken이 BE와 일치하는지 검증을 한 후, BE에서 새로운 accessToken과 refreshToken을 재발급하여 FE에게 전달해 주고, FE에서는 localStorage에 저장하는 방식으로 구현했다. 필자의 경우 컴퓨터에서 사용할 수 있는 웹과 웹뷰로 동작하는 부분이 둘 다 존재하기 때문에, 앱 사용자의 경우 잦은 로그인이 필요없기 때문에 refreshToken..

1. z-index가 왜 제대로 설정이 안 될까? 프론트개발을 하다 보면 이런 경험을 대부분 한 번씩 겪게 된다.필자의 경우를 예시로 설명을 하자면, 위처럼 지도 위에 있는 ButtonGroup이 z-index가 1000이고, 오른쪽 사진의z-index가 2000에도 불구하고, 버튼 그룹이 모달 위에 뜨는 것을 확인할 수 있다. 왜???????????? why???????????????????????? 2. stacking context(쌓임 맥락) stacking context 개념 때문에 그렇다. stacking context가 뭘까?stacking context 는 HTML 요소들이 3차원 공간에서 어떤 순서로 쌓이는지를 결정하는 독립적인 레이어이다.MDN에서 말하는stacking context..

1. 문제상황 웹뷰로 앱에서 동작할 수 있도록 구현 웹에서 위 화면처럼 높이를 조절할 수 있는 BottomSheet를 구현했다. 하지만 List내부 아이템이 50개~100개 정도만 되더라도 드래그를 통해 높이를 변경할 때 버벅거리는 성능 문제가 발생하였다. const handleMouseMove = (e) => { const newHeight = calculateNewHeight(e); setHeight(newHeight); // 매번 상태 업데이트 → 리렌더링 발생!}; 드래그를 통해 높이를 변경할 때 버벅이는 성능 문제는 setHeight라는 state의 변경에 따라 BottomSheet컴포넌트가 리렌더링 되기 때문일 것이라고 생각하였다.BottomSheet를 구현할 때 처음에는 state를 통해..

Vite는 최신 프론트엔드 개발을 위한 빠르고 효율적인 빌드 도구이다.개발할 때는 콘솔 로그가 디버깅에 유용하지만, 프로덕션 배포 시에는 이러한 로그를 제거해야 하는 경우가 생긴다. 이와 개발 중에 API 요청을 프록시하여 CORS 문제를 해결하는 것을 모두 vite.config.js를 통해 두가지 기능을 쉽게 구현할 수 있다. 1. proxy설정import { defineConfig, loadEnv } from 'vite';import react from '@vitejs/plugin-react-swc';export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), ''); return { plugins: ..

1. 문제상황import { defineConfig, loadEnv } from 'vite';import react from '@vitejs/plugin-react-swc';export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), ''); return { plugins: [react()], //빌드 관련 설정 build: { minify: 'terser', terserOptions: { compress: { drop_console: true, drop_debugger: true, }, }, }, ...

1. 문제상황어느날 쉘 바로가기를 클릭했을 때 경로가 올바르지 않은 문제가 있어서 재부팅을 했었다. 평소에는 로그인을 하지 않아도 바로 바탕화면이 나타났었지만, 이번에는 위 사진처럼 로그인 화면이 뜨고 로그인 시에 세션을 시작할 수 없습니다가 지속적으로 발생했다. 이에 대해 raspberry pi failed to start session로 검색해본 결과결국 "OS 재설치 만이 답" 이다. 너무 충격적인 말이기 때문에, 같은 현상이더라도 원인이 다를거라고 생각하고 문제를 찾기 시작하였다.라즈베리파이에서 재부팅을 하면 OS관련 준비의 상태를 체크하는데, 이때 OK가 안뜨는 것이 있는지 찾게 되었다.필자의 경우 여러번 재부팅에도 동일하게dev-dri-card0.device: Job dev-dri-card0...

1. 구현방법React에는 여러 사진 슬라이드 기능을 제공하는 라이브러리들이 있지만, 사진 슬라이드의 경우 해당 라이브러리의 사용법을 알아야 하는 번거로움 보다 직접 구현하는 것이 훨씬 쉬운것 같아 직접 구현하는 내용을 포스팅 해보려고 한다. 사진 슬라이드 기능 구현은 여러 장의 사진이 x축 방향으로 한 장씩 넘어가는 기능을 말한다.데이터는 아래와 같이 이디야 신메뉴 4장으로 구성되어 있다. export const screenImgs = { maxIndex: 4, imgs: [ 'https://buza.biz/data/editor/2212/thumb-fba1c023d4b13d9e80fe0c4b2335d8ee_1670463786_1854_600x750.jpg', 'https://www.shi..

1. 문제상황/src/styles에 공통 theme을 적용하기 위하여 theme.ts를 작성하였다.export const theme = { colors: { standard: '#1E40AF', background: '#1e3a8a', // 생략} as const;export type Theme = typeof theme;export default theme;하지만 위 사진처럼 theme에서 DefaultTheme 형식에 'colors' 속성이 없다는 오류가 발생하였다.기존에 진행하는 프로젝트에서는 따로 styled.d.ts를 지정하지 않아도 정상적으로 읽어와졌었지만,신규프로젝트를 생성하면서 읽어오지 못하는 오류가 발생하였다. DefaultTheme 형식에 'colors' 속성이 없다는..

1. 문제 상황분명 api명세에 맞게 코드를 작성했고, 400에러가 발생하는데 원인을 모르는 경우가 있다.심지어 Postman에서는 정상적으로 동작하는 GET 요청이 프론트엔드에서는 400에러를 반환한다. 이는 주로 GET 요청에 body를 포함시켰을 때 발생한다.2. 원인 분석1. HTTP 표준과 브라우저 제한HTTP/1.1 명세(RFC 7231)에서 GET 요청의 body는 의미론적으로 정의되지 않음대부분의 브라우저는 GET 요청에서 body를 무시하거나 제거함Axios는 브라우저 환경에서 XMLHttpRequest를 사용하며, 이는 GET 요청의 body를 지원하지 않음2. Postman vs 브라우저 차이점// Postman에서는 동작하는 코드GET /api/searchContent-Type: a..

1. 문제상황 부모 컴포넌트에서 어떤 데이터를 조회 받아올때 마다 자식 컴포넌트인 bottomSheet의 높이State가 초기화 되는 현상이 일어났다. React의 리렌더링 조건은 크게 2가지로 볼 수 있다.부모 컴포넌트가 리렌더링을 하게 되면 자식 컴포넌트들은 리렌더링 된다.state가 변경되면 해당 컴포넌트는 리렌더링 된다.이 상황의 경우 부모 컴포넌트가 리렌더링 되는 경우 자식 컴포넌트들은 리렌더링 되는 경우이다. 부모 컴포넌트에서 데이터를 조회 받아와 지도에 적용을 하게 되면서 리렌더링이 발생하고, 자식 컴포넌트인 bottomSheet컴포넌트도 리렌더링을 하면서 높이State가 초기화 되는 것이다. 상황 이해를 위하여 코드예제를 보도록하자.// ParentComponent.jsximport Rea..