이번 주차를 진행하며 내가 가장 신경 쓴 부분/기술에 대한 정리 + 7주차 회고
우리는 클론 주차에 웹소켓을 중점으로 잡았기 때문에 먼저 나는 프론트 리덕스 툴킷( 상태관리 )를 완성 후 투입을 해야 겠다고 생각했다. 다만 회고에 작성한대로 웹소켓에 대한 지식부족으로 후에 컴포넌트 분리 과정에서 코드를 벌려 써서, 파라미터값이나 props를 불러 들이기가 정말 헷갈렸고 깨지는 css를 마지막에 다듬지도 않고 일단 소켓을 연결해보자! 라는식으로 방치하게 되었다. 이 상황에 기획의 중요성과 도전하려는 기술에 대한 지식습득이 필요하다는 것을 느꼈다.
먼저 나는 채팅홈 뷰, 채팅방 조회, 생성, 삭제와 채팅메세지 조회, 추가 부분을 맡았다
저번 첫날에 기획을 끝내고 초기 세팅(깃, 폴더, 컴포넌트 등)을 하고 채팅방을 클릭하면 그 해당 채팅방 메세지가 조회되게 설정하였다.
질문 중에 map이 작동하지 않는 오류가 있었는데 나는 여러 고민끝에 동료분께 받은 피드백으로 &&으로 어떻게든 작동이 되게 하였다 근데 기술매니저님께서는 꼭 &&으로 풀었어야 했으며 다른 방법을 찾아보라고 하셨지만 이후 프로젝트가 끝나고 웹소켓에 대한 얘기를 더 나누며 아직 해결하지 못했지만 곧 다른 프로젝트에서도 나올것이기 때문에 다음 포스팅에 나오게된다면 다시 풀어보고자한다,
그래서 객체를 array로 바꾸었지만 똑같았고
&&을 사용하여 작동은 정상적으로 됐지만 찝찝한 상황이다.,. 곧 이번 실전에서 풀어보겠다.
해결하지 못한 문제 : 웹소켓, 추가목표 : 하단 자동 스크롤 , 채널추가 모달 =================================================================
컴포넌트 첫 호출 시 채널의 메시지를 받아오는 비동기 함수가 실행되는 동안 JSX코드에는 undefined값이 들어와 map 함수를 실행할 수 없어 에러가 발생했다. 그래서 &&를 작성하였고 && 앞에 피연산자가 빈값이면 뒤에 실행이 안되고. 앞에 값이 붙어있어야만 실행이 됩니다. and 연산자는 false로 평가된 피연산자 이후에 피연산자를 평가하지 않는다. 0 && 실행안됨 1 && 실행됨 False 조건: undefined, null, '' (빈문자열), 0
그리고 중점이었던 웹소켓 부분
아. 깃헙 브런치 사용에 대한 피드백도 질문드렸지만 밑에 깃헙 사용은 잘했다고 해주셨다.
https://github.com/munilin/slack_clone_fe/blob/master/src/pages/ChatRoom.js
GitHub - munilin/slack_clone_fe
Contribute to munilin/slack_clone_fe development by creating an account on GitHub.
github.com
웹소켓 연결 부분인데 코드를 처음 가져올때도 전 기수들 웹소켓 부분을 복붙해서 가져왔으며 리덕스 액션함수 자리들을 우리 액션들로 바꿔가며 어떻게든 구동을 시켜보자라는 마인드였다. 그렇게 이해를 해보자라는 식으로 가다보니 큰틀은 무슨 매니저님의 디스패치를 꼭 써야하냐는 질문에도 답변을 제대로 하지못했다. 전 기수가 했다고 쉽게 볼 수 있는 기술이 아니었고 막상 빠르게 하려고 복붙 후 액션과 값들만 수정하려니 전체는 아직 이해하지 못했다.
하지만 그렇게 프론트팀원분과 오류를 수정해나가면 백엔드 cors로 인한 와일드카드 * 수정을 거치고 거쳐 마지막 오류인 jwt토큰 value 값이 각각 한개의 객체로 나와 찍히는 걸 발견했는데 미리 캡처하지못했고 현재 서버가 꺼져있는 상태다.
채팅방 연결과, 메세지 작성 그리고 메세지 작성 내역 까지 콘솔에 찍혔고 그 다음은 토큰값이 찍히는 오류를 보고 거의 다 와서 아쉽다며 클론주차는 마무리 됐지만 후에 실전 중에 우리 다같이 모여서 꼭 해결하자는 다짐과 함께 다음 실전으로 넘어가게 되었다. 이 부분도 해결해야할 부분이다. 또는 이번 실전에서 웹소켓 얘기가 나왔고 기술을 쓰면 고객센터 쪽으로 사용하고자 한다. 해보자.
6월 20일 ~6월 23일 43~46일차
이번 주는 클론코딩, 슬랙을 시작했으며 마무리를 진행했다. 우리는 웹소켓을 중점으로 잡고 다같이 으쌰으쌰해서 완성시키고자하는 목적이 있었지만 결과적으로는 완성시키지 못했다. 정말 아쉬웠다. 그 문제로는 웹소켓에 대한 이해가 부족한 상황과 1주일이라는 시간이 있었지만 일단 나는 코딩에 대한 기초지식 부족으로 채팅방 조회, 생성,삭제, 채팅메세지 추가, 조회리덕스 툴킷으로의 상태관리를 담당하는 상태에서 웹소켓을 공부하기는 시간이 부족하였다.
저번기수에 슬랙의 웹소켓을 완성한걸 보고 우리도 할 수 있을줄 알았지만 쉽지않았다. 그리고 프론트단에서는 연결에 중심을 맞춰나가 난이도는 백엔드보다 낮았지만 그 마저도 연결에 어려움을 느꼈다. 이유로는 미리 설계하지 않고 먼저 폴더 구조를 만들고 그 중간에 넣으려다보니 컴포넌트들이 겹쳐 위치를 찾기 어렵고 css가 망가지는 위험이 있었다.
연결까지는 완료됐지만 마지막 토큰이 객체에 담겨 한 글자씩 나오는 오류에서 클론코딩 주차가 마무리 되었다.
프론트 발표 또한 그나마 있던 트러블들을 발표하려 했지만... map이나 컴포넌트 사용등 정확한 질문이 아니라 시간 끄는 느낌이었기에 발표는 더 산으로 가버렸다. 아직도 잘모른다.
6월 24일 47일차
그렇게 시간은 벌써 실전프로젝트 주가 되었고 팀이 배정되었다. 정말 많이 부족하다 부족해 기초공부가 필요하다
지금까지 따라가느라 정신없었지만 강의는 끝났고 이제 구글링과 직접 구현만 남았다. 이 상황에서 더욱 더 기초 공부가 필요하다. 강의를 몇개 추천받고 쉬는 일요일이라도 봐야한다. 살아남기 위해서. 가자.
팀이 배정되고 기획 시간을 넉넉히 잡게되었다. 다행히 팀원분들과 서로 소통이 원활하고 기획 시간에 다들 집중해서 기획을 해나가고 있다.
6월 25일 48일차
오늘 토요일. 기획을 오늘 픽스하면 좋겠다는 의견으로 디자이너님과 기획을 마무리 짓는 단계에서 사용성을 위주로 기획을 했지만 이렇게 프로젝트가 끝나고 서버를 켜놓을 수 없다면 꼭 사용성이아니라 재밌는 기획이 필요하다해서 잠시 기획 부분을 수정하려했지만 결국 진행된 상태에서 엎기에는 서로 무리가 있다 생각하여 현 기획으로 진행 하되 획기적인 요소들을 추가해보기로 하였다. 이제 쉬는 일요일에도 집중이 필요하다. 마지막이다 희린아 집중해야한다.