분류 전체보기

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라면 이런 일로 에러메시지를 줄 만큼 친절하지도 않을 것..

프로그래머스 징검다리 건너기 1. 문제 카카오 초등학교의 "니니즈 친구들"이 "라이언" 선생님과 함께 가을 소풍을 가는 중에 징검다리가 있는 개울을 만나서 건너편으로 건너려고 합니다. "라이언" 선생님은 "니니즈 친구들"이 무사히 징검다리를 건널 수 있도록 다음과 같이 규칙을 만들었습니다. 징검다리는 일렬로 놓여 있고 각 징검다리의 디딤돌에는 모두 숫자가 적혀 있으며 디딤돌의 숫자는 한 번 밟을 때마다 1씩 줄어듭니다. 디딤돌의 숫자가 0이 되면 더 이상 밟을 수 없으며 이때는 그다음 디딤돌로 한 번에 여러 칸을 건너뛸 수 있습니다. 단, 다음으로 밟을 수 있는 디딤돌이 여러 개인 경우 무조건 가장 가까운 디딤돌로만 건너뛸 수 있습니다. "니니즈 친구들"은 개울의 왼쪽에 있으며, 개울의 오른쪽 건너편에 ..

코어 자바스크립트를 읽으면서 공부한 내용을 저의 입맛에 맞춰 정리하였습니다. 혹시 이 글을 읽게 되시면 잘못된 내용이 있을 수 있으니 비판적인 시각으로 읽으시는 걸 추천드립니다. 프로토타입 자바스크립트는 프로토타입 기반 언어입니다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻습니다. 1. 프로토타입 개념 이해 어떤 생성자 함수를 new 연산자와 함께 호출하면 Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스가 생성됩니다 이때 instance에는 proto라는 프로퍼티가 자동으로 부여되는데 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조합니다. prototype..

코어 자바스크립트를 읽으면서 공부한 내용을 저의 입맛에 맞춰 정리하였습니다. 혹시 이 글을 읽게 되시면 잘못된 내용이 있을 수 있으니 비판적인 시각으로 읽으시는 걸 추천드립니다. 클로저 클로저란? 클로저란 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수를 B를 외부로 전달한 경우 A의 실행콘텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상입니다. 클로저는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성입니다. 자바스크립트의 고유의 개념이 아니라서 ECMAScript 명세에서도 클로저의 정의를 다루지 않고 있고, 다양한 문헌에서 클로저를 다르게 정의하고 있습니다 MDN에서는 클로저에 대해 A closure is the combination of a function and the lexci..

코어 자바스크립트를 읽으면서 공부한 내용을 저의 입맛에 맞춰 정리하였습니다. 혹시 이 글을 읽게 되시면 잘못된 내용이 있을 수 있으니 비판적인 시각으로 읽으시는 걸 추천드립니다. 콜백 함수 간단히 말해서 콜백 함수는 다른 코드의 인자로 넘겨주는 함수입니다. 콜백함수는 다른 코드에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행합니다. var count = 0; var cbFunc = function() { console.log(count); if (++count > 4) clearInterval(timer); }; var timer = setInterval(cbFunc, 300); // -- 실행 결과 ..