📌DOM을 알아야 하는 이유 자바스크립트를 이용해 html에서 데이터를 가져오고 싶다면? 웹페이지에 보여지는 데이터를 변경하고 싶다면? 인터렉티브한 웹어플리케이션을 만들고 싶다면? 단순히 정보를 보여주는 웹페이지가 아니라, 동적인 기능이 있는 웹어플리케이션을 만들고 싶다면, 문서를 조작할 수 있게 해주는 DOM을 알아야 합니다. 📌DOM : Document Object Model 지하철역을 동적으로 추가하는 것과 같이 웹페이지 문서를 조작하기 위해서 필수적으로 알아야 하는 것이 DOM이다. 여기서 document는 html을 뜻하며, 예를들어 파이어폭스,크롬 같은 브라우저들을 공장이라고 치자. 이 때 HTML 문서는 이 공장들에 보내는 주문서라고 할 수 있다. 이 주문서에는 내가 원하는 웹페이지의 요소들..
📌Mocking Modules 실제로 API를 호출하는 대신, API를 호출할 때 가짜값을 리턴해준다. 예를들어 실제로는 많은 값을 리턴하는 API 대신 한 값만 내보내준다. import axios from 'axios'; import Users from './users'; jest.mock('axios'); test('should fetch users', ()=>{ const users = [{name:'Bob'}]; const resp = {data:users}; axios.get.mockResolvedValue(resp); return Users.all().then(data=>expect(data).toEqual(users)); } 참고자료 : https://soniacomp.medium.com/v..
자바스크립트 테스팅 프레임워크로 Jest를 사용할 떄 자엄 중에 하나는 다른 라이브러리 설치 없이 바로 mock기능을 지원한다는 점이다. 📌mocking 이란? mock은 단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을 가짜(mock)으로 대체하는 기법을 말한다. 일반적으로 테스트하려는 코드가 의존하는 부분을 직접 생성하기가 너무 부담스러운 경우 mocking이 많이 사용된다. 예를들어, DB에서 데이터를 삭제하는 코드에 대한 단위테스트를 작성할 때, 실제 데이터베이스를 사용한다면 여러가지 문제점이 발생할 수 있다. 데이테베이스 접속과 같이 Network이나 I/O 작업이 포함된 테스트는 실행 속도가 현저히 떨어질 수 밖에 없다. 프로젝트의 규모가 켜져서 한 번에 실행해야 할 테스트 케이스가 많이..
👉Mutation Mutation은 state를 변경하는 유일한 방법이고 이벤트와 유사하다. 우선 mutation이라는 것을 왜 사용하는 걸까? 이것은 예를들어 state에서 만들어진 함수를 getters에서 사용할 때 계속해서 반복되는 함수가 있다. 이것이 getters에서 여러개의 component에서 사용될 시에 각각의 component에서 따로 지정해주는 방식으로 진행되는데 이러한 귀찮음을 줄여주기위해 사용하는 것이 바로 mutation이라고 볼 수 있다. 즉, 같은 기능을 하는 함수를 mutation에 만들어놓고 그 mutation은 각각 필요한 component에서 실행시켜 state값을 변화시키는 방식으로 진행한다. 이때, 이 실행시키는 과정을 commit이라고 한다. 이렇게 되면 같은 기능..
스웨거는 쉽게말하면 API명세 관리하고 API의 기능을 바로 테스트할 수 있도록 도와주는 도구이다. 그래서 백엔드와 프론트엔드 프로그램 사이에서 정확히 어떠한 방식으로 데이터를 구조 받을 지에 대한 명세를 도와주는 것이다. 이러한 스웨거 기능을 제공하고 있는 사이트가 스웨거 허브라는 곳인데, 여기에서 여러 명의 개발자가 스웨거 허브에 가입하여 하나의 프로젝트에 대한 API를 작성하고, 테스트 해 볼 수 있다. 스웨거 허브(Swagger Hub): SwaggerHub | API Design and Documentation with OpenAPI
📌Vue.js에서 Repository pattern적용방법 간단히 순서 설명후 따라해보자 Repository 폴더 생성 Clients 폴더 만들기 xxxClient.js 클래스/인터페이스 만들기 개별 리포지토리 클래스 만들기 파일 "저장소.js"만들기 모델, 컨트롤러 또는 Vuex내에서 사용하기 👉1. Repository 폴더 생성 해당 src폴더에 repository 폴더 만든다. 👉2. Clients 폴더 생성 새로 만든 'repositories'폴더 안에 'clients'폴더를 만들자. 기본적으로 이 폴더 안에 파일들을 넣을예정이다. 예를들어 HTTP클라이언트,Axios 등등.. 👉3. xxxClient.js 클래스/인터페이스 만들기 여기에는 CRUD 메서드를 포함한 모든 클라이언트 API구성이 포..
- Total
- Today
- Yesterday
- focus와blur
- 로그인 인증
- 빅오표기법
- loadbalancer
- vue3
- reactnative
- 더미데이터
- Repository pattern
- react
- 레포지토리패턴
- http
- Http통신
- props
- vue.js3
- 항해플러스프론트엔드
- 이벤트리스너
- 이벤트버스
- 항해플러스후기
- store.js
- eventListner
- 디바운싱
- 웹훅
- 항해솔직후기
- 알고리즘
- Vuex
- useState
- React18v
- JWT토큰
- event종류
- Vue.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 |