행복한 시지프

진부한 만큼 중요한 말 : Connecting the dots

진부한 말은 왜 진부해졌을까. 너무나 유명해서, 닳게 들으면 그 말은 진부하게 느껴진다. 하지만 역설적으로 진부한 만큼, 중요하다고 생각한다. 중요하지 않았다면 이야기가 들리지 않았을 터이고, 그 말은 새로이 느껴질 것이다. 오늘은 스티브 잡스가 스탠포드 대학교 졸업 연설에서 남긴 유명한 말, “Connecting the dots” 에 대해서 깊이 들여다보려 한다. 잡스가 이 말을 통해 무엇을 전달하고 싶었을까. Connecting the dots 는 경험의 연결을 의미하는데, 연설을 들어보면 잡스는 2가지를 강조하고 싶어하는 것으로 보인다. 경험의 예측 불가능성과, 내면의 소리는 따르는 것. 잡스의 생애를 통해, 이 말을 더 깊이 이해해볼 수 있다. 잡스는 남들이 볼 때, 일반적이지 않은 삶을 살아왔다..

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

최근 다시 대학에 돌아와서, 마지막 학기를 보내고 있다. 막학기인지라, 내가 원하는 과목들을 들으며 아주 즐겁게 학문을 하고 있다. 경제, 컴퓨터과학, 철학 과목들을 수강 중이다. 다양한 과목들을 근본부터 들으니, 어떻게 학문을 대해야 하는지, 좋은 생각이 솟구친다. 나의 현 상황을 서술하는 것이 이해에 도움이 되리라고 생각한다. 나는 현대 프로그래밍 언어는 잘 다룰 줄 아는데, 컴퓨터과학의 근간인 기계어, 어셈블리어, C언어 등은 잘 모른다. 나는 현대 철학인 실존주의에 대한 이해는 높은 편인데, 고전철학, 근대철학에는 그렇지 않다. 나는 SQL 은 다룰 줄 아는데, 데이타베이스 이론은 잘 모른다. 위 사례들이 잘못 되었음을 말하고자 하는 것은 절대 아니다. 나는 실용주의적, top-down 학습법이 ..

탈무드에 나오는 세 석공 이야기가 있다. 어느 날, 세 석공이 공사장에서 열심히 돌을 다듬고 있었다. 지나가던 노인이 그들에게 왜 일을 하느냐고 물었다. 첫 번째 석공은 한숨을 내쉬며 죽지 못해 일한다고 하였다. 두 번째 석공은 가족의 생계를 위해 일한다고 하였다. 세 번째 석공은 웃으면서, 아름다운 성당을 짓기 위해 즐겁게 일한다고 하였다. 이 이야기는 일에 의미를 부여하는 것의 중요성을 시사하는 소재로 자주 사용된다. 하지만 과연 일에 의미를 부여하는 자가, 가장 일을 즐기는 사람일까? 나는 지극히 세 번째 석공 부류의 인간이다. 일에 큰 의미를 부여한다. 진로를 탐색할 때도 의미에 이끌려서 이리저리 찾아다녔다. 나에게 가장 큰 의미는 선한 영향력이었다. 그렇지만 내가 동료들 사이에서 가장 일을 즐기..

Computer Science 에서 알고리즘 문제를 푸는 방법 중 하나로 Approximation algorithm이 있다. 계산해야할 것이 너무나 많아서, 주어진 시간 안에 Solution 을 찾지 못 하는 경우에 사용할 수 있는 미봉책이다. 가령 해결책을 찾기 위해서 10^8! (1억 팩토리얼)번 순회해야 한다고 해보자. 일반적인 Computing power 로는 완료할 수 없는 연산이다. 그럴 때, Optimal Solution 을 찾으려고 하는 것이 아니라, Approximation 을 통해서 근사적으로, Optimal 과 가까운 결과를 얻으려고 할 수 있다. 그렇게 함으로써 현실적인 시간 안에 답을 구하지 못하는 문제를, 차선의 답을 구할 수 있도록 바꿔낸다. 이 CS 이론이 너무나 현실적이고,..

이번에 6개월간 글또에 참여했고, 오늘 회고를 써보려고 한다. 글또 커뮤니티는 글쓰는 또라이 의 줄임말이다. 글쓰는 개발자 모임이고, 돈을 걸고 2주마다 하나의 글을 제출하려고 모인 집단이다.쓴 글 수6개월동안 총 14개의 글을 썼다. 기술글 3개와 비기술글 11개를 썼다. 프론트엔드 직무로 들어왔기 때문에, 비기술글은 쓰고도 제출하지 않은 글이 많다. 쓴글을 모아보자. 기술글ErrorBoundary 가 포착할 수 없는 에러와 그 이론적 원리 분석React CleanCode #2. UI Variation에 유연하게 대응하기React에서 중복호출(aka. 따닥)을 막는 완벽한 방법 비기술글토스에서의 1년을 돌아보며왜 사람마다 생각의 양과 질에서 차이가 나는가?2024-1 Self-integrity repo..

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

