개인사

개요우선 서버와 클라이언트를 간단하게 분류하자면 다음과 같다. 서버사용자 눈에 보이지 않는 곳에서 작동하는 부분클라이언트에게 정보나 서비스를 제공하는 시스템클라이언트의 요청을 받으면, 적절한 처리 후 클라이언트에게 응답클라이언트사용자 눈에 보이고 상호작용하는 부분서버를 통해 접속할 수 있는 애플리케이션이나 서비스서버에게 요청 하면, 서버로부터 응답 을 받는다Vue.jsJavaScript 프론트엔트 프레임워크, 표준 HTML, CSS, JavaScript를 사용한다.컴포넌트 단위로 나워서 개발이 가능 하다. 장점HTML에서 변수, 조건문, 반복문 사용이 가능하다, HTML + JavaScript만으로 개발 할 때에 비해 훨씬 쉽다.화면에 변경사항이 생기면 새로고침 없이 즉각 변경되어 앱처럼 부드러운 웹 개..

개요인터페이스사용자가 쉽게 동작 및 사용하는데 도움을 주는 시스템사람이 무언갈 제어할 수 있도록 해주는 중간 다리 역할을 “인터페이스” 역할 이라고 한다. API (Application Programming Interface)인터페이스를 소스코드 형태로 구현한 것을 의미 REST API (Representational State Transfer)소프트웨어 개발 아키텍처의 한 형식, 자원을 이름으로 구분하고 자원의 상태를 주고 받는 모든 것일반적으로 HTTP를 통해 CRUD를 실행하는 API를 REST API 라고 한다. GET데이터를 읽거나 검색을 할 때 주로 사용, URL에 데이터를 붙여서 보낸다.POST새로운 리소스를 생성할 때 사용, URL이 아닌 BODY 부분에 데이터를 넣어서 보낸다.PUT전체 ..

개요Runtime 이란?실행에 필요한 것들은 모아둔 환경을 “Runtime 환경”이라고 하며, 줄여서 Runtime이라고 한다.Runtime은 하나의 Run System 이며, “실행기” 이다. 특정 언어는 실행기가 있어야만, App 동작이 가능하다. Node.js는 JavaScript의 Runtime이다. Node.js의 장점Node.js로인해 JavaScript 의 활용성이 증가하여 JavaScript를 Python 처럼 사용할 수 있다. (JavaScript는 웹브라우저 전용 언어가 아니다.)Node.js 라는 Runtime만 설치 해 두면, JavaScript로 만든 App들을 사용 가능 하다. JavaScript로 만든 소스코드 동작 방법1. 웹브라우저에서 JavaScript 코드 수행웹브라우저..

개요async/awaitPromise를 쉽게 사용하기위해 ES8에 도입async는 함수 앞에 위치.await는 async 함수 내부에 위치.promise를 반환한다비동기 코드를 동기적으로 작성한다사용 방법async 선언된 함수를 만든다.try/catch를 통해 예외 처리를 해준다. (선택)try 안에 실제로 호출할 비동기 함수(통신 등)을 넣는다.비동기 함수 앞에 await를 넣어준다.만든 함수를 호출한다. 예제1. async/await를 사용하여 데이터 받아오기코드// 추가 해주기const url = "https://jsonplaceholder.typicode.com/todos/";async function start() { try { const result = await axios...

개요AJAX(Asynchronous JavaScript and XML)서버와 통신하기 위해 XMLHttpRequest 객체 사용 비동기성으로 페이지 새로고침을 하지않고도 수행된다.콜백함수로 구현하며, js에 내장되어 있다. fetch APIXMLHttpRequest와 유사하나 더 발전된 API (es6 도입) 객체를 Promise 형태로 반환 받는다, json의 타입별로 쉽게 적용이 가능하다.js에 내장되어 있으며 결과를 json 파싱해서 전달은 한번 더 해줘야 한다. axios가장 널리 쓰이는 http 통신 라이브러리Vue/React 에서도 권고 라이브러리로 axios가 지정이 되어 있다. Promise 형태 리턴, 외부 라이브러리를 사용하며, 결과가 json으로 파싱되어서 사용하기 편리하다. 외부 라..

