히치키치

이 글은 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..

1. nextjs 프로젝트 세팅  2. yarn 설치 2-1. yarn 버전 세팅 2-2. nodeLinker 연결 2-3. yarn 설치 2-4. TS 경로 잡아주기 2-5. 아무 TS 파일 들어가서 Allow 해주기  3. gitignore에 yarn 추가# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.# dependencies/node_modules/.pnp.pnp.js.yarn/install-state.gz# testing/coverage# next.js/.next//out/# production/build# misc.DS_Store*.pem# debugnpm-debug.log*yarn-debu..