2차 때 내가 구현 한것들 : https://velog.io/@jakesungjaekim/Wecode-2nd-%ED%9A%8C%EA%B3%A0
내가 시작하기 전에 배워야 할 점이 무엇일까?
-
PM이 아니라 TeamMates 역할로서 소통하는 방법, (PM역할에 침범하지 않고, 어떻게 보조적으로 나이스하게 첨언을할 수 있을까?)
-
Styled-component, 외부 라이브러리를 사용하게 될텐데 어떻게 협업 작업을 할 수 있을까?( 잘 소통할 수 있을까? )
Day01
오늘은 휴일?이었지만, 팀 발표가 나니 팀원들 모두 위코드에 나오게 되었다.
구현하고 싶지않은 사이트로 "CGV", 와 "번개장터"를 배제하고 "술담화"를 선정받았다.
술담화라는 사이트를 함께 보면서 UI가 깔끔해서 좋았고, 어떠한 서비스를 내비치는? 목적을 갖는 웹 사이트를 구현 하고 싶은지 얘기가 시작되면서 짧은 시간 내에 의견을 조율할 수 없었다. 예를 들면, 1차 프로젝트는 이커머스 사이트를 배정받아서 클론했는데, 술담화 또한 이커머스 성향이 짙어서 다른 서비스를 보여줄 수 있는 사이트를 만들고 싶다는 의견이었다. 이에 구체적으로 어떠한 예시와, 사례들이 있는지 확인해보고 판별해보고 싶어서 앞으로 주말까지 시간을 갖고 알아보면서 어떠한 기능들을 추가하고, 어떠한 라이브러리를 이용할 수 있는지 준비하기로 하였다.
(제외한 사이트 : 예약시스템 때문에 장기적인 작업속도가 전체적인 프로덕트 퀄리티를 낮출것 같다는 이유, UI가 이쁘지않은 이유)
** 재밌는 팀 프로젝트가 될 것이라고 생각이 들지만, 한편으로는 잘 해낼 수 있을까 라는 걱정이나 생각이 든다. 새로운 외부 라이브러리를 가져오면서 겪게 될 소통의 문제들이나. 외부 API를 가져오면서의 그러한 것들.. 그리고 익숙하지 않은 rebase 사용, styled-component 사용이 있지 않을까.. 그러한 생각들. 그리고 작은 기능 단위로 branch화 하였을 때 잘 사용할 수 있을지도!
Day02,03
Day02,03은 첫 주말시간을 가졌다. 토요일엔 멋사 DDC를 다녀왔고, 일요일엔 전반적으로 쉬었지만
어떠한 작업을 했는지 기록을 남겨보려고 한다!
우선은, 팀 전체적으로 도움이 될 수 있도록 시각화적인 것들을 제작하였다. 피그마로 '술담화'사이트 분석하기, '회의 기록일지, 우리가 해야하는 것들', '트렐로 틀 구성'
그리고 E-commerce형 사이트가 아니라면, 어떠한 서비스(Item)을 웹 사이트에 녹여서 우리 팀만의 색이 담긴 웹 사이트를 제작할 수 있는지 참조 사이트들을 많이 찾아봤던 것 같다. 생각보다 E-commerce가 아닌 웹 사이트를 찾기 힘들었기 때문에 UI를 해치지 않으면서, 잘 들어맞는 웹을 찾기 어려웠다.
그리고 로그인/회원가입 페이지를 맡았기 때문에 시간을 좀 내서 미리미리 UI및 기본적인 기능을 제작하였고, 카카오,네이버 로그인을 위한 API등록까지 신청했다.
Styled-component를 써서 제작하여서 만족도가 높다!! ( 100%는 아님 ㅎ)
Day04
오전 10시부터 5시까지 3번의 회의를 했다.
주말간 준비했던 서비스 발표를 시작해서, 우리팀은 독립영화를 문화교류하는 웹 사이트로 제작하기로 정해서 기획을 시작했다.
그러나.. 멘토님들과 회의를 한번 더 하였을 때는, 우리들의 기획에 대해서 조언들을 많이 얻어 갈 수 있었는데.. 우리가 페이지를 만드는 것인지, 기능을 찍어내는 것인지, 아니면 개발의 밀도를 높이는 개발자인지 생각해봤으면 좋겠다는 피드백이었다. 이 부분 관련해서 동의를 하고 있던 터라서 숨이 좀 트이긴했는데..(안해서 트이는게 아니라 기본기를 다질 수 있다는 의미에서) 맞다 우리는, 정확하게 스택을 쓰더라도 확실하게 어떠한 불편함이 있어서, 어떠한 단점들을 알고 있어서, 새로운 스택에 대한 장점을 활용하고 싶어서 사용하려는 것이 아니고, 단순히 요즘 트렌드의 스택이라서, 써보려고 했다는 것은 옳지 않는 시기라는 것이다..
그래서 우리는, 멘토님들의 피드백을 바탕으로 근본적인 스택으로 개발에 임하기로, 그리고 진짜 서비스가 필요한 기능들을 구현해보는 것으로해서 다시 기획을 하였다.
주말에 했던 코드의 일부를 도려내야 하는 아픔이 있었지만.. ( 로그인 기능은 카카오 로그인이면 충분할 것 같다는 피드백 ) Footer UI를 손좀 보고, 로그인 페이지에 카카오 API토큰을 받을 수 있도록 구현을 해두었다.
CODE
카카오 로그인의 핵심은 API_KEY와 REDIRECT_URI를 .env 파일에 보관하고, 이것을 process.env로 접근해서 다시 변수에 담아, KAKAO_AUTH_URL 이라는 상수변수에 담아서 내보내 a href="상수변수"로서 이동을 시켜 API를 받을 수 있게 한다.
Day5 (화)
카카오로그인 기능을 구현 해내기 위해서 kakao Developers를 참고하여 코드를 짰음. 백엔드쪽에서 작업이 늦어지게 되어서 프론트측에서 인가코드를 엑세스토큰까지 받아 줄 수 있냐고 부탁을 받았고 그것을 해냈다고 상상속코드에서 마무리가 되었다. 그 외에는 마이페이지 UI를 제작하였음
Day6 (수)
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
어제 했던 일들이 모두 도르마무~~
카카오 로그인 기능을 만들기 위해서 이 코드는 도르마무된다.
인가코드를 카카오측으로 보내서 엑세스토큰을 발급받아 다시 백엔드로 전송해주기로 했던 우리들의 약속은
네트워크상에 토큰이 노출된다는 보안상의 이유로 도르마무를 결정했다.
하지만! 이 또한 배움의 길이었고, 언젠가는 시도해봤을 무엇인가를 미리 해봤다는 관점에서는 밑거름이 될 것이라고 생각한다.
그래서..!
인가코드를 백엔드에 전달하여주고, response값에 따른 반응을 올 수 있게 코드를 짰다.
( 이 와중에 블로그 이 글 도르마무 당함 ㅡㅡ;..)
오늘 Footer_Ui 때문에 조금 애를 먹었는데.. 데스크탑 간 화면크기 차이에 따라서 UI의 차이가 발생하였다. 이 간극을 좁히기 위해서 min-width나 %값을 추가하거나, 조절하였는데.. 쉽지않구나.
그 외에는 마이페이지 Ui수정 및 구독페이지 Ui를 만들었는데, 이 과정에서 재사용 컴포넌트를 만들어서 사용하는데. 조금 더 깊히 알게되고 있는 것 같다.
그리고 예솔님께서 제안해주신 방법을 해보니까, 한 페이지를 담당하는게 아니고 부분 부분을 담당하면서 제작을 하니까 재밌긴하다.
Day7(목)
선언방식은 후자가 최신식이고, 전자처럼할 필요가 없는데, 전자 일 때 문제점은
컴포넌트안에 컴포넌트를 관리할 때 관리할 수 없다. 너무나도 꿀팁..
확실히 후자가 편하다. 자동적으로 children을 받는다는 것
오늘 또 무엇을 했나...
마이페이지에서는 각 버튼마다 쿼리스트링으로 백엔드 데이터 값을 분류하는 줄 알고 있었는데 그게아니라.. 각 버튼마다 컴포넌트를 렌더링하는 개념이었다.. 각 컴포넌트마다 필요한 백엔드 데이터베이스와 연결해서 데이터를 가져와야한다.. 각 컴포넌트를 children으로 하기 위해서는 '리액트아울렛'이라는 것을 사용해야하는데.. 중첩라우팅 + 아울렛이라는 컴포넌트를 갖는 컴포넌트를 불러오면된다.
그리고 이제 중요한 것은.. 마이페이지 리뷰 관련해서 공부와 고민을 그리고 멘토님에게 조언을 많이 구해야할 것 같다..
이런식으로 플로우가 흘러 갈 것 같은데.. 그래도 종호님이랑 계속 소통하면서 플로우 차트를 잡을 수 있었다..
이것을 구현할 수 있다면 진짜 성장 많이 할 것 같다.
Day8(금) Day9(토) Day10(일)
정신차리고 보니까 일요일 밤이다..
그동안 난 뭘했지?
금요일에는 PR리뷰 반영, 컨플릭트해결, 리베이스 하다보니까 하루가 다 지나갔고.. 몸이 피곤해서 일찍자러갔다.
토요일에는 이 CRUD를 해결하기위해서는? useReducer와 useContext를 적용해봐야겠다고 생각해서, 강의를 들으면서 개념을 익혀서 적용해보려고 했지만.. 약 [3-4시간에 걸쳐서 + @:: 6-7시간]했을듯. 따라하면서, 이해하면서 했으니까.. 근데 마지막에 과정에서 데이터가 터져서? 렌더링 실패했다.
한가지 깨달은 것은 어떤 개념을 찾아서 적용해볼 때 강의를 보는 것은 매우 비 효율적이라는 것이다. 강의는 시간이 있을 때, 혹은 따로 시간을 내어서 공부해야하는 방법이라는 것이다. 이렇게 되니까 너무 비 효율적이었음.
그래 그래서 일요일.. 종호님이랑 진짜 몇번이고 소통을 했다. 데이터가 어떻게 들어오는지, 데이터를 어떻게 렌더링할지, 그리고 백엔드로 보내서 어떻게할지. 내 화면에서는 어떻게 렌더링되는지 계속 계속 고민하는데.. 쉽지가 않다.
무엇인가가 복잡한 느낌이 많이든다.
개념이 부족해서 그런 것이겠지..
하.. 너무 부족하다 실력이 ㅠㅠ. 어떻게 해야 이겨낼 수 있을까?
Day11(월)
오늘 오자마자 현우님한테 달려갔다.
이럴수가 .. (부모 - 2자식)의 2레벨 관계보다는 3레벨 관계로 컴포넌트 구조를 구성하는게 어떻냐는 피드백을 받았다. 맞긴했지.. 굳이 2레벨 관계를 유지하면서 state끌어올리기를 서로 주고받으면서 데이터를 주고 받고 할 이유가 없었거든.. 그리고 또 !! map을 돌렸던 구간을 한번 더 외곽에서 돌리니까 데이터를 주고 받는 과정이 수월 해 졌다.
각각의 버튼이 입력값을 받아서 붙었다.
이 과정을 통해서 진짜 컴포넌트 구조를 설계하는 것의 중요성을 다시 느끼게 되었다.
그래서 현우멘토님의 PR피드백을 바탕으로 코드를 수정하니까..
프론트 딴에서 리뷰하기 버튼을 눌러서 데이터를 붙여서 눈에 보이도록 렌더링함과 동시에 백엔드로 데이터를 전송하여서 화면을 리프레쉬 했을 땐 동일하게 붙도록 설계를했다. 그리고
삭제하기, 수정하기 기능을 붙이고 있는데.. id값 관련해서 백엔드측에서 주고 받는 설계를 짜지 못했다고하여서, 내일까지 수정하기 기능을 꼭 수행하고 통신 마무리해서 ! UI를 재 수정할 수 있도록 하자!
현우멘토님도 수요일까지 계시니까 빨리.. 해야지..!
- 오늘 멘토님들과 스프린트 미팅을 가졌는데 너무 재미있었다. 진짜 우리팀 분위기가 너무 좋다며, 함께 일하고 싶은 팀이라는 말씀을 듣게 되었는데 너무 기분이 좋았다. 개발자한테, 개발자로서 같이 일하고 싶다는 말을 듣는다는게 이렇게 기분 좋은 것이라니.. 잘 소통하고, 일적인 부분 뿐만 아니라 사적으로도 잘 지낼 수 있는 그런 에너지들이 함께 하고 싶은 동력을 만드는 것일까? 생각도 들기도 하고.. 오늘이 마지막 스프린트 미팅이라고 생각하니 조금 아쉬워서.. 앞으로 개발자 커리어 인생에 대한 조언들도 여쭤보고 했는데..
현우멘토님, 호준멘토님을 위코드생에서 프로젝트를 하는 1st,2nd 를 함께할 수 있어서 영광이었다.
리스펙트🫡
Day12(화)
드디어 댓글 CRUD 프론트/ 백엔드 통신 둘다 성공!!! 🤟😃🤟
음.. 진짜 소통.. 소통 소통의 중요성 너무 중요하게 깨달은 하루.. 더군다나
이번 CRUD작업을 하면서, 경민님,현우님,상헌님 도움을 받아서 구현할 수 있었는데 컴포넌트 구조에 따라서 레벨 뎁스가 달라짐에 따라 map메서드로 돌아가는 값이 컴포넌트냐, 아니냐에따라서 또 개별적인 관리를 할 수 있고,아닐 수 있음에 신기함도 느끼고 배울게 많은 하루였다..
저번주 금요일,토요일,일요일까지만해도 이걸 구현할 수 있을까?.. 어떻게 구현할 수 있을까?.. 왜 이렇게 어려운거야..! 생각만 했었는데 여러 사람들의 도움으로 해낼 수 있었다.
그러한 감사함을 항상 느끼고, 남들에게도 내 시간을, 지식을 베풀 수 있는 사람이 되자
Day13(수)
오늘은 웹 크롤링을 시도하다가 CORS오류 때문에 막혀서 하지 못했다. 그리고 조금 피피티 도와주고, 예솔님 덕분에 Canva라는 좋은 웹 ppt사이트를 알 수 있게 되었는데 굉장히 좋은 것 같다.
그리고.. 데이터 통신을 마무리하고 있는 단계여서, 다들 막바지인데.. 이 과정에서 조금 보수가 필요한 코드들을 손을 댔고, 구독페이지에서 중복되었던 코드를 컴포넌트화 하였는데,
배열만큼의 컴포넌트를 불러왔을 때, 그 배열안의 객체값을 온전히 넘길려면 정해준 item(card) 인자를 넘겨주면 되는 것이었다. 그래서 그 안의 컴포넌트에서 {card.property}를 쓰면 사용이 가능했다. 굳
예솔님 카카오페이 코드를 받아서~ 구독버튼에 결제 창 이동시켜서 하게 fetch하기 성공!!!
Day14(목)
프로젝트 마지막날, 최종 프로덕트를 점검하는 과정에서 이 부분, 저 부분, 안된 부분들을 하려고 하니까 다들 분주해지고, 조금은 예민했던 날이었던 것 같다. 특히나, 종호님이 불철주야 열일해주시지 않았다면 통신이 잘 마무리 안됐을 것 같다
어찌됐든! 목요일은 구독한 내역을 불러와서, 구독취소버튼을 누르면 그 값을 백엔드로 전송하는 작업을 하였고, 마이페이지의 이외 버튼들 취소/환불된 내역을 구현 하려고 했으나.. 설계가 조금 잘못된 부분도 있었고 DB작업이 안된 부분도 있어서 구현하는 것을 drop했다.
그렇게 프로젝트가 마무리되었다 ..!
Day15(금)
끝!!!!!
수고 많으셨습니다 우리팀!! 우리팀 짱짱짱~~!
Day16(토)
프로젝트 회고!
이번 프로젝트를 하면서 가장 많이 배운 것을 무엇일까?
백엔드와의 소통 이라고 단언하고 싶다. 진짜 어떻게 데이터를 주고 받을 것인지, 그리고 어떻게 화면에 렌더링할 것인지 제대로 알려줬다면, 혹은 얘기를 나눴다면 서로 서로 더 좋았을 것이라 많이 생각이 들었다.
아쉬웠던 점은 무엇일까??
온전하게 2차프로젝트에 집중하지 못했다는 것.. 아무래도 다들 2주차 부터는 체력적으로도? 떨어지는 시기와 더불어서 기업협업관련해서 세션이 진행되었기 때문에 이것 관련해서 다들 마음이 붕 뜨기도, 가라앉기도 했을 거라 생각한다.. 그래서 집중력있게 프로젝트에 힘을 쏟지 못했던 것 같다.
좋았던 점은 무엇일까?
팀 분위기! 내 생각엔, 이번 2차 프로젝트에서 가장 분위기가 좋은 팀이 아니었나싶다. 그래서 작업하는 동안에도 웃으면서 할 수 있었던 것은 팀이 앞으로 나아가는데 있어서 중요한 역할이지 않았나 생각한다.
마무리
2차 프로젝트는 끝났고, 협업 나가기 전 2일동안 그동안의 했던 것들을 잘 정리해보는 시간을 갖고 어떤것을 디벨롭할지 생각해보자!!!
