생각하다 생각하다

오늘은 Prettier에 대해서 알아보고 ESLint와는 어떤 차이점이 있는지, 그리고 같이 사용함으로써 얻는 이점을 알아볼게요 🧐 Prettier란? Prettier도 ESLint와 마찬가지로 코드를 예쁘게 정리해주는 도구입니다. 하지만 ESLint와의 차이점은 Prettier는 코드 품질에는 신경을 쓰지 않는다는 것입니다. ESLint와의 차이점 ESLint는 컨벤션 규칙에 어긋나는 것이 있으면 오류로서 알려주지만 고쳐주지는 않습니다. 반면 Prettier는 수정까지 자동으로 이루어지기 때문에 편리합니다. 따라서 ESLint에 코드 포맷을 Prettier로 설정해주면 더 편리하게 사용할 수 있습니다. Prettier와 ESLint 통합하기 ESLint와 prettier를 통합하기 위해 패키지를 설치해..

오늘은! 코드를 조금 더 일관되고 예쁘게 작성하기 위한 도구의 사용법을 알아볼 겁니다. 더불어 그러한 기능들을 강제화 및 자동화하여 더 효율적으로 도구를 사용해보려고 합니다. ESLint Prettier ESLint를 배우기 전에 먼저 생각해보기. 린트(lint)가 뭘까요? 🧐 Lint란? 위의 사진처럼 보풀을 제거할 때 사용하는 도구를 린트(lint)라고 합니다. 이런 보풀같은 것들이 코드에도 존재하는데 그런 부수적인 먼지들을 제거하는 도구를 린트(lint) 혹은 린터(linter)라고 합니다. 대표적으로 JSLint, JSHint, ESLint가 있는데 오늘은 ESLint에 대해서 알아볼 겁니다. ⌨️ ESLint 의 기능 두 가지 ESLint는 노드 패키지로 제공되므로 npm 명령어를 사용하기 때문..

리덕스(Redux)란? 리덕스(Redux)는 JavaScript 애플리케이션에서 상태(state)를 관리하기 위한 도구입니다. 리덕스는 React와 함께 많이 사용되며, React의 상태 관리를 위한 라이브러리 중 하나입니다. 리덕스의 특징 애플리케이션의 상태를 단일 스토어(store)에 저장 store에서 상태를 변경하거나 조회할 수 있는 메서드를 제공 이를 통해 상태를 예측 가능하게 만듦 애플리케이션의 복잡도를 낮춤 디버깅과 테스팅을 용이하게 함 리덕스의 핵심 원칙은 상태(state)는 읽기 전용이며, 상태를 변경하는 것은 순수 함수(reducers)로만 가능하다는 겁니다. 이를 통해 상태 변경을 추적하고, 애플리케이션에서 일어나는 상태 변화를 예측할 수 있게 됩니다. 리덕스(Redux) 사용하기 리..

Cookie란? 쿠키(cookie)란 HTTP는 웹에서 이루어지는 모든 데이터를 주고받기 위한 서버-클라이언트 모델을 따르는 프로토콜이다. HTTP의 특징 중 하나로 "상태 비저장(stateless)"이 있는데, 이 특징은 세션과 같은 사용자 정보를 저장 또는 유지하지 않는다는 것이다. 쿠키는 이름-값 쌍의 형태의 정보를 문자열로 저장한다. Js-cookie는 쿠키를 처리하기 위한 단순하고 가벼운 JavaScript API이다. Js cookie 설치하기 $ npm i js-cookie js cookie 기본 사용법 쿠키 생성하기 Cookies.set('name', 'value') {7일 후에 만료되는} 쿠키 생성하기 Cookies.set('name', 'value', { expires: 7 }) {현재..

리액트에는 ContextAPI, Redux, MobX 등 전역으로 상태관리를 하기 위한 많은 선택지가 있다. Apollo Client도 그 중 하나의 선택지로 로컬에서 전역 상태관리를 하기위해 사용할 수 있다. Apollo Client란 Apollo Client는 GraphQL 기반의 상태 관리 라이브러리이다. 클라이언트 어플리케이션의 GraphQL과 데이터 교환을 돕는다. Apollo Client의 기능 1. graphQL API에서 데이터를 fetch해올 수 있다. 2. 어플리케이션에서 로컬로 상태 관리를 할 수 있게 해준다. 즉, 서버에 있는 데이터를 가지고 오고, 로컬에 있는 데이터를 관리할 수 있게 해준다. 그리고 이 두 종류의 데이터를 동기화할 수 있게 한다는 것이 큰 장점이다. Apollo ..

React Hook Form 설치 & import하기 npm i react-hook-form import { useForm } from "react-hook-form" register 함수 사용하기 const {register} = useForm(); register는 form에 input을 등록(register)할 때 사용된다. react-hook-form은 페이지에 어떤 input이 있는지 모르기 때문에 현재 form에 어떤 input이 어디에 있는지 등에 대한 정보를 알려준다. 원래 register의 내용은 name, onBlur, onChange, ref 이다. register object의 property들을 추가하기 위해 '...' 연산자를 이용해 prop으로 넣는 것이다. 원래는 이런 느낌 ..

https://tanstack.com/query/latest/docs/react/devtools Devtools | TanStack Query Docs Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳 When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will like tanstack.com DevTools란? Query가 어떻게 작동하고 저장되는지 볼 수 있게 하는 툴이다..

axios 설치하기 $ npm i axios axios란? fetch를 하는 adapter라고 보면 된다. axios를 사용하면 await fetch, response, json 을 할 필요가 없어진다. import axios from "axios" const BASE_URL = "http://127.0.0.1:8000/api/v1" export async function getRooms() { const response = await axios.get(`${BASE_URL}/rooms/`); return response.data; } axios는 reactQuery로만 fetch했을 때 했던 await fetch, response, json 등의 동작을 내부적으로 하기 때문에 위 코드로 수정해줄 수 있..