배꼽파지 않도록 잘 개발해요

◆ Interface ◆ Generic Interface Interface란 Interface · 일반적으로 변수, 함수, 클래스에 타입 체크를 위해 사용된다. · 직접 인스턴스를 생성할 수 없고, 모든 메소드가 추상 메소드이다. · 추상 클래스의 추상 메소드와 달리 abstract 키워드는 사용할 수 없다. · ES6은 인터페이스를 지원하지 않지만 TypeScript는 인터페이스를 지원한다. Interface를 사용하는 이유 · 타입의 이름을 짓고 코드 안의 계약을 정의한다. · 프로젝트 외부에서 사용하는 코드의 계약을 정의한다. · 다음과 같은 범주에 대해 계약을 정의할 수 있다. 객체의 스펙 (속성과 속성의 타입) 함수의 파라미터 함수의 스펙 (파라미터, 반환 타입 등) 배열과 객체에 접근하는 방식..

◆ TypeScript 기본 ◆ Class 타입스크립트 개념 타입스크립트 개요 타입스크립트 · Microsoft에서 개발한 오픈 소스 언어 · 자바스크립트에 JavaScript에 정적 타이핑을 추가한 언어로, 자바스크립트의 최상위 집합 · 자바스크립트로 변환해주는 컴파일러가 필요함. 타입스크립트를 사용하는 이유 · 동적 타입을 정적으로 선언할 수 있음. · 타입 유추를 통한 타입 제어가 가능함. · 자바스크립트의 런타임 단계에서 발생하는 타입 에러는 타입스크립트를 이용한다면 컴파일 단계에서 미리 확인하고 고칠 수 있음. · JavaScript에서 찾을 수 없는 추가 코드 기능을 제공함. 자바스크립트 let a; a = 1; a = '1'; console.log(a) // 1 const sum = (a, ..

◆ TypeScript 시작하기 ◆ Enum ◆ Interface ◆ 그 밖의 타입들 ◆ 제네릭 ◆ tsconfig.json TypeScript 시작하기 TypeScript 프로젝트 만들기 Node.js 프로젝트 생성 npm init 타입스크립트 개발모드로 설치 npm install --save-dev typescript 타입스크립트 사용에 필요한 설정 파일 설치 npx tsc --nit · npx : node 모듈을 시행하는 명령어 · tsc : 타입스크립트에서 제공하는 타입스크립트 컴파일러 모듈 (TS를 JS로 바꿔줌) · --init : 초기 파일 생성 package.json 파일에서 스크립트 추가 "scripts": { "build": "tsc" }, main.ts 파일 생성 console.log..

◆ Express 기본 익히기 ◆ ORM으로 하는 데이터베이스 작업 ◆ 배포하기 Express 기본 익히기 Express · Node.js 환경의 서버 프로그램을 만들 때 사용하는 프레임워크 · fast, unopinionated(고집이 세지 않은), minimalist - express는 서버프로그램에 필요한 최소한의 기능만 제공함. - 자유도가 높음 폴더 안에 app.js 파일 만들기 npm init 익스프레스 설치 npm install express 외부 클라이언트가 보낸 리퀘스트의 URL 패스 부분이 /hello라면 여기 있는 함수가 실행됨. const express = require('express'); const app = express(); // 함수가 리턴하는 객체 = app app.get..

◆ 초간단 웹 서버 만들기 ◆ 서드파티 모듈과 npm 제대로 배우기 초간단 웹 서버 만들기 서버와 클라이언트 클라이언트 : 서비스에 대한 요청을 보내는 프로그램 또는 컴퓨터 서버 : 요청을 받은 서버는 그에 알맞은 응답을 해줌 // http 모듈을 로드했을 때 리턴되는 객체를 같은 이름인 http라는 상수로 받음. const http = require('http'); let server = http.createServer(); // 서버 객체가 외부 요청을 받을 수 있도록 해줌 // 서버 객체가 포트번호 3000번을 갖고 외부 요청을 기다리도록 함. server.listen(3000); 서버에서 외부의 요청을 기다리며 실행되고 있는 프로그램에는 포트번호라는 숫자값이 할당됨. 이 포트번호는 프로그램마다 다..

