2022년 하반기 회고 남들은 12월에 쓰는 회고를 1월에 쓰고 앉아 있는 게으른 개발자 루크입니다. 언제나 마찬가지겠지만, 바쁘네요! 하지만 바쁘지 않고 한가한 것보다는 정신없이 바쁜 편이 전 더 좋습니다. 제가 개발자로 진로를 바꾸고, 일을 시작하기 전에 느꼈던 일종의 절박함을 잊지 않으려고 노력하고 있어요. 앞으로도 잊지 않고 열심히 구르려고 준비하고 있습니다! 이직한 회사에서 1인분 하기 저번 회고에서는 이직했다는 소식을 전해드렸는데요, 이제야 좀 제자리를 잡고 일을 하고 있는 느낌입니다. 경력직으로 이직해 본 경험이 있는 분이라면 공감하실 수도 있겠지만, 최대한 빠르게 온보딩해서 스스로를 증명하고 싶은 욕심이 저에게는 있었어요. 당연히 수 차례의 면접을 통해서 어느 정도는 검증된 상태로 채용이 ..
React 18에서 새롭게 등장한 hooks React 18이 나온 지도 시간이 꽤 지났습니다. 이제는 어느 정도 안정화 단계에 접어들었다고 판단되어서 새로운 프로젝트를 시작하면서 도입하기로 결정했는데요, React 18에서 새롭게 등장한 hooks의 기능이 꽤나 강력합니다. 한 번 정리해두면 좋을 것 같아서 정리해보았습니다. 우선 이번에 등장한 hooks는 총 5개입니다. 그중에 2개는 라이브러리를 위해 제공되는 것이고, 3개는 어플리케이션 단에서 사용할 수 있는 것이에요. Library hooks 해당 hooks는 라이브러리를 위해 제공되는 hooks로, 일반적인 Application 단에서는 사용할 필요가 없어서 자세히 알아보지는 않았습니다. 그냥 이런 게 있다더라 정도만 이해하시고 상세한 설명은 ..
Suspense? ErrorBoundary? 사실 React18에서 완전히 새롭게 도입된 기능은 아닙니다. Suspense와 ErrorBoundary 모두 React16.6에서 처음 등장한 개념이에요. 하지만 그동안은 experimental(실험적) 기능이었고 React18에서 정식 기능으로 편입되었다고 보는 것이 맞습니다. Suspense 기존에는 lazy loading을 지원하기 위해서 주로 사용되어 왔습니다. 하지만 이제는 컴포넌트가 API 호출을 하는 동안 fallback으로 보여줄 내용을 지정해줄 수 있게 되었어요! 🎉 사용법은 아래와 같습니다. import { Suspense } from 'react' {/* ... */} ErrorBoundary 이 친구는 UI에서 발생한 에러..
2022년 상반기 회고 올해는 상반기가 무척 바빴습니다. 특별히 무슨 일이 있었던 건 아닌데, 주로 이직 때문이었어요. 작년 말부터 본격적으로 이직을 준비하기 시작하고 나서 대략 6개월 정도가 걸렸던 것 같네요. 그래서 이번 회고는 주로 이직 준비에 대한 간략한 기록이 될 것 같습니다. 이직동기 이직을 어쩌다가 하게 되었는지에 대한 질문은 면접을 보는 내내 들었던 질문이고, 저는 나름대로 명확한 이유를 가지고 있었습니다. 많은 이유가 있었지만 대략 세 가지 정도로 정리하자면 아래와 같습니다. 팀원들에 대한 불만 같이 일하는 팀원 중에 제대로 프론트엔드 개발자라고 부를 수 있는 사람은 저 혼자뿐이었습니다. 그러다 보니 회사에서 어떠한 자극을 받거나 동기를 부여받을 수 있는 환경이 갖춰지지를 못했어요. 그래..
코딩을 하다보면 배열을 랜덤하게 섞을 상황이 생깁니다. 대부분의 경우, 아래와 같은 코드를 이용해서 배열을 섞고는 하죠. Array.prototype.sort()를 이용한 방법 function sortShuffle(arr) { return arr.sort(() => Math.random() - 0.5); } 이는 배열을 정렬하는 sort 메서드를 이용해서 새롭게 정렬을 만들어내는 방식인데요, Math.random()의 결과는 0 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } 테스트 동일한 배열로 동일한 환경에서 테스트를 진행해 보았습니다. 테스트 코드는 아..
2022년 2월도 벌써 중반을 지나고 있는데 회고를 쓰는 개발자가 있다!? 네.. 그게 접니다.. 늦었지만 빠르게 가볼까요! 회사 업무에 관해 Notification 기능 개발 2021년 연초부터 계획된 대규모 작업이었습니다. 기존 UI와 이질감이 들지 않게 Notification 기능을 개발해야 했거든요. Frontend와 Backend 간의 긴밀한 협업이 필요해서 정규 회의가 아니더라도 수시로 소통하면서 개발을 진행했던 기억이 납니다. 회의 때 나왔던 이야기여도 구현하는 실무자들끼리 의견을 조율해서 선조치하고 후보고하는 형식으로 기민하게 일이 진행되었고 실제로 기능 시연 때도 박수를 받았던 기억이 있습니다. 이 때를 기점으로 회사에서도 어느 정도 인정을 받기 시작했던 것 같아요. 동시에 온갖 이슈가 ..
팀장님: 루크 씨, 저희 제품 config Dialog를 좀 수정해야 할 것 같네요. 이틀 드릴게요. 루크: ..네? 문제의 발단 회사에서 업무를 하던 도중 위와 같은 요구사항이 들어왔습니다. 상세한 내용은 회사 보안상 서술하기 좀 어렵지만, 간단하게 각색해서 그려보면 아래와 같아요. 기존에는 캐릭터의 이름만 변경하도록 되어있던 아주 단순한 구조의 Dialog 컴포넌트가 이제는 Favorite도 추가/수정하도록 변경된 겁니다. 심지어 Favorite은 몇 개든지 들어가야 하는 상황이고요. 캐릭터는 약 500개가 넘고, API는 한 번에 모든 캐릭터의 이름을 불러오도록 되어있습니다. 그리고 저기 들어가는 Favorite 컴포넌트는 다른 곳에서도 동일하게 사용되어야 했기 때문에, 저는 캐릭터 이름을 변경하는..
최근 회사에서 새롭게 진행하고 있는 프로젝트는 MSA(MicroService Architecture) 기반의 서비스입니다. MSA란 통합된 하나의 서버가 여러 가지 일을 하도록 기능이 분리된 것이 아니라, 기능별로 분리된 여러 서버에서 각자의 할 일만 효율적으로 처리하도록 디자인된 서비스를 말하는데요, 서버가 여러 대 운용되다 보니 VPC를 구성해서 클라우드 공간을 활용하는 것이 좋을 것 같아 AWS에서 권장하는 방법을 토대로 구축해보았습니다. VPC가 그래서 뭐야? VPC는 Virtual Private Cloud의 약자입니다. 쉽게 말하자면 VPN의 클라우드 버전이라고 생각하면 되는데요, VPN이 물리적으로 연결된 네트워크를 논리적으로 다른 네트워크처럼 취급하게 하듯이 VPC도 AWS라는 거대한 클라우..
SES라고 하면 어딘가 그리운 마음이 듭니다. 제가 처음으로 좋아했던 걸그룹의 이름과 같기 때문입니다. 이렇게 이야기를 하자니 어딘가 제 나이가 대충 드러나는 것 같아서 입이 쓰네요. 최근에 회사에서 서비스를 새로 개발하면서 사용자 계정 인증, 비밀번호 초기화 등의 알림을 위한 용도로 자동 Email 전송 솔루션이 필요해졌습니다. 보통은 Google Workspace에서 제공하는 SMTP를 사용하거나 AWS의 SES를 사용하는 것으로 나뉘는 것 같습니다. 회사에서 어차피 Google Workspace를 사용하기 때문에 구글 SMTP를 사용해볼까 했지만, 일일 전송 한도가 2,000건 밖에 되지 않는다는 사실을 알게 되었습니다. 사실 당장이야 2,000건도 차고 넘칠만한 한도이지만 나중에 서비스가 커지고 ..
Javascript로 코딩을 하다보면 싱글 스레드니 Stack이니 Heap이니 하는 말을 듣게 됩니다. 그런데 의외로 많은 분들이 대충 느낌은 아니까 정도로 넘어가는 경우를 많이 봤습니다. 의외로 제대로 아는 사람들이 드물더라구요. 한번 쯤은 정리하고 넘어가는 게 좋을 것 같다는 생각이 들어서 다시금 정리를 해보겠습니다. 메모리 누수나 Garbage Collection 등 Javascript의 심화 개념을 이해하기 위해 반드시 필요한 지식이라고 생각하거든요. Call Stack Javascript를 구동하는 V8 Engine에는 크게 두 가지 구성요소가 있습니다. Call Stack과 Memory Heap인데요, 간단히 설명하자면 Memory Heap에는 참조형 데이터가 저장됩니다. 객체나 배열 같은 것..
