leesche blog

chatGPT와 차근차근 지뢰찾기 프로그램을 만들면서 느꼈던 것들을 적어봅니다. 현재 지뢰찾기 프로그램은 놀랍게도 완성되지 않았으며, 차근차근 진행중입니다. 진행 중인 프로젝트 코드는 여기서 보실 수 있습니다. 연습 욕구: 클린 아키텍처와 TDD 예전부터 하나의 작은 프로젝트를 처음부터 끝까지 설계하고 구현해보고 싶었다. 그 과정에서 각종 설계와 방법론들을 연습해보고 싶었는데, 그 중에 하나가 클린 아키텍처와 TDD였다. 특히 클린 아키텍처의 경우 실전 경험이 적었기 때문에 꼭 나만의 프로젝트로 연습해보고 싶었다. 프로젝트 선택: 지뢰찾기 작은 프로젝트로 어떤 것을 구현하면 좋을까? 고민했다. 예전부터 만들어 보고 싶었던 프로젝트들은 많았지만 적당히 작은 프로젝트로는 틱택토, 지뢰찾기, 테트리스 등이 있..

캐나다에서 2주간 살아보며 적어보는 단상 캐나다 워킹홀리데이로 3월 1일부터 토론토에서 지내고 있습니다. 아직 직업은 없고요. 개발자 일자리를 구하고 있습니다. 토론토는 (의외로) 캐나다 동쪽에 위치해 있고, 미국의 뉴욕과 가깝습니다. 그리고 캐나다와 미국을 끼고 있는 오대호 중 온타리오 호수(나이가아라 폭포를 보러 갈 수 있어요!)와 맞닿아 있고 캐나다의 가장 큰 도시 중 하나이기도 하죠. 글감을 찾다가 왜 이곳까지 오게되었는지 생각해보고 적어두면 좋겠다! 하여 이렇게 정리해봅니다. 사실 매번 커피챗마다 반복해서 하는 이야기이기도 해서, 이렇게 적어두면 나중에 더 잘 말할 수 있지 않을까? 했습니다. 그래서 일단 이야기하다보면 많이 나오는 질문에 대해 적어보도록 해보겠습니다. 왜 캐나다이고, 워킹홀리데..

사이드 프로젝트 출시는 여러 방면에서 그것을 만든 사람에게 긍정적인 영향을 끼치는 것 같습니다. 저는 얼마 전 사이드 프로젝트로 만든 FigNotion이라는 제품을 Figma Community에 출시했습니다. 이 제품은 Figma라는 디자인 도구의 Widget으로, Notion 페이지의 내용을 Figma로 불러들여 문서 파편화 문제를 해결하고 협업을 더 효율적으로 할 수 있도록 도와줍니다. (FigNotion이 어떻게 탄생했는지 이야기를 알고 싶으시다면 이 글을 읽어보시면 좋겠습니다.) FigNotion의 탄생에 대해 간단히 말해보자면, 회사에서 문서 파편화 문제를 해결하기 위해 회사 내부에서만 사용할 목적으로 FigNotion을 만들었습니다. 그리고 나름 잘 사용하고 있었죠. 그리고 이런 문제 해결 경..

우리는 모두 똑같은 시간 속에서 살고 있…지 않나? 시간은 우리 모두에게 동일하게 흐르는 것처럼 보입니다. 우리 모두 같이 늙어가잖아요?! (그렇지 않을 수도 있겠죠…) 하지만 기술의 세계에서, 특히 데이터를 다루는 작업에서 시간은 예상치 못한 복잡성을 드러냅니다. 이 글에서는 웹프론트엔드 개발자로서 광고 및 전환 추적 데이터 수집 작업을 하면서 겪은 시간 관련 문제와 그 해결 과정을 공유하고자 합니다. 사례 문제의 시작 플랫폼 회사의 웹프론트엔드 개발자로서, 저의 주요 업무 중 하나는 사용자가 우리 플랫폼의 특정 페이지에 진입하거나 UI의 특정 부분을 충분히 오래 인지했을 경우 이를 임프레션 이벤트로 기록하는 것이었습니다. 이 데이터는 사용자가 언제 해당 페이지나 UI를 인지했는지에 대한 시간 정보를 ..

