행복한 시지프

Web Socket Protocol 이란?두 프로그램간 양방향으로 메시지를 교환하기 위한 통신규약을 말한다. IETF의 RFC6455 에서 표준 프로토콜로 정의하고, W3C에 의해서 웹 기술 표준으로 정의하고 있다.웹 소켓의 특징1. 양방향 통신클라이언트와 서버가, 서로 통신을 주고받을 수 있다. HTTP 프로토콜은 단방향 통신이 특징인 것과 차별점을 가진다. 2. 지속적인 연결HTTP 통신은 비연결성을 가진다. 한번 요청, 응답을 주고받으면 종료되는 것이 기본 특징이다. Web Socket은 한번 연결이 되면, close 할 때까지 지속적으로 서로 메시지를 주고받을 수 있다. 그러므로, 불필요한 handshake 과정이 없고, 불필요하게 큰 header 정보를 계속 주고받지 않아도 된다. 그래서 실시간..

서언 안녕하세요. 최근에 퀄리티 높은 프론트엔드 제품을 만드는 것에 관심이 많은데요. 사소해보이는 디테일을 얼마나 능숙히 처리하느냐가 프론트엔드 개발자의 실력 척도 중 하나라고 생각했어요. 저는 여러 원칙들을 세우고 있지만, 오늘은 중복호출 (aka 따닥)을 방지하는 완벽한 방법을 탐구해볼 것입니다. 문제인식 서비스를 개발하다가, 중복호출이 발생해서 여러 문제가 발생하는 경우가 있습니다. 결제 요청이 2번 들어갈 수도 있고, 게시물 작성이 2번 될 수도 있고, 댓글이 2번 써질 수도 있습니다. 이로 인해 비즈니스적으로도 영향을 미칠 수도 있습니다. 작게는 서버 에러 수가 많아져서, noisy 해질 수 있죠. 이만큼 중요도가 높고, 프론트엔드 퀄리티에 큰 역할을 한다고 생각했는데요. 실제로 저도 명확한 해..

서언 안녕하세요. React CleanCode 2번째 시리즈로 찾아왔습니다. 저는 토스 공동구매 팀에서 약 1년간 커머스 제품을 운영해왔는데요. 제품이 디벨롭 되면서, 상품 컴포넌트는 더욱 복잡해지고, 많은 Variation 이 생겼어요. 그러면서 일명 스파게티 코드를 만들게 되었어요. 사용처에서 유연하게 사용이 어렵고, 장애 확률이 높고, 새로운 기능 추가가 어려웠어요. 이를 유지보수하기 쉬운 코드로 리팩터링한 경험을 공유하려고 해요. UI Variation에 고통 받고 계신 분들이 읽으면 도움이 될 것입니다. 목차 컴포넌트가 스파게티가 되어가는 과정 개선 방향성 개선 언제 사용하면 좋은가요? 마치며 부록 : Compound component pattern 인가요? 컴포넌트가 스파게티가 되어가는 과정 ..

서언 ErrorBoundary 는 하위 컴포넌트에서 발생하는 자바스크립트 에러를 잡아서 fallback UI를 보여주는 React 컴포넌트 입니다. 하지만 하위에 존재하는 컴포넌트에서 에러가 발생한다고 하여, 모든 에러를 잡아주는 것은 아닙니다. React 공식문서에는 다음과 같은 에러는 ErrorBoundary가 포착할 수 없다고 합니다. 과연 저것은 암기해야하는 것들일까요? 그렇지 않습니다. JavaScript 와 React를 잘 이해하고 있다면 당연한 현상입니다. 이 글에서는 에러바운더리가 특정 에러를 포착하지 못 하는 원리를 설명해보려고 합니다. 목차 [사전지식] 실행 컨텍스트와 예외처리 Case1. 이벤트 핸들러 Case2. 비동기적 코드 Case3. 서버 사이드 렌더링 Case4. 자식에서가 ..

