전체 글 (13) 썸네일형 리스트형 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가지가.. React에서 의존성 주입하기 회사에서 새로운 페이지 구현을 맡았다.책임감이 막중했다 요구사항 분석부터 설계, 구현까지의 과정을 소개하고자 한다. 요구사항1. 계산기를 구현해주세요.2. 생성, 갱신 화면이 존재해요.3. 생성은 POST /api/create를, 갱신은 POST /api/update를 요청해요. 생성, 갱신 화면의 UI는 동일했고, 사용되는 데이터와 API가 다르다고 판단했다. 설계 목표1. 산탄총 수술을 방지하자 (중요)2. 컴포넌트 재활용성을 높이자3. 해당 기능과 연관된 상품을 출시할 것이므로, 연결될 수도 있겠다. 변경에 유연한 구조를 가지자 설계 결과 1. 컴파운드 컴포넌트 패턴자유로운 컴포넌트 주입유연하고, 재사용성이 높으며 선언적인 설계 방식 생성 (/create) 새로운 계산.. Vite 마이그레이션 시작은 개발 환경의 콜드 스타트였다. 내가 입사했을 때(24년도 11월), 해외주식 백오피스의 FE는 4명이었다. 개발 환경에서 run dev를 실행하고 첫 화면을 보기까지 30초가 소요되었고빌드에 사용되는 시간은 약 22분이었다. 더 많은 업무를 수행하기 위해선 이 시간을 단축해야 한다고 생각했고,이 시간을 아끼면 FE 개발자 4명의 시간은 물론, 팀의 시간도 아낄 수 있다고 생각했다. 토스 증권에 어시스턴트로 입사하고, 처음으로 팀에 기여한 Vite 마이그레이션에 대해 이야기하고자 한다. 결론적으로 아래 성과를 얻었다. 빨라진 콜드 스타트 🚀개발서버 구동 속도 30초 → 5초빨라진 빌드 🚀CI/CD 환경의 빌드 속도 22분 → 3분개발자의 생산성 극대화 🚀 더 빠른 주기의 배포로 팀.. ES Module의 동작과 Insight 회사에서 CRA(Create React App) 기반의 백오피스 환경을 Vite로 마이그레이션 했다. 개발 서버 시간을 35초 -> 5초빌드 시간을 22분 -> 3분 으로 단축하는 성과로 이어졌다. ES Module은 무엇일까?왜 Vite는 전 과정에서 ES Module을 사용한다고 강조할까? 그냥 import / export 다.이 글에서는 모듈의 역사에 대해 얘기하진 않을 것이다Vite 공식문서와 ESM의 관계를 설명하며 1. 왜 ESModule이 빠른지2. 더 좋은 코드를 작성하는 법 에 대해 얘기해보겠다. ES Module의 동작 방식ES Module은 3가지의 과정을 거치고, 각 과정이 비동기로 이뤄진다 쉽게 설명하자면 모듈을 분석하고, 메모리에 연결하고, 평가한다 .. 이전 1 2 다음
