React

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

1. 문제 상황: 폰트가 적용이 안돼!Styled-components를 사용하여 프로젝트를 진행하면서 공통적인 CSS들은 GlobalStyle로 적용시키려고 하였다.import { createGlobalStyle } from 'styled-components';import PretendardLight from '../assets/fonts/Pretendard-Light.woff2';import PretendardMedium from '../assets/fonts/Pretendard-Medium.woff2';import PretendardBold from '../assets/fonts/Pretendard-Bold.woff2';const GlobalStyle = createGlobalStyle` * { ..

@@@결과 미리보기@@@ 1. 구현 1. 기본 로직 problemsData는 데이터 배열이다! - 현재 페이지 state, 한 페이지에 몇 개의 아이템을 보여줄지, 전체 페이지 수 const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 10; const totalPages = Math.ceil(problemsData.length / itemsPerPage); currentPage를 통해 현재 페이지를 useState로 선언해 주고, 한 페이지에 몇 개의 항목이 들어갈지 itemsPerPage를 통해 지정한다. 이후 전체 페이지 수를 구하기 위해서 (데이터/한 페이지에 몇 개의 항목이 들어갈지)를 올림 하여 계산한 totalP..

@@@결과 미리보기@@@  1. 구현내가 이전에 만든 웹 화면은, 바로 위 gif와 같이 창을 전체화면으로 사용하기보다 한쪽으로 화면을 축소하여 사용하는 일이 많았다. 이에 화면이 반절로 되게 되면, 웹사이트에 불편함을 느껴 반응형을 도입하여 이문제를 해결하고자 하였다.    1. display: grid 기본적으로 display:flex로 구현되어 있는 컨테이너를 반응형을 위해 grid로 변경하였다.왜 grid냐? 현재 나는 왼쪽 사진과 같이 1열로 나란히 있는 요소들을 화면의 width가 줄어들면, 오른쪽과 같이 세로로 배치되기를 원하기 때문이다. display: flex;의 경우 일반 div의 성격인 세로로 쌓이는 것이 아닌, div가 가로로 쌓이게 된다. 이러한 경우 반응형으로 가로 세로 요소의 ..

@@@ 결과 미리보기@@@ 1. 구현 데이터가 많을 때 이를 한 번에 모두 렌더링 하면 성능 저하로 이어질 수 있다. 특히 스크롤을 통해 추가적인 데이터를 보여주는 무한 스크롤 방식은, 성능 최적화를 위해 사용자와의 상호작용에 따라 데이터가 로딩되도록 하는 것이 중요하다.이를 위해 Intersection Observer API와 더보기 버튼을 활용해 특정 위치까지 스크롤이 되면 추가 데이터를 로딩하고, 버튼 클릭 시 모든 데이터를 표시하는 방식으로 컴포넌트를 구현할 수 있다. 이번 글에서는 Intersection Observer와 상태 관리를 통해 효율적으로 데이터를 로딩하고 화면에 표시하는 방법을 설명하도록 하겠다.    1. Intersection Observer 설정 const observer = ..

@@@ 결과 미리보기@@@ 1. 구현방법  1. 타이핑 기본 로직 const [webTitle, setWebTitle] = useState(''); // 웹 페이지 제목을 저장할 상태 초기화 (초기값: 빈 문자열)const [count, setCount] = useState(0); // 현재 타이핑 중인 문자의 인덱스를 저장할 상태 초기화 (초기값: 0)const completionWord = 'Co Labor'; // 완성될 타이핑 문구를 상수로 저장 webTitle이 처음 시작 문자열이고, 완성 됐을 때 문자열은 completionWord이다. 이후 count라는 state를 통해 현재 몇 번째 글자인지 구별한다.  useEffect(() => { const typingInterval = setIn..