사람들을 만나고 얘기하다 보면 드는 생각이 있다. 사람마다 생각의 양과 질의 관점에서 차이가 있다는 것이다. 이를테면 특정 현상을 보고 어떤 이는 A라는 것을 느낄 수 있지만, 어떤 이는 A를 아예 생각조차 할 수 없다. 그리고 특정 현상을 보고 어떤 이는 피상적인 생각을 떠올리고, 어떤 이는 구체적이고 깊은 생각을 할 수 있다. 이 격차는 사실 모든 차이를 결정한다. 직업의 차이, 봉급의 차이, 풍요로움의 차이, 의사결정의 차이, 현명함의 차이 등. 생각의 격차가 태어나면서 모두 결정되는 것은 당연히 아니다. 후천적으로 충분히 개발될 수 있는 영역이다. 이 글에서는 어떻게 생각의 격차가 발생하게 되는지 고찰해본다. 나는 21살에 내가 무시받는게 상당히 싫었다. 그때의 나는 (어리석을 수 있지만) 이미 ..

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

서언 이 글은 나라는 사람의 Integrity 를 점검하는 글이다. Integrity 는 “진실성” 이라는 의미로 번역된다. 즉, Self Integrity 라는 이름으로 내가 나에게 얼마나 진실한가? 얼마나 나다움을 실현하고 있는가? 에 대해 이야기해보려고 한다. 앞으로 주기적으로 작성해볼 것이다. 왜 작성하는지 먼저 짚고 넘어가보자. 이는 삶의 근본적인 부분을 주기적으로 고민하기 위함이다. 내가 의식하지 못 한 채 나이가 들어버리고, 과거를 후회하는 삶을 방어해주는 장치이다. 이것도 회고의 일종이지만, 단순히 일정 시간동안 잘한 점/아쉬운 점/개선할 점 을 분석하는 것이 아니다. 현재의 시간을 초월하여, 내가 현재 가진 직업과 생각, 모든 것을 초월하여, 근본부터 생각하고 나를 점검해가는 시간이다. ..

"아는 만큼 보인다" 라는 격언이 있다. 같은 현상을 보더라도, 무엇을 / 얼마나 아느냐에 따라서 관점이 달라진다. 즉, 지식이 세상을 보는 창이다. 어떤 이는 과학으로, 어떤 이는 역사로, 어떤 이는 철학으로, 어떤 이는 사회학으로, 어떤 이는 경제학으로, 어떤 이는 경영으로 세상을 바라본다. 예시를 들어보자. 산업 혁명이라는 하나의 사건을 다양한 시각에서 바라볼 수 있다. 철학으로는 데카르트의 합리론, 법학으로는 특허법, 역사로는 인클로저 운동, 등을 가지고 바라볼 수 있다. 각 분야는 각기 다른 관점을 가지고, 다른 배울 점을 제공한다. 우리의 일상도 같다. 사람의 행동을 이해하려면 많은 도구가 필요하다. 이를테면 심리학에 대한 이해가 필요하다. 이 중에서도 자기방어, 열등감 등에 대한 심도있는 이..

서언 토스에서 Frontend Developer로 일한 지 1년이 지났다. 정말 밀도 높은 한 해를 보냈다. 매일을 살아가는 것도 중요하지만, 과거를 숙고하는 것이 기반이 되어야 한다. 내가 지금 어디에 있고 앞으로 어디로 가야 할지를 생각해야 한다. 이게 내 삶에서 자정 역할을 해왔다. 오늘도 잠깐 멈춰서서 1년을 돌아보고, 나아갈 길을 정의해볼 생각이다. 글 형식은 토스에서 인상 깊었던 요소를 써내려가며 느낀점을 쓰는 형식으로 해보겠다. 목적조직 토스는 목적조직 문화를 가진다. 목적조직은 직무와 상관없이 목표를 이루기 위해 팀원이 모이는 조직형태를 의미한다. 이게 토스에서 일하는 것이 즐거운 이유 중 하나라고 생각한다. 내가 토스에 합류한 이유이기도 하다. 그래서 대개 한팀에 직무 별로 1명씩 배치된..

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

