xtring.dev

일상에서 회사에서 내 이야기를 상대방에게 잘 전달하는 것은 쉽지 않습니다."열심히 고민해서 성능을 2배 개선했는데, 왜 기획자와 리더는 내 제안을 시큰둥하게 들을까?""면접관이 질문했을 때 머릿속은 복잡한데 말이 장황해지는 이유는 무엇일까?" 많은 개발자들이 뛰어난 기술력을 가지고 있음에도 불구하고, 회의실이나 면접장에서 자신의 생각을 온전히전달하지 못해 답답함을 느낍니다. 코드는 깔끔하게 리팩터링하면서, 왜 우리의 대화는 스파게티 코드로 남아있을까요? 1. 개발자 커뮤니케이션 실패의 본질우리가 상대방을 설득하지 못하는 가장 큰 이유는 "내가 고민한 과정(How)"을 말하느라, 상대방이 간절히듣고 싶어 하는 "결론과 비즈니스 영향(Impact)"을 가장 마지막에 말하기 때문입니다. 개발자의 의식의 ..

새로운 프로젝트에서 React UI 패키지 하나를 만들어 세 개의 앱에서 함께 쓰게 되었습니다. 문제는 세 앱의 React 버전과 TypeScript 버전이 모두 달랐다는 점입니다. 이 글에서는 UI 컴포넌트 패키지 하나를 배포하고 세 앱에 설치해 쓰기까지 고민했던 것들을 정리합니다. 1. 기술 스펙 정의하기스펙이 서로 다른 앱들에서 하나의 UI 패키지를 쓰려면, 기술 스택과 지원 범위를 처음부터 꼼꼼히 정해야 합니다. 저는 UI 패키지에는 React 18을 쓰고 싶었지만, 패키지를 쓸 앱들의 React 버전은 〔앱 A: React 16, 앱 B: React 18, 앱 C: React 17〕로 제각각이었습니다.기술 스택번들러: Vite (library mode)React: 18 〔React 19가 이미 ..

리액트 팀에서 React 18 릴리즈를 통해 리액트 서버 컴포넌트(React Server Components, RSC)를 소개했습니다. RSC는 서버와 클라이언트 간의 경계를 명확히 하고, DX(Developer Experience)와 성능을 끌어올리기 위해서 도입되었다고 합니다. RSC는 기존 클라이언트 전용 컴포넌트와는 '다른' 렌더링 전략을 통해 서버측에서 컴포넌트를 build-time에 실행해두고 필요할때 클라이언트로 전달하는 방식으로 자바스크립트 객체를 전달하여 컴포넌트를 렌더링합니다.    RSC의 동작 방식  리액트 서버 컴포넌트(React Server Components, RSC)는 컴포넌트를 클라이언트가 아닌 서버에서 렌더링하는 방식입니다. 클라이언트에서 컴포넌트를 생성하는 것이 아닌 서..

최근 전세계 인디 해커분들에 대한 이야기가 Geek News를 통해 종종 올라오고는 한다.직장을 다니거나 혹은 프리랜서로 일을 하며 자신이 필요로하거나 만들고 싶은 앱들을 A~Z까지 기획, 디자인, 개발, 마케팅해가면 새로운 수익을 창출하는 이야기를 보았다. 어떤 이야기들을 볼때면 나도 해볼 수 있을까라는 상상과 나는 개발자로서 일을 제외한 생산적인 것들을 했었지라며 되짚어 보곤했다. 나는 학창시절 큰 포부로 여러 번의 창업을 시도했었다. '세상 사람들에게 변화를 줄 생산성 앱'을 만들고 유저들이 편리함과 도움을 얻을 수 있는 것들을 찾고 개발하려고 했었다. 몇몇 경진대회에서는 수상과 함께 지원금을 받으며 빌드업에 대한 고민도 해갔지만 그때의 경험과 능력 안에서는 많이 부족할 수 밖에 없었고 지금은 0에..

