홈 | 김정환 블로그

특별육아휴직
2022년 08월 06일
서울을 벗어난 뒤로는 아침에 일어나 오늘 날씨를 단번에 알아차릴 수 있다. 이십 년 전 자취짐을 꾸려 상경한 뒤로는 방에서 하늘 보기가 힘들었다. 짧게는 육 개월, 길게는 삼 년 간격으로 거처를 옮기면서 그 때마다 엑소더스를 다짐했다. 마땅히 어디로 가야할지 목적지를 정하지는 못했다. 다만 각박한 현실과 타협할 수밖에 없는 비루한 주거환경으로부터 속히 벗…
NPM 워크스페이스와 모노레포
2022년 07월 31일
모노레포 솔루션은 lerna, yarn 등 여러가지가 있다. 이유는 모르지만 최근 lerna는 지원 종료한다는 소식을 들었다. 때가되면 이 기술을 사용해 봐야지 마음먹은 내겐 아쉬운 소식이다. 그만큼 모노레포 기술은 나온니 꽤 지났다. 강의를 만들 때 여러 개 저장소를 사용한다. 수강자 분들이 올린 질문 중에는 모노레포를 사용해 강의를 만들었다면 헷갈리시…
2022-06 스크랩
2022년 06월 30일
6/6 월 Faster JavaScript Builds with Metro 필요한 것만 캐시 6/18 토 디지털 시대에 '아날로그'가 꼭 필요한 이유 혼재된 동기 - 비동기 커뮤니케이션 ... '프로토콜'이 필요해 동기 커뮤니케이션에 익숙한 사람 비동기에 익숙한 사람 서로 강요할 수 없음 회사는 바뀌어야 함. 가정도 바뀌는데 6/24 금 STOMP Ove…
리액트 Portal
2022년 06월 02일
닥터 스트레인지는 전투 중에 불리하면 포탈을 만들어 상황을 용케 빠져나간다. 악당을 포털로 넣어 순식간에 상황을 종료시켜버리는 모습은 무척 통쾌하다. 리액트도 어플리케이션을 이동시키는 기능을 제공한다. 표현이 조금 생소하긴 하지만 어플리케이션이 마운트되는 위치를 이동한다는 의미다. 루트 돔 트리를 벗어나 다른 돔에서 어플리케이션의 일부분을 그릴 수 있다…
2022-05 스크랩
2022년 05월 31일
5/3 화 한 개의 메소드만 갖는 계층형 컨트롤러/서비스 패키지 스타일 이런 이름의 제한은 유지보수할 사람에게 강력한 힌트 제공 소리치는 아키텍쳐 "나는 영업 어드민이야!" 5/5 목 React Router v6 hooks 때문에 출시. 코드양 줄고, 용량 줄어 4kb useParams, useLocation 라이프 사이클의 전형적 불편함 중첩 라우팅 -…
리액트 Ref
2022년 05월 31일
컴포넌트 상태와 프롭에 따라 리액트 엘리먼트를 동기화하는 것이 리액트로 UI 개발하는 기본 방향이다. 대부분 경우 이 구조로 개발하는 것이 엘리먼트를 직접 다루는 방법보다 더 낫다. 돔을 직접 수정하다보면 자칫 장황한 코드가 될 여기가 많기 때문이다. 그럼에도 불구하고 돔에 직접 접근할 수 밖에 없는 상황이 생긴다. 리액트는 이런 경우에 대비해 ref라는…
리액트 고차 컴포넌트(HOC)
2022년 05월 28일
훅을 주로 사용하는 지금에 비하면 비교적 철 지난 주제인 것 같다. 리액트 컴포넌트 로직을 재사용하기 위한 방법으로 고차 컴포넌트(High Order Component)를 사용한다. 써드 파티 라이브러리에서도 이 형태의 API 제공한다. 리액트 라우터는 withRouter 함수로 라우터의 일부 기능을 컴포넌트에 추가한다. 리액트 리덕스는 connect 함…
리액트 StrictMode
2022년 05월 20일
거의 사용해 보지 못했다. create-react-app에서 잠깐 봤는데 이걸로 프로젝트를 해본 경험이 없으니 정말 거의 사용한 적이 없었다. React의 Strict 모드가 무엇인지 문서 위주로 정리해 보자. 역할 자바스크립트에서는 엄격 모드가 있다. 코드 파일 상단에 "use strict"를 써 놓으면 자바스크립트를 실행할 때 조금 더 엄격하게 코드를…
리액트 라우터 만들기
2022년 05월 06일
요즘 react-router를 거의 만져보지 못했다. 회사에서 담당한 제품이 사용하지 않은 이유가 크다. 오랜 만에 봤더니 버전 6가지 나왔더라. 예전에 4를 썼던가? 부지런 해야겠다는 생각이 든다. 싱글페이지 어플리케이션의 가장 중요한 기능은 라우터다. 브라우져의 요청에 맞는 웹 페이지를 제공하는 것. 평소에 생각만 해봤다. '히스토리 API를 사용하면…
2022-04 스크랩
2022년 04월 30일
2022-04-01 금 Making Sense of React Hooks Why Hooks? 등장배경? 복잡한 컴포넌트를 작게 쪼갤수 없다. 상태 때문. 함수나 다른 컴포넌트로 분리 불가 그래서 이런걸 만든다. 거대한 컴포넌트: 리팩토링, 테스트 어려워 중복로직: 다른 컴포넌트와 라이프사이클 복잡한 패턴: 렌터 프롬, hoc 그래서 훅이 나왔다. 재사용할…

VIDEOS