Lighthouse of FE beginner

10월 둘째 주 회고 글을 작성한다. 9월 마지막 주 기술지원본부에서 이슈를 넘겨줬다. 고객사에서 나온 이슈는 아니지만 솔루션을 사용하는데 있어서 일관성이 없어서 불편하다는 이슈였다. 8월에 인수인계 받은 우리 팀의 솔루션은 사실 이슈가 너무 많았고, 이슈를 단순히 덮어 놓은 부분들도 많이 발견했다. 이번 이슈는 그 이슈의 일환으로 솔루션의 코어 컴포넌트인 테이블에서의 액션과 로우 선택, 체크가 페이지마다 일관성이 없다는 것 이였다. 개인적으로 특정 컴포넌트의 특정 기능은 잘 추상화 되어 하나의 비즈니스 로직으로 간단하게 컴포넌트(페이지)에서 사용할 수 있어야 한다고 생각한다. 하지만 현재 개발된 테이블과 비즈니스 로직은 기능을 직접 페이지 컴포넌트에서 구현하고 있기 때문에 수 많은 페이지를 다양한 개발..

가을이 왔기 때문일까, 아니면 올 한해의 끝을 바라보고 있는 시점일까.유독 생각이 깊어지는 계절이다. 무엇인가를 마무리를 해야할 계절이 왔기 때문일까.올해 여름은 유난히 길었다. 아직 서울의 잎은 푸르고 예년보다 단풍이 늦다. 그래서 그런지 아직은 깊어질 시점이 이른것은 아닐까 라는 생각도 든다. 한 해가 거듭날 수록 조금씩 차분해지고 있다는 생각이 든다.아니, 내가 차분해지고 있는 것일까? 아니면 기대감을 내려놓는 것일까? 삶에서 누군가와 무엇인가에 기대하는 것들에 초점을 흐트리고 있는 것일까.사진을 찍다보면 초점을 맞추는 것은 당연하다.초점을 맞춰야 피사체를 뚜렷하게 관찰하고, 모습을 남길 수 있기 때문이다.하지만 초점을 맞추기 위해서는 무언가의 행위를 해야하고 더욱이 노력을 해야한다.요즘은 초점을 ..

Overview해당 포스팅은 MFA 강좌를 수강하고 MFA에 대해서 공부한 내용을 기록하기 위한 포스팅 입니다.MFA가 무엇인지 살펴보고 조직에서 MFA 도입을 고려하면 좋은 시점에 대해서 고민해보도록 하겠습니다.마지막으로는 대표적으로 MFA를 구현하는 방식에 대해서 남겨보도록 하겠습니다.MFA에 대해서 궁금하신 분들은 아래 강의를 통해서 접해보시면 좋을것 같습니다. (관계자 아님, 내돈 내산)> 강의 바로가기 MFAMFA는 Micro Frontend Architecutre의 약자로써 기존의 모놀리식 프론트엔드를 앱 단위로 잘개 쪼개어 하나의 애플리케이션으로 통합하는 현대식 프론트엔드 아키텍처 입니다. 잘개 쪼갠다고 하는데 무엇을 쪼갤 수 있을까요? 당근 플랫폼을 예시로 들어서 살펴보도록 하겠습니다.  ..

지난 7월 21일 MFA 강의 수강을 시작하면서 글을 작성했다.MFA, Monorepo 강의 수강을 시작하며 두 달이 지난 시점에서 강의를 완강했다. 부록 한 파트가 남긴 했는데 레거시 환경에서의 점진적 전환에 관한 파트는 넘어가도 괜찮겠다는 생각이 들어서 수강하지 않았다. 강의를 듣기 전까지는 MFA에 대해서 자세하게 알지 못했다. MSA는 근무한 팀에서도 택하고 있는 아키텍처이고, 화제성이 많은 아키텍처이기 때문에 잘 알고 있었다. MFA도 MSA처럼 프론트엔드 애플리케이션을 서비스 단위로 쪼개는 것에 대해서는 알고 있었지만, 정확히 어떤 방식으로 구현을 할지에 대해서는 생각해보지 못했던 것이다. 회사에서도 MFA에 대한 이야기가 나왔고, 평상시에 MFA와 모노레포에 대한 두려움을 가지고 있었고 요즘..

