윤민상 블로그

서론 친구에게 부트캠프 강사나 멘토를 하면 어떻겠냐는 얘기를 들었다. 평소에도 교육이나 지식 공유에 관심이 있었고 그런 기회가 온다면 잡아야겠다는 생각을 예전부터 가지고 있었다. 그래서 바로 면접을 지원했고 합격해서 12월말부터 6월까지 한 기수를 담당하는 토요일 주강사로 일하게 되었다. 어느덧 절반이 넘는 시간이 지났다. 그래서 그동안 들었던 생각을 정리해보려고 한다. 본론 내가 하는 일은 크게 질문 답변, 보충수업으로 이루어진다. 수강생들은 비전공자에 완전 처음 개발하는 사람부터 전공자까지 다양하게 있는 것 같다. 나는 비전공자에 혼자서 코딩을 공부했다. 1년 먼저 코딩을 배운 친구가 처음에 길라잡이를 해주기도 했지만 대부분의 시간은 혼자서 머리를 싸매가며 공부했다. 그래서 그들의 입장이 공감된다. ..

배경 약 1년 반 전 컴포넌트를 잘 만드는 방법(리액트) 글을 썼다. 우연히 출퇴근길 개발 읽기에 올라갔고 많은 사람들이 내가 쓴 글을 읽었다. 1년 반이 지난 지금 나는 컴포넌트에 대해서 얼마나 잘 알고 있을까? 2편을 적어보면서 스스로 판단해보기로 했다. 컴포넌트를 잘 만드는 방법 2편인 만큼 아주 기본적인 내용은 생략한다. 실무에서 누구나 겪을만한 내용들을 다뤄보겠다. composition pattern 정의 컴포지트 패턴(Composite pattern)이란 객체들의 관계를 트리 구조로 구성하여 부분-전체 계층을 표현하는 패턴으로, 사용자가 단일 객체와 복합 객체 모두 동일하게 다루도록 한다. - by 위키피디아 정의만 봐서는 알기 힘드니 어떤 경우에 사용할 수 있는지 또한 어떤 장점이 있는지 예..

배경 react는 기본적으로 state와 props로 데이터를 관리한다. 그리고 props로 데이터를 몇 단계씩 넘기다보니 데이터 관리가 너무 어려워졌다. 이를 props 드릴링이라고 부른다. 이 props 드릴링 문제를 해결하기 위해서 redux같은 상태관리 라이브러리를 도입해서 해결했다. 그러면 이제 모든게 행복하게 해결된걸까? 전역상태관리라이브러리에 접근해서 의존성주입없이 데이터와 UI가 강결합되었다. 이게 결코 옳은 방향은 아니다. presentation component와 container component 과거부터 데이터와 UI를 분리하려는 노력은 계속되어왔다. 과거 리액트는 리덕스를 사용하는게 거의 표준이였다. 그리고 리덕스와 함께 presentation component와 container..

배경 저번 글에서는 웹에서 데이터를 저장하기 위한 방법 중의 하나인 웹 스토리지를 잘 사용하는 방법에 대해 얘기했다. 사실 웹에서 데이터를 저장하기 위한 방법중에 웹 스토리말고 다른 방법도 존재한다. 예를 들어보자. 나는 쇼핑몰에서 20대이상 남성 필터를 걸었다. 그리고 내가 필터를 건 페이지를 친구에게 공유하고 싶다. 그런데 웹 스토리지는 컴퓨터마다 브라우저마다 독립적으로 동작한다. 이럴때 사용할 수 있는 방법이 쿼리파람이다. 기본적인 맥락은 프론트 개발을 하다보면 누구나 쿼리파람을 사용한다. 쿼리파람 리약트로 예시를 들어보자. 저번 글에서 설명한 로컬스토리지와 유사한 부분은 가볍게만 설명하고 넘어가겠다. 1. 쿼리파람 연동하기 1. useState로 상태를 관리하고 있었다. 2. 그 상태를 쿼리파람에..

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

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

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

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