Je개발 일지

이번에는 프로젝트를 통해서 얻어낸 것들을 쓰고자 한다. 쓰려고 마음은 많이 먹었는데, 새해 되면서 조금은 쉬고 싶다는 생각에 미루게 되었지만, 이제 다시 월요일 시작하는 날인 만큼 공부 자세를 다시 갖추고자 한다. [ 오늘의 TODO ] Vue.js 추가 학습 기술 면접 대비 [ 프로젝트하며 얻은 교훈 ] 1. 에러가 나의 선생님 에러는 하나하나가 소중하다. 코드 스테이츠 모든 기간 통틀어서 가장 공부를 많이 한 때가 언제인지를 생각해보면 프로젝트할 때라고 단언할 수 있다. Section 1, 2, 3 을 거치면서 남에게 가르침을 받았을 때보다 프로젝트가 더 공부가 많이 된 이유는 바로 내가 직접 코드를 작성하고 그에 따라 발생하는 에러들 때문이다. 에러가 발생하면서 내가 계속해서 실수하고 있는 것이 무..

Final-Project 발표 최종 영상 보러 가기 (Youtube) 에필로그에서는 코드 스테이츠를 진행하면서 따로 블로깅하지 못했던 내용들을 적어보고자 한다. 가장 첫 번째로, Final-Project 회고를 진행하고자 한다. 저번에 Final-Project 끝나고 나서 너무 진이 빠진 바람에 블로깅을 제대로 작성하지 못했는데 더 늦으면 기억이 가물가물할 것 같아서 최대한 빨리 작성하려고 한다. [ 오늘의 TODO ] 크리스마스에도 공부는 지속된다 (이제 코드 스테이츠도 끝났겠다 서식도 조금씩 바꿔야할 거 같다) [ 프로젝트 하며 힘들었던 점 ] 1. 기능과 페이지 구상까지 끝마친 아이디어 백지화 처음부터 우리를 멘붕에 빠트리게 만든 주범. 이때, 팀 분위기가 말 그대로 박살이 났었다. 우리가 초기에 ..

발표까지 끝났다. 아직, Final Project 한 거 더 수정해야할 사항들이 많이 있다. 그럼에도 4주라는 그 긴 시간은 여기에서 마침표를 찍었다. 하고 싶은 얘기는 많은데 힘들게 달려온 만큼 회복의 시간을 갖고 Final Project 를 회고하는 시간은 조금 더 지난 다음에 쓰도록 하겠다. 이제 코드 스테이츠 수료까지 얼마 안 남았다

일단 솔로 기술 영상은 찍었다. 피드백을 받은 내용들이 있어서 곧 수정 작업을 거쳐야 하지만, 그래도 일단은 촬영은 했으니 여기에 남겨두고자 한다. 다음에 팀 발표 영상인 남았다. 솔로 기술 영상은 나 혼자만 책임지면 되기 때문에 괜찮았는데 팀 발표 영상은 나 말고도 다른 팀원들이 함께 하고 있고, 또 유튜브에도 영상을 올려야 해서 조금 긴장이 되는 것 같다. 어떻게든 모두가 영상으로 보는 사람들로 하여금 좋은 인상을 남길 수 있도록 발표문과 PPT 를 잘 짜봐야 할 것 같다.

발표 준비를 하는 중에 에러가 발생했다. 에러의 내용은 이미지를 제대로 불러오지 못한다는 것이었다. 에러의 원인은 Sequelize 에서 옵션을 잘못 주었던 것이었다. 데이터베이스에서 한 아이디와 최대 세 개의 이미지 까지 join 될 수 있다. 이는 카드가 4개가 있다면 12개의 이미지까지 불러올 수 있다는 말이다. 그러나, Sequelize limit 옵션을 6으로 줘서 제대로 이미지를 불러오지 못하는 에러였다. 발표 준비로 인해 머리를 싸매느라 제대로 신경을 쓰지 못했지만 백엔드 쪽에서 잘 해결한 것 같다. 해결은 2시간 내에 완료됐다. 개인 발표문은 따로 준비하고 있는 중이고 팀 발표문은 다음처럼 준비했다