개요비동기 처리 : 작업 순서가 보장이 되지 않는 단점이 존재하다, 순서가 필요한 작업들이 있을 수 있다. 이를 보완하기 위해 나온 것이 PromisePromise비동기 작업을 좀 더 편하게 할 수 있도록 ES6에서 도입, 콜백 방식의 콜백지옥을 보완pending 상태 : 대기 상태, resolve나 reject가 실행되기 전의 상태fulfilled 상태 : 이행 상태, resolve 호출 시 의 상태rejected 상태 : 실패 상태, reject 호출 시의 상태promise를 호출하면 일단 pending 상태가 된다.호출 성공 시 fulfilled 상태로 처리 되고, 호출 실패 시 reject 상태로 처리 된다.Promise ChainingPromise.then을 호출하면 자동적으로 Promise가 ..

개요콜백 함수의 의미이벤트 발생시 호출되는 예약 함수일반 함수의 Parameter로 등록되는 함수function run(e) { alert(e.code);}document.addEventListener('click', run); run은 event의 콜백 함수이다. 예제1. 콜백 방식의 순서 보장 하기첫번째 비동기 함수의 뒤에, 두번째 비동기 함수를 넣으면 된다. 코드setTimeout(() => { console.log("첫번째 일"); setTimeout(() => { console.log("두번째 일"); }, 3000);}, 5000); 실행한지 5초 후 첫번째 일이 출력되고 3초 뒤 두번째 일이 출력된다.

개요동기 방식한 업무가 끝나야, 다음 업무를 시작한다.소스 코드의 흐름은 위에서 아래로, 좌에서 우로 진행된다.순서가 보장되며, 위의 코드가 오래 걸리면 아래 코드는 진행되지 않는다. 비동기 방식다른 업무를 기다리지 않고 진행한다, 동시에 진행 되는 것이 아님소스 코드의 흐름이 위에서 아래, 좌에서 우를 보장하지 않는다.순서가 보장되지 않는 대신 오래 걸리는 작업 대신, 다른 작업을 먼저 진행할 수 있다.자바스크립트는 싱글 스레드 기반 비동기 프로그래밍이다.따라서, 멀티 스레드 방식이 아닌 비동기 프로그래밍을 해야 한다. Multi Thread (멀티 쓰레드 방식) 여러 함수들을 동시에 수행할 수 있다.  Asynchronous (비동기 방식)싱글 쓰레드 기반의 한계를 극복하기 위해 나온 프로그래밍 시간..

개요forEach와 map의 차이forEach : 배열의 요소를 하나씩 탐색하며, Callback 함수를 수행 map : 배열의 요소를 하나씩 탐색하며, Callback 함수의 return 값을 모아둔다. Array를 새롭게 만든다. 1. map배열 안의 각 요소를 변환할 때 사용, 이 과정에서 새로운 배열이 만들어짐const datas = [3, 5, 4, 2];const newDatas = datas.map((data) => data + 1); datas 배열 내 값에 1씩 더해진 값을 요소로 갖는 newDatas 배열을 새로 생성한다. 2. filter배열에서 특정 조건을 만족하는 값들만 따로 추출, 이 과정에서 새로운 배열이 만들어짐const datas = [3, 5, 4, 2];const new..

개요자바스크립트 내에서 배열을 순회하는 메서드 들을 알아보자 1. forEachArray.forEach(함수 명)Array의 원수 개수만큼 Callback 함수 호출Callback 함수가 한번 호출될 때 마다 원소 하나씩 Argument로 들어간다. const test = (value) => { console.log(value);}const arr = [3, 5, 4, 2];arr.forEach(test); 아래와 같은 형태로 줄여서 사용할 수도 있다. (forEach문에서 무명 함수를 호출하기)const arr = [3, 5, 4, 2];arr.forEach((value) => { console.log(value);}); 2. someArray.some(함수 명)Array의 원소 개수만큼 C..