히치키치

⭐ 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의 상..

1. 폴더 단위 작업 내용1-1. styles 폴더 colors.ts : 필요한 컬러 정의 및 변수명 설정globalStyles.ts : 스타일 리셋 및 각종 스타일 변수명 적용 1-2. public/fonts 폴더YdestreetB.woff : 사용하는 커스텀 폰트 파일YdestreetL.woff : 사용하는 커스텀 폰트 파일style.css : font-face 정의 1-3. src/pages/_app.tsx 파일해당 파일에 폰트 적용 및 전역 스타일 적용 2. 세부 파일 작성 내용2-1. styles/colors.ts : 컬러 정의import { css } from '@emotion/react'export const colorPalette = css` :root { --color-yellow..