이 글에서 저는 스쿼드에서 제품을 개발하면서 직면했던 한 가지 큰 도전, 바로 '제품 정책 문서의 파편화' 문제와 그 해결 과정에 대해 이야기하고자 합니다. 제품 개발 과정에서 정보의 분산은 큰 혼란을 야기할 수 있습니다. 저희 팀은 이 문제를 해결하기 위해 기존의 작업 방식을 재고하고, 새로운 솔루션인 'FigNotion'을 개발하게 되었습니다. 이 글을 통해 그 여정을 공유하고자 합니다. 들어가기 전에 저희 회사 제품 개발 조직은 디자인 협업 툴로 Figma(피그마), 또 문서 관리 도구로 Notion(노션)을 사용하고 있습니다. 스쿼드 마다 세부적인 내용은 다를 수 있으나 일반적으로 제품과 관련된 정책은 Notion으로 관리하고 제품 디자인은 Figma에서 관리하고 있습니다. 창 하나에 있는 디자인..

배경 저는 한 스타트업 광고 시스템의 웹프론트엔드를 개발하고 있습니다. 제가 속한 팀은 현재 성과형 광고를 구축해 운영하고 있는데요. 성과형 광고란, 광고의 노출, 클릭 등의 성과가 발생할 때마다 병원에게 광고비를 받는 시스템입니다. 팀은 비교적 최근에 구성됐는데, 구성되고 나서 눈에 띄게 떠오르기 시작한 이슈 중 하나는 임프레션 및 클릭 데이터(이하 이벤트)의 누락 및 재수집 이슈였습니다. 여기서 임프레션이란? 유저가 특정 요소를 인지했다고 판단하는 기준입니다. 예를 들어, 유저가 보고 있는 화면에 어떤 상품이 50% 이상 노출된 채로 1초가 흘렀다면, 그 유저가 그 상품을 인지했다고 판단하고 Viewed 이벤트를 수집합니다. 임프레션 수집은 해당 광고의 성과 데이터를 수집하는데 중요한 요소입니다. 저..

맨먼스 미신 - YES24 “40년 세월을 견뎌낸 소프트웨어 공학의 고전”여러 가지 변화가 급박하게 일어나는 IT 세계에서 어제의 지식은 금방 낡은 것이 되기 쉽다. 그러나 이 책 『맨먼스 미신』은 출간된 지 40년이나 www.yes24.com 독서모임에서 읽은 책. 1월 초부터 읽기 시작했는데 예상보다 빠르게 읽었다. 모임에서 진행하는 진도대로라면 3월 중에 다 읽었을지 모르지만, 내가 궁금하기도 해서 그냥 조금씩 더 읽다보니 끝까지 읽게 됐다. 전반적으로 책 내용은 흥미로웠다. 인생에 한 번 쯤 읽을만한 책이다. 하지만 기술 자체에 집중하지 않고 그 외의 것들에 더 초점을 맞춘다. 그래서 어떤 기술적 저변을 넓히거나 깊게 파고들고 싶은 목적이라면 이 책은 추천하지 않는다. 그리고 책이 75년에 쓰였기..

테스트 코드 작성 중, 컴포넌트가 실제로 어떻게 렌더링되는지 알고 싶을 때가 있다. 나는 제대로 한 것 같은데 안 되니까 답답해서 숨이 안 쉬어지고 영문을 몰라 팔짝 뛸 노릇이다. 그럴 때는 해당 컴포넌트에 test id를 prop으로 전달하고, screen.debug 메서드의 인자로 해당 엘리먼트를 넘겨보자(test id를 꼭 사용할 필요는 없고, 어떻게든 엘리먼트만 잡을 수 있으면 된다). screen.debug가 실행될 때 해당 엘리먼트가 어떤 상태였는지 터미널에 출력된다. 아래는 사용 예시다. test('A 필터를 선택했을 때 10일을 넘어선 기간을 입력하면 에러 메시지가 보여야 한다.', () => { renderComponent({ filterOption: 'A' }) const startDa..

지난 12월, 상호배타적인 프로퍼티를 갖는 객체를 타입으로 만들고 싶었다. 왜냐하면 그렇게 요청을 보내야 했기 때문이다. 예를 들어 성과를 조회하기 위해 서버에 요청을 하는 상황에서 요청 Body를 두 종류로 보내야 했다. 상품 아이디를 보내면 상품에 대한 성과를 요청한다. 상점 아이디를 보내면 상점의 모든 상품에 대한 성과를 요청한다. interface GetProductPerformance { productId: number } interface GetStorePerformance { storeId: number } 이 두가지 케이스를 모두 포함하는 타입을 만들고 싶었다. 이때 productId와 storeId는 상호 배타적으로, 하나가 있으면 다른 하나는 객체에 없어야 했다. 혼자서 배운 타입스크립..

원문: https://blog.ploeh.dk/2013/03/11/listen-to-trivial-tests/ Craftmanship My blog post was a reaction to Robert C. Martin's post on The Pragmatics of TDD. One of the qualities I've always appreciated of people like Robert C. Martin and Martin Fowler is that they consistently explain the reasoning behind their actions. The part of The Pragmatics of TDD that caused me to react was that it contain..