우당탕탕 개발일지

내 프로젝트의 경우, 개발 환경은 다음과 같다.⚙️ React + Typescript + npm + Tailwind Tailwind를 처음 사용해보는 터라 설치부터 난관이었다. 프로젝트 초기 세팅Tailwind와 PostCSS를 개발 의존성으로 추가한다.npm install -D tailwindcss postcssnpm tailwindcss init -p 이 명령을 실행하면 두 파일이 생성되게 된다. 📁 tailwind.config.js📁 postcss.config.js [ tailwind.config.js ]/** @type {import('tailwindcss').Config} */export default { content: ["./src/**/*.{js,jsx,ts,tsx}"], them..

Axios 인스턴스 request를 보낼 때 공통으로 사용하는 주소나 헤더를 axios 인스턴스로 생성한다. import Axios from "axios"; import { BASE_URL } from "../axios.constant"; export const axiosInstance = Axios.create({ baseURL: BASE_URL, timeout: 1000, }); 예를 들어, 401(Unauthorized) 에러가 서버로부터 들어오면 토큰을 갱신해준 후 재요청을 보내는 과정을 한번에 처리함으로써 중복 코드를 제거하고 유지보수성을 향상시킬 수 있다. [ 참고 ] * 절대경로 설정 프로젝트 개발을 하다 보면 여기저기서 서로 다른 경로의 파일들을 불러와야 할 때가 많은데, 상대 경로를 사용..

카카오 지도 API는 무료로 제공되고 있으며, 사용을 위해서는 아래와 같이 키 발급을 받아야 한다. [ 참조 : https://apis.map.kakao.com/web/guide/ ] 1. 카카오 개발자사이트 (https://developers.kakao.com) 접속 2. 개발자 등록 및 앱 생성 3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록 4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080) 5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다. 6. 앱을 실행합니다. API 키 저장 .env 파일에 API_KEY를 저장한다. CRA로..

훅 계층 구조 훅 계층 구조는 다음과 같이 나눌 수 있다. 쿼리 훅 계층에서는 React Query를 직접 호출하고 사용하며, 쿼리 키를 사용할 수 없다. queryClient 객체를 사용하는 곳은 이 곳 밖에 없다. 비즈니스 로직 훅 계층에서는 쿼리 훅 계층으로부터 반환되는 값으로 작성되는 비즈니스 로직들이 포함되는 영역이다. 쿼리 훅 계층으로부터 remote data 혹은 mutation 객체를 받아 컴포넌트에게 비즈니스 로직을 전달하는 역할을 수행한다. 컴포넌트 계층에서는 비즈니스 로직 훅 계층으로부터 비즈니스 로직을 전달받아 핸들러 코드를 만들어 컴포넌트에서 사용된다. useMutation 서버에 데이터를 업데이트하도록 서버에 네트워크 호출을 실시한다. useMutation은 mutate 함수를 ..

React Query란 React Query는 클라이언트에서 서버 데이터 캐시를 관리한다. 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용한다. React 코드에서 서버 데이터가 필요할 때 axios를 통해 서버로 바로 이동하지 않고 React Query 캐시를 요청한다. 데이터 관리뿐만 아니라 React Query는 서버 상태를 관리 한다. 서버에 대한 모든 쿼리의 로딩 및 오류 상태를 유지하기에 수동으로 관리할 필요가 없다. 데이터의 페이지 매김(Pagination)을 제공하며, 무한 스크롤이 가능하다. 캐시에서 해당 데이터를 가져오기 때문에 서버에 연결할 때까지 기다릴 필요가 없다. 서버에서 데이터 변이나 업데이트를 관리할 수 있다. ..

리액트를 사용하여 작업을 할 때 수많은 파일들과 기능, 컴포넌트를 관리하는 것은 정말 복잡한 일이다. 그렇기에 폴더 구조를 미리 정해두는 것은 코드의 유지 및 보수에 큰 도움이 된다. 최초 생성 디렉토리 node_modules CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더 package.json CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일 모든 프로젝트마다 package.json이 하나씩 존재 [ dependencies ] 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인이 가능. 실제 코드는 node.modules 폴더에 존재한다. [ scripts ] start : 프로젝트 development mode(개발 모드) 실행을 위한 명령어. ..

1. 리액트 리덕스 설치npm install redux react-redux 2. Provider로 감싸기 [ src/main.tsx ]import React from "react";import ReactDOM from "react-dom/client";import App from "./App";import { legacy_createStore } from "redux";import { Provider } from "react-redux";import rootReducer from "./redux/rootReducer";const store = legacy_createStore(rootReducer);ReactDOM.createRoot(document.getElementById("root") as HTM..

리액트는 사용자 인터페이스를 구축하기 위한 JS 라이브러리이다. 리액트에서 컴포넌트(Component)는 UI를 재사용 가능한 작은 단위로 분리하는 방법을 제공한다. 컴포넌트는 독립적으로 작동하며, 특정 기능을 수행하거나 화면의 특정 부분을 표현하는 역할을 한다. 컴포넌트 역할 UI 요소의 표현 HTML 요소를 렌더링하거나, 다른 리액트 컴포넌트를 조합하여 UI를 구성할 수 있다. 상태 관리 컴포넌트는 자체적으로 상태(state)를 가질 수 있다. 컴포넌트의 상태가 변경되면 리액트는 자동으로 UI를 갱신하여 변경된 상태를 반영한다. 이벤트 처리 컴포넌트는 사용자의 동작에 대한 이벤트를 처리할 수 있다. 재사용성 컴포넌트는 독립적으로 존재하며, 다른 컴포넌트와 조합하여 재사용할 수 있다. 이는 코드의 재사..