프로그래머 저는 온전한 자기 의지로 프로그래밍을 시작했다고 생각합니다. 나라는 사람은 어떤 사람인지, 무엇을 좋아하는지, 무엇을 잘하는지, 수년간 고민한 결과로 내린 결론이기 때문입니다. 선한 영향력 지금의 시점에서 과거를 충분히 반추한 후 내린 결론입니다만, 저는 어릴 적부터 제가 가진 능력으로 남을 도와주는 것에서 아주 큰 보람을 느꼈습니다. 이는 어떠한 보상 없이도 스스로를 움직이게 하는 원동력이었습니다. 가령, 게임에서 퀘스트를 깨는 방법에 대한 블로그 글을 쓰기도 하고, 네이버 지식인에서 모르는 이들에게 답글을 달아주기도 하였습니다. 그리고 진로를 고민해봐야 할 나이가 되었을 때에는 정치인이 되리라 다짐했었습니다. 그 당시에는 공적인 일만이 사람들에게 선한 영향력을 줄 수 있는 일이라고 생각했기..

2024.02.05 바빠져서 멘토링 쉬어갑니다. 안녕하세요. 이전에 아래와 같이, 멘토링을 하는 글을 썼는데요. https://happysisyphe.tistory.com/61 [공지사항] 프론트엔드 직무 관련 무료 멘토링 진행해요 23.06.01 업무가 바쁜 관계로 잠깐 중단합니다. 안녕하세요. 블로그 주인 행복한 시지프 라고 합니다. 멘토링 활동에 관심이 많이 생겨서, 일단 무료 멘토링을 진행해보려고 합니다. 부족한 점이 happysisyphe.tistory.com 1인당 한시간씩 열명 정도 멘토링을 진행했어요. 즐겁고 보람찬 시간이었습니다만, 사람들의 고민이 비슷하다는 생각이 들었어요. 똑같은 말을 되풀이 하게 되었을 때, 방식의 아쉬움을 많이 느꼈어요. 그래서 조금씩 흥미가 떨어지고, 바쁜 일이 ..

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

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

업무가 바쁜 관계로 잠깐 중단합니다. 안녕하세요. 블로그 주인 행복한 시지프 라고 합니다.멘토링 활동에 관심이 많이 생겨서, 일단 무료 멘토링을 진행해보려고 합니다.부족한 점이 많지만, 제가 도움이 될 수 있는 한에서 도움을 드려보고자 해요.관심있으신분 읽어보시고 연락주세요. 저의 지인이든, 처음보는 분이든 상관없습니다.한줄 소개비전공자에서 토스 프론트엔드 개발자가 되기까지. 학습방법을 많이 고민했고, 가장 효율적인 학습법을 제안해드려요.나의 커리어 패스와 경험 소개2021.1 프론트엔드 개발 시작2021.2 발표시간 계산기 웹사이트 출시2021.3~2022.1 IT 벤처창업동아리(SOPT) 활동2022.2~10 우아한테크코스 4기2022.12~ 토스 프론트엔드 개발자2021년 개발을 시작하고, 1달도 ..

그간의 회사생활 입사하고 7주가 지났다. 7주동안 54개의 PR을 올렸다. 진짜 시간 가는 줄 모르고 하루종일 문제를 풀었다. 현재 신규회원을 모으기 위한 서비스를 만들고 있다. 도메인은 정해져 있지 않고, 신규 회원을 모을 수 있다면 어떤 일이든 한다. 그러다보니 아이디에이션에도 많이 참여한다. 스타트업에서 일하는 기분이다. 토스는 수백개의 스타트업이 모인 조직이라고 들었는데, 진짜다. 각각의 팀이 스타트업 형태로 일한다. 그러면서 공동의 목표를 공유한다. 승건님이 말씀하시는 피자 두판의 법칙이란게 있는데, 한 팀의 인원이 8명이 넘으면 비효율, 불통이 생긴다는 것이다. 토스는 이런 가치를 지키기 위해서 조직을 나누고 나눠서, 소규모 스타트업 형태로 운영한다. 매력적이다. 데이터 기반 사고가 재밌다. ..

