윤민상 블로그

배경 그동안 개발하면서 참 이런 거 모호하다 라고 느꼈던 것들이 있다. 그런 것들을 정리해보겠다. 1편은 웹 스토리지, 2편은 queryParam, 3편은 props 드릴링 문제를 다룰 것이다. 웹 스토리지(로컬스토리지) 웹에서는 로컬스토리지, 세션스토리지, 쿠키 등등의 가벼운 스토리지가 있다. 그리고 모든 것을 백엔드에 저장할 수도 있지만 상황에 따라 웹 스토리지를 사용해야 하는 경우가 있다. 리액트와 로컬스토리지로 예시를 들어보자. 1. 로컬스토리지 연동하기 1. useState로 상태를 관리하고 있었다. 2. 그 상태를 로컬스토리지에 저장해달라는 요청을 받았다. 3. useState의 initialState와 setState부분에 localStorage를 연동한다. 문제점 localStorage를 ..

배경 개발을 하다보면 추상화라는 용어를 굉장히 많이 보게 된다. 그리고 개인적으로도 추상화를 하기 위한 노력들을 많이 해왔다. 모호하게 잡혀있던 개념들을 정리해야겠다는 생각이 들어서 이 글을 쓰게 되었다. 이 글은 사전적 정의부터 추상화를 해야하는 이유, 코드에 적용하는 방법, 웹 프론트엔드에 적용하는 방법까지를 다루는 글이다.( + 개인적인 잡담) 추상화란 추상화의 사전적 정의 - 미술에서 추상화(抽象畫)는 대상의 구체적인 형상을 나타낸 것이 아니라 점, 선, 면, 색과 같은 순수한 조형 요소로 표현한 미술의 한가지 흐름이다. - 컴퓨터 과학에서 추상화(abstraction)는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것을 말한다. 현실 세계의 추상화 사전적 정의로..

배경 개발자로 취업한 지 1년이 넘었다. 벌써? 라는 생각도 들고 아직도? 라는 생각이 들기도 한다. 기록하지 않으면 지금 내 생각을 기억할 수 없으니 조금 구체적으로 회고할 생각이다. 그리고 그동안은 개발에 관련된 내용만 블로그에 적었는데 그 외의 것들도 조금씩 적어보겠다. 회사 가장 먼저 회사 얘기를 해야 할 것 같다. 회사에 들어가서 정말 많은 것들을 배웠다. 다른 회사에 다닌 적이 없어서 모르겠지만 지금 회사에 다녀서 배운 점이 많다고 생각한다. 하나하나 회고 내용을 적고 싶지만 블로그에 쓰는 게 적절하다고 생각하지 않아서 세부적으로는 적지 않겠다. 그리고 블로그에 적지 않은 것이지 개인적으로 많은 시간을 투자해서 회고했다. 사실 회사 일에 집중하느라 생각보다 공부를 많이 못 하기도 했다. 하지..

배경 요즘 모노레포에서 이것저것 작업을 하고 있다. 그러다보니 자연스럽게 공통 디자인 컴포넌트들이 필요해서 하나씩 만들고 있다. 지금까지 버튼, 스피너를 만들었고 그 다음으로 인풋을 만들려고 하다가 갑자기 툴팁에 관심이 생겨서 이것부터 만들어보기로 했다. 인풋의 우선순위가 높은 것은 사실이지만 지금 나는 정해진 시간동안 프로젝트를 완성해야하는 상황이 아니다. 그냥 관심가는게 생기면 다른걸 제쳐두고 하는 편이다. 툴팁이 뭔데? 툴팁은 조금 생소할수도 있어서 간단하게 먼저 설명을 하고 넘어가겠다. 우리가 버튼을 호버했을 때 설명을 도와주는 ui가 나타나는 경우가 있다. 이게 바로 툴팁이다. 깃허브에서 사진을 하나 가져와봤다. 어떤 방법으로 구현할까? 들어가기 전에 정말 중요한 것 하나만 생각해보자. 일반적으..

배경 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 명령어 복붙. 끝