본문 바로가기

전체 글

(16)
Beauty of Typescript - 2 왜 타입스크립트를 잘 사용해야 할까요?더 많은 에러를 런타임이 아니라 컴파일 타임에 해결할 수 있기 때문이에요. 런타임에서 잘못된 값을 발견했을 땐 이미 코드가 실행된 뒤예요. 최악의 경우엔 유저가 우리보다 먼저 문제를 만나죠. 타입스크립트를 잘 사용한다면 실행하기 전 컴파일러가 문제를 알려주고, 에러가 발생할 수 없는 견고한 애플리케이션을 만들 수 있어요. 1편에서는 도메인이 허용하는 상태를 타입으로 표현했어요. 이번 편에서는 런타임에서 확인한 사실까지, 컴파일러가 알 수 있게 만들어 볼게요. 런타임의 결과를 컴파일 타임에 미리 끌고 와서 사용하기 컴파일 타임은 코드를 작성하고 컴파일러가 타입을 검사하는 세계예요. 타입이 존재하는 곳이에요. 런타임은 코드가 실행되는 세계..
Beauty of TypeScript - 1 왜 타입스크립트를 사용해야 할까요?버그를 줄일 수 있어서?정적 분석이 가능해서?자동완성으로 메서드와 프로퍼티 이름을 쉽게 찾을 수 있어서?리팩토링이 편해져서? 모두 맞는 말입니다.한 걸음 더 나아가서 질문해 볼게요. 왜 타입스크립트를 쓰면버그가 줄어들고정적 분석이 되고자동 완성이 되고리팩토링이 편해지는 거예요? 타입스크립트에 어떤 신비한 능력이 있기에 이런 것들이 가능해질까요? 제 답은 하나예요. 타입스크립트는 우리를 불확실성의 영역에서 확실성의 영역으로 데려다줘요. 버그 감소, 정적 분석, 자동완성, 리팩토링은 전부 이 확실성에서 흘러나오는 결과들이에요. 그리고 우리가 확실성을 원하는 이유는 결국 하나예요. 잘 죽지 않는 애플리케이션, 고가용성 애플리케이션을 만들기 위해서죠. ..
Beauty of TypeScript 시리즈 예정 안녕하세요 독자 여러분 김성민이입니다. Beauty of TypeScript 라는 이름으로 시리즈 아티클이 올라갈 예정이에요 1. 왜 TypeScript인가?2. TypeScript를 어떻게 사용해야 좋을까?3. 실제 사례로 확인하는 '복잡한 요구사항을 단순하게 추상화 및 TypeScript가 일하게 하기' + 횡단 관심사 처리 개요는 이렇게 생각하고 있는데 작성 과정에서 변동될 수도 있어요많은 관심 부탁드립니다ㅎㅎ 요즘 TypeScript 덕분에 개발이 즐거워졌어요. 그래서 이런 시리즈를 기획하게 되었어요 마지막 아티클이 1년여 전인데 많은 분들이 제 글을 기다리고 계실 것 같아서 시리즈 소식을 알리고자 글을 작성해요. ㅎㅎ 아니라면 아쉽지만요 다음 글에서 ..
Leets에 대하여 - 3 (완) 이번 글에서는 내 인생에서 굉장히 중요한 이벤트 중 1개였던 Leets에 대한 이야기를 마무리하고자 한다. 1편 Leets에 대하여 - 1Leets - 성장하고 싶은 사람들의 놀이터Leets는 23년도 3월에 아연이와 함께 설립한 가천대학교 IT 동아리로, 프로젝트의 기획과 개발을 하며 성장하는 동아리이다. LeetsWho Cares?www.leets.land 인생의seongmin-kim.tistory.com 2편 Leets에 대하여 - 2 (면접자였던 내가, 이세계에서는 면접관?!)서류1기에는 약 70여 명의 지원자가 존재했다.Leets의 모집이 시작된 날부터 아침 8시에 일어나 자기 전까지 계속 카톡/에타 알림/DB 확인하기 루틴을 돌렸다. 사이트가 터지면 어떡하지?지원자수seongmin-kim...
프론트엔드에서 다형성 활용하기 (feat. Currency) 현재 토스증권에서 환율 도메인의 페이지를 구현하고 있습니다.다형성으로 복잡한 요구사항에 확장성을 확보하며 문제를 해결한 경험을 소개합니다. 요구사항각 통화(Currency)당 최소 금액이 존재해요.각 통화당 최대 금액이 존재해요.최소값 미만인 경우, 최소값으로 세팅 후 최소값 에러 메시지를 보여주세요.최대값 초과인 경우, 최대값으로 세팅 후 최대값 에러 메시지를 보여주세요. 요구사항을 보고 순진한(naive) 설계를 시작했습니다. 달러(USD)의 경우 아래와 같은 유틸함수를 구현할 수 있습니다.getUSDAmount: 최소값과 최대값 사이에 존재하는지 확인한다getUSDMessage: 에러 메시지를 생성한다.const 달러최대금액 = 1000;const 달러최소금액 = 1;function ge..
내가 React에서 상태를 관리하는 기준 (feat. 규모) 이번에는 규모를 기준으로 상태를 관리하는 기준에 대해 설명하겠다.(전 편에서 이어지는 이야기다.) 내가 React에서 상태를 관리하는 기준 (feat. 리렌더링)오늘은 내가 React에서 상태를 관리하는 방법에 대해 작성해보겠다.프론트엔드 개발자라면 항상 하는 고민이 있다. 어떻게 상태를 관리할 것인가?or어떤 컴포넌트에 어떤 책임이 있는가? 이 글에seongmin-kim.tistory.com 재직중인 토스증권에서는, 3주 ~ 1달에 1번씩 어시스턴트분들끼리의 모임 세션이 존재한다. 나는 의존성 주입에 대한 글과 위의 상태 관리를 주제로 발표했는데, 굉장히 좋은 인사이트를 얻었다. 규모에 따른 상태관리 기준정확하게 설명하자면, 개발 인원에 대한 규모를 의미한다.하지만 애플리케이션의..
나의 큰 장점 (feat. 상태 관리 History) 전 편의 히스토리를 이야기하면서 최근 느낀 나의 큰 장점에 대해 설명하겠다. 내가 React에서 상태를 관리하는 기준 (feat. 리렌더링)오늘은 내가 React에서 상태를 관리하는 방법에 대해 작성해보겠다.프론트엔드 개발자라면 항상 하는 고민이 있다. 어떻게 상태를 관리할 것인가?or어떤 컴포넌트에 어떤 책임이 있는가? 이 글에seongmin-kim.tistory.com Context를 왜 써요?"리렌더링으로 많은 이슈가 발생하잖아요." 우연치않게 대면으로 받은 이 기능의 코드리뷰 중 첫 질문이었다. 나는 상태의 위치에 대해 설명하며 아래 근거를 제시했다. 1. 금액의 변화를 컨트롤러, 버튼에서 알아야 하므로 금액은 상단에 있어야 한다.2. 이 경우엔 상태와 Context를 사용..
내가 React에서 상태를 관리하는 기준 (feat. 리렌더링) 오늘은 내가 React에서 상태를 관리하는 방법에 대해 작성해보겠다.프론트엔드 개발자라면 항상 하는 고민이 있다. 어떻게 상태를 관리할 것인가?or어떤 컴포넌트에 어떤 책임이 있는가? 이 글에서는 내 경험을 바탕으로 아래 3가지 방법에 대한 장단점을 비교하고상태 관리법을 선택하는 기준을 얘기해보겠다. 1. Context API (이하 Context)2. props3. 전역 상태 결론 리렌더링에 관한 성능상태 관리 규모가 작으면 작을수록 Context의 성능이 좋다.얼마 가지 않아 props의 성능이 좋으며, Context의 성능은 아주 안좋아진다.상태 관리 규모와 애플리케이션의 복잡도가 커질수록 전역 상태가 가장 좋다. 리렌더링은 왜 일어날까?크게 이렇게 4가지가..