서언안녕하세요. 최근에 서버 개발 공부의 필요성을 많이 느껴서, 그 필요성을 공유하고, 서버 기술 스택 채택 과정과 학습 방법을 정리하고자 글을 씁니다. 오늘은 가벼운 마음으로, 가볍게 글을 씁니다.서버를 공부하는 이유프론트엔드 엔지니어를 넘어서, 소프트웨어 엔지니어가 되기 위해서소프트웨어 엔지니어가 되고 싶은 이유 나는 비즈니스 문제를 푸는 사람이 되고 싶다. 그러려면 시야를 넓혀야 한다. 문제를 프론트엔드 기술로만 푸는게 아니라, 서버/데이터/기획/디자인 무엇으로든 풀 수 있어야 한다. 그 관점에서, 먼저 프론트엔드 개발자에서 벗어나서 소프트웨어 엔지니어가 되어야 한다. DB 에 대한 이해가 없으니, 팀의 DB 설계 토론에 참여하지 못 하니, 비즈니스 적으로 적절한 제안을 할 수 없다. ..

서언 안녕하세요. React CleanCode 첫 번째 주제로 Composition(합성)을 다룹니다. 최근에 회사에서 많은 코드를 작성하면서 느끼는 것이 있었는데요. 바로 프론트엔드가 다루어야할 관심사가 너무나 많다는 것입니다. 크게는 UI 로직(단순 UI, 애니메이션 로직, 하드코딩적인 요소), 서버 로직(데이터 패칭, 업데이트 로직, 유저 인증인가 로직, 로딩처리, 에러처리), 로그 등 이 있습니다. React를 사용하며 이러한 관심사를 잘 분리하지 않는다면, 스파게티 코드가 된다는 것을 체감했습니다. 그러면 어떻게 관심사의 지옥에서 벗어날 수 있을까요? 즉 관심사를 어떻게 잘 분리해야 할까요? 관심사 분리는 보통 함수(클래스) 분리를 통해 이루어집니다. React에서 함수의 실체는 훅, 컴포넌트,..

더보기 서언 React v18 부터 Suspense가 API call에 따른 Loading 상태를 표현할 수 있게 되었습니다. 그에 따라, react-query, swr 같은 data fetching library가 Suspense를 지원하고 있습니다. suspense 옵션만 true로 설정해주면, API 요청 훅이 알아서 내부 처리를 통해 Suspense를 동작시킵니다. 이로써 로딩을 선언적으로 보여줄 수 있게 되었고, ErrorBoundary 조합과 함께라면 컴포넌트는 Success 케이스만 표현하면 되었습니다. 이런 혁신에 대해서는 잘 인지하고 있었지만, Suspense의 위험성에 대해서는 인지하지 못 했습니다. 특히 저희 서비스는 잘못된 Suspense 사용으로 어플리케이션 로딩 성능 저하를 겪었..

서언 TypeScript에는 Function Overloading 기능이 있습니다. 이번에 Function Overloading의 강력함을 깨닫고, 이를 공유하고자 아티클을 씁니다. 함수 오버로드가 왜 필요한지 이해하고, useRef 예시와 저희 프로젝트에 적용해본 예시를 설명드리겠습니다. 타입스크립트에서 함수 오버로딩이 왜 필요한가? 자바스크립트는 인자의 개수 제한, 인자의 타입 제한이 없습니다. 코드 예시를 보겠습니다. function add(a, b, c) { if (b) { if (c) { return a + b + c; } return a + b; } return a; } console.log(add(1, 2, 3)); // 6 console.log(add(1, 2)); // 3 console...

서언 현재 꼭꼭 서비스를 운영하고 있습니다. 안정적인 서비스 운영, 보다 나은 유저 경험을 제공하기 위해 (1) 섬세하고, (2) 빈틈 없는 에러 처리가 필수라는 생각이 들었습니다. (1) 섬세하다는 것은 상황에 맞는 에러를 적절히 보여 준다는 것을 의미하고, (2) 빈틈 없다는 것은 모든 API 요청에 에러 케이스를 고려한다는 것을 의미합니다. 그러면 고민이 심화됩니다. (1) 에러를 어떤 기준으로 분류하여 처리할 수 있을까? (2) 모든 요청에 에러를 붙인다면, 반복을 줄일 수 없을까? 이를 고민하여 나름대로 에러를 분류해보았고, ErrorBoundary(에러 경계) 라는 도구를 활용해 선언적이고 추상화된 에러 처리를 시도해보았습니다. 본 글은 에러 처리 전략, ErrorBoundary를 다룹니다. ..

