Wordle-Maker-Project

오늘은 11월 1일 1일차이다.React 프로젝트 생성github 연동Wordle Clone Project에서 코드 가져오기오늘은 1일차이니 가볍게 진행해보았다. 먼저 yarn create react-app wordle-maker-frontend로 React 프로젝트를

오늘은 11월 2일 2일차이다.Wordle Maker 페이지 디자인개발환경을 맥으로 옮겼는데, 개발환경을 구축하느라 시간을 많이 썼다. 오늘은 간단하게 디자인만 진행했는데, 우선 기존에 6줄 있던 단어들을 1줄로 줄이고, 닉네임과 정답 단어를 입력받도록 했다. 먼저 닉

오늘은 11월 3일 3일차이다.SolverPage 구현SolverPage의 진행 과정은 다음과 같다.페이지 접속 시 닉네임 입력이후 Wordle 시작닉네임 입력은 MakerPage에서 따왔고, Wordle 시작은 Wordle Clone Project에서 따왔다. 그 사

오늘은 11월 4일 4일차이다.서버 기초 작업서버 기초 작업은 간단히 진행했다. 기본적인 미들웨어들을 설치해서 연결해주고, 단어들이 있는 mongoDB도 mongoose를 통해 연결해줬다. 라우터는 현재는 index, solve, make를 만들어놨고, 추후 더 추가할

오늘은 11월 5일 5일차이다.SQL 구성오늘은 시간이 없는 관계로 sequelize 패키지 설치 후 mySQL과 연결하고, 데이터베이스를 어떻게 만들지만 생각했다. sequelize, sequelize-cli, mysql2 패키지를 설치했고, express 서버와 연

