2024. 05. 18 (토) 3주차 - Weekly Coding - Day19

드디어 사전주차 강의를 완강했다

진짜 퇴근 후 강의 따라하느라 개념 공부를 못했는데.. 이번 주말에 개념 공부 위주로 많이 해봐야겠다라는 생각이든다.

 

그리고 강의를 들어보고 나니깐 내가 '풀스텍'을 할 수 있을까.. 라는 의문이 마구마구 들더라 하..

백엔드 진짜 알면 알 수록 대단하다는 생각이든다.

하지만 포기하지 않을거야!!!

 

이번 주말은 개념공부 + 팀장님 프로젝트 진행해보련다!!

아자아자!!

 

신입연수원_팀장님 프로젝트①

<간단 설명>

1) Word Search 게임 만들기

2) 프론트엔드 or 백엔드 중 자신이 관심 있어 하는 분야에 집중하여 구현하기 (ex. 프론트엔드면 백엔드 로직은 파이어베이스로 간단히 구현, 백엔드면 프론트엔드 스타일 등은 신경 쓸 필요 없이 태그만으로 구성)

 

<필수 기능 요약>

Word Search Puzzles

Thousands of word search puzzles and games to play online or print out, covering a mix of both fun and educational topics. You can even create your very own game in just a few simple steps.

https://thewordsearch.com/

• Word Search Maker 페이지 (게임 제작 기능)

• Word Search 게임 기능

• 게임 현황판 기능

• 단어 리스트 및 정답 확인 기능

• 제목, 설명, 게임 소요 시간을 상단에 표시

<프로젝트 요구사항>

• README에 개발정보를 요약한다.

• 필수 기능을 우선적으로 구현한다.

• 커밋을 하면서 개발을 진행한다.

• feature 개발이 끝나면 dev(또는 develop) 브랜치에 PR을 생성 후 머지한다. (feature 단위 혹은 하루 작업 사항 단위로 PR을 생성하자)

• 구현해야할 기능을 깃허브 issue 항목에 등록하고 label을 설정해서 사용한다.

 

<기획서 요구사항>

• Word Search 게임을 만들 수 있는 어드민 페이지 (Word Search Maker) 제작

• Word Search Maker에서 Title, Description 및 10개 이상의 단어를 등록하여 게임을 생성할 수 있음

• Word Search Maker에서 게임 생성시 다른 유저가 참여할 수 있는 링크 생성

• 링크로 접속시 사용자 이름을 입력하고 Start 버튼을 눌러 게임을 시작할 수 있음

• 게임 페이지에는 n x n 의 영어 글자가 랜덤하게 배치되어 있고 등록한 영어 단어가 중간에 섞여 있으며 유저가 클릭하여 단어를 찾을 수 있음. (자세한 설명은 직접 게임을 해보길 바람.)

• 유저가 연결된 단어를 클릭하지 않거나 없는 단어를 클릭할시 틀렸다는 표시를 보여주기.

• 정답 단어를 클릭하면 맞았다는 표시를 해주고 해당 표시가 유지되게 구현하기.

• 게임 페이지 좌측에는 찾아야 할 단어 리스트가 보여지고 유저가 단어를 찾으면 표시되어야 함.

• 게임 페이지 우측에는 현황판이 존재하며 유저들의 현재 점수와 소요 시간을 볼 수 있음 (1~3위는 강조 표시를 할 것)

• 게임 페이지 상단에는 게임 시작 후 현재 시간이 얼마나 흘렀는지 볼 수 있으며 제목과 설명이 표시됨.

• 기타 설명이 부족한 부분은 실제 게임 사이트를 보면서 참고할 것.

 

<FE 선택시 요구사항>

라우팅

• 모든 페이지는 SPA로 동작한다. (React, Svelte 등 웹프레임워크 사용 가능)

• 클라이언트 라우팅을 위한 라이브러리를 사용해도 된다 (React-router-dom, svelte-spa-router 등)

• path에 따라 다른 화면을 보여주도록 라우팅을 구현한다.

 

파이어베이스를 사용하여 백엔드 최소화

• 파이어베이스를 이용해 백엔드 연동하기

• 파이어베이스 RealtimeDB를 활용하여 게임 제작 및 현황판 데이터를 구현하기.

• 현황판은 실시간으로 업데이트될 수 있도록 구현하기.

 

CSS 활용하기

• 변수를 이용하여 컬러값 지정하기

• CSS 프레임워크는 자유롭게 사용 가능

• 모든 CSS를 한 곳에 모으지 말고 되도록이면 모듈화할 것.

 

(선택기능, 이중에 관심 있는 기능 추가로 구현해보기)

• 유저 로그인 기능 구현하기 (깃허브, 카카오, 구글 등 소셜 로그인으로 구현하기)

• 좋아요를 누를 수 있고 좋아요 갯수를 확인할 수 있도록 구현하기.

• 댓글을 쓰고 확인할 수 있도록 구현하기

 

 

<BE 선택시 요구사항>

• 백엔드 동작 확인은 /docs 를 통해 확인할 수 있으면 된다. (프론트엔드까지 연동해서 결과물을 보여줄 필요까지는 없다. 시간을 고려한 것이기 때문에 백엔드 구현이 완료하고 시간이 된다면 프론트엔드도 구현해볼 것.)

• 회원 가입 및 로그인 기능을 구현한다. 소셜 로그인을 이용해도 된다.

• Python의 fastAPI를 사용한다.

• MySQL 혹은 SQLite를 사용한다.

• ORM을 사용해도 된다.

• ERD를 이용해 데이터 모델링을 수행하고, 깃허브 README에 업로드한다.

• web socket을 이용하여 현황판의 데이터를 실시간으로 업데이트하도록 구현한다.

• 게임 제작시 Database에 데이터를 저장하고 URL 링크를 생성하여 해당 페이지 접속시 저장된 데이터를 보여줄 수 있도록 구현한다.

 

(선택기능, 이중에 관심 있는 기능 추가로 구현해보기)

• (선택기능) 게임 페이지에서 좋아요를 누를 수 있는 기능을 추가한다.

• (선택기능) 게임 페이지에서 댓글을 달 수 있는 기능을 추가한다.

• (선택기능) 세션을 활용해 사용자의 중복 로그인을 방지하는 기능을 추가한다.