서언 Context API는 쓰는 사람에 따라서 다양한 방식으로 사용됩니다. 그 이유는 Context API에서 전역적인 상태를 선언할 수 있고, 동시에 컴포넌트도 반환 해줄 수 있기 때문입니다. Context API 사용 예시를 찾아보면, 대부분 상태를 전역적으로 제공하는 역할을 하고, children을 그대로 반환해주는 형태를 많이 볼 수 있습니다. 하지만 컴포넌트를 반환할 수 있다는 특징을 활용하면 Toast, Modal, Loading 같은 UI를 선언적으로 사용할 수 있지 않을까 고민하였습니다. 이번 글은 [꼭꼭 팀]이 Context API를 사용하여 상태를 가진 UI를(Toast) 선언적으로 보여주는 방법에 대해 설명드리고자 합니다. 먼저 명령적인 Toast 사용을 알아보고, 하나씩 개선해나가..

이번 글은 TypeScript와 styled-components나 emotion을 함께 사용할 때, theme의 타입을 추론하는 방법을 다룹니다. 그 방법은 간단하지만, 숨겨진 원리가 있습니다. 방법을 먼저 설명한 후, 원리를 설명하도록 하겠습니다. theme 타입 추론하기 emotion, styled-components를 사용하면 아래와 같이 theme을 선언하고, ThemeProvider에 theme을 props로 넣어줍니다. // index.tsx const theme = { primary_500: '#FF5622', primary_400: '#FF7020', primary_300: '#FF9620', primary_200: '#FFB25B', primary_100: '#FFC17B', }; roo..

서언 웹 생태계에서 JavaScript는 브라우저와 뗄 수 없는 관계입니다. JavaScript는 매번 새로운 버전을 출시합니다. 그러면 브라우저는 최신 문법을 이해할 수 없게 됩니다. 만일 브라우저가 빠르게 대응한다고 하더라도, 사용자가 최신 브라우저를 사용할 것이라는 보장이 없습니다. 그러므로 브라우저가 최신 문법을 이해하도록 만들기 위해서 개발자가 노력을 가해야 합니다. 이때 사용할 수 있는 카드가 Compile 입니다. Compile의 중요성은 널리 알려진 것 같습니다. 하지만 Compile만으로 해결할 수 없습니다. Compile 만큼 중요한 것이 Polyfill 입니다. 이 글은 Compile과 Polyfill의 차이점과 그 역할에 초점을 맞춥니다. 컴파일이란? ES6+ 자바스크립트 코드를 E..

React로 만든 웹 사이트를 AWS EC2로 배포하고, 가비아에서 구매한 도메인과 연결하는 방법을 다룹니다. 목차1. port 없애기 (3000 -> 80)2. AWS Route53 호스팅3. 가비아에서 Name Server 연결 1. port 없애기 (3000 -> 80)현재 인스턴스로 build 했다면 publicIp:3000 이 배포 url일 것입니다.하지만, Route 대상으로 :3000 같은 port 번호를 쓸 수 없습니다.그러므로, react app start 를 할 때 80번 또는  443번 port로 build 되게끔 해야 합니다.80번은 http 기본 port이고443번은 https 기본 port입니다. 즉, 어떤 http domain에 :80을 붙여서 접근하든, 떼서 접근하든 동일하..

react-app(web server)을 배포하기 위하여 vercel이나 netlify와 같은 무료 호스팅 툴을 이용하여 웹 사이트를 배포할 수도 있지만, 트래픽 제한이 있기 때문에 언젠가 AWS 클라우드를 빌려 배포해야할 순간이 올 것입니다. 클라우드 / http 에 대한 정보는 기술하지 않고, 배포 방법에 집중하여 기술하겠습니다.AWS에 문외한인 프론트엔드 개발자를 위해 씁니다. 전체적인 순서는 다음과 같습니다.(1편 - 웹 사이트 배포)1. AWS 가입2. 인스턴스 생성3. 인스턴스에 접근하여 AWS 컴퓨터 로컬 환경 조작4. build 후 웹 사이트 띄우기 (2편 - Custom 도메인과 연결 - with 가비아)1. port 없애기 (3000 -> 80)2. 가비아에서 Name Server 연결..

한 레포지터리에서 프론트엔드, 백엔드 폴더를 분리하여 공동 작업을 하고 있었다. 같은 기능을 동시에 개발하고 있어서, 백엔드 코드를 rebase 받아서 local에서 구동해보려고 했다. 그 과정에서 프/백 commit이 합쳐진 상태로 PR을 올리게 되었다. 즉, 1. 내가 작업하지 않은 커밋 또한 PR에 올라갔고, 2. 내가 백엔드 코드를 rebase한 시점 이후에 백엔드 코드가 수정되었을 경우, conflict가 예상되었다. 그러므로, 백엔드 commit history를 제거한 후, PR을 올리고자 했다. 그림으로 표현하면 다음과 같다. 아래처럼, 백엔드 코드가 사이에 끼어있어서, reset 할 수도 없는 상황이다. 위 상황을 아래와 같이 개선하고자 한다. 해결 방법 1. base target bran..

