목록개발/node.js (23)
가상 머신 기존 운영 체제(OS)안에 다른 OS(일반적으로는 리눅스)를 추가로 설치하여 운용하는 것을 가상 머신이라 한다. 가상 머신의 장단점을 나열하자면, 장점 : 무료(리눅스)이며 서버로 쓰기에 가장 안정적이지만, 단점 : 부팅을 두 번해야 할뿐더러 용량을 많이 차지하여 성능 저하가 우려된다. Docker 위와 같은 단점을 보완하기 위해 나온 것이 Docker. (docker 또한 기본적으로 리눅스 os를 채택함) Docker 의 핵심적인 장점을 나열하자면 1. 개발 / 배포환경 통일 : 한 사람이 설치한 내용을 타인에게 파일처럼 효율적으로 공유할 수 있음 2. 프로그램 미리 설치 : 이미지를 저장해놓고 컨테이너로 불러와 사용하기 때문에 굳이 새로 설치할 필요 없음 3. 가벼운 가상컴퓨터 :커널(운영..
async-await async-await를 이해하기 위해선 동기와 비동기 개념을 이해해야 한다. 동기 : 등록이 될 때까지 기다림 / 서버 컴퓨터가 작업이 끝날 때까지 기다리는 통신 비동기 : 요청들이 서로 기다릴 필요 없을 때 사용 / 동시에 여러 일을 할 때 / 서버 컴퓨터가 작업이 끝날 때까지 기다리지 않는 통신 => axios 와 같은 API 관련 기능들은 '비동기'가 기본값 vscode 내에서 비동기 // 비동기 통신 // 비동기로 실행되기 때문에 생기는 Promise const data = axios.get(url - / 중략 / ) // API정보를 받아오기 전에 저장 console.log(data) // 비동기 통신 (async / await) // async : 함수 앞 / await ..
axios axios는 node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리다. 쉽게 말해, 백엔드와 프론트엔드 간 통신을 쉽게하기 위해 사용한다. (백엔드, 프론트엔드 둘다 가능) 이번 포스팅에서는 HTML내에 axios를 설치하고 적용하는 방식에 대해 설명한다. 해당 코딩은 이전에 만든 휴대폰 번호 토큰 전송 기능을 활용한다. axios 설치는 npmjs에 제시된 cdn을 통해 완료했다. 먼저 프론트엔드(가상) 내에 axios 통신이 구현됨을 확인하기 위해 HTML을 만들었다. 이때, '인증하기' 버튼을 누르면, zzz() 라 이름지은 함수가 실행되게 되는데 그 함수의 모습은 이렇다. function zzz(){ // 1. 입력한 휴대폰 번호 가져오기 const myP..
서버 서버는 백엔드 컴퓨터나 DB컴퓨터처럼 특정된 것이 아니라, 클라이언트로 '요청을 받는' 모든 것들을 의미한다. 반대로 클라이언트 또한 브라우저나 사용자로 특정된 것이 아닌, '요청하는' 모든 것들이라 볼 수 있다. 클라이언트와 서버 사이의 관계를 가볍게 요약하자면 다음과 같다. 괄호 안 숫자 == 포트번호 프론트엔드 (3000) 백엔드 (4000) DB (3306) 브라우저 컴퓨터 / 프로그램 HTML / CSS / JS 요청 및 응답 프론트엔드 컴퓨터 / 프로그램 API 요청 및 응답 백엔드 컴퓨터 / 프로그램 DB / 해당데이터 요청 및 응답 포트 이때, 각각의 컴퓨터/프로그램은 프론트엔드(3000), 백엔드(4000), DB(3306) 포트번호를 가지고 있으며, 이 번호는 무조건적으로 정해진 ..
데이터 통신 기초 HTTP(HyperText Transfer Protocol) : 텍스트 / 하이퍼텍스트(HTML) ( 이때 protocol == 데이터가 다니는 '길') 통신이란, 두 컴퓨터 간 데이터 전송을 의미한다. 통신은, 요청(request)과 응답(response)으로 구성되며, 요청 & 응답은 헤더와 바디로 구분된다. 단 '응답'에는 '상태코드'가 부여되게 되는데, 예시로는 아래와 같다. ex) 200(성공 관련), 400(클라이언트, 요청자 에러 관련), 500(서버, 응답자 에러 관련) JSON (javascript object notation, 자바스크립트 객체 표기법) 데이터 요청과 응답은 JSON 형태로 주고 받게 된다. (stringtify & parse) 이와 관련된 내용은 이전..
오늘은 이메일 탬플릿 만드는 방법에 대해 강의를 들었다. 등장한 주요 개념 템플릿 리터럴 숏핸드 프로퍼티 (shorthand-property) 구조분해할당 (= 비구조화할당) export / import 이메일 탬플릿이라 함은, 아래와 같다. 겉으로 보기에는 이미지처럼 보이나, HTML 코드로 구성되어 있다고 한다. 그리고 이 HTML 코드들은 변수에 저장되어 있고, 이때 HTML코드들을 묶기 위해 백틱(템플릿 리터럴)을 사용한다. 템플릿 리터럴은 백틱(``) 과 함께 사용해야 하며, 정적값과 동적값을 함께 표현할 때 사용한다. 이때, 동적값은 ${ } 으로 묶어 표현한다. 템플릿 리터럴의 특징으로는 변수와 함께 쓰기가 가능하며, 텍스트를 여러줄로 만드는 것이 가능하다는 것 기억해두자. 활용 예시는 다음..
JavaScript / Node.js / npm / yarn javascript :브라우저, 문서 등을 다루는 프로그래밍 언어(또는 스크립트 언어)로, 브라우저에서만 동작이 가능하다. node.js : 자바스크립트 실행 프로그램 / 브라우저 없이 실행할 수 있다는 장점을 가진다. (공식 문서에서는 크롬V8 javaScript 엔진으로 빌드된 javascript 런타임(환경)이라고 설명하고 있다.) 쉽게 말해, node.js 는 javaScript를 실행할 수 있는 프로그램이라고 볼 수 있다. **node.js를 이용하여 자바스크립트 언어로 서버를 구축하기도 하나, node.js 자체가 서버라고 볼 순 없음 npm : node package manager의 준말로, Node.js 기반에서 실행될 수 있는 ..