OverviewReact는 다른 UI 프레임워크에 비해서 상태 관리가 복잡하고 어렵다는 이야기가 종종 들립니다. 이번 글에서는 상태에 대해 알아보고 상태 관리가 왜 복잡한지에 대해서 고민해보도록 하겠습니다. 왜 React의 상태 관리는 어려울까?React의 상태는 랜더링과 직접적인 관계가 있습니다. 상태가 변경이 되면 해당 상태와 연관된 컴포넌트는 랜더링이 발생합니다. 그렇기 때문에 상태를 최적화 하는 것이 중요합니다. React의 상태를 잘 관리하는 것이 곧 컴포넌트 랜더링 최적화이기 때문입니다. (물론 랜더링 최적화 수단은 상태 관리 외 여러가지 것들이 있습니다.) React의 데이터의 흐름React의 데이터는 단방향으로 흐릅니다. 위에서 아래로, 부모 노드에서 자식 노드로 데이터가 흘러갑니다. 이는..

지난 5월에 블로그를 이전하고 벌써 4개월이 지났다. 이전 블로그인 벨로그에서 약 50개의 글을 작성했었고, 예전 블로그인 네이버 블로그에서는 약 200개의 글을 작성했으니 개발 공부를 시작한 이래로 거의 300개에 가까운 글을 작성한 것 같다. 물론 공부를 하고 흔적을 남기기 위해 작성한 글들도 많고 글의 목적이 개발이 아닌 글들도 여러 건들이 되지만 그동안 상당히 많은 글들을 작성했다. 오늘 문득 나는 왜 글을 작성하고 있을까 라는 생각이 들었다. 지금 운영중인 블로그는, 주니어 프론트엔드 개발자의 등대 가 되고 싶다는 목적 하에 운영하고 있다. 물론 나도 아직은 주니어 개발자이지만, 어려움을 겪고 있는 주니어 개발자나, 신입 개발자 혹은 개발 지망생 분들께 많은 도움이나 인사이트를 주고 싶다는 생각..

Overview금주 9일에 Korean Article에서 리팩토링에 관한 좋은 번역 글을 발행했습니다. 글을 읽으면서 공감되는 부분들이 많이 있었고, 좋은 인사이트를 얻은 내용도 있었습니다. 지난 몇 달 동안 리팩토링에 대한 업무를 주로 진행하면서 개인적으로 리팩토링에 대해 느꼈던 생각을 남겨보도록 하겠습니다.(번역) 좋은 리팩터링 vs 나쁜 리팩터링 리팩토링소프트웨어 공학에서 리팩토링은 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법 이라고 정의하고 있습니다. 리팩토링의 핵심은 본래의 기능은 유지하며 소스 코드를 여러 관점에 의해 변경하는 것인데, 여기서의 여러 관점은 협업, 유지 보수, 추가 기능에 의한 리팩토링 등 이 있습니다.실제로 리팩토링을 하면서 가..

Overview지난 7월 프로젝트의 프론트엔드를 개편하는 과정에서 패키지 매니저를 Yarn berry에서 pnpm으로 교체를 진행했습니다.그 당시 교체를 선택한 이유는 몇 가지가 있었는데, 이번 포스팅에서는 pnpm을 학습했던 내용을 기록하고 교체를 진행했었던 이유를 남겨보려고 합니다. pNpM먼저 pNpM에 대해서 살펴봅시다.왜 pnpm을 pNpM이라고 했는지 간단하게 살펴보자면, 홈페이지에서 새로고침을 할 때 마다 텍스트가 랜덤하게 변하는 것을 확인 했습니다. 딱히 정해져 있지 않은 것인가 해서 어느 순번에 나타난 pNpM을 살펴보려고 합니다. pnpm은 perfomant npm 의 약자로써 말 그대로 향상된 npm입니다. 그럼 어떤 장점이 있길래 향상된 npm 이라고 하는 것 일까요?  전역 스토어..

OverviewReact 프로젝트를 하다보면 DOM을 직접 제어하거나, DOM의 정보를 필요로 하는 시점이 있습니다.또 렌더링을 유발시키지 않는 특정 값이 필요로 하는 경우가 있을수도 있고, 자식 컴포넌트에서 정의된 함수를 상위 컴포넌트에서 사용하고 싶은 경우가 있습니다. 이번 포스팅에서는 위와 같은 케이스를 바탕으로 React의 useRef 훅에 대해서 살펴보겠습니다. useRefReact에서 랜더링을 발생시키지 않는 값을 필요로 한다면, 즉 React에 의해서 제어받지 않는 값을 필요로 한다면 고민해볼 수 있는 것이 useRef를 활용한 ref 객체 입니다. React 프로젝트를 하다보면 변하는 값, 즉 상태를 state로 정의합니다. state는 랜더링을 유발하고 React 재조정 엔진에 제어를 당..

벼는 익을수록 고개를 숙인다. 윗사람을 공경하고 아랫사람을 배려하자.