전체 글

TDD로 배우는 웹 프론트엔드 강의 후기

이번에 글또9기에 참여하면서 Udemy 측에서 무료 강의 수강권을 글또 인원들에게 제공해주셨다. 그 기회로 TDD로 배우는 웹 프론트엔드 강의를 수강하게되어 후기를 작성해보려 한다. 강의 개요TDD로 배우는 웹 프론트엔드 강의는 우아한형제들에 재직중이시고 우아한테크코스의 교육자로 유명하신 메이커준님께서 교육해주시는 강의이다. Cypress를 활용한 TDD 기반의 웹 애플리케이션 개발 방법을 배울 수 있는데 Cypress의 기본적인 사용 방법을 익히고 테스트 코드와 애플리케이션 개발을 위해 문제를 잘개 쪼개는 방법부터TDD적인 사고방식을 기를수 있는 강의라고 할 수 있다. 총 강의 시간은 3시간 30분짜리로 마음만 먹으면 하루도 안되서 금방 다 수강할 수 있는 그다지 길지 않은 강의이다.강의 구..

Artillery 서버 부하테스트 오픈소스 알아보기(1)

회사에서 프로모션성 페이지를 Nextjs를 활용하여 개발했는데 릴리즈 하자마자 메모리 부족으로 서버가 죽게 되버린 사건이 있었다. 이제는 프론트엔드 개발자도 서버를 관리 해야하는 임무를 받은 시대가 됨으로써, 어떻게 하면 안전하게 서버를 운영해볼 수 있을까 조사해보다 알게된 Artillery이라는 서버 부하 테스트 오픈소스에 대해 작성해보려 한다. 특징 및 설치방법 artillery는 다음과 같은 특징을 갖고 있다. 클라우드 네이티브 분산 부하 테스트를 대규모로 바로 사용할 수 있는 무료 서비스이다. AWS Lambda 또는 AWS Fargate에서 서버리스 부하 테스트도 가능하다. [HTTP], [WebSocket], Socket.io, gRPC, Kinesis 등도 지원한다. Artillery에는 플..

늦게 작성해보는 2023년 회고

나의 2023년은 어떤 한 해였는가 전화위복 2023년 한 해는 정말 나에게 전화위복이 되었던 해였다. 이전에 구조조정 당하고 3개월간 이직 준비한 썰 글을 통해 공유 했었는데, 나는 2월쯤에 내 인생에서 다시는 경험하고 싶지 않은 구조조정으로 인한 권고사직을 당했었다. **님 잠시 회의실로 와주실 수 있을까요? 인사팀으로부터 메세지가 왔을때의 기분은 정말… 오만가지 생각이 다 들었다. 권고사직 서류에 싸인을 하고 보상 관련해서 이야기를 잘 마친 후 남게 된 동료들과 권고사직 당한 동료들과 함께 마지막 회식을 하고 나는 첫 직장을 퇴사하게 되었다. 하지만 위와 같은 경험을 했기 때문에 내게 큰 챌린지가 되었고, 계속 수입(권고사직으로 인한 보상)이 있으면서도 이직 준비를 할 수 있었던 시간 확보가 충분히..

[Tanstack-Query] 핵심 로직 딥다이브

실무에서 react-query는 이제 꽤나 사용하는 스택으로 자리 잡았다. 비동기 데이터를 쉽게 가져오고 상태관리에 용이하고 각 종 제공해주는 기능을 통해 편리하게 개발할 수 있도록 도와주고 자주 사용하는 라이브러리인데, 그 내부 로직이 어떻게 구현되어 있길래 이 기능들을 제공해주는걸까 하는 의문을 크게 가져본적은 없던 것 같다. 그래서 이번 기회를 통해 react-query가 어떻게 cache를 관리하고 동작하는지 알아보자. 💡 타이틀이 딥다이브지만, Line by Line으로 모든 코드를 다 볼수는 없어서 중요하다고 생각되는 핵심 로직 위주로 살펴 보았다. QueryClient import { QueryClient, QueryClientProvider, } from '@tanstack/react-qu..

