📌이벤트 핸들러 사용자가 웹 페이지의 HTML과 상호작용할 때 이벤트를 핸들링하도록 프로그래밍 할 수 있다. 이벤트 핸들링하는 방법에는 크게 3가지가 있다. 1.HTML 이벤트 핸들러 2. 전통적인 DOM 이벤트 핸들러 3.이벤트리스너 📌이벤트 리스너(Event Listner) 그러나 1,2번의 방법의 경우 잘 사요되지 않고, 3번의 방법으로 가장 많이 이벤트를 바인딩한다. 따라서 이 글에서는 3번째 방법만 소개를 하겠다. 👉이벤트 리스너(Event Listener) 활용 function onAddStationHandler() { // 이벤트 처리 로직을 구현한다. } // 지하철 역 추가 버튼의 요소를 가져온다. const $stationAddButton = document.querySelector("..
📌Event를 알아야 하는 이유 1. input창에 값을 입력하고,엔터를 쳤을 때 지하철역을 리스트에 추가하고 싶다면? 2.삭제 버튼을 눌렀을 때 지하철 역을 삭제하고 싶다면? 3.인터렉티브한 사용자 경험을 만들고 싶다면? 위와 같은 이벤트를 유연하게 처리하게 위해서 우리는 반드시 이벤트를 알아야 한다. 동적인 웹은 사용자와 상호작용이 잘 되어야 한다. 그리고 그 상호작용은 어떤 이벤트에 의해 발생한다. 그래서 프론트엔드에서 많은 인터렉션은 모두 Event를 처리하는 것과 깊은 관련이 있다. 📌이 문서를 통해 얻어갈 것 📧이벤트 종류를 최소 3가지 이상 말할 수 있다. 📧DOM Element에 이벤트를 바인딩할 수 있다. 📧이벤트의 흐름을 제어할 수 있다 📧이벤트 종류를 최소 3가지 이상 말할 수 있다...
📌DOM을 알아야 하는 이유 자바스크립트를 이용해 html에서 데이터를 가져오고 싶다면? 웹페이지에 보여지는 데이터를 변경하고 싶다면? 인터렉티브한 웹어플리케이션을 만들고 싶다면? 단순히 정보를 보여주는 웹페이지가 아니라, 동적인 기능이 있는 웹어플리케이션을 만들고 싶다면, 문서를 조작할 수 있게 해주는 DOM을 알아야 합니다. 📌DOM : Document Object Model 지하철역을 동적으로 추가하는 것과 같이 웹페이지 문서를 조작하기 위해서 필수적으로 알아야 하는 것이 DOM이다. 여기서 document는 html을 뜻하며, 예를들어 파이어폭스,크롬 같은 브라우저들을 공장이라고 치자. 이 때 HTML 문서는 이 공장들에 보내는 주문서라고 할 수 있다. 이 주문서에는 내가 원하는 웹페이지의 요소들..
👉Mutation Mutation은 state를 변경하는 유일한 방법이고 이벤트와 유사하다. 우선 mutation이라는 것을 왜 사용하는 걸까? 이것은 예를들어 state에서 만들어진 함수를 getters에서 사용할 때 계속해서 반복되는 함수가 있다. 이것이 getters에서 여러개의 component에서 사용될 시에 각각의 component에서 따로 지정해주는 방식으로 진행되는데 이러한 귀찮음을 줄여주기위해 사용하는 것이 바로 mutation이라고 볼 수 있다. 즉, 같은 기능을 하는 함수를 mutation에 만들어놓고 그 mutation은 각각 필요한 component에서 실행시켜 state값을 변화시키는 방식으로 진행한다. 이때, 이 실행시키는 과정을 commit이라고 한다. 이렇게 되면 같은 기능..
📌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구성이 포..
프로젝트를 진행함에 있어 API연동을 해야하는 순간이 왔다.. 바로 배우고 적용시켜보자 (1)편 : Repository pattern이란 뭔지에 대해 간단히 알아보기 (2)편 : Vue.js에서 Repository pattern적용방법 📌Repository Pattern이란? Repository(리포지토리) 패턴은 디자인 패턴 중 하나로, 데이터가 있는 여러 저장소(Local, Remote)를 추상화하여 중앙 집중처리 방식을 구성하고, 데이터를 사용하는 로직을 분리시키기 위한 디자인 패턴이다. ViewModel은 필요한 데이터를 Repository에 요청하고 Repository는 적절한 저장소에서 요청받은 데이터를 가져온다. Repository가 추상화되어 있기 때문에 ViewModel은 언제나 같은 인..
- Total
- Today
- Yesterday
- react
- store.js
- loadbalancer
- 알고리즘
- React18v
- useState
- Vuex
- 레포지토리패턴
- reactnative
- props
- 항해플러스프론트엔드
- JWT토큰
- 웹훅
- Http통신
- vue.js3
- http
- 이벤트버스
- Repository pattern
- 이벤트리스너
- focus와blur
- 로그인 인증
- eventListner
- event종류
- 빅오표기법
- 항해솔직후기
- vue3
- 디바운싱
- 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 |