◆ Node.js 시작하기 ◆ Node.js 기본 개념 Node.js 시작하기 Node.js는 무엇인가 서버(server) : 웹 브라우저나 모바일 앱으로 어떤 요청을 보냈을 때 응답을 해주는 컴퓨터 Ryan Dahl : 2009년 자바스크립트 컨퍼런스 프레임워크들의 단점 설명하면서 Node.js 제작했음을 발표함. 장점 : 하나의 웹 서비스를 만들 수 있음. ex. PayPal, Uber, Linkedin, NETFLIX Node.js는 프레임워크가 아니고, 자바스크립트라는 언어의 '실행 환경'임. Node.js로 자바스크립트 실행해보기 해당 파일(test.js) 실행 node test.js 모듈의 확장자인 .js를 꼭 붙이지 않아도 됨. node test node가 test.js파일의 자바스크립트 코..

◆ Node.js 이해 ◆ Node.js 특징 ◆ Node.js 시작하기 ◆ ES6 ◆ 비동기 코딩 ◆ 이벤트 루프 Node.js 이해 Node.js 등장 배경 단방향 통신 위주였던 WEB 1.0에서 사용자와 상호작용하는 WEB 2.0으로 발전하게 되면서 웹페이지의 자바스크립트 동작이 복잡해졌고, 이를 실행하기 위해 고성능의 JavaScript 실행기가 필요하게 됨. 구글에서는 크롬웹브라우저를 위한 v8이라는 자바스크립트 엔진을 만들게 됨. Node.js의 탄생 V8엔진으로 자바스크립트 실행 속도가 굉장히 빨라졌음. Node.js는 자바스크립트를 어느 환경에서나 실행할 수 있게 해주는 실행기 Node.js vs Browser Browser의 JavaScript node.js 브라우저에서 실행 크로스 플랫..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 • 리액트 개발을 위한 환경 : Node.js, VScode, Chrome • Node.js 설치 : LTS 버전이 더 안전함 • React 개발자도구 https://react.dev/ React React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, an..

◆ async/await ◆ HTTP, REST API ◆ Fetch API async/await · Promise를 활용한 비동기 코드를 간결하게 작성하는 문법(syntax sugar) · async/await 문법으로 비동기 코드를 동기 코드처럼 간결하게 작성할 수 있다. · async 함수와 await 키워드를 이용한다. async : 함수를 비동기 함수로 만들어 준다. async로 선언된 함수는 반드시 Promise를 리턴한다. await : 반드시 async 함수 안에서만 사용해야 한다. 해당 줄에서 비동기 작업이 완료될 때까지 코드 실행을 일시 중단한다. · await는 프로미스를 리턴하지 않는 함수라도 사용할 수 있음. · 단, 이 경우 리턴한 데이터는 Promise.resolve()로 감싸..

◆ 자바스크립트 제어 흐름 ◆ 이벤트 루프 ◆ Promise 자바스크립트 제어 흐름 자바스크립트 비동기 이해하기 · 자바스크립트는 다른 멀티스레드 프로그래밍 언어(JAVA, C++)와 다른 방식으로 비동기 동작을 처리한다. · 처음 자바스크립트를 접하는 경우, 동작에 대한 정확한 이해가 없으면 코드의 흐름을 따라잡기 어렵다. · 자바스크립트 내부의 비동기 동작을 이해하기 위해서는 이벤트 루프 등의 개념을 알아야만 한다. 자바스크립트 엔진 · 자바스크립트 엔진은 하나의 메인 스레드로 구성된다. · 메인 스레드는 코드를 읽어 한 줄씩 실행한다. · 브라우저 환경에서는 유저 이벤트를 처리하고 화면을 그린다. 자바스크립트(비동기)와 자바(멀티스레드) 자바스크립트 비동기 API가 호출되면(ex. setTimeou..