히치키치

[INTRO] 문제의 시작: 마이페이지의 딜레마기존 CSR 방식으로 마이페이지를 개발하면서 마주한 다음의 문제점들페이지 로드 시 로딩 스피너가 보이는 깜빡임 현상토큰 검증과 사용자 데이터 fetching이 순차적으로 발생하는 성능 이슈새로고침 시마다 반복되는 불필요한 API 호출검색 엔진이 인덱싱할 수 있는 의미 있는 콘텐츠 부재핵심 아이디어: 서버에서 미리 준비하고, 클라이언트에서 매끄럽게 이어받자!설계의 출발점은 명확한 역할 분담이었다. "서버에서 할 수 있는 일은 서버에서, 클라이언트에서 해야 할 일은 클라이언트에서"라는 원칙을 바탕으로, 각 계층의 책임을 구분하고 역할에 집중할 수 있는 구조를 고민했다. 설계 원칙 1: 서버와 클라이언트의 명확한 역할 분담서버의 역할 | 페이지 진입 전 준비인증 ..

⭐ Tailwind + PostCSS와 Rollup.js 통합- Rollup는 PostCSS 플러그인를 통해 Tailwind CSS 스타일을 처리하고 최적화하고, CSS 파일을 번들링함. - 그 결과로 dist/index.css 파일에 Tailwind CSS로 작성된 스타일을 번들에 포함시킬 수 있음. - 이를 통해 다른 프로젝트에서 해당 라이브러리 사용 시 설정한 tailwind 스타일링 사용 가능함  ⭐ 왜 rollup 사용하였는가?답변 ) UI 라이브러리 배포 프로젝트의 요구사항과 Rollup의 특성이 잘 맞았음근거 )1. UI 라이브러리 배포라는 단일 목적에 적합- Webpack은 복잡한 애플리케이션 번들링에 강점이 있지만, 라이브러리 번들링에는 과도한 설정이 필요할 수도 있음- Rollup은 불..

이 글은 cognisle version 2 카드 뒤집기 게임 개발 중 리액트 state 지옥을 개선한 여정이 담긴 글이다. 시연 모습: 기억력 테스트 (4x4 카드 뒤집기 게임) 시작로딩짝 맞추기 성공짝 맞추기 실패게임 종료 후 결과 전환게임 종료 안내게임 결과 발표 version 1의 시연 모습으로 사실 30명 사용자가 게임 플레이 하면서 이거 왜이래요..? 문의가 들어왔거나 생각지도 못한 side-effect가 발생한 적은 없다. 그러나? 발생한 케이스가 없었던 거지.. 발생할 가능성이 없는 것은 아니잖냐.... 개발하면서 조금만 useState 설계나 useEffect 의존성을 바꾸면 전혀 생각지도 않은 작동이 발생해서 당황해서 다시 원래대로 돌려놓기!식의 돌려막기 하기도 했었다. 기존 로직의 커스..

다음은 Cognisle에서 사용되는 다양한 모달의 형태이다.  [1] 서비스 및 요구 사항 분석 모달 컴포넌트의 관리와 관련되어 필요한 기능을 다음과 같다.1. 5초가 지나면, 자동으로 꺼짐2. 닫힘 버튼이 있을 때, 닫힘 버튼을 누르면 꺼짐3. 모달 밖의 뒷 영역을 누르면, 꺼짐→ 모달 생성과 열고 닫음 제어 모달 컴포넌트의 디자인과 관련되어 필요한 기능을 다음과 같다.1. 뒷 배경색 직접 지정 또는 투명 가능해야 함2. 화면의 가장 가운데 위치해야 함3. 내용 및 컴포넌트에 따라 높이와 너비가 다르다→ 모달 공통 컴포넌트의 기본 레이아웃 및 스타일  [2] 제어 관련 로직 및 구조 설계 모달의 생성과 열고 닫음을 어떻게 제어할 것인가?1. React Portal을 사용해 생성함2. Zustand의 상..