FE

"React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render." 최근에 리액트로 팀 프로젝트를 하면서 Invalid hook call 에러나 위와 같은 Eslint error를 종종 봤는데요.매번 아차차 하고 넘어갔던 에러이지만, 왜 훅이 렌더링 될 때마다 같은 순서를 유지해야 하는지 궁금해서 찾아보다가 좋은 참고 자료를 발견하고 이 글을 쓰게 되었습니다. 리액트 공식문서에는 훅의 규칙을 명시하고 있는데, 일단 훅이란 뭔지 간단히 설명해 볼게요. Hook 이란?함수 컴포넌트에서 상태와 생명주기 기능을 "연동"(hook)할 수 있게 해주는 특별한..

FSD 도입기올해 3월 초에 실 서비스를 목적으로 프로젝트를 하나 기획했다. 서비스를 장기 운영할 목적으로 기획했기 때문에 유지보수와 확장이 용이하도록 프로젝트를 설계해야겠다고 판단했다.계속 진행해 왔던 폴더 구조는 아래와 같이 화면 중심으로 설계를 했었다. 하지만 이 구조는 화면이 바뀔 경우 디펜던시가 많아 수정 작업이 많이 발생했고, 개발 도중 병합 충돌이 자주 발생하는 문제점도 있었다.따라서 기능을 중심으로 한 설계를 찾아보던 중 FSD(Feature Sliced Design)를 발견했다. FSD는 정형화된 구조가 있으며 객체지향프로그래밍의 개념을 프론트엔드에 적용해 볼 수 있는 설계였고 유지보수와 확장에도 좋은 설계라고 생각하여 도입하게 되었다. 하지만 개념이 너무 어렵고 당시에는 자료가 많지 않..

Vue3 + Vite + Typescript로 생성한 프로젝트에 Vue Router, Tailwind CSS, ESlint, Prettier를 적용해보자. 1. Vue Router 설정yarn add vue-router  router/index.ts 파일에 아래 코드를 작성한다.import { createRouter, createWebHistory } from 'vue-router';const router = createRouter({ history: createWebHistory(), routes: [ //경로 설정 { path: '/', name: 'main', component: //루트 경로에서 렌더링할 컴포넌트, children: [ /..

현재 사이드 프로젝트로 Chrome extension을 개발 중인데 React가 아닌 Vue를 사용하고 있다. Chrome extension 관련 프로젝트들을 조사하다가 Vue를 사용한 프로젝트가 드문드문 보였고 문득 '이번 프로젝트는 Vue를 한번 써볼까..?' 하는 호기심에 Vue에 대해 좀 더 알아보고 결정하게 되었다. 항상 프로젝트에 React만을 쓰다가 Vue를 도입하게 된 이유를 아래에서 설명하려고 한다. 먼저 vue를 조사하면서 React와는 다르다고 느꼈던 기술적인 특징들을 간단히 설명하면 아래와 같다. vue의 특징빠르고 효율적인 렌더링: React보다 작은 번들 크기를 가지고 있으며, 데이터가 변경될 때마다 이를 자동으로 감지하고 필요한 부분만 렌더링을 업데이트한다.HTML 베이스 템플..

❕❕리액트를 공부 중인 초보자의 코드입니다. 잘못되었거나 개선할 사항이 있다면 댓글 부탁드립니다. 진행 중인 프로젝트에서 댓글 CRUD를 구현하였다. 그 중 댓글을 수정하는 부분이 조금 까다로웠는데, 내가 구현하고자 했던 수정기능은 아래와 같다. 1. 수정버튼을 클릭하면 댓글 수정 박스가 나타난다. 2. 다시 수정버튼을 클릭하면 수정 박스가 사라지고 댓글 수정이 취소된다. 처음에는 단순히 댓글의 수정상태를 설정해서 댓글수정 박스가 보이도록 했는데, 그러면 모든 댓글의 수정상태가 통일되어서 수정 중인 댓글의 수정버튼이 아닌, 다른 댓글의 수정버튼을 눌러도 수정이 취소되는 오류가 발생했다. (왜냐하면, 서버에서 전체 댓글 데이터를 배열로 받아 map()으로 요소를 한 개씩 받아서 동일한 작업을 수행하도록 구..

로그인을 성공하면 서버에서 accesstoken과 refreshtoken을 응답 헤더로 넘겨준다.프론트에서는 이 토큰들을 recoilPersist를 통해 sessionStorage에 저장해 사용자가 다른 페이지로 이동할때에도 토큰들을 사용하여 인증된 사용자 요청을 보낼 수 있도록 하였다.(recoilPersist를 이용하지 않고 저장하면, 페이지를 새로고침하거나 다른 페이지로 이동할때 저장한 토큰들이 다 날아가버린다.) 1.  토큰 상태 생성State폴더 안에 Atom.ts파일을 만들어서 관리하였다.persistAtom에 저장된 토큰들을 모두 sessionStorage에 저장한다.localStorage와 sessionStorage의 차이점은 페이지를 닫을 때 데이터들이 사라지는지의 여부이다. 진행 중인 ..

현재 진행중인 프로젝트에서 간단한 회원가입 양식을 Axios를 통해 서버로 POST요청을 보내보았다.프로젝트는 Styled-component와 Vite를 사용해 TypeScipt로 구현하고 있다. POST요청시에 발생했던 CORS에러를 클라이언트에서 처리하는 방식도 간단히 언급해보려고 한다.   먼저 기본적인 회원가입 데이터를 입력하는 양식을 아래 코드와 같이 작성하였다.// 회원가입 양식return( 이름 아이디 비밀번호 ..

useCallback보통 React 컴포넌트의 렌더링이 일어날 때, 함수형 컴포넌트 내부의 함수들은 매 렌더링 시 새롭게 생성된다. 이는 불필요한 자식 컴포넌트들의 재랜더링으로 이어질 수 있는데 useCallback은 이러한 문제를 해결하기 위해 사용된다. usecallback은 함수를 캐싱해서 재사용한다. 따라서 컴포넌트가 재실행 될때, 함수 내의 변수들이 초기화(새롭게 생성)되지 않는다.usecallback을 사용하면 함수 메모리의 주소가 객체에 할당된다. 컴포넌트가 렌더링될때 새로운 주소가 할당되는 것이 아니라 이전에 저장했던 주소가 계속 사용되는 것이다. useCallback(() => { }, []); : 기본적으로 콜백함수와 의존성배열을 인자로 받는다. const [category, setCa..