Wordle-Clone-Project

오늘은 내 첫 개인 토이 프로젝트인 Wordle Clone Project를 시작한 날이다. 군대에서 처음 Wordle을 접했는데 생각보다 재밌었다. 원래 숫자야구 게임을 워낙 좋아했던 지라 진입장벽 없이 시도할 수 있었다. 전역한 지 한 달이 다 되어 가는데 아직까지도

오늘은 10월 16일 2일차이다.키보드 눌렀을 시 각 칸에 차례대로 해당하는 문자가 입력되는 기능 구현디자인 2차 작업먼저 컴포넌트들 정리를 좀 했다. Keyboard, KeyLine, Key로 구성되어 있던 키보드 부분을 KeyLine을 KeyBoard에 병합함으로써

오늘은 10월 17일 3일차이다.백스페이스 기능 구현정답 여부 판단 로직 구현백스페이스 구현은 어렵지 않았다. 현재 관리하고 있는 word 상태를 불변성을 유지하면서 맨 뒤에 있는 글자만 짤라주면 되었다.우선 Wordle에서는 위치와 문자 모두 맞으면 배경색을 초록색,

오늘은 10월 18일 4일차이다.색칠된 단어들에 따라 키보드에도 색칠하기문자 색들을 관리할 수 있는 객체를 하나 만들어서 props를 통해 Key 컴포넌트까지 전달, 문자에 따라 저장되어 있는 색들을 렌더링할 수 있도록 구성했다.letterCorrectCounts는 정

오늘은 10월 19일 5일차이다.애니메이션 구현word 상태의 textColor, bgColor 대신 state 속성 추가애니메이션은 완성하지 못했다. CSS에 대한 지식 부족때문에 그런 것 같다. 그래서 내일 할 예정이고, word 상태가 원래는 text, textC

오늘은 10월 20일 6일차이다. 목표 애니메이션 구현 진행 추가해야할 애니메이션은 3가지이다. ENTER를 눌렀을 시 문자판이 차례로 뒤집히면서 색 변환 문자를 키보드로 입력할 때 튀는 느낌 정답일 시 단어 파도 타기 1번은 rotateX를 쓰면 될 것 같았지만

오늘은 10월 21일 7일차이다.팝업 구현시작하기 전에 모달 윈도우에 대해 찾아봤다.우선은 MainPage에서 className을 modal로 하는 div와 이것을 부모로 하는, className이 modal-body인 div를 선언하여 구성했다. 디자인은 기존 Wor

오늘은 10월 23일 9일차이다.몇 번만에 맞췄는지에 따라 특정 단어 렌더링문자 수가 부족한데 ENTER를 눌렀을 시 애니메이션 및 알림창 추가우선 두 번째 목표부터 진행했다. 문자 수가 부족하다는 것을 Board 컴포넌트에서 판단하고 하위 컴포넌트로 알려야 하는데,

오늘은 10월 24일 10일차이다.서버 기초 작업서버는 Node.js를 기반으로 express를 활용하여 구축할 것이다. 이를 위해서 프로젝트 시작 전에 React와 더불어 Node.js도 공부를 했었다. 그래서 일단은 오늘은 가장 기초적인 부분만 만들었다. packa

오늘은 10월 25일 11일차이다. 목표 서버에 정답 저장 후 프론트에서 정답 불러오기 dictonary API 활용하여 존재하지 않는 단어 입력 시 알림 기능 구현 진행 먼저 서버에 적절하게 라우터를 구성하고, 프론트에서 axios를 통해 데이터를 보내거나 받아오

오늘은 10월 27일 13일차이다.데이터베이스 구성데이터베이스를 통해 단어 존재 여부 검증정답 단어 랜덤 생성우선은 5글자 단어들을 모두 뽑아냈다. 원래는 내가 사용했던 dictionary API에 요청을 해 하나하나 검증하려고 했지만 시간이 너무 오래 걸리고 API

오늘은 10월 28일 14일차이다.쿠키와 세션을 이용하여 한 번 입력한 답은 새로고침해도 똑같이 유지우선은 express-session이 미들웨어에 들어가 있기 때문에 따로 구현은 하지 않았다. 하지만 개념에 대해 확실히 짚고 넘어갈 필요가 있다. 우선은 따로 사용자를

오늘은 10월 29일 15일차이다./correct 대신 다른 이름으로 수정코드 정리프론트에 아이콘 삽입오늘은 특별히 많이 한 것은 없었다. 세션 데이터베이스 관련 부분은 아직 사용자들을 식별할 수단을 만들어 놓지 않아서 다음 프로젝트인 Wordle Maker에서 진행하

오늘은 10월 30일 16일차이다.프론트엔드와 백엔드 합치기favicon과 meta 태그 수정합치는 것은 간단했다. 먼저 React 프로젝트를 빌드해주고, 빌드하고 나면 build 폴더가 생기는데, 그것을 node.js 서버에 연결해주면 되었다. express.stat

드디어 첫 개인 프로젝트인 Wordle Clone Project를 마무리짓게 되었다.2022/10/15 ~ 2022/10/30 (16일)하루에 적으면 2~3시간, 많으면 3~4시간Wordle 인터페이스, 로직서버단어 데이터베이스modal 창특정 시간마다 정답 단어 초기