분류 전체보기

Sara-Mara 웹 사이트 성능 개선하기 요구사항 아래의 이미지에서 알 수 있듯이, 현재 Sara-Mara 사이트의 메인 페이지의 성능이 눈에 띄게 좋지 않고, 실제로 PageSpeed Insight로 페이지를 진단한 결과 성능에서 매우 안 좋은 지표를 확인할 수 있었다. 지표로 봤을 때 LCP가 10초 대로 이미지 렌더링에 많은 시간이 걸린다는 것을 알 수 있었고, 이는 이미지 크기와 형식을 최적화한다면 어느정도 성능 향상을 기대할 수 있을 것으로 예상했다. 코드 스플릿 이미지 파일의 최적화를 통해 성능을 계선할 수 있을 거라 생각했지만, 우선은 lazyloading을 통해 성능개선을 시도해 보았다. Lazy Loading? Lazy Loading 이란 동적 임포트를 통해 초기에는 처리되지 않은 상태..

1. 요구사항 앞서 1편에서는 새로운 개발자님이 합류하게 되어 코드를 쉽게 할 수 있도록, 폴더구조 변경, 코드 리펙토링과 같은 작업을 거쳤다. 새로 온 개발자님과 나 모두 꾸준히 사이트를 개선하고 관리할 생각이었기 때문에, 앞으로의 원활한 협업을 위해 추가 환경을 개선하기로 하였다. Storybook을 활용하여 코드리뷰를 하자 이 프로젝트에서 기획자, 디자이너님들과 원할한 협업을 해보기 위해 Storybook을 활용하고 있었다. 여기서 더 나아가, 기존에 develop에 푸시 됐을 때, 자동 배포되던 Storybook을 Pull Request시 배포되도록 한다면 코드리뷰에도 활용할 수 있으리라 생각했다. 이에 Storybook과 github action을 통해 나의 개발내용이 develop으로 푸시될 ..

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..