본문 바로가기

FrontEnd4

[Vue] Template Template : vue의 템플릿 문법은 화면을 조작하는 방법을 의미합니다. 템플릿 문법은 데이터 바인딩과 디렉티브로 나뉩니다. Template - 데이터 바인딩 데이터 바인딩 : vue 인스턴스에서 정의한 속성들을 화면에 표시하는 방법입니다. 다음과 같이 {{ }} 형태로 표시하게 됩니다. {{ message }} Template - 디렉티브 디렉티브는 v- 접두사가 있는 특수 속성입니다. vue에서는 view에 데이터를 표현하는 등의 용도로 사용되는 속성입니다. 주요 디렉티브 종류 1. 양방향 데이터 바인딩 : v-model 2. html 속성 바인딩 : v-bind 디렉티브 설명 v-model view와 model 사이의 양방향 바인딩 처리를 위해서 사용됩니다. 특히, 태그 안의 , 등에서 사용됩.. 2022. 11. 11.
AJAX AJAX 웹에서 화면을 갱신하지 않고, 데이터를 서버로부터 가져와 처리하는 방법 AJAX 사용 방식 1. XMLHttpRequest 이용 방식 2. fetch() 이용 방식 3. 외부 라이브러리 이용 방식 - jQuery ajax() 4. 외부 라이브러리 이용 방식 - axios AJAX 요청에 대한 응답 1. 요청에 대한 처리를 한 후 text, xml, json으로 응답한다. 2. client에서는 이 응답 data를 이용하여 화면 전환 없이 화면에서 볼 수 있다. 1. fetch() - fetch() 함수는 첫 번째 인자로 URL, 두번째 인자로 options 객체를 받습니다. - options에 아무것도 넘기지 않으면 요청은 GET 방식으로 진행됩니다. - 실행 결과 Promise 타입의 객체를 .. 2022. 9. 28.
[JavaScript]JSON parse, stringify 함수 JSON : 자바스크립트 객체 문법을 따르는 문자 기반의 데이터 포맷입니다. AJAX를 사용할때 이 JSON을 활용하고는 합니다. 1. JSON.stringify() : 자바스크립트 객체를 JSON 텍스트 문자열로 저장합니다. 객체/배열에서 JSON문자열을 만드는 것입니다.(Object->String 변환) var object1 = { "email": "slsls@naver.com", "pass": "1ss4", } var str = JSON.stringify(object1); console.log(typeof (str));//string 2. JSON.parse() : 문자열을 객체로 변환시켜줍니다. JSON 문자열의 구문을 분석하고, 그 결과에서 js 값이나 객체를 생성하게 됩니다.(String->O.. 2022. 9. 8.
[JavaScript] 호이스팅 호이스팅 - 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. - 특히, var 변수의 경우 호이스팅으로 인해 undefined로 초기화하게 되므로, let과 const로 선언한 변수를 사용할 것을 권장합니다. Javascript는 파싱과 실행 두 단계를 거쳐서 동작하게 됩니다. 1. 파싱 : 프로그램 전역 레벨에서의 파싱 2. 실행 : 실행문을 만나면 실행 변수와 함수명이 같은 경우 아래 코드와 같이 변수가 아직 실행문을 만나기 직전으로 변수값이 undefined로 되어있는 .. 2022. 9. 5.