윤민상 블로그

배경 fe conf를 보다가 토스 라이브러리 공개를 보고 깜짝 놀랐다. 그리고 보다보니 유용한 것들이 많아서 종종 코드를 보고 있다. 사실 처음부터 모든 코드를 볼 수 는 없고 심심할 때 관심가는 것들을 하나씩 보고 있었는데 좀 구체적으로 살펴보기로 했다. 그리고 깃헙에 모노레포 환경으로 테트리스를 만들려고 하는데 이걸 하기 전에 스타일 관련해서 좀 생각도 하고 코드를 작성해보고 싶었다.(디자인 컴포넌트 제외) 개인적으로 tailwind같이 css가 직접 jsx에 들어가는 방법은 좋아하지 않는다.(관심사 분리가 되지 않기 때문) 장단점이 있다고 생각하지만 개인 프로젝트에서는 선택하지 않기로 했다. 그러면 일일히 스타일을 작성해야하는데 이게 생각보다 좀 귀찮고 시간도 걸린다. 이미 거대한 프로젝트에서 컴포..

마법을 부리기 전 코드 마법을 부리는 코드를 이해하기 위해서는 마법을 부리기전의 코드를 먼저 이해해야한다. store abstract class Store { public listeners = new Set void>(); public snapshot = {} as Snapshot; public addListener(listener: () => void) { this.listeners.add(listener); } public removeListener(listener: () => void) { this.listeners.delete(listener); } public getSnapshot() { return this.snapshot; } public publish() { this.listeners.fo..

배경 2022 feconf에서 진짜 흥미로운 세션을 봤다. react18버전부터 제공하는 useSyncExternalStore를 이용해서 간단하게 store를 만들고 이걸 모델 클래스와 연결하는 방식인데 너무 마음에 들었다. 요즘 객체지향, 리팩터링 공부를 하다보니 자연스럽게 클래스에 대한 공부를 많이하는데 리덕스로는 이걸 적용할 수 없다. 클래스를 사용하지 않는다고 객체지향적인 사고를 할 수 없다는 것은 절대 아니다. 하지만 클래스가 없기 때문에 할 수 없는 것들이 너무 많다. 세션중에 연사분이 클래스를 격하게 쓰고 싶다고 하셨는데 내 마음을 말하는 것 같았다. 세션을 열심히 보고 코드 분석도 해보고 bdd 개념도 찾아봤다. 그리고 최근에 코드스피츠라는 곳에서 todolist를 객체지향적으로 구현하는 ..

echo "export PATH=":/usr/local/bin/:$PATH"" > ~/.huskyrc 명령어 복붙. 끝

강의내용 이번 강의에서는 저번시간에 만들었던 todo list를 리팩터링하면서 기능, 성능을 추가한다. html 먼저 js로 관리하던 dom 코드를 html파일로 이동시켰다. 리액트는 dom을 js로 관리한다. 자바스크립트로 모든것을 다루는 것은 분명히 장점이 있지만 그건 리액트에 dom api를 위임하고 jsx를 이용해서 가독성을 높였기 때문이다. 그런게 없는 일반 자바스크립트에서 기본 dom 코드가 있는 것은 오히려 코드의 가독성을 낮춘다. extends set set을 사용하는 코드가 있었는데 클래스 자체에서 set을 extends하게 변경했다. 그러면 다음과 같이 super로 set에 접근할 수 있다. 테트리스 글에서 올리긴 했는데 이건 진짜 set으로 동작한다. es6에서 나온 클래스로만 할 수..

테스트 구축하기 드디어 나왔다. 테스트코드... 근데 이 책은 테스트에 관련된 책이 아니라서 상세하게 설명하지는 않았다. 그래서 좀 아쉽기도 하지만 테스트로 주제가 빠져버리면 책 한권으로도 부족하기 때문에 어쩔 수 없다고 생각한다. 예시 테스트 코드도 나쁘지는 않지만 좀 부족하다. 게다가 프론트엔드에서 테스트는 또 다른 얘기다. 자가 테스트코드의 가치 테스트를 작성하기 가장 좋은 시점은 프로그래밍을 시작하기 전이다. 테스트를 작성하다 보면 원하는 기능을 추가하기 위해 무엇이 필요한지 고민하게 된다. 구현보다 인터페이스에 집중하게 된다는 장점도 있다. 게다가 코딩이 완료되는 시점을 정ㄹ확하게 판단할 수 있다. 테스트를 모두 통과한 시점이 바로 코드를 완성한 시점이다. 켄트 벡은 테스트부터 작성하는 습관을 ..

배경 엄청 오랫동안 코드스피츠 강의를 듣지 못했다. 논건아니다... 다른 우선순위에 치여서 못했을 뿐... 진짜.... 어쨋든 다시 코드스피츠 강의를 조금씩 듣고있다. 듣다보니 리팩터링과 겹치는 내용들이 많다. 둘다 켄트백의 영향을 많이 받아서 그런것같다. 리팩터링, 객체지향의 사실과 오해, 코드스피츠가 점차 한 점으로 모이고 있는 느낌이 든다. 원래 어떤 분야든 공부를 하댜보면 전혀 다른 분야의 과목도 한 점으로 모인다고 하는데 조금 느껴진다. 강의 이론 5,6강에서는 todo list를 만든다. todolist를 만들면서 이것저것 설명을 하시는데 설명에 관한 것들을 먼저 적고 마지막에 코드와 관련된 얘기를 하겠다. 상태값 boolean 상태값으로는 boolean이 좋지 않다. 사실 나도 알고 있던 내..

코드에서 나는 악취 이번에도 세부적인 내용은 적지 않겠다. 그 중에서도 중요하다고 생각한 몇가지만 적어보겠다. 그리고 가장 중요한 것은 코드를 작성할 때 생각을 하면서 짜는 것이다. 생각없이 코드를 적으면 악취를 풍긴다. 최대한 냄새를 풍기지 않게 주의하면서 코딩을 하자. 기이한 이름 코드를 명료하게 표현하는데 표현하는데 가장 중요한 요소 하나는 바로 이름이다. 마땅한 이름이 떠오르지 않는다면 설게에 더 근본적인 문제가 숨어 있을 가능성이 높다. (너무 많은 역할을 하고 있지는 않은지 생각해보자) 네이밍은 엄청나게 중요하다. 진짜로 엄청엄청. 변수명을 보고 유추하기 어렵다면 그건 잘못된 네이밍이다. 설계가 잘못되었는지 두 가지 이상의 역할을 하고 있는지 이런것들을 생각하는 것도 중요하지만 그것과는 별개로..