오늘은 11월 6일 6일차이다.mySQL 테이블 구성책을 보면서, 자료를 찾으면서 진행했는데 에러가 계속 떠서 시간을 많이 잡아먹었다. 세세하게 구성해보자면makersidnicknameurlcreated_aturlsidurlcorrect_wordmaker(makers의

오늘은 11월 7일 7일차이다.sequelize 모델 구성API 구성먼저 sequelize를 mysql과 연동하기 위해 모델들을 구성했다. 그다음 maker 모델과 url 모델을 1대1로, url 모델과 solver 모델을 1대N으로 연결해줬다. API는 오늘은 일단

오늘은 11월 8일 8일차이다.solverPage API 구성makerPage에서 url 렌더링 요소 생성먼저, 프론트엔드 프로젝트에 SPA부터 적용했다. wordle 링크를 생성했을 때 그 링크로 접속 시 바로 페이지가 렌더링되야 되기 때문에 SPA 먼저 적용 후,

오늘은 11월 9일 9일차이다.정답 단어 설정 시 단어 존재여부 검증닉네임 중복 검증 손보기단어 존재 여부 검증은 간단했다. 이전에 solverPage에서 구현한 적이 있기 때문에 비슷하게 구현하면 되었다.makerPage의 한 부분이다. POST /make/exist

오늘은 11월 10일 10일차이다. 목표 MakerPage 세션 구현 진행 9일차에서 계획한 것처럼 페이지에 접속 시 세션을 조회하고, 없으면 닉네임 입력-정답 단어 입력-링크 렌더링 과정을 거치고, 있다면 서버로부터 정답 단어와 링크를 받아와 바로 렌더링한다.

오늘은 11월 11일 11일차이다.SolverPage 세션 구현오늘은 목표를 달성하진 못했고, 아직 남은 작업들이 좀 있다.오늘 한 것은 우선 세션을 적용하여 solver가 닉네임을 입력하는 순간 세션이 만들어져서 다시 그 페이지에 접속할 때는 닉네임 입력창을 건너뛰고

오늘은 11월 12일 12일차이다.SolverPage 세션 구현데이터베이스 구조를 갈아엎었다. 원래는 makers, urls, solvers로 나눠져있었는데, urls를 makers에 통합시키고, makers와 solvers 관계를 1대N으로 유지시켜주었다. 그리고 s

오늘은 11월 13일 13일차이다.LoadPage 구성우선 디자인은 간단하게 했다. 최대 4명의 solver들의 단어 목록을 한 페이지에서 볼 수 있다. 5번째 solver부터는 페이지를 넘겨 볼 수 있도록 구현할 예정이다.solver의 닉네임이 가장 위에 있고, 그

오늘은 11월 14일 14일차이다.4개 넘어가는 데이터들에 대해 페이지 구현먼저 pageIndex 상태를 정의해주고, 이 값에 따라 서버에서 받아온 solvers 배열을 slice 해주었다. 앞 뒤로 넘길 수 있는 버튼도 새로 만들었다.버튼에 적용되는 onClick 함

오늘은 11월 15일 15일차이다.LoadPage의 닉네임 입력 화면과 solvers 로드 화면 통합원래 애니메이션을 진행하려고 했으나 시간이 많이 부족하고, 아직 방식을 떠올리지 못해서 통합부터 진행했다.우선 submitNickname 상태를 만들어서 기본값으로 fa

오늘은 11월 16일 16일차이다.LoadPage 세션 구현세션은 MakerPage에서 이용하는 req.session.maker로 판별했다. LoadPage 접속 시 GET /load 요청을 보내는데, 세션이 없다면 'no-session'응답을 보내고, 닉네임 입력 창

오늘은 11월 17일 17일차이다.웹소켓 맛보기오늘은 내가 node.js를 공부했던 책에서 웹소켓 다룬 부분을 다시 훑어보고, 구현해보고, wordle maker에서 어떻게 웹소켓을 구성하여 구현할 지 고민해보았다.절차는 다음과 같다.1\. solver가 단어 혹은 문

오늘은 11월 18일 18일차이다.웹소켓 구현저번에 짰던 웹소켓 실시간 통신 절차를 좀 고쳤다. solver가 단어를 입력하면 POST /solve/:maker/add 요청을 서버에 보내 입력한 단어를 데이터베이스에 등록하게 되는데, 이때 등록 후 solvers 리스트

오늘은 11월 19일 19일차이다.문자 단위 웹소켓 구현 (1)먼저 기존에는 단어를 입력하고 enter 키를 누를 때마다 서버에 요청을 보내 데이터베이스에 저장했다. 그래서 18일차에서 실시간으로 단어들이 입력되는 모습을 볼 수 있었던 것이다. 문자 단위로 실시간으로

오늘은 11월 20일 20일차이다.문자 단위 웹소켓 구현(2)원래는 문자 단위로 DB에 저장하면서 구현했으나, 이럴 때는 단어를 완벽히 입력하지 않았을 때도 새로고침을 누르면 다음줄로 넘어가는 문제가 있었다. 그래서 지금은 방향을 틀어서 DB 저장은 단어 단위로 하고,

오늘은 11월 21일 21일차이다.문자 단위 웹소켓 구현(3)먼저 문자 단위 웹소켓을 구현을 하긴 했다. DB 저장은 단어 단위로 하고, 문자 단위로 입력할 때마다 웹소켓으로 정보를 보내서 렌더링하도록 했다. 이렇게 했을 때 문제점은 2명 이상이 문자를 입력할 때 lo

오늘은 11월 22일 22일차이다.문자 단위 웹소켓 구현(4)드디어 구현은 했는데, 아직 오류가 많아서 더 해야될 것 같다.방식은 다음과 같다.문자 입력 시마다 word상태 초기화, 이때 useEffect 사용해서 wordList도 초기화하여 렌더링새로고침했을 때는 서

오늘은 11월 23일 23일차이다.오류 해결드디어 가닥이 잡혔다. 어제 발생했던 오류는 array 메서드를 잘 못 써서 발생한 것이였다. 단어를 입력하면 나는 wordList.splice()를 통해 wordList를 업데이트해줬는데, wordList.splice는 반환

오늘은 11월 24일 24일차이다.오류 해결(한 번씩 컬러링된 단어가 서버로 전달되지 않음)오늘은 오류 해결만 진행했다. 오류는 한 단어를 입력하고, 색칠이 될 때 서버로 단어가 전달되지 않아서 서버에서는 색칠되지 않은 단어만을 저장하는 오류이다. 원인은 useEffe

오늘은 11월 25일 25일차이다.maker가 loadPage에서 자신의 wordle을 지울 수 있도록 구현loadPage에 delete wordle 버튼을 추가했다. 버튼을 클릭하면 서버에 DELETE /load/delete/:maker 요청이 가서 세션을 지우고,

오늘은 11월 26일 26일차이다.페이지들끼리 연결delete 시 다시 확인하는 과정 추가solvePage는 따로 연결할 필요는 없을 것 같다. 어차피 maker가 링크를 공유하면 solver들이 거기로 접속하여 wordle을 푸는 방식이기 때문이다. 그래서 maker

오늘은 11월 27일 27일차이다.배포 준비하기계획을 좀 바꿨다. 원래는 내가 공부했던 책에 소개되어 있던 대로 AWS나 GCP로 준비하려고 했으나, 아직은 내가 그럴 수준이 안 되는 것 같아 가상화 컨테이너 같은 내용들을 습득하고 난 후에 한 번 공부해봐야겠다. 오늘

오늘은 11월 28일 28일차이다.오류 해결solverPage에 makerPage로 가는 버튼 추가발생한 오류는 solverPage에서 단어를 다 지워서 빈 칸 상태일 때 loadPage에서는 맨 앞 글자가 남아있는 오류이다. 해결을 위해서 구조를 조금 바꾸어주었다.기

오늘은 11월 29일 29일차이다.코드 정리 및 주석(프론트엔드)오늘은 계획했던 대로 코드 정리를 하고 주석을 달아줬다. 생각보다 시간이 오래 걸려서 프론트엔드 쪽만 해주었다. 보다보니 예전에 짠 코드들은 확실히 많이 부족한 티가 난다. 그런 부분들은 새롭게 고쳐주고,

오늘은 11월 30일 30일차이다.코드 정리 및 주석(백엔드)백엔드는 프론트엔드에 비해 코드의 양이 적다 보니 빠르게 정리할 수 있었다. 다만 오류가 하나 발생해서 프론트에서 고쳐줬다. 오류는 SolverPage에서 문제를 풀다가 버튼을 클릭해 wordle maker로

내 두 번째 개인 프로젝트인 Wordle Maker Project가 마무리되었다.2022/11/01 ~ 2022/11/30 (30일)하루에 적으면 1~2시간, 많으면 3~4시간MakerPage, SolverPage, LoadPagemaker와 solver 정보를 저장할