'전문가를 위한 리액트' 4장 재조정(reconciliation)을 읽으며 알게된 내용을 정리합니다.   React의 ReconciliationReact는 UI 업데이트를 효율적으로 처리하기 위해 Reconciliation라는 과정을 사용합니다. 간단하게 설명하자면, 이 과정은 React의 Virtual DOM과 실제 브라우저의 DOM의 차이를 계산하고, 최소한의 DOM 조작으로 UI를 업데이트하기 위한 목적을 가지고 만들어졌습니다. 종종 'React의 장점이 뭐에요?'라는 질문을 받곤하면 업데이트할 내용을 한번에 계산하고 Virtual DOM과 실제 DOM 간의 비교를 통해 렌더링을 최소화하는 과정을 통해 UI의 업데이트가 사용자에게 자연스럽게 보인다고 설명했습니다. 여기서 이 과정이 Reconcili..

'아무것도 남기지 않으면 아무것도 남지 않는다'는 말이 요즘은 더 와닿는다. 2024년은 어떻게 보냈는지 정리해 보려고 한다. 올해는 상상만 하던 것들을 다양하고 길게 실행하는 한해였다. 운동을 꾸준히하고, 밴드 공연을 하고 미디를 배워서 음악을 기록으로 남기기도 했다. 그러다 바이크에 빠져 두발 라이프를 즐기기도 했다.    2024년 - 큰 목표 없음이전 2023년은 일하는 것 차체와 그 일에 대한 스트레스를 푸는데 거의 모든 시간을 썼다고 생각한다. 그래서 해가 바뀌면서 큰 목표 없이 건강해지는 것, 자신에게 필요한 시간을 더 쏟는 것 집중하고자 했다. 일에서 얻는 배움은 분명했지만, 온전히 하고싶은 일을 하는 것보다 남는 것은 적다고 생각했다. 그래서 내가 하고 싶은 일에 대해서 생각하게 되었다...

배경이커머스 프로덕트는 상품을 전시하고 전시된 상품을 사용자들에게 자세한 설명을 전달하는 '상품 상세 페이지'가 있습니다. 상품의 콘텐츠를 만들기 위해서는 상품의 메타 정보 뿐만 아니라 상품에 대한 자세한 설명, 판매자의 의도가 담긴 글과 이미지를 잘 정리해서 설명해야합니다. 상품상세 페이지는 국내외 이커머스 서비스에서 10년 이상 대부분 비슷한 형상을 유지하고 있습니다. 상품 판매를 위한 설명 콘텐츠를 좀 더 쉽고 효율적으로 만들어내고 일관성있게 제공하는 것을 위해 업계는 많은 시도를 하고 있습니다. 저는 현재 회사에서 입사부터 지금까지 상품상세를 개발하고 고도화하는 작업을 해왔습니다. 수 많은 작업을 해왔지만 그 중 쉽게 고치거나 대체하기 어려운 부분 중 타사 에디터 기반의 상품 디스크립션 작성 서..

소개  제가 속한 프런트엔드팀에서는 필요한 기술 스택이거나 함께 공부할 주제를 정해 주 1회 스터디를 진행하고 있습니다. 6~8명이 1년 넘게 운영해 오면서 다양한 책들을 함께 읽으며 토론했습니다. 주된 관심사는 대부분 프런트엔드 기술과 직간접적으로 연관 있는 내용들이었습니다. 이번엔 새로운 스터디를 시작하기 전에 종종 추천 책으로 나오던 리눅스 커널이 주제인 책이 선정되었습니다. 어찌 보면 프런트엔드와는 직접적으로 관련이 없는 주제가 어떻게 프런트엔드 팀의 스터디 주제가 되었을까요?    이 주제를 선정하게된 이유  최근 프론트엔드 진영에서는 React와 Next.js를 기반으로 웹 기술이 활성화되고 있습니다. 그리고 우리는 이 라이브러리와 프레임워크를 가지고 SPA, SSR, SSG, ISR 등 다양..