전체 글

JavaScript Set 내 맘대로 구현하기

서론 Symbol을 학습하면서 iterator 부분을 직접 코드로 작성해보고 싶어졌다. 그래서 간단한 Set을 직접 구현해서 iterator을 적용해봐야지 했다. iterator 부분은 금방 구현했다. 하지만 Set을 JavaScript의 Set과 최대한 비슷하게 만들고 싶었는데 그 부분이 잘 안됐다. 갑자기 이상한 곳에 꽂혀서 이래저래 삽질한 과정을 글로 남겨보려고 한다. 자료구조로서의 Set Set은 자료구조로서 비단 JavaScript에만 존재하는 개념은 아니다. 간단히 정리해 Set은 다음과 같은 특성을 갖는 자료구조이다. 보관된 값들에 순서가 존재하지 않는다. 각 값들은 중복되지 않는다. 값의 존재 여부를 파악함에 용이하다. Javascript에서의 Set을 간단하게 직접 구현해보기로 하자. (..

우아한테크캠프 5기를 마치며

우아한테크캠프가 8월 30일부로 종료되었다. 두 달간의 교육과정을 마치고 수료한 후기를 작성해보려고 한다. 사실 끝나고 바로 쓰려고 했는데 미루고 미루고 미루다 이제야 쓴다. 더 미루면 안 쓸 것 같았기에.. 2022년의 여름 나는 매년 여름마다 어디론가 놀러 갔던 나의 모습을 통해 그 해의 여름을 기억하곤 했다. 2021년은 제주도... 2020년은 가평... 2019년은 유격..(엥?) 하지만 2022년 여름은 그저... 우테캠이었다. 작년 목표가 잔디(contribution) 1000개 넘기는 것이었는데 두 달 만에 800개의 잔디를 때려 넣으며... 우아한테크캠프와 함께 여름을 불태웠다. 5개의 프로젝트 우아한테크캠프는 한마디로 채용연계형 과제 기반 자가성장 인턴십(?)이다. 회사의 업무를 하는 ..

우아한테크캠프 5기 최종합격 후기✨

문자 한 통이 왔다. 하지만 메일로 안내를 드렸다는 내용인데 내 메일에는 어떤 메일도 오지 않았다. 내 이름이 아닌... {{지원자}} 인 것을 보고 갑자기 불길한 예감이 들어 에이.. 설마 .. 하며 온갖 네이버, 지메일, 다음 ... 온갖 이메일을 뒤져보기 시작했다. 식은 땀이 나려던 찰나, 스팸메일함에서 합격 메일을 발견했다! 면접 준비 이런저런 일정때문에 2차 과제테스트 합격 이후에 면접을 준비할 수 있는 시간이 그렇게 많지는 않았다. 우선 4기의 면접 후기들을 정독했다. 딥한 기술질문 보다는 포트폴리오, 자소서 위주의 질문이 주를 이룬다는 이야기가 많았다. 사실 기술질문은 뭐 몇일동안 바짝 준비한다고 면접관분들의 꼬리질문을 피해갈 수는 없다고 생각했다. 그래서 CS나 자바스크립트, 리액트 등의 ..

Yarn Berry로 node_modules를 해치우자

서론 npm과 yarn v1이 가지고 있던 고질적인 문제점을 해결해주는 Yarn Berry의 등장! node_modules의 큰 용량 차지, package.json에 명시되어있지 않은 패키지를 사용하는 유령 의존성 등을 해결해줄 수 있다. yarn v1으로 관리되고 있던 프로젝트를 Yarn Berry를 사용하도록 migration 해보자. Yarn Berry 적용하기 우선 yarn을 설치한다. npm install -g yarn 그리고 프로젝트의 루트로 이동한 뒤 yarn berry로 변경해준다. yarn set version berry 그리고 lockfile을 생성해준다. yarn install 프로젝트에 새로운 파일들이 추가된 것을 확인할 수 있다. .pnp.cjs pnp.cjs는 의존성을 확인할 수..

간단하게 React 리렌더링 최적화하기

무거운 컴포넌트 만들기 무거운 작업을 하는 컴포넌트를 흉내내기 위해서 다음과 같은 컴포넌트를 정의해보자. function Child() { let start = new Date().getTime(); for (; new Date().getTime() - start c + 1)}>자식 상태 변경 자식상태: {count} ); } 버튼을 누를 때마다 Compo..

우아한테크캠프 5기 1차, 2차 코딩테스트 후기

