회고 서비스 레이어는 사용자가 데이터를 직접 입력하거나 선택하는 플로우가 대부분이라 퍼널 형식의 UI/UX가 많아요. 대표적으로 스페이스 생성, 회고 생성, 회고 작성의 단계에서 퍼널이 사용되는데, 팀원들 모두 퍼널을 어떻게 구현할지에 대해 고민이 많았어요. 저는 회고 생성 플로우를 구현했는데, 개인적으로 처음 회고 생성 플로우를 개발할 때가 레이어를 개발하면서 가장 많은 고민을 했던 시기가 아닌가 생각이 듭니다. 레이어의 회고 생성은 평탄한 단계들을 순차적으로 진행하는 것이 아니라, 한 뎁스 더 들어가서 퍼널 안의 퍼널이 또 존재하는 형태예요. 이런 복잡한 플로우때문에 코드 구조를 설계하며 많은 고민을 거쳤는데, 우선 기본적인 퍼널을 어떻게 훅의 형태로 정리하고 사용하였는지를 풀어보겠습니다.퍼널 설계를..

개발을 먼저 진행했던 컴포넌트들에 디자인 시스템이 새롭게 도입되면서 이전보다 구체적인 요구사항들이 생겨났다.요구사항은 다음과 같다. 1. 최대 글자 수를 제한할 수 있어야 하며, 이를 넘길 때는 아예 타이핑을 막고, 아래에 유효성 위반 메시지를 띄워야 한다.2. 각종 유효성 패턴에 대해 위반 시 관련된 에러 메시지를 띄워야 한다. Input 컴포넌트를 만들고 다듬은 과정은 다음과 같다. 1. 가장 기본적으로 작동하는 Input을 만들자. 우선 사용자가 입력할 때마다 value가 정상적으로 바뀌어야 한다.이를 통해 최종적으로 입력한 값을 개발자가 읽을 수 있어야 한다.가장 단순하게 useState를 통해 input 태그에 전달할 value와 change 이벤트 핸들러에 setState함수를 전달한다.use..

지난 포스팅에서 useTransition 훅 사용기에 대해 다루어보았다. React의 useTransition으로 UI block 현상 해결하기네일 웹 쇼핑몰을 개발하면서, 보다 좋은 사용자 환경을 위해 쓸 수 있는 훅을 발견했다.useTransition 훅으로, 이전에 React 공식문서를 둘러보다가 관심있게 봤던 훅인데,마침 제품 상세 페이지에서minheedg.tistory.comuseTransition 훅은 UI를 막지 않고 새로운 state 업데이트를 우선적으로 가능하게 한다.즉, 현재 렌더링 작업보다 우선순위가 높은 렌더링 작업이 발생하면(useTransition 훅이 반환하는 startTransition 함수 내에서 상태 업데이트가 발생하면) 기존 렌더링은 폐기하고 새로운 state 업데이트로..

네일 웹 쇼핑몰을 개발하면서, 보다 좋은 사용자 환경을 위해 쓸 수 있는 훅을 발견했다.useTransition 훅으로, 이전에 React 공식문서를 둘러보다가 관심있게 봤던 훅인데,마침 제품 상세 페이지에서 탭을 개발하면서 적용해볼 수 있게 되었다. (리액트가 어떻게 useTransition을 통해 기존 렌더링을 중단하고 파기할 수 있는지 그 원리에 대한 내용은 다음 포스팅에 작성하였다.) React 18에서 도입된 동시성 렌더링 (Concurrent Rendering)지난 포스팅에서 useTransition 훅 사용기에 대해 다루어보았다.useTransition 훅은 UI를 막지 않고 새로운 state 업데이트를 우선적으로 가능하게 한다.즉, 현재 렌더링 작업보다 우선순위가 높은 렌더링minheedg..

🍯 꿀매포청천 🍯 프로젝트가 끝이 났다! 기획부터 약 2주 반 정도의 기간동안 빠르게 완성시켰는데, 이 기간이 통째로 일주일처럼 느껴질 정도로 빠르게 지나간 것 같다. (한이음 공모전 기간이랑도 겹쳐서 막판에는 잠을 거의 포기..) 맨 처음 이 프로젝트를 시작할 때 팀원들과 각자의 개인 목표를 얘기했었다. 이전까지 진행했던 프로젝트에서 늘 느꼈던 아쉬움이 있었는데, 기획 단계에서는 늘 적극적인 논의들이 오고 갔지만, 막상 개발을 시작하면 FE 개발자끼리는 약간의 개인플레이가 있지 않았나 싶었다. 물론 알아서 이미 다른 팀원 분이 만들어 둔 컴포넌트를 재사용하기도 하고, 에러가 나는 부분이 있으면 함께 공유도 하고 했지만, 좀 더 체계적으로 컴포넌트를 관리하면 개발 효율성을 높이고 코드도 깔끔하게 관리할 ..

스터디룸 예약 사이트 프로젝트를 EC2 인스턴스에 배포해보았다. 매번 vercel같은 배포 서비스를 사용하다가 처음으로 서버에 직접 배포를 해봤는데, 백엔드 팀원분의 도움을 받아 성공적으로 배포를 마쳤다. 서버는 개발서버와 운영서버 두 개를 구성하였고, 개발서버에서는 develop브랜치를, 운영서버에서는 main 브랜치를 배포했다. EC2 인스턴스를 생성하고 nginx를 웹서버로 사용하여 React 프로젝트를 배포하는 과정을 정리해보고자 한다. (여기서 웹서버 (Web Server)란, 클라이언트로부터 http 요청을 받아 정적인 파일을 제공해주는 역할을 하는 서버이다. 나의 경우 이 응답을 제공하는 웹서버를 Nginx로 사용했다. 즉 Nginx가 EC2 서버에 올려놓은 나의 웹 애플리케이션 빌드 파일을..