개인 프로젝트 - Randomly
📖 주제
스터디를 진행하면서 필요한 기능들을 구현한 프로젝트
🏠 배포 주소
React App
randomly.pages.dev
🛠️ 사용 기술
- React
- Redux
- TypeScript
- CSS in JS (Styled-Components)
- Firebase
- CloudFlare
🏠 저장소
https://github.com/soohyun-dev/Randomly
📜 개발 기록
타입스크립트 스터디에서 기술면접 스터디를 추가적으로 진행하면서 한 주간 20문제를 공부해온 뒤, 한 명을 골라 질문을 하는 식으로 처음엔 정하였엇다.
하지만, 한 주에 한명만 대답하는 것은 이 스터디의 목적과는 맞지 않다는 생각이 들었다.
이유를 설명하자면, 다음과 같다.
첫째, 랜덤으로 한 명을 정하면 그 사람만 20문제를 다 말한다는 점.
둘째, 전 주에 대답했던 사람이 다시 안 걸린다는 보장이 없다.
전 주에 대답한 사람은 제외하고 답변자를 지정할까 했지만 해당 주에 답변하지 않아도 된다는 사실을 알면 느슨해질 수 있다고 생각했다.
셋째, 공부도 공부지만, 주된 목적은 아는 것을 말해보는 연습이다. 그리고 이는 모두가 매주 실시해야하는 몫이다.
이렇다고 생각하여, 팀원들에게 문제를 팀원의 수만큼 균등하게 분배하여 각자 질문에 대답하는 방식으로 변경해보자고 제안하였다.
다행히, 팀원들 모두 좋은 반응을 보여주셨고 새로운 방식으로 준비를 하기로 하였다.
내가 새로운 방식을 건의한만큼 이 방식에 대한 새로운 책임감이 생긴듯 했다.
그래서 이 방식으로 진행하는 것을 좀 더 효율적으로 진행하기 위해 도움을 받을 수 있는 프로젝트를 구성하기로 마음 먹었다.
다음 스터디까지 한 주 밖의 시간이 남아있지 않았기 때문에 한 주 동안 개발을 해보았다.
매일매일 조금조금씩 개발을 진행하니 금방 만들 수 있었고, 당장 필요한 기능들은 구현이 완료되었다.
- 20문제를 랜덤으로 분배
- 분배된 문제를 하나씩 보여주기
- 맞았는지 체크기능
세부적으로 보면 더 많은 기능들이 있지만, 위의 기능들이 우선 주된 기능이다.
백단은 firebase를 사용하였다.
처음 사용해봤는데, 어렵지 않게 사용할 수 있었다. 되게 편리하다.
✔️ 첫 프로젝트 현장 적용 (2023/01/25)
오늘 스터디에서 처음 다같이 써봤는데 나름 유용했다.
생각보다 질문 대답하는 것이 어렵고, 긴장도 된다.
팀원분들도 모두 왠지모를 긴장감에 휩싸인다고 하였다.
긴장이 된다는 건 어찌보면 우리가 의도한대로 스터디가 잘 진행된다는 것과도 같다.
이렇게 긴장된 상황에서도 질문에 답을 할 수 있어야하니까.
아무튼, 오늘 처음 써보니 새로 필요한 기능들과 굳이 안넣어도 될 법한 기능들이 정리가 좀 되었다.
맞는지 틀리는지의 기능은 약간 애매모호했다. 이 질문은 어디까지 대답을 해야 맞는건지 간략히 대답하면 틀렸다고 해야하나 맞았다고 해야하나와 같은 애매한 상황이 있었기에 굳이 필요는 없는 기능 같다.
추가적으로 넣어야 될 기능은
- 답변 시간 체크 해주는 기능 => 답변시간이 너무 길어지고 루즈해지는 것을 방지
- 유저 랜덤 배치 => 현재는 카톡 이름 순으로 배치
- 질문 페이지에서 작성해서 추가하고 이전꺼는 삭제하는 기능
들이 우선 생각났다. 앞으로 더 추가해야될 부분들이 있으면 더 추가해봐야겠다.
추가로, 타입스크립트 스터디에서도 한명을 랜덤으로 골라 질문 하는 방식을 활용하는데 이것도 이 프로젝트에서 같이 구현해버릴까 한다.
한 가지 기능들만 있는 것보다 여러 기능들을 다 모아서 쓰고 싶을때마다 쓸 수 있게 만들어야겠다.
✔️ 기능 추가 ( ~ 01/31)
한주가 또 지나 스터디를 하는 날이 내일로 다가왔다.
스터디를 시작하기 전 한 주동안 필요하다고 느꼈던 기능들을 모두 적용하였고, 추가적으로 내가 필요하다고 생각하는 기능을 더 구현하였다.
추가한 기능들을 살펴보자.
📌 관리 페이지
❓해당 페이지가 필요한 이유
📌 손쉬운 데이터 관리
우선 스터디 진행상 일주일마다 질문을 20개씩 새로 정해주었다.
당연히 질문을 새로 등록해주는 기능이 자연스레 필요해졌고, 추가로 이전 질문들을 삭제하거나 올린 질문 데이터를 수정할 수 있는 기능도 필요해졌다.
따라서, 이러한 기능들을 좀 더 쉽게 할 수 있는 방법을 생각해보다가 따로 페이지를 만들어 관리하기로 결정하였다.
CRUD를 구현하는 것은 생각보다 어렵지 않아 금방 만들 수 있었다.
그리고 이렇게 만들어 사용해보니 훨씬 편한 작업이 가능하였다.
추가한 데이터는 firebase 에서 임의의 id 값을 가지고 저장되어 관리된다.
질문을 이렇게 관리해주니 팀원들의 정보도 관리해주는 기능을 만들고 싶었다.
그래서 이렇게 유저 관리 컴포넌트도 관리 페이지에서 같이 기능하게 구현하였다.
앞으로 질문,팀원 을 등록하고 수정하고 삭제하는 기능들은 이 관리 페이지에서 모두 이루어진다.
📌 발언 시간 관리
저번에 스터디에서 처음 적용해보면서 느꼈던 점은 채점 기능은 딱히 필요하지 않았고, 시간을 체크해주는 기능이 있었으면 좋겠다는 것이다.
그래서, 바로 적용해보았다.
채점 기능은 따로 삭제하지는 않았다.
스탑워치기능을 새로 넣어줘서 각 질문당 대답하는데 걸리는 시간을 바로바로 체크해줄 수 있게 만들어주었다.
시작 기능 뿐만 아니라 중지, 초기화 기능도 같이 넣어줘서 기능의 범위를 좀 더 넓혀주었다.
내일 한번 적용해보고 어떤지 봐야겠다.
📌 이름 랜덤 배치
이전에는 이름의 순서가 고정되어 있었다.
질문의 대상 순서를 랜덤으로 정하기 위하여 '이름 순서 변경' 이라는 기능을 추가하였다.
해당 버튼을 누르면 팀원 이름을 shuffle 하여 재배치한다.
클릭 후 🔽
❓ 또 무슨 기능을 만들어 볼까?
음 일단 하나 생각나는건 질문을 한번에 전부 삭제하는 기능이 필요할 것 같다.
스터디 기준으로 새로운 한 주가 시작될때 질문도 모두 리셋해야하는데 하나하나 삭제하는 과정이 번거로울거 같다.
질문이 담긴 객체를 모두 순회하면서 다 delete 시켜버리면 되지않을까 싶다?
생각보다 금방 구현 할 것 같다.
관리 페이지에 아직 CSS 적용을 하지 않아서 별로 안이쁘다.
보기 좋게 CSS 도 추가해보자.
그리고 내가 가장 하고 싶은 기능들이 있는데, 상태관리랑 타입스크립트 적용이다.
지금은 useState, useRef를 남발해서 코드가 좀 지저분하다...😂
redux를 적용해서 상태관리를 해보고 싶고, 타입스크립트도 적용해볼려고 한다.
이번주에 바로 차차 적용해봐야겠다.
아마 이 부분들이 비교적 어렵지 않을까 싶다?
🎨 CSS 적용
완전 깔끔해져서 마음에 든다 😋
오후시간에 열심히 적용해보았음. 하는 김에 관리 페이지 컴포넌트 분리도 해서 같은 페이지에서 원하는대로 볼 수 있게 해줬다.
추가로 CSS 적용하다가 갑자기 만들고 싶은 기능이 생겼다.
- 메인 홈에서 간략 소개글과 각 기능 페이지로 연결시켜주기
- 다크모드!!
- Q&A 페이지
ㅎㅎ 다음 주까지 또 만들어 볼게 생긴듯하다.
✔️ 두번째 현장 적용 (2023/02/01)
🧑💻 적용 방법
오늘 스터디에서 두번째로 사용해봤는데, 만족도가 아주 높았다 😋
팀원 한분이 빠지게 되어 즉석에서 스터디 방법을 조금 조정하여 3대1로 자리를 앉아 조금더 타이트하게 진행을 해보았다.
이전에는 같이 화면을 공유하면서 하나씩 문제를 열어보고 질문을 받는 사람도 질문을 시각적으로 확인을 바로 할 수 있었다면, 이번에는 질문을 하는 사람들 3명만 모니터를 볼 수 있고 나머지 한명은 질문을 받을 때만 질문을 알 수 있다.
전자 보다 후자의 방식이 훨씬 효율적이라는 느낌을 받았다. 이 방법이 좋은 이유는 꼬리질문이 자연스럽게 나오는 분위기가 조성된다는 점이다.
질문을 받는 사람입장에서도 크게 부담이 안되는? 그런 분위기 였다고 생각된다.
무엇보다 이 모든 것은 팀원들이 모두 열심히 준비를 해와주었다는 점에서 더 시너지가 나온 것 같다.
당연히 실제 면접과의 괴리감은 있겠지만 그래도 연습을 하고 안하고는 천지차이라 생각한다.
🚩 배포
따로 진행하고 있는 팀프로젝트 관련해서 얘기를 나누다가 팀원 분이 Cloud Flare 라는 사이트를 소개해주었다.
이 사이트를 통해서 배포를 하게되면 프론트엔드는 되게 손쉽게 배포가 가능하다고 하셨다.
과거에 AWS로 힘들게 배포를 했던 경험이 있어서 사실 그게 가능하다고?? 라는 마음이였는데,
진짜 3분? 만에 배포가 되었다!!!! 🤭 (깃허브에 올라간 코드에 에러가 없어야한다.)
* 배포 주소는 상단에 표시
이제는 모두가 접속해서 이 프로젝트를 사용할 수 있게 되었다!!!! ㅋㅋㅋㅋㅋ 너무 설렌다
갑작스러운 배포를 해버려서 생긴 문제점들이 있었다.
일단 화면 너비가 사람마다 다르게 보여서 안맞는 부분이 있었고, 가장 큰 문제점은 질문 관리 페이지에 모두 접근을 할 수 있다는 것이다.
익명의 접속자가 접속해서 우리가 관리하는 질문과 유저의 정보를 다 삭제하거나 이상한 정보를 넣을 수도 있다는 뜻이다.
따라서 바로 집에 오자마자 이 두가지에 대한 구현을 실행하였다.
🔧 1. 화면 너비 조정
🔧 2. 관리자 비밀번호 설정
이제부터는 아무나 MANAGE 페이지에서 함부로 정보를 변경할 수 없다.
나만 알고 있는 비밀번호를 따로 관리하여 그 비밀번호를 쳐야지만 관리할 수 있는 테이블이 보여지도록 만들었다.
일단 급한 불은 끈 셈이다.
앞으로는 팀원분들도 이 사이트를 통해 미리 학습을 해올 수 있으므로 홈페이지에 대한 기능을 좀 더 늘려보고 편의성을 늘려봐야겠다.
❓고민 되는 점
- 회원가입, 로그인 기능 도입?
이전에는 굳이 만들 필요가 있을까 싶었는데, 점점 프로젝트의 기능들이 늘어남으로써 있는게 좋겠다 라는 생각이 커졌다.
지금은 관리자 페이지 비밀번호 설정이 되어있으니 익명의 접근이여도 괜찮지만, 추후의 기능들을 위해서는 있는게 좋다는 생각도 든다.
사용자가 회원가입하고 로그인을 해야 서비스를 이용할 수 있다는 점이 불편하게 느껴질 수 도 있다 생각든다.
그래서 우선은 로그인 기능을 도입하면 Q&A 같은 페이지나 MANAGE 페이지의 접근하려면 로그인을 필요로 하되 INTERVIEW 기능은 누구나 사용할 수 있게 만들어 볼 예정이다.
참고로 로그인한다고 MANAGE에 다 접근 가능한것은 아니고 일단은 내가 지정한 회원만 접근 가능하다.
현재 만들어보고 싶은 기능들을 정리해보자면,
- Q&A 게시판
- 회원가입, 로그인
- 메인 홈 꾸미기 => 서비스 소개, 날씨, 달력 등등...
- 다크모드
- 질문 컨테이너 슬라이드 구현
추가로 이거는 당장 만들 것은 아니지만 꼭 만들고 싶은 기능이 있다.
지금은 질문을 직접 타이핑해서 추가하고 있다. 하지만, 추후에는 여기에 더해 미리 등록된 질문들을 간편하게 클릭만으로도 추가할 수 있게 구현하고 싶다.
워낙 질문의 종류나 양이 많아서 상당한 시간이 소요될 것 같지만, 조금씩이라도 만들어가면 언젠가 완성되지 않을까 싶다?
사실 완성도 없고 갑자기 든 생각인데 다른 사용자들도 이 고정 질문에 대한 기여를 할 수 있게 하면 되겠다. 오호 😀
만들고 싶은게 많다. 일단 다음 만들거 정리하러 가야겠다.
✔️ 다수의 기능 구현 (23.02.04 ~ 02.06)
주말과 오늘 월요일 3일동안 정말 열심히 구현했다.
구현한 내용은 다음과 같다.
1. 구글 로그인, 로그아웃 구현
2. redux-toolkit 적용
3. redux-persist 적용
4. TypeScript 적용
5. QA 페이지 생성
6. 공지사항 컴포넌트 구현
7. 공지사항 Create, Read 구현
8. 메인 페이지 구현 (react-awesome-reveal 적용)
참 열심히 만들었다 😆 뿌듯~
뭐뭐 만들었는지 한번 설명 해보겠다.
📌 1. 구글 로그인, 로그아웃 구현
firebase의 구글 로그인 기능을 사용하여 로그인 기능을 구현하였다.
로그인을 구현하는 부분은 크게 어렵지 않게 구현 가능했다.
내 서비스에 로그인을 한 번이라도 하게 되면 유저의 구글 계정 정보가 내 데이터베이스로 넘어와 저장된다.
이것을 통해서 나는 내 서비스를 몇 명이 이용해봤는지 확인할 수 있다.
이렇게 가입자 수를 확인할 수 있게 되니 또 새로운 목표가 생겼다.
바로 2023년 내에 100명의 가입자를 만드는 것!!! 💯
이 서비스를 얼마나 이용할까 싶으면서도 도전해보고 싶은 수치이다.
어떻게 늘려나아갈지는 차차 생각해봐야겠다 ㅎㅎ
📌 2. redux-toolkit 적용
로그인을 도입하니 자연스레 상태관리에 대한 고민을 하지 않을 수 없었다.
아직은 작은 프로젝트이지만, 지속적으로 큰 프로젝트로 키워 나갈 것이고 그렇다면 상태관리는 필수이다.
또한, 난 리덕스를 프로젝트에 적용해본 적이 아직 없었기 때문에 꼭 이번 기회에 적용 해보겠다는 마음이 항상 있었다.
그래서 리덕스 관련 공부를 같이 진행하던 와중에 redux-toolkit을 요즘 많이 이용한다는 사실도 알게 되었다.
조금 더 리덕스를 효과적으로 써볼 수 있겠다는 생각으로 redux-toolkit을 바로 적용해보았다.
기존 질문 관리나 팀원 정보는 전역 상태관리가 필요하지 않아 따로 적용하지는 않고 바로 로그인 정보를 다루는 기능으로 적용하였다.
처음 써보다보니 어려운 감이 있었다. 그래서 여러 코드를 작성도 해보고 지우고 다시 작성하는 과정을 반복하면서 점점 내 프로젝트에 맞는 코드를 작성할 수 있게 되었다.
완벽한 로직을 구현한 느낌은 아니지만, 그래도 내가 원하는 기능 까지는 구현한 상태이다.
확실히 전역적으로 상태관리를 하다보니 다른 컴포넌트에서도 상태값을 불러오기가 용이했다.
이래서 사용하는 거구나 새삼 느꼈던 순간이었다.
📌 3. redux-persist 적용
로그인 로그아웃은 성공했는데, 새로고침을 하면 로그인 정보가 날라갔다.
이유는 redux는 새로고침을 하게되면 state값을 모두 초기화시키기 때문이었다.
그래서 로그인 정보를 지속 시킬 방법이 필요했고, redux-persist를 사용하여 새로고침을 해도 로그인 정보가 유지될 수 있게 구현하였다.
📌 4. TypeScript 적용
리덕스 적용과 더불어 이번 주말 한 것들중에 가장 큰 도전이였다.
이전에 멘토님이 타입스크립트를 꼭꼭 강조하셨었다.
이후 타입스크립트를 사용하기 위해 스터디도 해보고 타입 챌린지도 풀어보면서 공부를 했었지만,
정작 프로젝트에 적용은 해본적이 없었다.
멘토님, 테오님이 그러셨다. 가장 좋은 방법은 기존 JS 프로젝트를 TS로 바꿔보는 것이라고.
하지만, 섣불리 도전하기가 쉽지않았다.
지금 에러없이 잘 동작하고 심지어 리덕스도 막 적용해서 구현을 완료했는데, 타입스크립트를 적용해서 나는 오류들로 인하여 서비스 이용이 막히는 것 아닌지...?
이런 걱정이 TS 적용에 대한 고민을 낳았었다. 하지만, 오늘 안하면 내일 할 건가?
어차피 내일 할거라면 오늘 해버리는게 속편하지 않을까?
피할 수 없는 길이고 내가 해야만 하는 일이다. 그런 생각이 드니까 걱정이고 뭐고 TS 깔고 바로 tsx 파일로 바꾸는 작업에 들어갔다.
예상대로 오류를 많이 냈지만, 하루 동안 매진해보니 대부분의 오류는 고칠 수 있었다.
타입스크립트 개념 부족으로 우선 넘긴 부분들도 있지만, 그래도 나름 성공적인 적용을 했다~!
역시 일단 해보는게 좋은 것 같다. 이왕 할거라면.
적용을 시작하니 새로운 파일을 만드는거야 이제 어렵지 않다 😆
📌 5 & 6 & 7. QA 페이지 생성, 공지사항 컴포넌트, Create, Read 구현
저번에 계획한 Q&A 페이지도 바로 개발 착수에 들어갔다.
빨리 만들고 싶었던 부분 중 하나라 조금 속도를 내어서 바로 구현해봤다.
firebase에서 notice 컬렉션을 새로 파서 그 곳에다가 공지사항을 저장한다.
이 공지사항 페이지는 내가 사용자에게 알림을 전파하는 곳과 같다.
앞으로 모든 사용자는 이곳의 공간에서 본 서비스의 개발 관련 및 서비스 이용에 대한 정보를 확인할 수 있다.
당연한 소리지만, 이 공지사항 글쓰기는 운영자인 나만 작성 가능하도록 구현하였다.
🚫 그 어떤 유저도 공지사항 글쓰기에는 접근할 수 없다.
📌 8. 메인 페이지 구현 (react-awesome-reveal 적용)
기존에는 메인페이지에 대한 부분을 뒷전으로 했었는데, 로그인을 다루다 보니 초기화면을 메인 화면으로 돌리는 경우가 생겼다.
따라서, 갑자기 우선순위로 올라와 서둘러 구현을 하였다.
이때 좀 색다르게 slide 같은 기능을 넣어 보고 싶어서 찾아보던 와중
react-reveal 이라는 라이브러리를 알게 되었다.
해당 라이브러리를 사용하면 slide를 되게 손쉽게 구현할 수 있어서 너무 간편했다.
나는 타입스크립트가 적용되어있어서 react-reveal을 그냥 사용하면 에러가 났다.
서치를 해보니 react-awesome-reveal 이라는 라이브러리도 있었고 typescirpt에 맞춰서 설치를 해주었다.
공식 문서를 참고하면서 구현을 완료하였다.
❓ 다음은 또 무엇을 만들까?
1. 공지사항 글 상세 페이지
2. 공지사항 글 수정, 삭제 기능
3. Q&A 페이지 관련 기능
4. 남길말 페이지 관련 기능
5. 다크 모드
6. 마이페이지
7. 자체 로그인
일단 이정도 생각난다.
어후~!! 만들수록 또 만들게 계속 생긴다!! 이런게 너무 재밌는거 같다 ㅋㅋㅋㅋ
하나하나 완성되어 가는 웹사이트 모습들을 보며, 뿌듯함을 느끼면서 다음 개발을 하러 가보겠다!
✔️ 공지사항 상세페이지 구현 (23.02.07)
다음날 바로 공지사항 상세페이지를 구현했습니다!
오늘은 할 일이 많아서 프로젝트에 많은 시간을 쏟지 못하지만, 그래도 조금씩이라도 개발 진행해봤습니다.
처음에 이 상세페이지를 구현할때 파라미터를 작성하는 부분에서 잠시 막혔습니다.
왜냐면 더이상 Link 태그로 props를 전달할 수 없었다고 알고 있어서 navigate를 사용해서 구현하려고 해서 약간 삽질을 좀 했습니다.
그러다가 Link 태그로 전달이 된다는 걸 다시 알았고, 라우터 설정을 하고 다시 구현하였습니다.
제가 잘못 알고 있었네요 ...하하 🥲
각 게시물의 order 값을 기준으로 파라미터를 생성해서 페이지 url을 생성해주었어요.
✔️ SEO 최적화 - OG 태그 적용
오늘 기술면접을 공부하면서 SEO를 접하게 되었는데 궁금해서 더 찾아봤습니다.
그러다가 OG태그라는 것이 있더라고요.
이 태그를 사용하면 카카오톡 같은 곳에서 공유할 때 더 보기 좋게 구성할 수 있게 만들어 준다는 사실을 알고 바로 적용해보았어요
( 이 부분에 대해 더 궁금하신 분들의 제가 올린 TIL #13 번을 확인해주세요!! )
메타 태그를 잘 설정해주니 위 사진처럼 잘 나오게 되었습니다!!
❓ 프로젝트 주제에 대해 고민하고 있다면
이 글을 읽고 있는 분들중에 프로젝트를 진행해야하는데 주제를 어떻게 설정해야할지 어떤 주제를 설정하고 어떻게 만들어 가야할지 감이 안온다면 일단 당장 필요한 기능을 생각해보고 바로 만들어보라고 권유드리고 싶다.
나도 이런 고민을 전에 했었는데, 이렇게 내가 필요한 기능들을 사용하기 위해 프로젝트를 무작정 시작해보니 생각보다 만들 부분들이 많고 만들면서도 필요한 기능들이 계속 생각나서 좋은 것 같다.
무엇보다 필요한 기능들은 바로바로 넣고 필요없는 기능들을 빼버리면서 내 프로젝트에 바로바로 피드백을 해 발전시켜나아가는 과정이 너무 재밌다는 점이다.
'성장기록 > 프로젝트' 카테고리의 다른 글
| Randomly 프로젝트 - ErrorBoundary 적용 (0) | 2023.03.06 |
|---|---|
| 개인 프로젝트 - Randomly ( ~ 2023.02.17) (0) | 2023.02.17 |
| 개인 프로젝트 - Randomly (~ 2023.02.13) (0) | 2023.02.13 |
| 개인 프로젝트 - Randomly (2023.02.09 ~) (0) | 2023.02.09 |
| 기존 리액트 프로젝트에 타입스크립트 적용 (0) | 2023.02.04 |