발표 준비를 위해서 머리카락도 자르고.. 조금은 쉬는 타임 현재는 발표문을 어떻게 만들지 고민중이다. 다행히 오늘은 에러가 발견되지 않았다.

드디어 2차 마감이 끝났다. 생각한 것보다 에러가 너무 많이 나와서 시간이 지체됐다. 우리가 초기에 계획했던 모든 기능들은 다 구현했다. 한 가지 아쉬운 점이 있다면 아무래도 관리자 페이지를 갑자기 내가 맡는 바람에 원하는 만큼의 퀄리티가 나오지 않았다는 점이다. 모바일로 보일 수 있도록 구현하고 싶었으나 팀원들의 반대에 부딪혀 구현하지 못했다. 아무래도 디자인적인 요소보다는 기능적인 요소에 더 신경을 쓰라는 의미였던 것 같은데 그 부분이 사실 아쉽긴 해서 다음 리팩토링 때는 수정 작업을 거쳐야할 것 같다. 이제 어느 정도 마무리가 됐으니 바로 발표준비에 들어간다. 이번에는 발표를 두 개 준비해야 한다. 하나는 개인 기술 발표 영상이고 다른 하나는 저번에도 했던 팀 발표 영상이다. 개인 기술 발표는 아무..

key 값 최상단에 주기 콘솔창에 나는 에러를 없애기 위해서 알아보고 있었다. 발견했던 에러는 key 값을 주지 않았다는 것이다. 밑의 코드를 보면 그 콘솔창에 뜨는 에러를 없애기 위해서 key값을 안 준 곳이 없었다. 그럼에도 저 에러가 발견되는 것이 좀 이상했다. 이것저것 만져보다가 혹시나 싶어 fragment 태그를 div 태그로 바꾼 다음 key 값을 주니 정상적으로 작동했다. 두 번째 스크린 샷에는 DayWrapper 나 BubbleBox 에 key값이 들어가 있지만 현재 내 코드 상에서는 완전히 지워버렸다. 배포된 환경 때문에 난 에러인지 로컬에서도 나타나는 에러인지 파악할 것 아무래도 로컬 환경에서는 잘 되던게 배포 환경에서는 cors 에러가 종종 나다보니 클라이언트에서 서버로 요청 보내는 ..

resize 이벤트 window 에 scroll 처럼 resize 라는 이벤트가 존재한다. 브라우저의 넓이가 달라지는 이벤트를 가리킨다. 내 메인 페이지는 모바일일 때, 태그의 위치 순서가 바뀐다. 그런데 브라우저의 사이즈를 줄이다 보면 모바일 사이즈 768px 이 됐을 때 딱 바뀌지 않고 스크롤 이벤트가 한 번 발생하면 그제서야 바뀌었다. 다시 말하면, 모바일 사이즈가 됐음에도 불구하고 별다른 이벤트가 발생하거나 렌더링 되는 요소가 없다고 하면 계속 데스크탑인 상태의 태그 순서로 존재하게 되는 것이었다. 이 문제를 해결하기 위해 딱 알맞은 이벤트가 resize 이벤트였다. 그리고 초기에는 isMobile = window.matchMedia('screen and (max-width: 768px)').ma..

누군가 한 번 나간 룸에서 다시 룸을 생성할 수 없던 문제 채팅방을 나가면 데이터베이스에서는 나간 사람이 left 라는 column 에 'left' 라는 문자열이 들어가도록 했다. 방을 생성할 때 조건을 보면 myRooms 와partnerRooms 를 모두 가져오고 그 방들 중에서 공통된 roomId 가 있다면, 즉 둘이 함께 들어가 있는 방이 존재한다면 방을 생성하지 않는 걸로 설정했다. 이 로직의 문제점은 누군가가 'left' 를 했더라도 방을 새롭게 만들어야 하는데 이미 데이터베이스에서는 둘 다 같은 방 id 에 있는 걸로 돼 있으니 (두 유저가 모두 나가야만 해당 roomId 와 그와 관련된 데이터베이스가 모두 사라지도록 하는 로직으로 작성했기 때문) 새롭게 방을 생성하지 못했던 것이다. 그래서 ..