프론트엔드 관련25 React Router Path AutoComplete with type-safety 리액트 라우터 경로 자동 완성 및 경로 안정성서론이 글을 쓰게 된 계기는 우연에서 시작되었다.기술 블로그를 돌아다니다가 이 글을 보고 경로 자동완성에 대해 생각해보았다. rjw0907 (R정우) / 작성글 - velog시행착오를 즐기는 프론트엔드 개발자입니다!velog.io 처음 글을 봤을 때에는 대단하다고 생각이 들었다.그러나 바로 이해가 되지 않는 부분도 있었고, 좀 더 개선의 여지가 없을까 많이 고심하게 되었다.사실 이전에 해왔던 프로젝트에는 경로 자동완성은 커녕, 타입 안정성조차 존재하지 않았다.사용자를 네비게이트 시켜야하는 경우, 단순히 수기로 하듯이 그냥 직접 경로를 작성하였다.이로 인해 라우트 경로를 바꾸면 전부 수정해야하는데 위치도 제대로 모르게 되는 곳이 태반이었고, 이는 일말의 여지도 .. 2025. 4. 10. [React] http Typescript axios(feat. interceptor 에러 핸들링) 서론 이전에 작성한 글 조회수 1000 넘은 김에 특별 재작성 이벤트!! React의 Typescript와 함께 data fetching(axios로 API 호출)Typescripttypescript를 사용함에 따라 기존의 코드에서 사용하던 axios가 어려워져버렸다... 기존의 자바스크립트를 이용한 axios는 간단하고 데이터를 쉽게 받아올 수 있었으나, Dynamically Typed Language라ash9river.tistory.com 회사를 다니면서 내가 했던 것들이 잘못된 부분이 있었구나 했는데, 사람들이 너무 많이 봐서 as 같은 느낌으로 다시 작성한다. 리액트 프로젝트 타입스크립트 악시오스 인터셉터 에러핸들링 드가자잇 AxiosInstance import { config } from '@.. 2025. 3. 30. [React] PWA를 통한 웹앱 만들기 React 웹앱 만들기 다음과 같은 명령어로 기존 프로젝트에 pwa 다운로드npm install vite-plugin-pwa --save--dev 그리고 vite.config.ts 파일 수정VitePWA 설정 추가import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import tailwindcss from '@tailwindcss/vite';import { VitePWA } from 'vite-plugin-pwa';// https://vite.dev/config/export default defineConfig({ plugins: [ react(), tailwindcss(), VitePWA({ .. 2025. 3. 21. [NextJS] 반응형 디자인을 해보자!! - Grid편 (ft. tailwind CSS) 서론 여태까지 프로젝트에서 데스크탑 화면만 구성해봤지만, 사실 반응형 디자인은 어렵지 않다.tailwind css나 mui 등을 사용할 때, 반응형 디자인을 쉽게 할 수 있게 지원해주기 때문에 그렇게 어렵진 않다. 이번엔 grid를 사용해서 반응형 디자인을 할건데, tailwind css를 사용해 보자. 계획먼저, tailwind css에서 반응형 디자인은 어떻게 하는지 찾아보자. sm, md, lg 등을 추가하는 것으로 반응형 디자인을 간단하게 설계할 수 있는데, 보통 width 그럼 이제 Grid로 어떻게 할까? 먼저 Grid를 알아보자. 가로를 기준으로 Grid Item들을 배치할 거면, grid-templates-columns 속성을 활용하면 된다.간단하게 classname에 gird-cols-$.. 2025. 2. 17. [NextJS] 컴포넌트 재사용성을 높이자!! (ft. tailwind CSS) 서론 {/* 타이틀 */} 배고프다 14,000원 {/* 정가 */} 20,000원 35% 테일윈드 CSS를 사용하여 작업한 컴포넌트인데, 이 컴포넌트에서 반복이 너무 많고, 최대한 줄일 부분이 보여서 재사용성을 높여보자! 기준 정하기 먼저, 할인된 가격과 정가, 그리고 할인률. 이 세 가지의 기준으로 나눌 수 있으니, 조건부 스타일링으.. 2025. 2. 17. [Sejong Reuse Hub] 2024/06 당시 작업했던 결과물 Home 페이지 네비게이션 바게시글:게시판 이동글쓰기 : 게시글 작성Map : 재활용 수거함 & 게시글 위치 확인Map 페이지페이지의 왼쪽 버튼을 클릭하면, 폐건전지 수거함, 폐형광등 수거함, 의류 수거함 등의 위치를 지도로 표시해 줍니다.교환, 거래 등이 이루어지는 게시글의 위치를 확인할 수 있습니다.마커 클릭 시, 게시글의 내용을 확인 할 수 있습니다.게시판 페이지게시판: 게시글을 카드 형식으로 확인 할 수 있습니다.게시글: 제목,내용,위치를 등록하여 제품을 교환 및 거래 할 수 있습니다.단일 게시글 확인: 게시글의 내용을 확인할 수 있으며, 댓글을 통해 제품 교환 및 거래를 신청 할 수 있습니다.Home 페이지 2025. 1. 10. 이전 1 2 3 4 5 다음