HYE-ON HYE-ON

2022년 회고는 적다가 지웠다 적다가 지웠다 하다가 결국 쓰지 못했다. 중순에 있었던 해산의 과정을 되돌아보기가 힘들었고, 적다 보니 좋지 않은 기억만 자꾸 되새기게 되는 것 같아서 그만뒀다. 금방 까먹을 것 같진 않으니 언젠가 다시 돌아볼 수 있는 날이 온다면 그때는 짧게나마 기록해 둘 수 있지 않을까. 2023년 12월 21일. LA로 가는 비행기 안에서 회고를 적기 시작했다. 왕복 합하면 24시간이니 비행기에서 할 것도 없고 끝내면 된다고 호기롭게 생각했는데 갈 때는 옆자리 유학생이랑 떠들고 올 때는 자느라 완성하지 못했다. 그래서 한국에서 1월 5일까지 회고를 작성하고 1월 28일에 블로그로 옮기고 있다. 그리고 2월이 되어서야 퇴고를 하고 발행 버튼을 누른다. 🧑‍💻 이직 (혹은 취뽀?) 20..

어째서인지 2021년이 끝나고도 16일이나 지나고 말았다. 1월의 중반에서야 2021년 한해, 21살의 나를 돌아보았다. 아래에서 다시 이야기하겠지만 작년 회고에서 다짐했던 2021년의 목표인 '기록하기'를 제대로 하지 않아 이번에도 캘린더 앱과 투두메이트 그리고 슬랙 히스토리의 도움을 받았다. 올해야말로 정말 꼭....... 🧑‍💻 이직 (부제: 트위터로 이직하기) 이직을 했다. 생애 첫 회사를 떠나 생애 첫 이직 절차를 거쳐 두 번째 회사에 합류한 지도 2022년 1월 기준 9개월 정도 되었다. 이직하는 과정에 꽤 다이나믹해서 나중에 연사할 때 써먹어야지 했는데 연사를 할 용기도 없고, 코로나 때문에 행사도 잘 열리지 않아서 그냥 회고에다가 쓰기로 결정했다. 첫 회사에서 계속 코드를 복..

저번 포스트 Promise에 이어 ES6+에서 비동기 처리를 할 때 사용하는 Async/Await에 대해 알아봅시다. 💪 Async/Await란 Async와 Await는 단순히 말해 Promise의 업데이트된 버전으로, 편리하고 깔끔한 비동기 코드를 작성할 수 있습니다. 먼저 MDN Document에서 Async와 Await를 어떻게 설명하고 있는지부터 살펴볼까요? Async Async를 MDN Document에서 찾아보면 이렇게 설명하고 있습니다. async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. 간단히 한 줄로 정리하자면, A..

∞ 페이징과 무한 스크롤 데이터가 많은 리스트를 보여주는 방법에는 크게 두 가지가 있습니다. 첫 번째는 게시판에서 주로 볼 수 있는 페이징 방식이고 두 번째는 인스타그램이나 페이스북 등에서 볼 수 있는 무한 스크롤 방식입니다. 페이징은 위 사진과 같이 한 페이지당 나오는 데이터의 개수가 정해져 있고 주로 1부터 시작하는 페이지를 옮겨가며 여러 건의 데이터를 순차적으로 조회하는 방식입니다. 무한 스크롤은 페이지를 나누지 않고 특정 이벤트 (주로 스크롤 이벤트)가 발생하는 경우 기존에 나와있는 데이터 이후 건들을 조회해 노출하는 방식입니다. 🤔 왜 이 포스트를 작성했나요? 얼마 전 새로운 리스트 페이지를 구현할 일이 생겼습니다. 쌓인 로그를 단순히 보여주기만 하는 리스트 페이지이기 때문에 굳이 페이징 처리를..

JavaScript에서 비동기 처리를 할 때 사용되는 중요한 기능 Promise에 대해 공부했습니다. Promise란? MDN Document에서 Promise는 아래와 같이 설명하고 있습니다. Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결괏값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다. 즉, Promise는 어떤 값이 언제 리턴될지 모르는 비동기 작업을 진행할 때 사용되는 객체로, 비동기 작업의 실패나 성공 처리를 할 수 있습니다. Promise의 기본 Promise는 세 가지 형태를 갖습니다. 대기(pending): 성공 혹은 실패 여..

자바스크립트에서 빈 값 등을 검사할 때 || 연산자를 사용하거나 함수의 인자로 들어오는 값을 체크할 경우 Default Value를 지정하여 사용합니다. 이때 || 연산자에서 우변에 있는 문장을 실행하는 경우와 Default Value가 세팅되는 경우의 차이점을 정리하고자 포스트를 작성하였습니다. || 연산자 MDN document에 따르면 논리 연산자 ||(OR)는 피연산자 중 하나의 값을 반환하므로 Boolean 외의 다른 값과 함께 사용하면 Boolean 값이 아닌 것을 반환할 수 있습니다. val1 || val2이라는 문장이 있었을 때, val1을 true라고 판단한다면 val1을, 아니면 val2를 리턴합니다. 이때 false라고 판단되는 자바스크립트의 경우는 아래와 같습니다. null NaN ..

서로 다른 객체 배열이 있을 때 두 객체 배열에 공통적으로 들어있는 객체 요소를 찾아내는 방법에 대해 설명합니다. let enterprise = [ { name: 'SULU', species: 'Human' }, { name: 'KIRK', species: 'Human' } ]; let yorktown = [ { name: 'BEN', species: 'Human' }, { name: 'DEMORA', species: 'Human' }, { name: 'SULU', species: 'Human' } ]; 위와 같이 배열 enterprise와 yorktown에는 객체(Object)들이 들어있습니다. yorktown에 존재하는 객체 중 enterprise에도 동일하게 들어있는 객체를 찾고자 한다면 어떻게 해..

🤔 왜 코드 리뷰를 시작했나요? 현재 제가 다니고 있는 회사에는 코드 리뷰 문화가 없습니다. 사내 소스 관리 툴인 GitLab에 Merge Request를 올리고 본인이 본인의 Merge Request를 승인하는 방식으로 코드를 관리하고 있죠. 빠르게 패치해야하는 hotfix건이 많아 코드 리뷰를 할 시간도 없고, 리뷰 문화에 익숙한 사람도 없는 이유로 코드 리뷰 문화를 적용하지 않고 있다고 추측하고 있습니다. 코드 리뷰를 진행하지 않고 본인의 코드를 본인이 Merge하는 절차를 따르다 보니 크고 작은 문제들과 불편함이 생겼습니다. 대표적인 케이스들을 예를 들어보면, 한 쪽 파트에서 수정한 사항 때문에 다른 쪽 파트 로직도 함께 바뀌어야 할 때 전달 및 검토가 되지 않는 경우 미처 발견하지 못한 오타가 ..