Today I Learned

6개월간의 코드잇 스프린트 프론트엔드 부트캠프 1기가 끝났다. 지난주 토요일에 수료식을 해서 아직 정리할 것들이 많고 프로젝트 회고도 정리해야 하지만 간단히 그간의 과정을 짧게 정리해보려고 한다. 먼저 주차별 커리큘럼을 정리해보았다. 웹퍼블리싱 / HTML / CSS CSS / Unix / Git 웹퍼블리싱 / 자바스크립트 인터랙티브 자바스크립트 모던 자바스크립트 자바스크립트 웹 개발 기본기 리액트 기초 리액트 / Styled-Components CSS / 웹 개발 / 리액트 1차 프로젝트(2주) 리액트 / 타입스크립트 Next.js Next.js API 만들기 유저 기능 원리 2차 프로젝트(3주) AWS로 Next.js 배포하기 GA / GTM / TanStack React-Query TanStack ..

마지막 프로젝트는 백엔드 개발자 2분, 디자이너 1분과의 협업 프로젝트였다. 서비스도 직접 제로베이스에서 논의하고 기획하여 만들어서 정말 애정이 많이 가는 프로젝트였고 6주의 프로젝트 기간이 끝난 후인 지금은 또 이어서 팀원들과 서비스 고도화를 진행하고 있다. 🐾 어떤 서비스? 팀원들 중 반려동물을 키우는 분들도 있고, 반려동물 시장에 관심이 많은 사람들이 대부분이라 비교적 주제는 쉽게 정할 수 있었다. 먼저 기존 펫 서비스 시장의 아쉬운 점들을 분석했고 이를 해소해줄 서비스를 기획하게 되었다. 그렇게 고안해낸 서비스는 바로, 가족 및 친구들과 공동으로 기록할 수 있는 반려동물 육아일기 & 건강수첩 기록 서비스이다. 초반 6주 기간의 MVP 구현 범위 내에는 SNS 기능이 없지만, 현재 추가 기능 고도화..

서버 상태 원격 저장 : 클라이언트가 저장 방법이나 내용을 결정하지 않는다. 비동기식 : 클라이언트가 서버로부터 데이터를 수신하는데 시간이 다소 걸린다. 많은 사용자가 소유 : 여러 사용자가 데이터를 변경할 수 있다. 웹사이트에 액세스 하면 서버 상태가 서버에 저장되고 브라우저에 지속적으로 전달된다. 브라우저 세션 간에 사용자 프로필, 댓글 및 분석 정보를 유지하기 위해 세부 정보를 저장하는데 사용된다. 많은 클라이언트가 동일한 서버에 연결하여 서버 상태를 변경할 수 있으므로 서버 상태가 클라이언트에 저장되는 방식을 분석하는 것이 중요하다. 서버 상태는 원격으로 유지되고 사용자에 의해 변경될 수 있기 때문에 신중하게 처리해야 한다. 클라이언트 상태 임시성 : 브라우저를 닫으면 사라지며 일시적이다. 동기식..

시간이 참 빠르다. 벌써 두 번째 팀 프로젝트가 마무리 된게 1월 첫 째주였는데, 지금은 세 번째 팀 프로젝트 진행 중이고 벌써 1월이 다 끝나간다. 두 번째 프로젝트는 2주였던 첫 프로젝트에 비해 기간이 조금 더 긴 3주 정도의 프로젝트였고, 기존 기획안을 그대로 구현하기 보다 우리 팀 나름의 스타일과 유저 프렌들리한 접근 방식으로 변형했던 부분이 많아 생각보다 빠듯하게 완성시킨 프로젝트였다. 그만큼 애정도 높게 개발했고 만족도 높게 진행했던 것 같다. 🤓 어떤 서비스? 원래 주어진 기획안은 Taskify 라는 이름의 서비스였다. 트렐로나 노션의 칸반보드 같은 기능 중심의 할 일 관리 서비스이다. 대시보드를 만들어서 대시보드 구성원을 초대해 관리하고, 대시보드 내에서 할 일을 카드로 만들어 TO DO,..

리액트 쿼리? 리액트 쿼리는 리액트 애플리케이션에서 비동기 상태를 관리하는 라이브러리이다. TanStack이라는 프로젝트에서 만들어진 오픈소스로, 강력한 비동기 상태 관리를 위한 패키지라고 스스로를 소개하고 있다. 리액트 쿼리를 사용하면 API 요청 상태를 더 간편하게 조회하고 응답 결과를 캐싱하고 에러에 대응할 수 있다. 리액트 쿼리는 데이터의 상태를 추적하고, 렌더링을 최적화하는 기능을 제공한다. 리액트 쿼리의 동기 리액트 애플리케이션을 개발하며 데이터를 가져오고 업데이트 하는 등 복잡한 상태 관리가 필요할 때가 많다. 사용자가 특정 데이터를 수정/삭제 요청을 했을때, 언제 유저의 데이터를 업데이트 해줘야 할까? 하나의 화면의 여러 컴포넌트에서 같은 API 요청이 사용되는데, 1번만 요청하고 결과를 ..

React에서 상태(State)란, 컴포넌트 내에 관리되는 변수 즉, 변하는 데이터를 의미한다. 서비스의 규모가 커질수록 관리해야 할 상태(State)가 많아지고 Prop Drilling이라는 현상이 발생된다. Prop Drilling이란, 하위 컴포넌트로 데이터를 전달하는 과정에서 컴포넌트의 트리 구조 상 중간 과정에 있는 컴포넌트를 거쳐 프로퍼티를 내려주는 것을 의미한다. 중간 과정에 있는 컴포넌트는 전달을 위해 불필요하게 복잡성을 증대시키거나, 프로퍼티 누락 및 변경 복잡성 등 불편함을 야기한다. 이를 체계적이고 효율적으로 관리하기 위해 상태 관리 라이브러리를 사용한다. Redux, MobX, Zustand, Recoil, Jotai 등 다양한 라이브러리가 존재하는데 상태 관리 패턴은 크게 3가지로..