분류 전체보기

서론쇼핑몰에서 "최근 본 상품" 배너를 보신 적 있을겁니다.어떤 페이지로 이동하든 항상 사이드 영역에 존재하면서 새로운 상품을 클릭할 때 마다 업데이트 해야합니다.이걸 리액트 프로젝트에서 어떻게 구현해야할까요?상품의 클릭 이벤트 시점에 클릭된 상품 정보를 최근 상품 목록 컴포넌트에 전달해야 합니다.물론 state lifting, contextAPI,redux 등의 방법이 떠오릅니다. 하지만 이 모든 방법이 여의치 않은 상황이라면 event 버스를 이용한 방법을 고려해볼 수 있습니다.Event Bus이벤트 버스이벤트 버스(Event Bus)는 소프트웨어 아키텍처 패턴 중 하나로, 애플리케이션 내의 다양한 컴포넌트들이 서로 통신할 수있도록 하는 중앙 허브 역할을 합니다. const EventBus = { ..

서론우리 모두는 단일 책임 원칙 (Single Responsibility Principle, SRP) 에 대해 이미 알고 있습니다.하나의 모듈은 하나의 책임만 가져야한다는 객체 지향 프로그래밍의 설계 원칙입니다. 너무 명쾌한 내용이기에 이 원칙을 공감하지 못하는 분은 없을겁니다. 하지만 그럼에도 불구하고 우리는 비대한 모듈을 만들곤 합니다. 왜 일까요? 바로 "하나의 책임"이라는 말이 가지는 모호함때문입니다. 과연 어디까지 책임의 범위로 취급해야 할까요? 커피를 만드는 과정으로 예를 들어보겠습니다. 1. 물을 끊인다.2. 원두를 갈아 넣는다.3. 물을 커피에 붓는다.4. 커피를 컵에 따른다. 커피를 만드는 과정을 위 4가지 단계로 나눠보겠습니다. 그러면 각 단계가 각각 하나의 책임일까요? 한번 딴지를 걸..

이력서 [RESUME] Frontend-End | Notion개발자는 문제를 정의하고 해결하는 사람이라고 생각합니다. 코드에 매몰되지 않고 가장 적은 비용으로 비지니스 문제를 해결하기 위해 고민합니다. 동료를 돕고 팀 생산성을 향상시키는 것을dev-cho.notion.site링크드인블로그소개행동하고 결과로 가치를 증명하는 개발자동료를 돕고 팀 생산성을 향상시키는 것을 미션으로 삼고 더 나은 개발 문화를 위해 고민하고 행동합니다.개발 트랜드의 변화를 관찰하고 효용성이 검증된 정보를 동료에게 공유하는 것을 즐깁니다.비즈니스 중심 제품 개발자코드에 매몰되지 않고 가장 경제적인 방법으로 비즈니스 문제를 해결하기 위해 고민합니다.5년간의 스타트업 경험으로 스타트업의 생리에 대해 이해하고 있습니다.매니징 능력을 갖..

서론next13은 React Server Component(이하, RSC)을 중심으로 app router라는 큰 변화를 가지고 왔습니다.RSC과 server-action의 등장으로 인해 이젠 서버사이드 데이터 패칭의 범위가 확 늘어났습니다. 더불어 이런 서버사이드 요청에 대한 캐싱을 지원하기에 그럼 이제 react-query는 next-js에서 필요없을까? 하는 생각을 하게 됩니다.결론 부터 말하지만 역할은 축소됐지만 여전히 필요하다라고 말씀드리고 싶습니다. react-query는 클라이언트의 요청 서버 사이드의 요청은 next.js에서 처리할테니까요이 부분에 대해서 next.js의 data-fetching 파트에서도 다음과 같이 설명하고 있습니다swr 혹은 react-query를 이용해 클라이언트에서 ..

의존성 역전에 대해서  들어보신적 있을겁니다.어떤 모듈이 가지고 있는 의존성을 격리하여 외부로 부터 주입받는 형태를 보통 의존성 역전이라고 합니다.왜 이런 설계가 필요할까요? 우선 좋은 설계에 대해 짚고 넘어가보겠습니다.우리 모두가 공감할 수 있는 좋은 설계는 "기능이 동작하면서 내일 쉽게 변경할 수 있는 코드"라고 생각합니다. 확장은 쉬우면서 수정에는 닫혀있는 객체 지향에서의 개방 폐쇄 원칙도 이를 뒷받침하는 원칙중 하나입니다. 좋은 설계, 기능이 동작하면서 내일 쉽게 변경할 수 있는 코드 최악의 상황을 생각해보겠습니다. 이번 주에 새로운 기능을 개발해야 하는데 이 기능과 연결된 모듈이 \10개가 넘고 심지어 보이지 않는 숨은 의존성까지 존재합니다. 끔찍하죠?우리가 바라는 상황은 수정해야 하는 기능에 ..

싱글 스레드의 자바스크립트 실행환경에서 동시성(Concurrency)을 어떻게 제공할까요?동시성(Concurrency)여러 작업이 동시에 진행되는 것처럼 보이드록 하는 프로그래밍 기법입니다.하지만 이는 병렬성(Parallelism)과 구분되며 실제로는 동일 시점에 실행되는 것이 아닌 하나의 작업을 조금씩 진행하면서 다른 작업으로 전환하는 방식으로 이루어집니다. 예를 들어, 멀티태스킹 운영체제는 여러 프로그램을 동시에 실행하는 것처럼 보이게 하지만, 실제로는 CPU 시간을 분할하여 각 프로그램에 할당합니다. 자바스크립트는 싱글 스레드의 언어로 한 번에 하나의 작업만 처리할 수있습니다. 그러나 이벤트 루프와 큐를 통해 동시성을 구현합니다. 위 이미지에 표현된 구조에 대해 하나씩 살펴보도록 하겠습니다. 콜 스..

가끔 면접에서 "스타트업에서 일한다는 것이 00님에게 어떤 것인가요?"라는 질문을 받을 때가 있다.만화 를 보면 라프텔이란 섬의 보물을 차지하기 위해 팀을 형성해 바다로 뛰어든다.내가 생각하는 스타트업을 이미지화 해보면 딱 이렇다. 스타트업에서 일한다는 것이 무엇을 의미할까? 다음과 같은 것들이 있다.- 고용 안정성을 보장할 수 없다(언제 해왕류에 잡아먹히거나 동력을 잃고 더 나아가지 못함)- 갖춰진 것보다 갖춰나가야 하는 것들이 많다 (이제 막 망망대해를 향해 출항한 배가 갖추고 있을 인프라를 생각해라)- 생존을 위해 움직인다 (생존을 위해 끊임없이 앞으로 나아가야 한다) 써놓고 보니 허탈한 너털 웃음이 나온다. 그런데 특히 초기 스타트업일수록 위 내용이 현실에서 크게 벗어나지 않는다.  "스타트업에 ..

"00의 도입을 주도해 ~을 얼마만큼 개선했습니다." 개발자 이력서에서 흔히 볼 수 있는 성과 사례이다. 그런데 조직에 막 합류한 사람이 이런 변화를 추진한다면 어떻게 될까? 이 글은 이런 실수를 했던 지난 내 커리어에 대한 이야기다. 조직에 새로 합류했을 때, 조급한 마음에 사로잡히기 쉽다. 특히 대부분의 기업에서 3개월의 인턴 과정을 거치게 되는데, 이게 불안의 원인이 되곤 한다. 게다가 내가 리더 포지션으로 입사했다면 "그래서 00이 합류해서 더 나아진 게 뭔데?"라는 생각에 스스로를 옥죄일지도 모른다. 이런 조급함은 급진적 변화를 부추긴다. 이보다 먼저 선행되어야 할 과정은 팀에서 신뢰 자산을 쌓는 일이다. 기본적인 업무 능력을 보여주고 이를 넘어 팀에 긍정적인 영향력을 줄 수 있다는 신뢰를 얻은..