프로젝트를 진행함에 있어 API연동을 해야하는 순간이 왔다.. 바로 배우고 적용시켜보자 (1)편 : Repository pattern이란 뭔지에 대해 간단히 알아보기 (2)편 : Vue.js에서 Repository pattern적용방법 📌Repository Pattern이란? Repository(리포지토리) 패턴은 디자인 패턴 중 하나로, 데이터가 있는 여러 저장소(Local, Remote)를 추상화하여 중앙 집중처리 방식을 구성하고, 데이터를 사용하는 로직을 분리시키기 위한 디자인 패턴이다. ViewModel은 필요한 데이터를 Repository에 요청하고 Repository는 적절한 저장소에서 요청받은 데이터를 가져온다. Repository가 추상화되어 있기 때문에 ViewModel은 언제나 같은 인..
vue 프로젝트를 진행 하다보니 데이터를 따로 저장하는게 깔끔한 코드를 짤 수 있지 않을까 해서 따로 데이터를 저장하는 폴더를 만드려고 한다. 이때 저장 방식은 두가지가 있는데 하나는 store.js를 통해 저장하는 것과 하나는 더미데이터를 통해 저장하는 방식이다. 두가지의 가장 큰 차이점은 사용 목적에 있는데 아래에서 store에 대해 알아보자. 1. store store파일은 기본적으로 vuex를 사용해서 데이터를 가져오는 것인데 이것은 컴포넌트 간의 데이터를 자유롭게 주고받기 위한 목적으로 사용한다. 따라서 미리 필요한 데이터 셋팅을 할 때 스토어에 저장하여 공통된 데이터를 공유한다는 개념이면 store를 사용하는 것이 맞다. 📌Vuex? vuex는 vue.js의 상태관리 라이브러리로 애플리케이션의..
JavaScript/TypeScript로 개발할 때 사용할 수 있는 테스트 프레임워크는 여러가지가 있다. 본 강의에서는 Vue.js의 공식 테스트 유틸리티를 사용할 것이며, Jest 프레임워크를 사용하기로 했다. 1. 우선 package.json에 @vue/test-utils 이 있는지 확인 없다면 터미널 열고 vue add unit-jest 코드 입력 위의 사항은 완료하면 test/unit 파일 생성되고 그 아래 예제 테스트 파일을 제공한다. 제공된 테스트파일 한번 실행해보자 실행코드 : npm run test:unit (이것이 하려는 일은 이 디렉토리 테스트 및 내부의 모든 테스트 파일을 찾는 것이다.) pass라고 나오져? example.spec.js에서 입력되있는 테스트코드가 성공되었다고 뜨는거 ..
코드 작성을 시작하기 전 TDD방법론을 적용하면 더 클린한 코드를 작성할 수 있다. 그전에 TDD방법론? 그게 뭔지 알아보자 소프트웨어는 특히 형체를 알 수 없기 때문에 잘 와닿지 않겠지만, 후일을 생각하지 않은 상태에서 후일을 생각하지 않은 상태에서 실컷 개발해놓고 나중에 코드 수정을 해야 할 때가 되면 자신이 여러 코드들을 뒤져가면서 막막해하거나, 수정을 하면 다른 부분에서 버그가 발생해 스트레스 받고 있을 가능성이 높다. 혹은 새로운 사람이 함꼐 일하고 싶어도 코드를 이해하기 어려워해 협업 일정의 발목을 잡을 수 있다. 클린코드 가이드는 이러한 상황들을 줄이기 위해 실천할 수 있는 항목들을 나열하고, 각각에 대한 필요성을 전달하기 위해 만들어졌다고 한다. 결론은 제품이 예상하는 대로 동작하는지 확인..
멋사xAbly 익스턴십을 1/5일부터 진행하게 되었다. 일전에 vue.js를 사용해본 경험이 없기 때문에 빠르게 미리 학습하고 이해하기 위해서vue.js 공식문서 강의와 유튜버 개발자의 품격님의 영상을 보면서 알아보려고 한다. ✏️VUE.js 간단 정리 VUE.js 정리 # 1기본 사용 VUE.js 정리 # 2 속성 바인드 VUE.js 정리 # 3 조건부 렌더링 VUE.js 정리 # 4 리스트 렌더링 VUE.js 정리 #5 이벤트 핸들링 VUE.js 정리 #6 스타일 바인딩 VUE.js 정리 #7 Computed Properties VUE.js 정리 #8 Vue Components VUE.js 정리 #9 Vue Communicating Events VUE.js 정리 #10 Vue Form and Two-..
- Total
- Today
- Yesterday
- JWT토큰
- Vue.js
- 디바운싱
- 웹훅
- React18v
- 항해플러스후기
- Http통신
- loadbalancer
- 더미데이터
- event종류
- 항해플러스프론트엔드
- react
- 이벤트리스너
- Repository pattern
- Vuex
- focus와blur
- useState
- props
- 알고리즘
- 로그인 인증
- eventListner
- 이벤트버스
- http
- reactnative
- vue3
- vue.js3
- 빅오표기법
- store.js
- 항해솔직후기
- 레포지토리패턴
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |