마이크로 프론트엔드? 마이크로 프론트엔드는 전체적인 웹 애플리케이션을 여러 개의 작은 독립적인 프론트엔드 애플리케이션으로 분할하는 아키텍처 패턴이다. 마치 MSA (Micro service architecture) 의 프론트엔드 판이라고 볼 수 있는데, 각 서비스를 분할해 관리함으로써 '독립적인 개발과 배포' , '기술 스택의 다양성' , '유지보수 용이성', '스케일링 용이성', '재사용성과 통합' 에서의 이점을 가진다 런타임 통합 vs 빌드타임 통합 마이크로 프론트엔드 아키텍쳐에서는 개별의 어플리케이션이 통합되는 시점에 따라 '런타임 통합' 과 '빌드타임 통합' 으로 나눠 볼 수 있다. 각각의 장/단점을 비교해보자면 런타임 통합 빌드타임 통합 구현 난이도 상대적으로 높음 상대적으로 낮음 배포 효율성 ..

Problem! 타 직군 일정에 의존적 이미 만들어진 서비스를 유지보수 하는 경우라면 잘 와닿지 않을 수 있지만, 회사에서 신규 기능을 개발하거나 개인 프로젝트를 진행하다보면 프로젝트 초기 프론트엔드 개발자의 워크로드가 상대적으로 타직군에 비해 낮다 는것을 알 수 있다. 프론트엔드 개발자라는 포지션이 가지는 특징이라고 볼 수 있는데 디자이너의 디자인 대로 UI를 만들고 백엔드 API를 연동해 서비스를 만들어 가야 하기 때문에 이런 상황에 상대적으로 다른 "타직군 일정에 의존적" 이라고 할 수 있다. (중간에서 이리치이고 저리치이고한다) 이 세상은 코드가 아니야! 개발자라면 본능적으로 이런 의존성에서 벗어나고 싶어할 것이다. 다만 현실은 코드로 이루어지지 않았고, 일정이라는게 내 마음대로 되는 게 아니다...

함수이름 짓기, 변수이름 짓기를 로직짜기보다 어려워하는 개발자들이 은근 많은데요? 그래서 자주 사용하는 함수명 접두사 를 정리해봤습니다. get - 어떤 값을 가져오는 함수를 나타낼 때 사용됩니다. set - 어떤 값을 설정하는 함수를 나타낼 때 사용됩니다. check - 어떤 조건을 확인하는 함수를 나타낼 때 사용됩니다. create - 새로운 객체나 요소를 생성하는 함수를 나타낼 때 사용됩니다. update - 기존의 데이터나 상태를 업데이트하는 함수를 나타낼 때 사용됩니다. delete - 어떤 요소나 데이터를 삭제하는 함수를 나타낼 때 사용됩니다. validate - 데이터나 입력 값의 유효성을 검사하는 함수를 나타낼 때 사용됩니다. render - 템플릿이나 데이터를 기반으로 화면에 렌더링하는 ..

[Zustand Snippet 배포 - 오픈소스생태계에 기여하다!] Atomic Pattern 상태관리라이브러리인 Recoil 을 주력 상태관리 라이브러리로 사용했던 터라 Flux패턴을 따르는 Zustand 을 익힐겸 강의 영상을 찍는 와중 Zustand 관련 Snippet 이 없는것을 확인해 직접 만들어 배포해봤습니다. 별거 아닌 간단한 스니펫 익스텐션이지만 오픈소스 생태계에 기여했다는 생각에 뭔가 스스로 뿌듯해 지네요! [개발 비하인드 영상] https://youtu.be/-KOtsS20TsY HTML 삽입 미리보기할 수 없는 소스 [마켓플레이스] https://marketplace.visualstudio.com/items?itemName=jobkaeHenry.zustand-snippet

https://youtu.be/k5DLjVmMC2w 장바구니를 만들어보며 배우는 react recoil 강의! 페이스북이 만든 리액트를 위한 리액트에 의한 리액트의 상태관리 단짝친구 리코일 들어보셨나요? React 스럽게 동작하는 Recoil을 이용하면 리액트 초보자도 전역상태관리 10분안에 할 수 있습니다. 전역상태관리 라이브러리인 리코일에 대해 알아볼거에요 여러분 혹시 상태관리에 대해서 들어보셨나요? 리액트에서 데이터는 단방향으로만 전달된다. Props와 다르게 변화할 수 있는 값이다. 이런 말 들어보셨나요? 그런데 상태가 과연 뭘까요? 컴포넌트 내부에서 변화할 수 있는 데이터 간단하게만 생각해봅시다 상태는 결국 데이터에요 그 중에서도 컴포넌트 내부에서 변화할 수 있는 데이터 요 두 키워드가 상태의 ..

일반적인 프로젝트 디렉토리구조 본 디렉토리 구조는 자바스크립트를 사용한 React를 이용한 APP을 기준으로 한 디렉토리 구조이고, 상태관리로 Recoil을 사용한 프로젝트의 디렉토리 구조이다. my-app/ README.md node_modules/ package.json public/ index.html index.css favicon.ico src/ assets/ images/ logo.png background.jpg fonts/ font.ttf components/ global/ Button/ Button.js Input/ Input.js Shared/ MySharedComponent.js FeatureA/ MyComponentA.js FeatureB/ MyComponentB.js constan..