{{packageMeta.displayName}}의 로고

MobX

ver 6.13.5 ∙ 2024.10.16 업데이트됨

개요

MobX, functional reactive programming을 투명하게 적용함으로써 상태 관리를 쉽고 확장성 있게 만들어주는 검증된 상태 관리 라이브러리. Redux와 달리 객체 지향 성향이 강하며, 렌더링 최적화를 쉽게 할 수 있고, 구조가 자유로운 장점이 있음

관련 게시물

모두 보기
Mobx가 class + decorator를 표준 문법으로 이제 만들고자 하네요!

구세대(?) 상태관리, class를 사용하는 방법등으로 외면받았던 mbox

이번에 정리된 문법을 보니 상당히 깔끔하네요.


과연 mobx는 어떻게 될것인지, class나 객체기반 상태관리의 패러다임은 찾아올것인지

한번 읽어보세요. 🙂


https://michel.codes/blogs/mobx-decorators?utm_source=substack&utm_medium=email


```ts

import { observable, computed, action, flow } from "mobx"


class Doubler {

    @observable accessor value


    constructor(value) {

        this.value = value

    }


    @computed

    get double() {

        return this.value * 2

    }


    @action

    increment() {

        this.value++

    }


    @flow

    *fetch() {

        const response = yield fetch("/api/value")

        this.value = response.json()

    }

}

```

개발자들에게 리액트가 필수 교양이 되는 세계관

✅ 리액트가 필수 교양이 되는 세계관이 있을까?

이전에 리액트와 관련된 찬양(?), 개발자의 영감을 주는 리액트에 대한 내용을 공유했었습니다.

그리고, 저는 리액트 강의를 찍고 있습니다.

요즘에 리액트 강의는 사실 너무나도 많고 좋은 강의도 많기 때문에 제 강의가 뛰어나다고 이야기드리긴 어렵지만, 그럼에도 찍는 이유는 저는 모든 개발자를 위한 리액트 강의에는 미래가 있다고 믿는 편이기 때문입니다. 이게 무슨 뜻이냐면, 리액트가 필수 교양이 되는 세계관을 꿈꾼다 입니다.

먼저 홍보를 잠깐 하고 본론으로 들어가자면,

이번에 제 강의의 얼리버드 쿠폰이 4/29일 자정까지 부활한다고 합니다!
얼리버드 기간은 가장 저렴하게 제 강의를 구매할 수 있는 기간을 의미하는데요.
현재 반짝 기간동안 얼리버드 특가가 적용되는 쿠폰을 판매 페이지에서 바로 다운받아서 쓰실 수 있다고 합니다.

-> [일단 쿠폰 받으러 가기 : https://bit.ly/49T7NGH]

잘 부탁드립니다 :)

✅ 리액트가 필수 교양이 되지 않을까?


저는 리액트라는 라이브러리를 많이 올려치기 하는 편입니다. 어느 정도냐면, 주변에 개발자들이 뭔가 배우고 싶은데 뭘 배울지 모르겠다고 하면 AI가 아닌 리액트를 추천하곤 합니다. 가장 큰 이유는 Hook 입니다. 정확하겐 Hook의 메커니즘이 개발자에게 영감을 불어넣기 때문인데요. 아직 함수형 프로그래밍 개념이 발전되지 않은 분야에 계신분이라면, 함수형 프로그래밍을 찍먹 해볼 수도 있고, 사이드이펙트 관리라던가 클로저 같은 고급 개념을 가장 가까이서 배워볼 수 있기 때문이기도 합니다.

여전히 웹 쪽에서는 다양한 프레임워크들이 활용되고 있고, 그 관점에서 리액트가 필수 교양까진 아니라고 생각하는 분들도 있겠지만, 리액트가 라이브러리라는 속성을 가졌기 때문에 이미 웹도 리액트가 준 영향안에서 발전되고 있다고 생각하는 편입니다. 실제로, 새로운 프레임워크들도 적극적으로 jsx/tsx를 사용한다던가, 리액트 위에 프레임워크를 올린다던가(예를 들면 Next.js) 하는 식으로 생태계 확장이 계속 되고 있죠. 그래서 사실상 웹개발을 하는 분들 중에 React를 모르는 분은 없다고 봐도 무방합니다. 오히려 React는 기본적으로 알고 있고, 상위 레벨의 프레임워크나 좀 더 발전된 형태의 도구를 사용하고 있는 상황이죠.


