React

들어가며프로젝트를 진행하면서 리스트 순서를 바꾸는 기능이 필요했다. 리스트 순서를 변경하는 라이브러리는 react-beautiful-dnd 와 react-dnd 두 가지가 있었다.처음에는 react-beautiful-dnd 를 사용해서 테스트를 해보다가 곧 종료된다는 이야기가 있어서, 주말간에 react-dnd 를 새로 설치해 테스트 해보았다!react-beautiful-dnd 를 적용했을 때 애니메이션이 미리 정의되어 있어서 좀 더 유연한 느낌이지만 용량이 react-dnd 보다 크다.반면에 react-dnd 는 hover 중일 때 순서가 변경되는 애니메이션이나 위치 변경을 직접 정의해야해 처음 적용시킬 때 살짝 어려운 편이다. 설치하기# react-dnd를 사용하기 위해 필요한 라이브러리 instal..

들어가며, 회사에서 디자인 시안에 따라 개발을 하던 중, 탭 메뉴를 눌렀을 때 background-image를 다르게 보여줘야 했다. 컴포넌트에 배경이미지를 적용하면 컴포넌트 내, 즉 컴포넌트 크기만큼만 사용할 수 있기 때문에 전체너비를 다 차지하지 못한다. 어떻게 해야할 지 고민을 하던 와중, 탭을 눌렀을 때 변하는 상태에 따라서 배경이미지 css를 조절하면 어떨까라는 생각에 도달했다. 본문 먼저 가장 부모 컴포넌트를 만들어준다. 가장 바깥 부모에서 상태관리를 해준 이유는 가장 바깥 컴포넌트에 배경이미지를 적용해야하기 때문이다. 위에서 말했듯이, 전체 너비에 배경이미지를 적용하기 위해선 만들어낸 컴포넌트가 아닌 가장 바깥 컴포넌트에 적용한다. // App.jsx import React, { useSta..

들어가며, react-responsive 라이브러리를 사용해 반응형 웹을 만들며 여러가지 테스트를 해봤다. 타입스크립트를 사용했기 때문에 타입 지정을 해줘야 했다. 타입을 지정하는 방법 중에 interface와 type이 있는데 두 가지의 정확한 차이점을 알고 정리해놓으려고 한다. 본론 function Pc({ children }) { const isPc = useMediaQuery({ query: '(min-width: 768px)', }); return {isPc && children}; } react-responsive 라이브러리 내 useMediaQuery를 사용했다. PC 버전과 Mobile 버전일 때를 나눠 만드려고 했으며, children을 통해 값을 받아오도록 코드를 짰다. return {..

들어가며, 리액트로 반응형 웹을 만들기 위해 프로젝트 초기설정을 하고 있던 와중, 정보가 너무나 많아서 한 번에 정리하고 나중에 다시 보기 위해 글을 써서 정리해두려고 한다. 예전에 Vite로 스캐폴딩하는 법은 써놨으니 Vite로 설정하는 방법은 맨 아래 추가하겠다. 본론 일단 난 CRA를 통해 프로젝트를 만들었고 여기에 typescript 와 eslint, prettier를 설치할 것이다. 1. CRA + typescript 설치하기 npx create-react-app --template typescript 이렇게 프로젝트를 만들어주면 루트에 tsconfig.json 파일이 생긴다. 이때, "baseUrl" : "./src" 코드를 추가해준다. 추가해주는 이유는 기본 절대 경로를 사전에 설정해 추후 ..

프로젝트를 하면서 폴더 구조를 전부 변경했다. 이런식으로 그냥 src안에 있었던 폴더들을 components 폴더를 만든 후 넣어줬다. 그리고 각 컴포넌트 폴더 안에 컴포넌트.tsx 파일과 index.ts 파일을 만들어 내보내주도록 만들었다. 이 과정을 하면서 원래 상대경로로 잡혀있던걸 절대경로로 바꿔주는 작업을 시도했다. 나는 webpack과 typescript를 사용했기 때문에 webpack.config.js 파일과 tsconfig.json 파일을 변경해야했다. webpack.config.js module.exports = { resolve: { alias: { "@": path.resolve(__dirname, "src"), }, extensions: [".ts", ".tsx", ".js", ".j..

Each child in a list should have a unique key prop. 처음엔 todoList를 리스트렌더링할 때 idx값을 key값으로 넘겨줬었다. 근데 배열의 원소 순서가 바뀌면 index값도 바뀌고 컴포넌트마다 고유해야 하는 key값도 바뀌기 때문에 지양해야 한다고 한다. 그래서 나는 idx 부분을 todo.id로 바꿨고 저런 오류가 발생했다. [초기 코드] {todoList.map((todo, idx) => ( ))} [수정 코드] {todoList.map((todo) => ( ))} 코드를 수정했을때 id값을 찾지 못하는 것 같았다. 이거때문에 3일이라는 시간이 소요됨.... 에러를 해결하는 방법을 엄청나게 찾아봤는데 해결방법이 2개가 있었다. 1. Key값을 정확하게 넣을..

개발 중에 만난 axios 401 에러.. 처음에는 서버가 잘못된건지 뭐가 잘못된건지 계속 헤맸다. 한 두시간 넘게 계속 헤맸다가 정말 어이없게 해결했다. 이 오류 해결에 도움을 준 내 친구에게 영광을 돌린다. 사실 이 문제는 같이 오류해결을 하려고 했던 친구가 먼저 이 오류를 마주했다. 함께 찾아보다 결국 해결하지 못했는데 이 친구는 선언했던 변수명과 응답해야하는 변수명이 달라서 오류를 뱉어낸 것이었다. (내가 준 코드 때문에 변수명이 달랐음) 그래서 나도 변수명이 문제인가했지만 그럴리가 없었다. 왜냐면 나는 계속 똑같은 코드를 써왔기 때문에.. 투두리스트를 만들고 axios를 이용해서 통신을 하는데 계속 오류가 발생했다. 나는 headers도 잘 넣었는데 왜 안될까..를 고민하던 와중 데이터를 보내는..

📖 서두 로그인 기능을 구현하려던 와중 회원가입 → 로그인을 하면 계속 로그인 상태를 유지하고 만약 token 값을 가지고 있지 않다면 다른 기능을 사용하지 못하도록 설정을 해야했다. 한 번 로그인을 했다면 계속 유지를 시켜야하므로(즉 로그인을 했다는 정보를 가지고 있어야 한다.) localStorage를 이용해서 로그인 정보를 유지할 수 있도록 token값을 저장해줘야 했다. 📝 localStorage localStorage는 자바스크립트의 Web Storage를 이용한 것이다. 웹 스토리지에는 localStorage와 sessionStorage 2종류가 있다. 두 가지의 차이점을 간단히 설명하자면, 데이터 저장이 어떤 범위로 계속 보존되어 있는지에 달려있다. localStorage는 어떤 세션에 들어..

ESLint 설정을 마쳤으니 마지막으로 Prettier를 설정해보자!! 일단 Prettier 및 ESLint + Prettier 구성 패키지를 설치해주자. npm i -D prettier eslint-config-prettier 그리고 .eslintrc.cjs 파일을 열어서 extends 배열 맨 마지막에 추가해준다. extends: [ // ... 'prettier', ], 그리고 .prettierrc.json 파일을 생성해준다. 그 안에 설정하고 싶은 내용을 작성해주면 된다. { // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a) arrowParens: 'always', // 닫는 괄호(>) 위치 설정 // ex: htmlWhitespaceSensitivity: 'css', br..

초기 환경설정에이어 이제 ESlint 설정을 해보려고 한다. 1. ESLint 구성 파일 ESlint 구성 파일을 npm 초기화 명령을 사용해 생성한다. npm init @eslint/config 그러면 파일구조에 .eslintrc.cjs 라는 파일이 생성된다. 2. ESLint 린팅 제외 파일 특정 파일 또는 디렉토리의 경우 린팅을 수행하지 않도록 ESlint에 지시할 수 있다. .eslintignore 파일을 생성하고 린팅(linting) 검사에서 제외할 디렉토리를 작성하자. .eslintignore build coverage dist 3. ESLint 플러그인 구성 ESLint가 제공하는 다양한 플러그인 중 React 개발과 관련된 항목 구성에 대해 살펴보자. 1) eslint-plugin-reac..