본문 바로가기

전체 글

(204)
Restfull 웹 API 디자인(1) 잘 디자인 된 웹 API 라면 1. 플랫폼 독립성 : 내부에서 어떤 방식으로 구현되는지와 관계없이 API를 호출할 수 있어야 한다. 표준 프로토콜을 사용 2. 서비스 진화 : API가 수정되어도(진화) 기존의 어플리케이션은 수정 없이 계속 작동할 수 있어야 한다. 기본 디자인 원칙 1. 리소스 중심 디자인, 클라이언트에서 접근할 수 있는 모든 종류의 개체, 데이터, 서비스가 리소스에 포함된다. https://tacit.com/orders 2. 리소스마다 해당 리소스를 고유하게 식별하는 URI인 식별자가 있다. https://tecit.com/orders/5 3. HTTP 요청은 독립적, 상태를 저장하지 않는다. 4. 표준 HTTP 동사 수행 : GET, POST, PUT, PATCH 5. 리소스 URI는..
[Vue] 하위 input 컴포넌트에 상위 data 연결 (emit & v-model) [TODO] - page/test.vue test 페이지 안에서 form 데이터들(name, phone, email 등등) 을 변수로 관리하고, 그 데이터들을 모아서 백엔드로 전달 input 태그 가 특정 컴포넌트로 쌓여서 template에 바로 쓰이지 않고, 하위 컴포넌트 안에 들어가야함 [SOLUTION#1] - emit으로 하위 컴포넌트 데이터(e.target.value) 를 상위 컴포넌트(page/test.vue) 로 전달 # 상위 컴포넌트 (pages/test.vue) # 하위 컴포넌트 (components/SearchInput.vue) search [SOLUTION#2] - v-model 사용 # 상위 컴포넌트 (pages/test.vue) # 하위 컴포넌트 (components/SearchI..
[Vue] textarea 조건부 랜더링시 focus 이동 안되는 케이스 해결 -> $ref.focus() & nextTick() 메소드 [TODO] 입력 Form 에서 사용자가 Yes / No 중 Yes 라고 답하면 상세 내역을 적기 위한 textarea 를 보여주어야 한다 [WHAT I DONE] - "YES" 버튼을 클릭시 setAnswerY 메소드를 실행하여 this.answer_y = true 로 세팅 - this.answer_y 값이 true 이면 - textarea 요소가 보이고 focus 도 자동으로 이동 [첫번째 시도] setAnswerY() { this.answer_n = false this.answer_y = true // 마우스 커서 이동 this.setFocus('inputText') }, setFocus(item) { this.$refs[item].focus() }, ✔️ 결과 answer_y=true 로 바꾸는..