서언 안녕하세요. 이번에 신입 프론트엔드 개발자 채용을 거쳐 토스(코어)와 우아한형제들에 합격했습니다. 프론트엔드 개발자로서 두 회사 모두 객관적으로 너무나 좋은 회사들이고, 저에게 과분한 기회가 찾아왔다고 생각합니다. 둘 다 엄청나게 가고 싶은 회사였기 때문에, 하나를 놓는다는게 여간 어려운 일이 아니었습니다. 이 글은 회사의 우열을 따지지 않으며, 저의 주관적인 선택 과정을 담습니다. 내적으로 이미 정했지만, 스스로 합리화하지 않으면 아쉬움이 떠나가지 않을 것 같아 명문화해 봅니다. 외부적인 기준을 비교하는 과정 저는 회사에 다녀본 적이 없었기 때문에 선택이 특히나 어려웠습니다. 처음에 두 회사를 두고 외부적인 기준을 비교했습니다. 지인들에게서 이 회사는 이래서 좋더라, 저 회사는 저래서 좋더라 하는..

시리즈 0. 우아한테크코스 회고 1. 우아한테크코스에서의 기술 성장 기록 2. 우아한테크코스에서의 자기 성장 기록 3. 우아한테크코스에서 후회되는 점 3. 우아한테크코스에서 후회되는 점 후회되는 점을 서술하고자 한다. 이후 삶에서 신경써야 할 가장 중요한 부분들이다. 1. 건강 건강을 많이 신경쓰지 못 했다. 반년 이상 아침을 굶었다. 일년 정도 운동을 하지 않았다. 확실히 힘을 몰아썼다는 느낌을 받는다. 이는 지속가능한 자기계발이 아니다. 롱런하기 위해서는 꼭 건강을 챙겨야 한다. 2. 일상의 루틴 나는 하나에 집중하면 나머지는 모두 미루는 경향이 있다. 청소, 빨래, 글쓰기, 독서, 친구와의 연락 등 미뤄온 것들이 너무 많다. 일상에 오직 하나만을 넣으려고 하기 때문에 다른 모든 것을 미루게 된다. ..

시리즈 0. 우아한테크코스 회고 1. 우아한테크코스에서의 기술 성장 기록 2. 우아한테크코스에서의 자기 성장 기록 3. 우아한테크코스에서 후회되는 점 2. 우아한테크코스에서의 자기 성장 기록 다음으로 자기 성장 (기술 이외의 성장)을 서술하고자 한다. 1. 리더 의식 생각해보면 성인 이후로 리더 역할을 많이 했었다. 성향 상, 계획적이고, 효율성을 추구하고, 문제해결을 좋아하다보니까 집단을 주도할 수밖에 없었다. 문화예술동아리 회장, IT 벤처창업동아리 SOPT 웹파트장, (분대장) 등을 해왔다. 그러면서도 스스로를 리더라고 정체성을 부여한 적은 없었다. 나의 직함은 리더였고, 그 자리로서 해야할 일을 마땅히 해냈음에도 리더 의식을 가지진 않았다. 그렇기 때문에 은연 중에 구성원과 팀을 온전히 고려하지 ..

시리즈 0. 우아한테크코스 회고 1. 우아한테크코스에서의 기술 성장 기록 2. 우아한테크코스에서의 자기 성장 기록 3. 우아한테크코스에서 후회되는 점 1. 우아한테크코스에서의 기술 성장 기록 우아한테크코스를 진행하며 기술적으로 정말 많이 성장했다고 생각한다. 어떤 부분이 부족했었고, 어떤 노력을 통해 얼마나 성장할 수 있었는지 서술하고자 한다. 1. JavaScript 성장 우테코 이전에 자바스크립트를 정말 못 했던 것 같다. 리액트 개발자로서 자바스크립트의 중요성은 익히 들어 알고 있었다만, 왜 중요한지 어떤 점을 잘 해야 하는지 알지 못 했다. spread operator, 불변성, Promise, nullish coalescing 등의 개념을 알고 사용할 줄 안다면 자바스크립트를 잘 하는 것이라고 ..

시리즈 0. 우아한테크코스 회고 1. 우아한테크코스에서의 기술 성장 기록 2. 우아한테크코스에서의 자기 성장 기록 3. 우아한테크코스에서 후회되는 점 우아한테크코스 회고 우아한테크코스 4기 프론트엔드 과정이 끝났다. 2022월 2월 8일부터, 11월 25일까지 약 10개월의 과정이었다. 매일 아침 10시부터 최소 밤 10시까지 공부했다. 공부 과정에는 기술 공부, 프로젝트 개발, 애자일 공부, 글쓰기, 리더 공부, 면접 준비 등이 포함된다. 고등학교 3학년 이후로 이렇게 열심히 한 적은 처음이었다. 인생에 고3 때처럼 노력하는 시기가 또 와야 한다고 생각하고 있었는데, 그게 우아한테크코스 기간이었다. 고등학교 때 2년의 공부를 통해 이전에 상상할 수 없는 대학교를 간 것 처럼, 올해 1년간의 공부를 통해..

더보기 서언 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..