전체 글

1. 요구사항 사이드 프로젝트로 진행했던 사라 마라 웹사이트를 조금 더 고도화하기로 결정했고, 그에 따라 기존에는 나 혼자 하던 프런트엔드 개발을 한 명 더 추가해서 진행하기로 했다. 이 과정에서 기존에 작업된 내용물을 새로운 팀원과 설명해주어야 했고, 함께 작성하기 위한 몇 가지 규칙을 정하기로 하였다. 1. 리펙토링을 하자 1-1. 요구사항 새로운 개발자님이랑 처음으로 코드를 설명해 주기 위해 줌 미팅을 했지만, 생각보다 내 코드를 설명해 주는 것이 쉽지 않았다. 그 이유는, 첫 번째로 주석 처리가 부족하다. TDD를 염두에 두며 아주 작은 view 단위도 컴포넌트화 했지만, 주석이 부족했기 때문에 새로운 개발자가 재사용은커녕 코드를 이해하기도 어려웠다. 두 번째로, 폴더구조가 복잡하였다. 각각의 모..

디바이스 크기에 따라 width 값을 결정하는 Hook 요구사항 텍스트 버블 차트를 프로젝트에서 활용하며, 프로젝트 마감 기한이 짧았기 때문에 내가 직접 구현하기보다 다른 사람이 d3를 통해 제작한 텍스트 버블 라이브러리를 사용했다. 하지만, 다른 사람이 제작한 라이브러리라서 나의 프로젝트와 맞지 않는 점이 있었는데, float된 요소가 많은 우리 프로젝트에서는 어느 정도의 반응형이 필요했지만, 이 라이브러리는 width 값을 프로퍼티로 받아 내부에서 svg를 조정하기 때문에 css로 반응형을 제어할 수 없었다. 이를 제어하기 위해서는 디바이스 크기에 따라서 width값을 js로 조작할 필요가 있었다. 해결과정 // hooks. js export function useWindowSize() { const..

비사이드 프로젝트를 진행하면서 10일 동안 프론트 개발부터 배포까지 전반을 맡았다. 그중에서도 가장 걱정 됐던 부분이 배포였는데, 그 이유는 예전부터 배포는 어려운 것이라는 이미지가 강했고, 비사이드는 네이버 클라우드 플랫폼을 활용하여 배포하기 때문에,자료가 비교적 적을것이라고 생각했기 때문이다. 하지만, 백엔드 개발자 팀원이 미리 서버를 구성한 상태에서 프론트배포만 하는 것은 생각보다 간편했고, 무엇보다 NCP의 이용자 가이드로 손쉽게 배포할 수 있었다. Putty를 활용하여 서버(linux) 컴퓨터에 접속하기 우선, NCP에서 컴퓨터를 빌렸고 환경을 구성했다면 내 컴퓨터에서 빌린 컴퓨터를 조작할 수 있어야한다. 그것을 도와주는 프로그램은 여러개가 있겠지만, 나는 PuTTY를 이용했다. Node 설치하..

프로젝트를 본격적으로 진행하기 전 와이어프레임으로 UI를 제작하던 중 received `true` for a non-boolean attribute 이런 경고메시지가 나를 괴롭혔다 사실 경고메시지이고 내가 원하는 기능도 제대로 작동하였지만, 빨간색 글씨를 보고도 못 본 척하는 것은 너무 힘든 일이었기에 금방 해결될 거라 믿고 에러의 원인을 고민하였다. (해결하기까지 두시간이 걸렸다) 에러가 말하기를 primary는 non-boolean을 가지는 속성인데 false라는 불리언 값을 주었다고 한다. 하지만 나의 관련 코드를 보면 난 분명 propType으로 bool 타입으로 명시했으며, 설령 그렇지 않더라도 TypeScript가 아닌 JavaScript라면 이런 일로 에러메시지를 줄 만큼 친절하지도 않을 것..