프론트엔드 관련24 [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. 국민체육진흥공단 공모전 결과물 결과는 아쉽게 수상을 못했다. 2024. 12. 13. 이전 1 2 3 4 다음