React 18(22.3.29)에서 Batching이 더욱 강화되었다. Batching은 React에서 굉장히 중요한 개념이며, 최적화에 크게 기여하고 있다. 하지만 생각보다 Batching은 초보 리액트 개발자에게 널리 알려지지는 않은 것같다. 이번 포스팅에서 Batching이란 무엇이며, Batching을 알고나면 어떤 이점을 얻을 수 있는지 다루고자 한다. 배칭(Batching)이란? batch는 일괄이라는 의미이다. React에서는 어떤 의미로 쓰일까? 사례를 통해 알아보자. 아래 코드에서 button을 누르면 콘솔에 무엇이 찍힐까? function App() { const [count, setCount] = useState(0); const handleClick = () => { setCount..

함수형 컴포넌트는 이벤트 부착시점의 상태를 기억한다.함수형 컴포넌트와 클래스형 컴포넌트의 결정적인 차이를 중심으로 다룬다.문제 상황const [count, setCount] = useState(0);useEffect(() => { window.addEventListener('unload', handleUnload); }, []);const handleUnload = () => { localStorage.setItem("count", count);};return ( setCount(count + 1)}>+ )위와 같은 코드가 있다button을 클릭했을 때 count가 1씩 증가하고,화면을 닫을 때(unload), 로컬스토리지에서 count를 기억한다.button을 5회 누른 후, 화면을 ..

유틸리티 타입 명세를 살펴보면, 타입스크립트를 더 잘 이해할 수 있어서 유틸리티 타입을 분석하는 글을 쓰고자 한다. 1. 유틸리티 타입이란? 타입스크립트는 타입 변환을 위한 유틸리티 타입을 제공한다. 이는 .ts 파일 어디서든 (전역으로) 사용 가능하다. 유틸리티 타입은 mapped type, Index type query operator(keyof), Indexed access operator(T[K]), Generic 등의 개념을 통해 정의되어 있다. 먼저 유틸리티 타입의 필요성을 느껴보자. interface AddressBook { name: string; phone: number; address: string; company: string; } const phoneBook = { name: '재택..

Cypress로 테스트하다 보면, API를 Mocking하여 처리해야할 일이 생긴다. 다음과 같은 이유가 있다. 1. public api 를 이용할 때는 할당량이 있는 경우가 있어서, 테스트에 할당량을 낭비하지 않기 위해서 2. private api의 경우에도 서버 비용이 발생하기 때문에 Cypress는 공식 문서가 매우 잘 돼있기 때문에, 가급적 공식문서 읽기를 추천한다. API Mocking은 특히 intercept 개념을 읽으면 된다. https://docs.cypress.io/api/commands/intercept intercept | Cypress Documentation Spy and stub network requests and responses. Tip: We recommend you r..

0. 서언 컴포넌트 구조는 황준일님의 를 참고했고, https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/ Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝 (opens new window)에서 진행하는 블랙커피 스터디 (opens new window)에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트 junilhwang.github.io Observer Pattern은 황준일님의 를 참고했습니다. https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-S..

0. 서문 ES6 부터 JavaScript에서 class 문법을 지원하게 되었다. 그러면서 JavaScript로도 객체지향 프로그래밍을 하기 수월해졌다. (이전에는 생성자 함수와 prototype으로 구현하였다.) 그렇지만 여전히 Java와 같은 언어 만큼 객체지향을 지원한다고 할 수 없다. 이를테면, JavaScript에서는 추상 클래스와 추상 메소드를(abstract) 문법적으로 지원하지 않는다. 그럼에도 JavaScript 기본 문법을 활용하여 추상 클래스와 추상 메소드를 구현하는 방법을 알아보겠다. 1. 추상 클래스와 추상 메소드의 개념 먼저 추상 클래스와 추상 메소드의 개념에 대해 알아보자. 추상 메소드란 부모 클래스에서 정의하며, 자식 클래스에서 반드시 오버라이딩해야만 사용할 수 있는 메소드를..