👨💻📱✍️🎢314 도메인 기반의 FE 디렉토리 구조 📌 신규 서비스 앱 구조, 어떻게 설계할까요? 현재 재직 중인 회사의 사내 신규 서비스를 하이브리드 앱 형태로 개발하기로 결정된 이후 프론트엔드팀의 첫 번째 과제는 큰 규모의 비즈니스를 어떻게 구조화할 것인지였습니다. Vue 프로젝트를 구조화하는 여러 가지 제안들이 커뮤니티에 많이 존재하지만 그중 대부분은 규모가 크지 않은 앱에 적합한 형태였고 무엇보다 저희는 외주 개발자분들도 함께 작업을 해야 하는 상황이었기 때문에 보다 명확한 구조가 필요했습니다. 이번 포스트에서는 어떤 이유로 DDD 를 프로젝트에 적용하게 되었고 이를 통해 얻게 된 이점이 무엇이었는지 위주로 정리해보려고 합니다. 💡 주의! 여기서는 DDD에 대한 자세한 이론적인 내용은 포함하지 않습니다. DDD의 개념을 이용해서 FE 프로젝트 구조.. 2022. 3. 7. [Vue.js 상태관리 3편] Vuex 언제, 어떻게 써야할까? Redux 를 고안한 Dan Abramov 는 상태 관리에 대해 다음과 같은 의견을 말한 적이 있습니다. Flux 라이브러리는 안경과 같습니다. 언제 필요할지는 스스로 알게 됩니다. 이번 포스트에서는 vuex 를 언제 쓰는 것이 좋을지에 대한 고민을 해보겠습니다. 어느 기술이나 마찬가지이듯 항상 정답인 것은 없으니까요 😄. 📌 Vuex 도입 시 고려할 점 애플리케이션 규모 많은 사람들은 앱의 규모가 커지면 Vuex 가 꼭 필요할 것이라고 말합니다. 좀 더 자세하게는 앱이 어떠한 방식으로 규모가 커지고 있는지가 중요합니다. 대부분의 데이터 흐름은 일정한 패턴을 가지고 있는 경우가 있기 때문에 중앙 집중식으로 관리가 필요할 것 같다는 판단이 들 때까지 정말 Vuex 가 필요한 상황인지 생각해볼 필요가 있습니.. 2022. 3. 7. [Vue.js 상태관리 2편] Vuex 를 이용한 상태 관리 📌 Vuex 란? Vuex 는 vue 커뮤니티에서 공식 지원하는 중앙 집중식 상태 관리 시스템입니다. 관리하는 데이터가 중앙에 집중되어있는 덕분에 데이터를 props 와 event emit 으로 다른 컴포넌트들과 통신하는 복잡도를 낮출 수 있습니다. 📌 Vuex를 왜 써야 할까? 앱이 사용자와 상호작용하는 과정 우리의 애플리케이션(SPA)은 다음과 같이 view, state, actions 의 흐름으로 사용자와의 상호작용이 일어납니다. 사용자가 특정 action 을 취하면 그에 따라 state 가 바뀌고 이것이 view 에 반영됩니다. 우리가 구현하는 각각의 컴포넌트들은 view 를 구성하고 있으며 때문에 각각의 state 는 컴포넌트에 종속되어 있습니다. 그렇다면 대규모 앱에서는? 작은 크기의 앱이라면.. 2022. 3. 7. [Vue.js 상태관리 1편] Vue.Observable 을 통한 상태관리 📌 Vue.Observable? Vue 2.6 버전부터 데이터를 반응형으로 만들어 사용할 수 있는 방법이 생겼습니다. 이번 포스트에서는 이를 활용한 간단한 상태 관리 방법에 대해서 살펴보겠습니다. 📌 Store 패턴 사용해보기 간단한 counter 앱을 통해서 Vue.observable 을 어떻게 사용할 수 있는지 살펴보겠습니다. 먼저 프로젝트를 생성하고 다음과 같이 count 값을 가지고 있는 컴포넌트를 생성합니다. 버튼을 클릭하면 count 가 1씩 증가하는 예제입니다. {{ count }} 클릭 현재 컴포넌트 상태 값으로 관리하고 있는 count 값을 전역에서 관리하도록 변경하겠습니다. 먼저 store 디렉토리를 생성하고 index.js 파일에 다음과 같이 코드를 작성합니다. import Vue f.. 2022. 3. 7. [JavaScript] Object.defineProperty 에 대해서 Object.defineProperty 에 대해서 알아보자 📌 Object.defineProperty? Vue 2.x 라이브러리 소스를 보다보면 Object.definePrototype 으로 객체에 새로운 속성을 할당하는 것을 확인할 수 있습니다. Object.defineProperty() 의 특징 객체의 속성을 세밀하게 추가하거나 수정할 수 있습니다. 객체에 getter / setter 를 지정할 수 있습니다. IE 9 버전부터 지원합니다. (따라서 Vue 2.x 도 이 부분에 제약을 받습니다.) 📌 속성 서술자 (Property descriptor) 속성 서술자는 데이터 서술자 와 접근자 서술자 로 구성됩니다. Object.defineProperty 에 사용하는 서술자는 두 유형중 하나여야합니다. 이.. 2022. 3. 6. [Vue.js] $el 옵션은 무엇일까? 📌 el 옵션이란? Vue 라이프 사이클 공부하다가 생소한 el 옵션이 튀어나와서 한번 찾아봤습니다. el 옵션은 Vue 컴포넌트에서 제공하는 옵션으로 마운팅 포인트를 결정 할 수 있습니다. 단 el 옵션은 new 를 통한 Vue 인스턴스 생성시에만 유효합니다. 📌 el 옵션 사용 예시 {{message}} el 에는 querySelector 와 같이 지정할 수 있으며 지정된 요소에 Vue 컴포넌트가 대체됩니다. 만약 template 옵션이나 render 함수가 없다면 지정된 DOM 요소 내부 내용이 렌더링 됩니다. 위 예시의 경우 message 내용이 p 태그에 둘러싸여 렌더링 되겠네요. 📌 $mount 메서드란? el 옵션을 사용하는 대신 $mount 옵션을 사용할 수도 있습니다. 만약 특정한 목적으.. 2022. 3. 1. 이전 1 ··· 12 13 14 15 16 17 18 ··· 53 다음