게임 쪽에서도 비슷한 흐름이 있었습니다. 10년전만 해도, 게임을 개발하려면 C++/WinAPI/XNA등을 배운다던가, 스스로 DirectX를 배워서 엔진을 만든다던가 해야했는데, 지금은 유니티/언리얼 엔진이 필수 교양이 되었습니다. 그래서 최근의 게임 개발자 중에 유니티/언리얼 엔진을 모르는 사람은 사실상 없습니다.


아마도 웹은 앞으로도 더 발전하고, 더 좋은 라이브러리나 프레임워크가 나올지도 모릅니다. (어쩌면 지금도 만들어지고 있을 수도 있죠) 그리고, 리액트의 시대가 저물수도 있습니다. 그러나 그런 시대가 오더라도, 이전에 웹 개발자들이 JavaScript/HTML/CSS등을 기본으로 배우고, 프레임워크 하나 정도 배워야 했다면, 지금은 어쩌면 앞으로도 JavaScript/React를 기본으로 배워야 한다는 점이 아닐까 싶습니다.


✅ 대부분의 개발분야는 서로 영향을 줍니다.

갑자기 붐! 하고 나오는 라이브러리들이나 프레임워크는 다른 개발분야에도 영향을 많이 줍니다. C#에서 시작된 Reactive Programming이라던가, 마틴 파울러가 최소로 변형한 MVVM이라던가 시대가 무르익고, 언어의 스펙이 맞춰지기 시작하면서 갑자기 사용되곤 합니다. 그리고 그 영향은 많은 프레임워크와 라이브러리에 걸쳐서 연쇄적으로 발전하게 됩니다.

확실한건 리액트는 한시대를 그었기 때문에 많은 개발자들에게 영감을 주었을 것이고, 최근에 다른 개발분야의 라이브러리나 프레임워크들도 여기서 영감을 받는 케이스가 생겨나고 있습니다. 이미 상태관리쪽은 Redux나 MobX를 차용해서 만든 것들이 웹이 아니더라도 생겨나고 있고, 언어 스펙에서 함수형 프로그래밍 관련 지원들도 점차 늘어나고 있죠. 동시에 WPF에 XAML이라던가, Unity에 XUML등 확장형 컴포넌트 선언 언어들도 생겨나거나 발전하고 있습니다.

물론 아직 다른 분야에서는 함수형 컴포넌트를 쓴다던가 Hook이라는 개념을 쓰는건 거의 못봤던 것같습니다. (유일하게 본게 Lua로 되어있는 Roblox에서 나왔던 Roact가 되겠네요.)


아마도, 이는 언어의 스펙 문제와 더불어 함수형 프로그래밍에 대한 지원여부에 따라 다르겠지만, 지금 현재도 지속적으로 언어들이 발전하고 있는 만큼 다른 분야에서도 리액트Like 라이브러리를 쓰게 될 날이 곧 오지 않을까요?


그러면, 리액트가 필수 교양이 되는 세계관이 꿈만은 아니게 되지 않을까 싶습니다.


감사합니다.

리액트가 필수 교양이 되는 세계관

소난의 블로그

리액트가 필수 교양이 되는 세계관

관련 개발자 Q&A

모두 보기

이력서에 첨삭할 진행했던 프로젝트들 내용을 보다 더 잘 적고 싶어요.

