전체 글

진행 중인 프로젝트에서 useInfiniteQuery 훅과 useInview훅을 이용해서 무한스크롤을 간단하게 구현했다.const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } = useInfiniteQuery({ queryKey: ['projectList'], queryFn: ({ pageParam }) => getProjectList({ pageStart: pageParam, size: SIZE_PER_PAGE }), initialPageParam: 0, getNextPageParam: (lastPage, allPages) => { const nextPage ..

"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 베이스 템플..

지난 수요일 구름에서 프론트엔드 테스팅과 설계라는 주제로 COMMIT이 열려 다녀왔다.  프로젝트를 몇 번 참여하면서 백엔드 테스트 코드의 중요성은 익히 들어왔고 백엔드에서 테스트를 하는 것을 흔히 봤었는데 프론트엔드에서 테스트 코드를 작성하는 것은 잘 보지 못했다. 프론트엔드에서 비교적 테스트 코드를 잘 적용하지 않는 이유가 있는지 그리고 프론트엔드 테스트는 어떻게 진행하는지 궁금증이 생겨 프론트엔드 테스팅 툴에 대해 조금 공부를 해보고 있었는데, 마침 구름에서 관련 주제로 컨퍼런스가 열렸고 운 좋게 당첨이 되었다!   이번 COMMIT은 프론트엔드에서 테스트를 해야 하는 이유와 테스트를 어떻게 해야 하는지를 중점으로 진행되었고 테스트를 통한 소프트웨어 설계에 대해서도 이야기해 주셨다. 흥미로운 내용이..

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

TCP(Transmission Control Protocol), UDP(User Datagram Protocol) TCP, UDP는 네트워크의 계층들 중 데이터의 전달을 담당하는 전송 계층에서 사용하는 프로토콜이다. 왜 알아야 할까? 데이터의 소실방지, 순서보장과 같은 웹 어플리케이션의 신뢰성, 성능 개선을 하는 중요한 역할을 한다. HTTP3.0에 도입된 QUIC의 배경이다. 헤더비교 TCP Header 정보 헤더 정보들 중 플래그가 TCP의 특징과 관련이 있어 간단하게 설명하고 넘어가려고 한다. FLAG 역할 SYN 연결 설정을 요구할때 보내는 플래그로 TCP 접속시에 가장 먼저 보내는 패킷이다. ACK 최초의 SYN 패킷 이후에 전송되는 모든 패킷에 설정되는 플래그로, 상대방한테 패킷을 잘 받았다고..