[TanStack Query] v5 주요 변경 사항

얼마전, TanStack Query의 버전5가 정식 릴리즈 되었다. 주요 변경 사항에는 어떠한 것들이 있었는지 한번 알아보자. 참고로 이제 v5의 Typescript 최소 요구 버전은 4.7 / React의 최소 버전은 18.0 이다. 주요변경 단일 signature, 단일 객체 지원 useQuery와 몇 가지 함수들은 호출하는데 첫 번째 혹은, 두 번째 매개변수 등을 확인해야 하고 일관성이 없어 관리하기가 어려웠다. 이제는 객체 형식만 지원하도록 변경되었다. - useQuery(key, fn, options) + useQuery({ queryKey, queryFn, ...options }) - useInfiniteQuery(key, fn, options) + useInfiniteQuery({ query..

구조조정 당하고 3개월간 이직 준비한 썰

올해 2월 경 재직중이였던 회사에서 구조조정으로 인해 권고사직을 당했었다. 이로 인해 반강제적(?)으로 갑자기 취준생 신분이 되어 급하게 이직 준비를 했고, 결과적으로 정말 목표로 하던 회사에 이직을 성공하여 3개월동안 4년차 프론트엔드 개발자가 위기를 기회로 어떻게 만들었는지 썰을 풀어보고자 한다. 권고사직 지금도 그렇지만, 당시에도 여러 스타트업에서 경기침체와 투자 위축으로 구조조정 소식이 들리곤 했다. 유튜브에서는 "권고사직 당한 썰" 이라며 올라오는 vlog 가 유명세를 타고 울며 영상을 찍는 당사자들을 보며 설마 나에게도 저런일이 생길까 생각했었는데 나에게도 생겼다. 그런데 뭐 회사가 사정이 어려워지면 그럴수도 있다고 생각하긴 하는데... 좀 아쉬웠던건 사전에 낌새도 없이 당일 1시 통보, 5시..

나는 웹 성능 지표를 잘 알고 있었나?

요즘 Next.js 의 사용으로 렌더링 방식에 따른 FCP, LCP 등에 영향을 어떻게 미치는지와 웹 성능과 관련된 개념들을 더 깊게 알 필요가 생긴 것 같다. 때문에 웹 성능 최적화 지표에 대한 개념을 다시 정리해보고자 이렇게 글로 작성한다. FCP - First Contentful Paint FCP 매트릭은 First Contentful Paint의 약자로 페이지가 로드되기 시작한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지의 시간을 측정한다. 이 메트릭에서 콘텐츠란 텍스트, 이미지(배경 이미지 포함), 요소 및 svg 요소를 뜻한다. 참고: https://w3c.github.io/paint-timing/#first-contentful-paint 위의 사진을 보면 두 번째 화면에서 최초 텍..

그래서 모노레포가 뭐지? (feat. yarn workspace)

요즘 Monorepo를 검색 해보면 여기저기서 도입해본 경험에 대한 관련 글들이 많이 나온다. 필자도 현재 회사에서 Yarn workspace, Yarn Berry를 활용한 모노레포를 사용해본 경험이 있는데 그 경험과 함께 모노레포 관련 개념들을 함께 설명해보려 글을 작성한다. 모노레포 소개 모노레포(Monorepo)란 여러 개의 프로젝트나 패키지를 하나의 저장소에서 관리하는 방식을 의미한다. 이 방식은 저장소를 공유함으로써 프로젝트 간의 협업, 의존성 관리, 코드 재사용 등을 쉽게 할 수 있는 장점이 있다. 모노레포 구조가 아니라면, 아마 대부분의 기업들은 우리가 늘상 써오던 멀티레포(폴리레포) 방식을 사용할 것 이다. 멀티레포(폴리레포) 멀티레포 구조는 폴리레포 구조라고도 불린다. 멀티레포 방식은 각..