🎤 13일차
1. reCAPTCHA 해결
reCAPTCHA가 알고보니 클라이언트에서 구글로 바로 요청을 보내서 받는 형식이 아니라
서버로 토큰을 보내고, 서버에서 secret key와 토큰을 구글로 전달하면 결과를 프론트로 보내주는 식이었다.
생각보다 골머리가 아팠다. 하지만 설정에서 테스트용으로 바꿀 수 있어서 이 과정을 생략하고 시도할 수 있었다.
드디어 평소에는 보기 싫었던, '로봇이 아닙니다'를 볼 수 있었다.
하지만 위 과정도 '진짜'는 아니었다.
왜냐하면 위 경우는 환경변수를 사용하지 않고, key 값을 그대로 할당시켜야 했다.
사실 이게 정상적인 현실이었다.
분명 설정도 완벽하고, 도메인도 로컬, 서버 모두 제대로 지정을 해주었는데..
토큰도 정상적으로 전달이 되고 있는데.. 환경변수를 인식하지 못했다..
진짜 너무 오래 시간을 쓰고 있는 상황이었어서 그냥 img와 gif로 대체하기로 했다.
완전 빼기에도 완전 구현하기에도 애매한 상황이었기 때문이다. 그래도 끝까지 최선을 다해야지.
결국 형태만 갖추는 식으로, 온전한 기능이 구현된 것처럼 했다 🥹
2. 프로필 사진 교체 & localStorage 저장
프로필 사진을 추가하고, 사용자가 원하는 사진으로 바꿀 수 있도록 기능을 구현하고 싶었다.
profiles라는 배열을 만들었고, 이미지를 넣은 후 export 시켰다.
그 후 profileImages로 받아주고 배열 안 숫자를 맡아줄 selectedProfileIndex를
상태로 받아줘서 handleProfileChange가 실행될 때마다 숫자가 바뀌도록 설계하여 배열을 순회하도록 했다.
Nav에서는 프로필 사진만 나타내면 되므로 배열과 변수만 내려주었고,
MyPage에서는 프로필 사진을 바꾸는 기능까지 함께 같이 내려줬다.
3. useContext API (팀원)
위는 팀원 중 한 명이 useContext API를 적용하는 사진이다.
나는 스스로 App.js로 전역 관리하려고 했던게 아기 걸음마 같다고 느껴졌다.
서버와 통신하면서 두루두루 쓸 User의 정보를 담을 UserData를 만든 것과
더욱 더 편하게 통신을 하기 위해 axios를 따로 만들어서 사용하는 모습을 엿볼 수 있다.
그리고 get으로 서버에서 정보를 담아온다. 동시에 상태들을 전역으로 관리한다.
정말 멋있었다. 진심으로 리스펙이다.. Pre-Project하면서 팀원들에게 많이 배웠다.
시각을 넓혀준 팀원들에게 너무 감사하며, 나도 얼른 따라가도록 해야겠다.
4. 서버와의 로직 (팀원)
또 다른 팀원 한 명이 프로필 이미지 정보 서버에서 가져오기 및 저장 기능을 구현한 사진이다.
위 get 요청 코드에서 추가적인 URL을 가져와서 기존 에러(401)가 나던 문제를 수정하였고,
내 프로필 사진을 바꾸는 함수를 patch 요청으로 서버와 통신해서 이미지의 id가 바뀌면
이미지가 바뀌는 식으로 로직을 구현해냈다.
여기서 배울 점이 정말 한 두개가 아니었지만, 가장 큰 점은
자신이 무엇을 해야하는지 알고, 알고 있으니, 백엔드에게 부탁을 할 수 있다는 것이다.
나에게 이번 프로젝트에서 조금 어려웠던 점을 완벽히 실행하고 있었다.
나는 어떤 부분이 프론트에서만 구현이 가능하고, 어떤 부분이 백엔드와 얘기를 해야하는지,
그리고 거기서 조율까지 가능하다. 라는 개념이 잘 잡혀있지 않아서 살짝 애를 먹었다.
이 부분에서 팀원분들에게 아주 크게 배웠다 🙇♂️
🎤 14일차
1. 나머지 로직 구현
아직 구현해야 할 로직이 조금 남았으므로 팀원들이 맡기로 하고,
내가 GitHub, Design, 소소한 Bug Fix를 맡게 되었다.
그렇게 불꽃 로직 구현과 Design, Fix가 dev 브랜치에서 바로바로 실시간으로 이뤄졌다.
이제 준비는 끝났다.
지난주 스포와 다르게 외부도 내부도 그리고 디테일까지도 모두 모두 구현 완료였다 !
추가로 디자인을 하며, 나는 그 사이사이에 틈날 때마다 README를 작성하였다.
확실히 눈에 띄고 다른 팀과 차별화되는 장점이 있었다. 만족한다 😚
그렇게 하루가 뚝딱뚝딱하며 지나갔고, 배포도 마무리해서 링크도 나왔다 !!
-> http://pre-project-oshinoko.s3-website.ap-northeast-2.amazonaws.com/
🎤 최종 무대를 마무리하며..
드디어 오늘은 프로젝트 마지막 날이다.
그동안 우리 팀 모두가 고생한 것을 생각하면, 2주가 정말 짧고 빠르게 느껴졌다.
어제 늦게까지 Bug들을 Fix하고 잠을 청해서 그런지 아침에 큰 문제 없이 통신이 가능했다.
이게 우리의 웹 사이트라니.. 정말 예쁘다.. 감격스럽다..
자 이제 본격적으로 우리 웹사이트(무대)를 소개할 차례이다.
(자세한 사항들은 원본 레퍼지토리에서 확인할 수 있다 ❣️)
GitHub에 올린 그대로 첨부하겠다.
🌟 무대 둘러보기
| 홈페이지 | 회원가입 페이지 | 로그인 페이지 |
|---|---|---|
| 마이페이지 | 질문 페이지 | 질문 상세 페이지 |
|---|---|---|
🎙️ 기능
| 질문 작성 | 질문 검색 | 질문 수정 |
|---|---|---|
| 질문 필터링 | 댓글 작성 | 댓글 수정 |
|---|---|---|
| 댓글 삭제 | 에러 페이지 | 로그아웃 |
|---|---|---|
🫧 무대 청소하기
팀원 & 다른 팀원들과 말과 글로 회고하는 시간을 갖기도 했다.
글로 하는 회고 시간에는 나는 미리미리 작성한
Pre-Project 1주차, 2주차 회고가 있으므로 바로 제출했다.
다들 너무 좋은 반응을 해주셔서 힘이 났다 🔥
항상 너무 감사드립니다. 모든 분들 🥹🥹
말로 하는 회고 시간에도 최애의 i팀 너무 잘 보고있다고..
칭찬을 아껴주시지 않아서 다소 부끄러워졌다.. 🙇♂️
후우.. 이때까지 우리 팀원들과 함께 무대를 준비한 보람이 있군요 🎙️
아 그리고 최애의 i팀 2기가 확정되었습니다!!
팀원들끼리 마음이 잘 맞아서 일부 인원 제외하고 2기를 이어나가려고 합니다!
그럼 다시 한 번 우리 팀원, 그리고 모든 분들에게 감사드리며
저는 나머지 청소를 하러 무대로 다시 돌아가봐야겠습니다 🫧🫧
그리고 다시 한번 모두 모두 화이팅 🌟
