[1] AJAX
JSON
- JS의 Object와 유사한 형태
- Object는 타입 Type
- JSON은 문자열 String
- JSON을 Object로 사용하기 위해서는 변환 작업이 필요
변환
- object → JSON
- JSON.stringify(object)
- JSON → Object
- JSON.parse(object)
AJAX
- Asynchronous JavaScript and XML
- 서버와 통신을 하기 위해 XMLHttpRequest 객체 활용
- JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음
- 페이지 전체를 새로고침 하지 않고서도 수행되는 비동기성 (일부분만 업데이트 가능)
동작 방식
- 동기 - 서버에 요청한 데이터가 도착할 때까지 클라이언트는 대기
- 비동기 - 서버에 요청한 데이터가 도착할 때까지 클라이언트는 멈추지 않고 동작
순차적인 비동기 처리하기
- Web API로 들어오는 순서는 중요하지 않고, 어떤 이벤트가 먼저 처리되느냐가 중요
- Async Callbacks
- 백그라운드에서 실행을 시작할 함수를 호출할 때 인자로 지정
- addEventListener의 두 번째 인자
- Promise-Style
- Modern Web APIs에서의 새로운 코드 스타일
- XMLHttpRequest 객체를 사용하는 구조보다 조금 더 현대적인 버전
XMLHttpRequest 객체
- AJAX 요청을 생성하는 JS API
- 서버와 상호작용하기 위해 사용
- 전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있음
- 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트 할 수 있음
- AJAX 프로그래밍에 주로 사용
- XML이라는 이름과는 다르게 모든 종류의 데이터를 받아오는데 사용 가능
- http 이외의 프로토콜도 지원
- 대부분의 브라우저에서 지원
메서드
- open(”HTTP method”, “url”, sync/async)
- 요청의 초기화 작업
- 겟/포스트 지정
- 서버 URL 지정
- 동기/비동기 설정
- send(content)
- 겟 방식은 URL에 필요 정보를 추가하기 때문에 null 적용
- 포스트 방식에서 파라미터 설정 처리
프로퍼티
- onreadystatechange
- 서버에서 응답이 도착했을 때 호출될 콜백함수 지정
- 콜백함수는 상태가 변경될 때마다 호출
- readyState
- 0 UNSENT 객체 생성 후 open 메서드 호출 전
- 1 OPENED open 메서드가 호출되고 send 호출 전
- 2 HEADERS_RECEIVED send 메서드가 호출되었지만 서버 응답 전, 헤더와 상태 확인 가능
- 3 LOADING 다운로드 중, 데이터의 일부가 전송된 상태
- 4 DONE 모든 데이터 전송 완료
- status
- 200, 400, 500
- responseText
- 서버 응답 결과를 문자열로 받기
- responseXML
- 서버 응답 결과를 XML Document로 받기
AJAX 프로그래밍 순서
- 클라이언트 이벤트 발생
- XMLHttpRequest 객체 생성
- XMLHttpRequest 객체 콜백함수 설정
- XMLHttpRequest 객체를 통한 비동기화 요청
- 서버 응답 결과를 생성하여 클라이언트로 전송
- XMLHttpRequest 객체는 서버 결과를 처리할 콜백함수 호출
- 결과를 클라이언트 화면에 반영
Appendix-this
JS 함수에서의 this
- JS 에서는 모든 함수에서 this 키워드를 사용할 수 있음
- JS는 함수 호출 방식에 따라 this 바인딩되는 객체가 달라짐
- 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 동적으로 결정됨
- 전역 vs 함수
전역 문맥
- 전역 객체는 모든 객체의 유일한 최상위 객체를 의미
- console.log(this) //window
함수 문맥
- 함수를 호출하는 방법에 의해 this가 결정됨
- 단순 호출 → 브라우저에서 호출시에는 window 의미
- 객체 안에서의 메서드 호출 → 객체 안에 정의된 메서드를 호출하면 해당 객체가 바인딩됨, 메서드 내부에서 this로 객체에 접근할 수 있음
- 중첩
- 일반 함수 → this가 메서드의 객체를 가리키지 못하고 전역 객체 window를 가리킴. 단순 호출 방식으로 사용되었기 때문에 window를 가리킴
- 화살표 함수
- 일반 함수와 달리 메서드의 객체를 가리킴
- 화살표 함수에서 this는 자기 자신을 포함하는 정적 범위를 가리킴
- 자동으로 한 단계 상위의 스코프의 컨텍스트를 바인딩
- 화살표 함수는 일반 함수와는 달리 본인만의 this를 갖지 않음
[2] WebStorage & ES6
Web Storage
- key :value 로 값 저장
- sessionStorage
- 각각의 출처에 대해 독립적인 저장 공간을 페이지 세선이 유지되는 동안
- 브라우저가 열려있는 동안 제공
- 세선에 한정해, 즉 브라우저 또는 탭이 닫힐 때 까지만 데이터 저장
- 데이터를 절대 서버로 전송하지 않음
- 저장 공간이 쿠키보다 큼
- localStorage
- 브라우저를 닫았다 열어도 데이터가 남아있음
- 유효기간 없이 데이터를 저장하고, JS를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라짐
- 저장 공간이 쿠키, 세션과 비교했을 때 가장 큼
Storage
- 속성 property
- length : 객체에 저장된 데이터 항목의 수를 반환
- 메서드 method
- key(index) : index 번째의 키를 반환
- getItem(key)
- setItem(key, value)
- removeItem(key) key를 저장소에서 제거
- clear() 모든 키를 저장소에서 제거
ES6
- ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어
- JS 언어 등을 표준화하기 위해 만들어짐
화살표 함수
- 함수를 심플하게 정의할 수 있도록 해줌
- 작성순서
- function 키워드 생략 가능
- 함수의 매개변수가 오직 한 개라면 ()도 생략가능 (하지만 일관성을 위해 인자를 담는 괄호를 포함하는 것을 권장함)
- 함수의 내용이 한 줄이라면 {}와 return 도 생략 가능
- 인자가 없다면 () || _으로 표시 가능
- 기본 파라미터
- 함수 파라미터의 기본값을 지정할 수 있음
- 변수와 함수 모두 가능
- 나머지 파라미터
- 여러 개의 파라미터 값을 배열로 전달받을 수 있음
- 매개변수 앞에 세 개의 점ㅁ을 붙여서 사용 가능
- 마지막에 , 붙이면 신텍스 에러 발생
- 기본 파라미터와 함께 사용할 수 없음
- 가변 파라미터는 항상 가장 마지막에 작성해야 함
구조분해할당
- 배열, 객체의 값들을 추출하여 한 번에 여러 변수에 할당할 수 있음
- 나머지, 배열, 객체 모두 할당 가능
- 객체 속성 표기법 개선
- shorthand properties
- concise method
모듈
- 독립성을 가진 재사용 가능한 코드 블록
- 여러 개의 코드 블록을 각각의 파일로 분리한 후 필요한 모듈을 조합하여 사용 가능
- import/export 구문을 이용하여 가져오거나 내보낼 수 있음
전개 연산자
- 나머지 파라미터와 동일한 기호 … 사용
- 배열이나 객체를 연산자와 함께 객체/배열 리터럴에서 사용하면 객체/ 배열 내의 값을 분해된 형태로 전달
- 깊은 복사 수행 시 자주 사용
Promise
- Web API로 들어오는 순서는 중요하지 않고, 어떤 이벤트가 먼저 처리되느냐가 중요 (실행 순서 불명확)
- Async Callbacks
- 백그라운드에서 실행을 시작할 함수를 호출할 때 인자로 지정
- addEventListener의 두 번째 인자
- Promise-Style
- Modern Web APIs에서의 새로운 코드 스타일
- XMLHttpRequest 객체를 사용하는 구조보다 조금 더 현대적인 버전
콜백이란?
- 함수를 매개변수로 전달하며, 나중에 실행되도록 하는 것
- 콜백이 중첩되면, 콜백 헬이 되어 해석하고 유지보수하지 힘든 코드가 될 우려 (스파게티 코드)
Promise Object
- 비동기 작업을 마치 동기 작업처럼 값을 반환해서 사용 형태
- 미래의 완료 또는 실패와 그 결과 값을 나타냄
- 미래의 어떤 상황에 대한 약속
Promise Methods
- .then(callback)
- promise 객체를 리턴하고 두 개의 콜백 함수를 인수로 받음 (이행했을 때, 거부했을때)
- 콜백 함수는 이전 작업의 성공 결과를 인자로 전달 받음
- .catch(callback)
- .then이 하나라도 실패하면(거부되면) 동작 (예외 처리 구문 유사)
- 이전 작업의 실패로 인해 생성된 에러 객체는 캣치 블록 안에서 사용 가능
- .finally(callback)
- promise 객체 반환
- 결과 상관없이 무조건 실행
- 체이닝 가능
Fetch
fatch API
- XMLHttpRequest보다 강력하고 유연한 조작이 가능
- Promise를 지원하므로 콜백 패턴에서 자유로움
- BOM브라우저 오브젝트 모델 객체 중의 하나
- fetch() 메서드 사용
- HTTP 응답을 나타내는 response 객체를 래핑한 promise 객체를 반환
- fetch(resource, options)
- resource : 리소스가 위치한 URL 지정
- options : 옵션을 지정
- method
- headers
- bosy
- fetch 메서드는 promise 객체를 반환
- fetch()가 반환하는 promise 객체
- 성공시 then()을 이용해 처리
- 실패시 catch()를 이용해 처리
- response.text() : 텍스트 형태로 반환
- response.json() : json 파싱하여 반환
Appendix - async & await
async & await
- Promise 더욱 편하게 사용할 수 있는 문법
- then 체이닝을 제거하고 비동기 코드를 동기 코드처럼 표현하는 방법
async
- function 앞에 위치
- 항상 Promise 반환
await
- await 키워드를 만나면 promise가 처리될 때까지 기다림
[3] Introduction of Vue
Front-End Development
- 웹 사이트와 웹 어플리케이션의 사용자 인터페이스UI와 사용자 경험 UX를 만들고 디자인하는 것
- HTML, CSS, JS 등을 활용하여 사용자가 직접 상호작용하는 부분을 개발
Client-side Frameworks
- 클라이언트 측에서 UI와 상호작용을 개발하기 위해 사용되는 JS 기반 프레임워크
- 리액트, 뷰
Client-side Frameworks가 필요한 이유1
“웹에서 하는 일이 많아졌다”
단순히 무언가를 읽는 곳 → 무언가를 하는 곳
- 사용자는 이제 웹에서 문서만을 읽는 것이 아닌 음악을 스트리밍 하고, 영화를 보고, 원거리에 있는 사람들과 텍스트 및 영상 채팅을 통해 즉시 통신하고 있음
- 이처럼 현대적이고 복잡한 대화형 웹 사이트를 웹 어플리케이션이라 부름
- JS 기반의 출현으로 매우 동적인 대화형 어플리케이션을 훨씬 더 쉽게 구축할 수 있게 됨
Client-side Frameworks가 필요한 이유2
“웹에서 하는 일이 많아졌다” → “다루는 데이터가 많아졌다”
- 만약 친구가 이름을 변경했다면/
- 친구 목록, 타임라인, 스토리 등 친구 이름이 출력되는 모든 곳이 함께 변경되어야 함
- 앱의 기본 데이터를 안정적으로 추적하고, 업데이트 하는 도구가 필요
- 어플리케이션의 상태를 변경할 때마다 일치하도록 UI를 업데이트해야 한다는 것
single Page App (SPA)
- 서버로부터 필요한 모든 정적 HTML을 처음에 한 번 가져옴
- 브라우저가 페이지를 로드하면 Vue 프레임 워크는 각 HTML 요소에 적절한 JS 코드를 실행
- 웹 어플리케이션 초기 로딩 후 새로운 페이지 요청 없이 동적으로 화면을 갱신하며 사용자와 상호작용하는 웹어플리케이션
- CRS 방식
Client-side Rendering (CRS)
- 클라이언트에서 화면을 렌더링하는 방식
- 브라우저는 페이지에 필요한 최소한의 HTML 페이지와 JS를 다운로드
- JS를 사용하여 DOM을 업데이트하고 페이지를 렌더링
장점?
- 빠른 속도
- 페이지의 일부를 다시 렌더링할 수 있으므로 동일한 웹 사이트의 다른 페이지로 이동하는 것이 일반적으로 더 빠름
- 서버로 전송되는 데이터의 양을 최소화
- 사용자 경험
- 새로 고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공
- 프론트와 백의 명확한 분리
- 프론트는 UI 렌더링 및 사용자 상호 작용 처리를 담당
- 백은 데이터 및 API 제공을 담당
- 대규모 맵을 더 쉽게 개발하고 유지 관리 가능
단점?
- 초기 구동 속도가 느림
- 전체 페이지를 보기 전에 약간의 지연을 느낄 수 있음
- SEO(검색엔진최적화) 문제
- 페이지를 나중에 그려 나가는 것이기 때문에 검색에 잘 노출되지 않을 수 있음
Vue.js
- 사용자 인터페이스를 구축하기 위한 프레임 워크
뷰를 학습하는 이유
- 쉬운 학습 곡선 및 간편한 문법
- 새로운 개발자도 빠르게 학습 가능
- 반응성 시스템
- 데이터 변경에 따라 자동으로 화면이 업데이트 되는 기능을 제공
- 모듈화 및 유연한 구조
- 어플리케이션을 컴포넌트 조각으로 나눌 수 있음
- 코드의 재사용성을 높이고 유지보수를 용이하게 함
뷰의 2가지 핵심 기능
- 선언적 렌더링
- HTML을 확장하는 템플릿 구문을 사용하여 HTML이 JS 데이터를 기반으로 어떻게 보이는지 설명할 수 있음
- 반응형
- JS 상태 변경사항을 자동으로 추적하고 변경사항이 발생할 때 DOM을 효율적으로 업데이트
Vue 사용하는 방법
- CDN
- NPM
ref 함수 reactive reference
- 반응형 상태를 선언하는 함수
- 인자를 받아 .value 속성이 있는 ref 객체로 래핑하여 반환
- 선언된 변수의 값 변경 → 해당 값을 사용하는 템플릿에서 자동으로 업데이트
- 인자는 어떠한 타입도 가능
- 템플릿의 참조에 접근하려면 setup 함수에서 선언 및 반환 필요
- 템플릿에서 접근할 때는 .value 작성 필요 없음
Appendix
주의사항
- 템플릿에서의 unwrap은 ref가 최상위 속상인 경우에만 적용가능
- object는 최상위 속성이지만 object.id는 그렇지 않음
- 표현식을 평가할 때 object.id가 unwrap되지않고, ref 객체로 남아있기 때문
- 이를 해결하기 위해서는 id를 최상위 속성으로 분해해야 함
왜 ref 여야 하는가?
- 뷰는 템플릿에서 ref를 사용하고 나중에 ref의 값을 변경하면 자동으로 변경사항을 감지하고 그에 따른 dom을 업데이트 함 (의존성 추적 기반의 반응형 시스템)
- 뷰는 렌더링 중에 사용된 모든 ref를 추적하며, 나중에 ref가 변경되면 이를 추적하는 구성요소에 대하여 다시 렌더링
- JS에서는 일반 변수의 접근 또는 변형을 감지할 방법이 없기때문
SEO (Search Engine Optimization)
- 검색 엔진 등에 내 서비스나 제품 등이 효율적으로 검색 엔진에 노출되도록 개선하는 과정을 일컫는 작업
- 정보의 대상은 주로 HTML 에 작성된 내용
- SPA 서비스도 검색 대상으로 넓히기 위해 JS 를 지원하는 방식으로 발전하는 중
CSR & SSR
- 흑과 백이 아님
- 내 서비스에 적합한 렌더링 방식을 적절하게 활용할 수 있어야 함
[4] Vue basic Syntax1
Template Syntax
Text Interpolation
- 데이터 바인딩의 가장 기본적인 형태
- 콧수염 구문 사용
- msg 속성이 변경될 때마다 업데이트 됨
RAW HTML
- v-html 사용
Attribute Bindings
- 콧수염 구문은 HTML 속성 내에서 사용할 수 없기 때문에 v-bind 사용
- HTML의 id 속성 값을 뷰의 dynamicId 속성과 동기화 되도록 함
- 바인딩 값이 null이나 undefind인 경우 렌더링 요소가 제거됨
JS Expressions
- 모든 바인딩 내에서 JS 표현식의 모든 기능을 지원
- 뷰 템플릿 내에서 JS 표현식을 사용할 수 있는 위치
- 콧수염 구문 내부
- 모든 directive의 속성값
- 각 바인딩에는 하나의 단일 표현식만 포함될 수 있음
- 표현식은 값으로 평가할 수 있는 코드 조각 (return 뒤에 사용할 수 있는 코드)
Directive
- v- 접두사가 있는 특수 속성
Dynamically data binding
v-bind
- 하나 이상의 속성 또는 컴포넌트 데이터를 표현식에 동적으로 바인딩
Event Handling
- DOM 요소에 이벤트 리스너를 연결 및 수신
Inline Handlers
- 주로 간단한 상황에 사용
From Input Bindings
- Inline Handler 사용하지 못할 때
Appendix
- IME
- 사용자가 입력 장치에서 기본적으로 사용할 수 없는 문자를 입력할 수 있도록 하는 운영체제 구성 프로그램
- 일반적으로 키보드 키보다 자모가 더 많은 언어에서 아용해야 함
[1] AJAX
JSON
- JS의 Object와 유사한 형태
- Object는 타입 Type
- JSON은 문자열 String
- JSON을 Object로 사용하기 위해서는 변환 작업이 필요
변환
- object → JSON
- JSON.stringify(object)
- JSON → Object
- JSON.parse(object)
AJAX
- Asynchronous JavaScript and XML
- 서버와 통신을 하기 위해 XMLHttpRequest 객체 활용
- JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음
- 페이지 전체를 새로고침 하지 않고서도 수행되는 비동기성 (일부분만 업데이트 가능)
동작 방식
- 동기 - 서버에 요청한 데이터가 도착할 때까지 클라이언트는 대기
- 비동기 - 서버에 요청한 데이터가 도착할 때까지 클라이언트는 멈추지 않고 동작
순차적인 비동기 처리하기
- Web API로 들어오는 순서는 중요하지 않고, 어떤 이벤트가 먼저 처리되느냐가 중요
- Async Callbacks
- 백그라운드에서 실행을 시작할 함수를 호출할 때 인자로 지정
- addEventListener의 두 번째 인자
- Promise-Style
- Modern Web APIs에서의 새로운 코드 스타일
- XMLHttpRequest 객체를 사용하는 구조보다 조금 더 현대적인 버전
XMLHttpRequest 객체
- AJAX 요청을 생성하는 JS API
- 서버와 상호작용하기 위해 사용
- 전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있음
- 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트 할 수 있음
- AJAX 프로그래밍에 주로 사용
- XML이라는 이름과는 다르게 모든 종류의 데이터를 받아오는데 사용 가능
- http 이외의 프로토콜도 지원
- 대부분의 브라우저에서 지원
메서드
- open(”HTTP method”, “url”, sync/async)
- 요청의 초기화 작업
- 겟/포스트 지정
- 서버 URL 지정
- 동기/비동기 설정
- send(content)
- 겟 방식은 URL에 필요 정보를 추가하기 때문에 null 적용
- 포스트 방식에서 파라미터 설정 처리
프로퍼티
- onreadystatechange
- 서버에서 응답이 도착했을 때 호출될 콜백함수 지정
- 콜백함수는 상태가 변경될 때마다 호출
- readyState
- 0 UNSENT 객체 생성 후 open 메서드 호출 전
- 1 OPENED open 메서드가 호출되고 send 호출 전
- 2 HEADERS_RECEIVED send 메서드가 호출되었지만 서버 응답 전, 헤더와 상태 확인 가능
- 3 LOADING 다운로드 중, 데이터의 일부가 전송된 상태
- 4 DONE 모든 데이터 전송 완료
- status
- 200, 400, 500
- responseText
- 서버 응답 결과를 문자열로 받기
- responseXML
- 서버 응답 결과를 XML Document로 받기
AJAX 프로그래밍 순서
- 클라이언트 이벤트 발생
- XMLHttpRequest 객체 생성
- XMLHttpRequest 객체 콜백함수 설정
- XMLHttpRequest 객체를 통한 비동기화 요청
- 서버 응답 결과를 생성하여 클라이언트로 전송
- XMLHttpRequest 객체는 서버 결과를 처리할 콜백함수 호출
- 결과를 클라이언트 화면에 반영
Appendix-this
JS 함수에서의 this
- JS 에서는 모든 함수에서 this 키워드를 사용할 수 있음
- JS는 함수 호출 방식에 따라 this 바인딩되는 객체가 달라짐
- 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 동적으로 결정됨
- 전역 vs 함수
전역 문맥
- 전역 객체는 모든 객체의 유일한 최상위 객체를 의미
- console.log(this) //window
함수 문맥
- 함수를 호출하는 방법에 의해 this가 결정됨
- 단순 호출 → 브라우저에서 호출시에는 window 의미
- 객체 안에서의 메서드 호출 → 객체 안에 정의된 메서드를 호출하면 해당 객체가 바인딩됨, 메서드 내부에서 this로 객체에 접근할 수 있음
- 중첩
- 일반 함수 → this가 메서드의 객체를 가리키지 못하고 전역 객체 window를 가리킴. 단순 호출 방식으로 사용되었기 때문에 window를 가리킴
- 화살표 함수
- 일반 함수와 달리 메서드의 객체를 가리킴
- 화살표 함수에서 this는 자기 자신을 포함하는 정적 범위를 가리킴
- 자동으로 한 단계 상위의 스코프의 컨텍스트를 바인딩
- 화살표 함수는 일반 함수와는 달리 본인만의 this를 갖지 않음
[2] WebStorage & ES6
Web Storage
- key :value 로 값 저장
- sessionStorage
- 각각의 출처에 대해 독립적인 저장 공간을 페이지 세선이 유지되는 동안
- 브라우저가 열려있는 동안 제공
- 세선에 한정해, 즉 브라우저 또는 탭이 닫힐 때 까지만 데이터 저장
- 데이터를 절대 서버로 전송하지 않음
- 저장 공간이 쿠키보다 큼
- localStorage
- 브라우저를 닫았다 열어도 데이터가 남아있음
- 유효기간 없이 데이터를 저장하고, JS를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라짐
- 저장 공간이 쿠키, 세션과 비교했을 때 가장 큼
Storage
- 속성 property
- length : 객체에 저장된 데이터 항목의 수를 반환
- 메서드 method
- key(index) : index 번째의 키를 반환
- getItem(key)
- setItem(key, value)
- removeItem(key) key를 저장소에서 제거
- clear() 모든 키를 저장소에서 제거
ES6
- ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어
- JS 언어 등을 표준화하기 위해 만들어짐
화살표 함수
- 함수를 심플하게 정의할 수 있도록 해줌
- 작성순서
- function 키워드 생략 가능
- 함수의 매개변수가 오직 한 개라면 ()도 생략가능 (하지만 일관성을 위해 인자를 담는 괄호를 포함하는 것을 권장함)
- 함수의 내용이 한 줄이라면 {}와 return 도 생략 가능
- 인자가 없다면 () || _으로 표시 가능
- 기본 파라미터
- 함수 파라미터의 기본값을 지정할 수 있음
- 변수와 함수 모두 가능
- 나머지 파라미터
- 여러 개의 파라미터 값을 배열로 전달받을 수 있음
- 매개변수 앞에 세 개의 점ㅁ을 붙여서 사용 가능
- 마지막에 , 붙이면 신텍스 에러 발생
- 기본 파라미터와 함께 사용할 수 없음
- 가변 파라미터는 항상 가장 마지막에 작성해야 함
구조분해할당
- 배열, 객체의 값들을 추출하여 한 번에 여러 변수에 할당할 수 있음
- 나머지, 배열, 객체 모두 할당 가능
- 객체 속성 표기법 개선
- shorthand properties
- concise method
모듈
- 독립성을 가진 재사용 가능한 코드 블록
- 여러 개의 코드 블록을 각각의 파일로 분리한 후 필요한 모듈을 조합하여 사용 가능
- import/export 구문을 이용하여 가져오거나 내보낼 수 있음
전개 연산자
- 나머지 파라미터와 동일한 기호 … 사용
- 배열이나 객체를 연산자와 함께 객체/배열 리터럴에서 사용하면 객체/ 배열 내의 값을 분해된 형태로 전달
- 깊은 복사 수행 시 자주 사용
Promise
- Web API로 들어오는 순서는 중요하지 않고, 어떤 이벤트가 먼저 처리되느냐가 중요 (실행 순서 불명확)
- Async Callbacks
- 백그라운드에서 실행을 시작할 함수를 호출할 때 인자로 지정
- addEventListener의 두 번째 인자
- Promise-Style
- Modern Web APIs에서의 새로운 코드 스타일
- XMLHttpRequest 객체를 사용하는 구조보다 조금 더 현대적인 버전
콜백이란?
- 함수를 매개변수로 전달하며, 나중에 실행되도록 하는 것
- 콜백이 중첩되면, 콜백 헬이 되어 해석하고 유지보수하지 힘든 코드가 될 우려 (스파게티 코드)
Promise Object
- 비동기 작업을 마치 동기 작업처럼 값을 반환해서 사용 형태
- 미래의 완료 또는 실패와 그 결과 값을 나타냄
- 미래의 어떤 상황에 대한 약속
Promise Methods
- .then(callback)
- promise 객체를 리턴하고 두 개의 콜백 함수를 인수로 받음 (이행했을 때, 거부했을때)
- 콜백 함수는 이전 작업의 성공 결과를 인자로 전달 받음
- .catch(callback)
- .then이 하나라도 실패하면(거부되면) 동작 (예외 처리 구문 유사)
- 이전 작업의 실패로 인해 생성된 에러 객체는 캣치 블록 안에서 사용 가능
- .finally(callback)
- promise 객체 반환
- 결과 상관없이 무조건 실행
- 체이닝 가능
Fetch
fatch API
- XMLHttpRequest보다 강력하고 유연한 조작이 가능
- Promise를 지원하므로 콜백 패턴에서 자유로움
- BOM브라우저 오브젝트 모델 객체 중의 하나
- fetch() 메서드 사용
- HTTP 응답을 나타내는 response 객체를 래핑한 promise 객체를 반환
- fetch(resource, options)
- resource : 리소스가 위치한 URL 지정
- options : 옵션을 지정
- method
- headers
- bosy
- fetch 메서드는 promise 객체를 반환
- fetch()가 반환하는 promise 객체
- 성공시 then()을 이용해 처리
- 실패시 catch()를 이용해 처리
- response.text() : 텍스트 형태로 반환
- response.json() : json 파싱하여 반환
Appendix - async & await
async & await
- Promise 더욱 편하게 사용할 수 있는 문법
- then 체이닝을 제거하고 비동기 코드를 동기 코드처럼 표현하는 방법
async
- function 앞에 위치
- 항상 Promise 반환
await
- await 키워드를 만나면 promise가 처리될 때까지 기다림
[3] Introduction of Vue
Front-End Development
- 웹 사이트와 웹 어플리케이션의 사용자 인터페이스UI와 사용자 경험 UX를 만들고 디자인하는 것
- HTML, CSS, JS 등을 활용하여 사용자가 직접 상호작용하는 부분을 개발
Client-side Frameworks
- 클라이언트 측에서 UI와 상호작용을 개발하기 위해 사용되는 JS 기반 프레임워크
- 리액트, 뷰
Client-side Frameworks가 필요한 이유1
“웹에서 하는 일이 많아졌다”
단순히 무언가를 읽는 곳 → 무언가를 하는 곳
- 사용자는 이제 웹에서 문서만을 읽는 것이 아닌 음악을 스트리밍 하고, 영화를 보고, 원거리에 있는 사람들과 텍스트 및 영상 채팅을 통해 즉시 통신하고 있음
- 이처럼 현대적이고 복잡한 대화형 웹 사이트를 웹 어플리케이션이라 부름
- JS 기반의 출현으로 매우 동적인 대화형 어플리케이션을 훨씬 더 쉽게 구축할 수 있게 됨
Client-side Frameworks가 필요한 이유2
“웹에서 하는 일이 많아졌다” → “다루는 데이터가 많아졌다”
- 만약 친구가 이름을 변경했다면/
- 친구 목록, 타임라인, 스토리 등 친구 이름이 출력되는 모든 곳이 함께 변경되어야 함
- 앱의 기본 데이터를 안정적으로 추적하고, 업데이트 하는 도구가 필요
- 어플리케이션의 상태를 변경할 때마다 일치하도록 UI를 업데이트해야 한다는 것
single Page App (SPA)
- 서버로부터 필요한 모든 정적 HTML을 처음에 한 번 가져옴
- 브라우저가 페이지를 로드하면 Vue 프레임 워크는 각 HTML 요소에 적절한 JS 코드를 실행
- 웹 어플리케이션 초기 로딩 후 새로운 페이지 요청 없이 동적으로 화면을 갱신하며 사용자와 상호작용하는 웹어플리케이션
- CRS 방식
Client-side Rendering (CRS)
- 클라이언트에서 화면을 렌더링하는 방식
- 브라우저는 페이지에 필요한 최소한의 HTML 페이지와 JS를 다운로드
- JS를 사용하여 DOM을 업데이트하고 페이지를 렌더링
장점?
- 빠른 속도
- 페이지의 일부를 다시 렌더링할 수 있으므로 동일한 웹 사이트의 다른 페이지로 이동하는 것이 일반적으로 더 빠름
- 서버로 전송되는 데이터의 양을 최소화
- 사용자 경험
- 새로 고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공
- 프론트와 백의 명확한 분리
- 프론트는 UI 렌더링 및 사용자 상호 작용 처리를 담당
- 백은 데이터 및 API 제공을 담당
- 대규모 맵을 더 쉽게 개발하고 유지 관리 가능
단점?
- 초기 구동 속도가 느림
- 전체 페이지를 보기 전에 약간의 지연을 느낄 수 있음
- SEO(검색엔진최적화) 문제
- 페이지를 나중에 그려 나가는 것이기 때문에 검색에 잘 노출되지 않을 수 있음
Vue.js
- 사용자 인터페이스를 구축하기 위한 프레임 워크
뷰를 학습하는 이유
- 쉬운 학습 곡선 및 간편한 문법
- 새로운 개발자도 빠르게 학습 가능
- 반응성 시스템
- 데이터 변경에 따라 자동으로 화면이 업데이트 되는 기능을 제공
- 모듈화 및 유연한 구조
- 어플리케이션을 컴포넌트 조각으로 나눌 수 있음
- 코드의 재사용성을 높이고 유지보수를 용이하게 함
뷰의 2가지 핵심 기능
- 선언적 렌더링
- HTML을 확장하는 템플릿 구문을 사용하여 HTML이 JS 데이터를 기반으로 어떻게 보이는지 설명할 수 있음
- 반응형
- JS 상태 변경사항을 자동으로 추적하고 변경사항이 발생할 때 DOM을 효율적으로 업데이트
Vue 사용하는 방법
- CDN
- NPM
ref 함수 reactive reference
- 반응형 상태를 선언하는 함수
- 인자를 받아 .value 속성이 있는 ref 객체로 래핑하여 반환
- 선언된 변수의 값 변경 → 해당 값을 사용하는 템플릿에서 자동으로 업데이트
- 인자는 어떠한 타입도 가능
- 템플릿의 참조에 접근하려면 setup 함수에서 선언 및 반환 필요
- 템플릿에서 접근할 때는 .value 작성 필요 없음
Appendix
주의사항
- 템플릿에서의 unwrap은 ref가 최상위 속상인 경우에만 적용가능
- object는 최상위 속성이지만 object.id는 그렇지 않음
- 표현식을 평가할 때 object.id가 unwrap되지않고, ref 객체로 남아있기 때문
- 이를 해결하기 위해서는 id를 최상위 속성으로 분해해야 함
왜 ref 여야 하는가?
- 뷰는 템플릿에서 ref를 사용하고 나중에 ref의 값을 변경하면 자동으로 변경사항을 감지하고 그에 따른 dom을 업데이트 함 (의존성 추적 기반의 반응형 시스템)
- 뷰는 렌더링 중에 사용된 모든 ref를 추적하며, 나중에 ref가 변경되면 이를 추적하는 구성요소에 대하여 다시 렌더링
- JS에서는 일반 변수의 접근 또는 변형을 감지할 방법이 없기때문
SEO (Search Engine Optimization)
- 검색 엔진 등에 내 서비스나 제품 등이 효율적으로 검색 엔진에 노출되도록 개선하는 과정을 일컫는 작업
- 정보의 대상은 주로 HTML 에 작성된 내용
- SPA 서비스도 검색 대상으로 넓히기 위해 JS 를 지원하는 방식으로 발전하는 중
CSR & SSR
- 흑과 백이 아님
- 내 서비스에 적합한 렌더링 방식을 적절하게 활용할 수 있어야 함
[4] Vue basic Syntax1
Template Syntax
Text Interpolation
- 데이터 바인딩의 가장 기본적인 형태
- 콧수염 구문 사용
- msg 속성이 변경될 때마다 업데이트 됨
RAW HTML
- v-html 사용
Attribute Bindings
- 콧수염 구문은 HTML 속성 내에서 사용할 수 없기 때문에 v-bind 사용
- HTML의 id 속성 값을 뷰의 dynamicId 속성과 동기화 되도록 함
- 바인딩 값이 null이나 undefind인 경우 렌더링 요소가 제거됨
JS Expressions
- 모든 바인딩 내에서 JS 표현식의 모든 기능을 지원
- 뷰 템플릿 내에서 JS 표현식을 사용할 수 있는 위치
- 콧수염 구문 내부
- 모든 directive의 속성값
- 각 바인딩에는 하나의 단일 표현식만 포함될 수 있음
- 표현식은 값으로 평가할 수 있는 코드 조각 (return 뒤에 사용할 수 있는 코드)
Directive
- v- 접두사가 있는 특수 속성
Dynamically data binding
v-bind
- 하나 이상의 속성 또는 컴포넌트 데이터를 표현식에 동적으로 바인딩
Event Handling
- DOM 요소에 이벤트 리스너를 연결 및 수신
Inline Handlers
- 주로 간단한 상황에 사용
From Input Bindings
- Inline Handler 사용하지 못할 때
Appendix
- IME
- 사용자가 입력 장치에서 기본적으로 사용할 수 없는 문자를 입력할 수 있도록 하는 운영체제 구성 프로그램
- 일반적으로 키보드 키보다 자모가 더 많은 언어에서 아용해야 함
'개발일지' 카테고리의 다른 글
| Api 명세서 작성하기 (0) | 2024.11.13 |
|---|---|
| 흐름도 플로우 차트 draw.io (1) | 2024.11.12 |
| [DB] ERD Cloud (3) | 2024.11.11 |
| [Vue.js] 환경설정 (1) | 2024.11.07 |
| [STS4] macOS JAVAEE 설치 및 tomcat server 환경 설정 (1) | 2024.10.13 |