이력서에 첨삭할 지금까지 진행했던 프로젝트들 내용을 적고 있는데 한눈에 보기 쉽게 큰 범주로 적기에는 너무 포괄적으로 적는것 같고 개발한 기능들을 세부적으로 적거나 해당 프로젝트 진행 후 낸 성과들을 다 나열하면 내용이 너무 길어지는것 같아서 어느정도로 구체화해서 적어야될지 헷갈려서 조언을 구해 봅니다. 아래는 지금 작성된 내용입니다. 현재는 프로젝트별로 포괄적으로 적거나 좀 더 디테일하게 적거나 기준점을 못찾은 상황입니다. [ 2022. 12 ~ 2022. 01 • 프로젝트 명 : 집 클릭 • 주요 설명 : 전세임대 지원 사이트로 권리분석을 의뢰할 수 있는 사이트 • 담당 업무 : 자사 서비스 웹 크롤링 기능 개발 -puppeteer 사용 등기부등본 발급 자동화 웹 크롤링 작업 • 기술 스택 : Node.js 2023. 06 ~ 2023. 07 • 프로젝트 명 : 브릭 인프라 • 주요 설명 : 자사 서비스 종합 관리 사이트 • 담당 업무 : 자사 어드민 프론트엔드 개발 • 기술 스택 : React 2023. 08 ~ 2024. 06 • 프로젝트 명 : 키오 솔루션 • 주요 설명 : QR 주문 결제로 보다 편리한 결제 시스템을 이용할 수 있는  솔루션 • 담당 업무 : 자사 솔루션 "키오" 활용 서비스 개발 및 운영 유지 보수 - 메뉴형 결제 서비스 "키오브릭" 프론트엔드 유지 보수 - 금액입력형 결제 서비스 "스마트 노점" 프론트엔드 개발 및 - 해당 서비스 관련 어드민 풀스택 유지 보수 - 자사 어드민 풀스택 유지 보수 • 기술 스택 : React, GraphQL, Node.js, MySQL 2023. 09 ~ 2024. 06 • 프로젝트 명 : 오늘 우리 가게 • 주요 설명 : 자영업자 대상 매출, 리뷰, 주문 현황, 광고 현황 분석 앱 • 담당 업무 : 자사 서비스 오늘 우리 가게 기능 개발 및 운영 유지 보수 - React Native 앱 메인 화면 개발 - 전체 React Native 앱 기반 프로젝트 WebView 기반 프로젝트로 전환 작업 진행 - 리뉴얼 된 WebView 구성 화면 프론트엔드 개발 - 우리 가게 리뷰 듣기 TTS 하이브리드 기능 개발 - 네이버 클라우드 이용 카카오 알림톡 서비스 벡앤드 유지 보수 - 앱 테스트 및 배포, CodePush 작업 진행 • 기술 스택 : React Native, MobX, React, Redux, TypeScript, Next.js, Node.js, MySQL 2023. 11 ~ 2024. 02 • 프로젝트 명 : 빌딩 CAS • 주요 설명 : 건물 내 입주사들을 위한 공지, 관리비 결제 및 장터 커뮤니티 기능을 제공하는 앱 • 담당 업무 : 외주 서비스 빌딩 CAS 프론트엔드 및 앱 개발 - WebView 기반 프로젝트 초기 환경 구축 및 아키텍처 설계 - React Native 앱 메인 화면 개발 - WebView 주요 기능 프론트엔드 개발(소셜로그인, 회원 정보 관리, 관리비 결제, 문의하기, 중고장터 게시판) - 앱 테스트 및 배포, CodePush 작업 진행 • 기술 스택 : React Native, React, MobX, Node.js, PostgreSQL *** 포트폴리오 링크를 통해 더 자세한 내용을 확인 하실 수 있습니다. ]

나쁘지 않아요 제대로 기재 했구요 면접 보게되면 면접관이 궁금하면 질문 하게되서~ 사진 있으면 같이 올려도 되고 없으면 그정도 까지 하면되요

리액트에서 상태관리로 Redux를 무조건 공부해야할까요?

안녕하세요 저는 풀스택 개발자이고 2년만에 다시 리액트를 공부하려고 합니다. 얼마전에 리액트 2023 로드맵을 봤는데요 (사진 첨부했습니다.) 해당 로드맵에서 언급된 상태관리중 어떤걸 공부해야할지 고민됩니다. 상태관리 - 추천: Recoil, Zustand, Context - 대안: Redux / Toolkit, Mobx 2년전에는 Redux는 상태관리에서 거의 필수라고 했던 것 같은데 로드맵에서는 Recoil, Zustand, Context를 추천하고 Redux는 대안이라고 언급하네요. 요즘 리액트를 공부하게되면 Redux는 굳이 공부할 필요 없을까요? Recoil을 공부해보려고 하는데 Redux도 같이 공부해야하는 고민됩니다. 긴글 읽어주셔서 감사합니다.

무조건 공부해야하는건 없습니다만. 이미 만들어진 많은 서비스들이 redux를 사용하고 있다는 점에서 배울 필요가 있습니다. 또한 많은 상태관리툴이 redux의 영향을 받은만큼 기본개녑같은 느낌으로 학습하시는걸 추천드립니다. 또한 팀원끼리 대화할때는 주로 공통된 지식이 베이스가 되는 경우가 많은데 상태관리의 베이스 지식이 아무래도 리덕스가 되는 경우가 많아요. 실무에서 안쓴다면 redux에 대한 공식문서에 대한 정독하고 나서 recoil zustand 등을 학습하시면 좋을것같습니다. context는 리액트에 속한 것이라 당연히 리액트 공부할때 보시면 좋아요.

공식 홈페이지

mobx.js.org

최신 버전 정보

6.13.5

최신 버전 출시일

2024.10.16

연관 라이브러리

라이브러리 로고Recoil라이브러리 로고React라이브러리 로고Zustand라이브러리 로고Jotai

의견 보내기