1차 코딩 테스트 1차 코딩테스트는 4문항으로 이루어져있었다. 1번은 몫과 나머지를 활용하는 간단한 문제였다. 2번은 정렬과 compare 콜백 함수의 이해도를 묻는 문제였다. 빈출유형인 것 같다. 3번은 정확히 기억이 나지는 않지만 기본적인 BFS문제였다. 4번만 한시간 이상 붙잡고 있었던 것 같은데 해결하지 못했다. 완전탐색 방식으로 접근하다가 실패했다. 전체적인 난이도는 백준 골드 이하라고 생각된다. 4번도 시간이 조금만 더 있었더라면 풀 수 있었을 것 같은데 많이 아쉽다. 전체 테스트케이스 채점결과가 공개되지 않다보니 기본적인 예외처리에 좀 더 신경써야한다. 자바스크립트의 능숙도, 문제를 파악하고 코드로 풀어내는 능력이 가장 중요할 것 같다. 2차 코딩 테스트 사실 4기에도 지원했었는데 2차 코..

Vanilla Javascript로 간단한 SPA 라우터 구현해보기

Vanilla Javascript로 간단한 SPA 라우터 구현하기 서론 본문을 이해하려면 History API와 브라우저의 History 스택에 대한 이해가 필요하다. SPA의 경우 페이지를 이동할 때 anchor 태그를 활용해 새로운 html을 불러오는 게 아니다. index.html 하위의 DOM을 갈아 끼우면서 다른 페이지를 보여주는 방식이다. 이때 새로운 HTML을 불러오지 않으면서 어떻게 앞으로 가기 뒤로 가기를 구현할 수 있을까? 답은 History API에 있다. 브라우저에서 제공하는 History API의 자세한 설명은 여기서 참고하길 바란다. 프로젝트 구조 ├── index.html ├── main.js ├── package.json ├── 📦 src │ ├── app.js │ ├── 📦..

React 18 의 새 기능 자동 배칭(Automatic Batching)은 무엇일까?

React 18 릴리즈를 살펴보며 Automatic Batching에 대해 탐구해보고 실험한 것을 정리한 글입니다. Batching이란 무엇일까? React 공식문서 번역 ( https://reactjs.org/blog/2022/03/29/react-v18.html ) Batching이란 React가 더 나은 성능을 위해 여러개의 state 업데이트를 한 번의 리렌더링으로 묶어서 진행하는 것을 말한다. Automatic batching이 없다면 React의 이벤트 핸들러 내부에서만 batched 업데이트가 가능했다. 기존에는 Promise의 내부나 setTimeout 혹은 native 이벤트 핸들러에서는 React에 의해 배칭 되지 않았다. Batching은 어떤 이점을 주는가? 당연히 성능적인 이점이다..

React에서 Intersection Observer로 이미지 Lazyloading 구현하기 with 콜백 ref

이슈 COEAT 이라는 서비스를 개발하고 있었다. 약 50개의 이미지를 한 번에 불러오는 페이지가 있는데 이 부분에서 문제가 발생했다. 이미지의 크기가 너무 크다 보니까 50개의 이미지를 한 번에 요청하니 페이지가 멈춰버리는 것이었다. 이를 해결하기위해 서버 측에서 Image Resizing을 진행하기로 했고 클라 측에서는 Lazy loading을 추가하기로 했다. 사실 이미지의 리사이징만 완료되어도 성능이 대폭 개선될 것이다. 하지만 추후에 불러와야할 이미지들의 개수가 늘어가게 되었을 때에는 리사이징만으로는 한계가 있을 것이라고 판단했다. 이에 이전에 한 번 살펴보았던 Intersection Observer API를 사용해서 유저가 특정 위치에 도달했을 때 이미지를 로딩할 수 있도록 구현해보았다. In..

카카오맵 API를 리액트스럽게 사용해보자

서론 이번에 진행하는 프로젝트에서 지도를 통해 정보를 제공하는 기능이 필요했다. 많은 지도 API 중에서 하나를 선택해야 했는데 카카오맵을 사용하기로 했다. 그 이유는 카카오맵 API의 개발자 커뮤니티가 잘 활성화되어있고 공식문서 구성이 깔끔했다. 또한 프로젝트에서 다루게 될 지도의 영역이 서울시였고 주변 건물들의 위치정보가 잘 드러나야 했기 때문에 이러한 점들을 고려하여 카카오맵을 최종적으로 선택하게 됐다. 이 글을 통해 카카오맵 API를 좀 더 React 환경과 어울리게 사용하고자 고민했던 과정을 공유해보고자 한다. 카카오맵 API 불러오기 https://apis.map.kakao.com/web/guide/ 공식문서에 카카오맵을 불러오는 방식이 잘 정리되어있지만 그래도 ! 작성해보겠다. API 키 발..