First Interface interface 가장 기초적인 선언과 사용 방식 interface Car { name: string; } function printCar (carObj: Car) { console.log(carObj.name); } let myObj = {size:10, label: 'Size 10 Object'}; printLabel(myObj); Optional Properties 타입 선언을 할때, 뒤에 ?를 사용하여 타입을 선언해준다. any타입과 비슷하게 사용할 수 있다. 즉, 타입을 선언하지 않아도 사용할 수 있다. interface Car { name?: string; price?: number; } function buyCar (userCar: Car): {na..

서버 생성 const http = require('http'); const server = http.createServer((request, response) => { // 작업 진행 }) const server = http.createServer() ; server.on('request', (request, response) => { 작업 실행 }) }) 메서드, URL, 헤더 const {method, url} = request; const { headers } = request; const userAgent = headers['user-agent']; 여기서 method는 항상 일반적인 HTTP 메서드/동사가 될 것입니다. url은 전체 URL에서 서버, 프로토콜, 포트를 제외한 것으로, 세 번째 ..

네트워크 공부 목표 클라이언트 - 서버 개념 이해 아키텍처 HTTP 서버통신 이해 API 개념 이해 브라우저 작동 원리 보이지 않는 통신 URL URI 차이 IP/PORT 개념 DNS/IP 관계 보이는 통신 AJSX 개념 SSR CSR 차이 CORS 개념 클라이언트-서버 아키텍처 클라이언트가 보는 어떤 UI는 인터넷이 필요하며, 그로인해 서버와 통신을 할 수 있다. 만약 서버가 없다면..? 1.0ver의 서비스를 이용하고 있었다면, 다음 신상정보가 들어오면 2.0ver으로 업데이트해야 사용자가 신상정보를 볼 수 있다. 또한, 결제 시스템을 위해서 은행서버와 연결을 위해 서버가 필요하며, 인터넷이 필요하다. 리소스? 커다란 시스템의 일부를 이루는 하드웨어, 소프트웨어, 데이터의 한 구성요소를 말한다. 예를..

HTTP 공부 목표 HTTP messages 구조 HTTP 동작 방식 HTTP request & responses HTTP 응답 메세지 HTTP Messages HTTP란? HyperText Transfer Protocol의 줄임말로, HTML 같은 문서를 전송하기 위한 프로토콜이다. HTTP messages는 클라이언트와 서버 사이에서 데이터가 교환하는 방식이다. 메시지 타입에는 2가지가 있다. 요청 메시지는 클라이언트가 서버로 전달해서 서버에서 일어나는 메시지고, 응답 메시지는 요청메시지에 대한 서버의 답변이다. 요청메시지, 응답메시지는 유사구조를 가진다. 시작줄 헤더 empty line 본문 요청 시작줄 첫번째 HTTP 메서드로 GET, PUT, POST를 사용, HEAD, OPTIONS을 사용해 ..

REST API 공부 목표 - REST API 개념 이해 - OPEN API & API key 개념 이해 - Postman 개념 이해 - HTTP API 테스팅 - Postman 사용하여 GET, POST 요청을 보내고 응답 받기 - Postman 사용하여 Open Weather Map Open API에 요청 해보기 - Google Chrome NetWork Tab 이해REST API란? REST란 Representational State Transfer의 약자로 효율적, 안정적이며 확장 가능한 분산시스템을 가져올 수 있는 소프트웨어 아키텍처 디자인 제약의 모음을 나타낸다. Referance 제약들을 준수했을 때, 그 시스템은 RESTful 하다고 말한다. 그럼 REST API는 무엇일까? REST AP..

OOP 공부 목표(객체 지향 프로그래밍) 클래스 개념 이해 / 인스턴스 개념 이해 new 사용법 class 사용법 추상화 / 현실을 바탕으로 메소드, 속성 디자인 OOP(객체 지향 프로그래밍) 다형성 캡슐화 상속 추상화 프로토 타입 개념 이해 상속 개념 이해 클래스 상속 원리 이해 Prototype chain 이해 상속 관계 현실 세계 모델을 코드로 작성 Class 모듈화 앞서 필요한 개념 객체 개념 // 클로저 개념 // 객체 다루기 메소드 호출 실습하기 메소드 호출 방식에서는 화살표 함수를 쓰지 않습니다. 이유는 mdn을 잠초 let makeModule = { value1 : 1, add : function() { this.value1++; }, minus: function() { this.value..

비동기 공부 목표 blocking 개념 동기적 개념(synchronous) non - blockin / 비동기 개념 (asynchronous) 비동기적으로 작동하는 기능 로딩창 / 인터넷 서버 요청 후 응답 기다림 / 큰 용량 파일을 로딩 callback / promise의 장점 단점 promise 패턴 공부 resolve, reject 의미 then/catch 와의 관계 promise 인자 넘기는 법/세가지 상태/promise.all 이해 async/await 작동 원리 비동기 간단히 동기와 비동기의 차이점을 설명하자면, 동기는 전화라고 생각할 수 있고, 비동기는 문자라고 생각할 수 있다. 전화는 당장 일을 멈추고 전화를 받아야 한다. 하지만 문자는 시간이 얼마나 걸리던 미룰수가 있다. 즉, 요청과 동..

CSS CSS의 . 과 #의 차이의 개념 절대 단위와 상대 단위 구분 CSS의 박스 모델 content-box와 border-box 의 차이 위 개념은 기본적으로 알고 넘어가야 하는 것 입니다! 한단계 더 높아지기 위한 공부 CSS의 셀렉터 규칙 후손 셀렉터 / 자식 셀렉터 차이 레이아웃을 위한 HTML만들기 Flexbox 이용해 레이아웃 만들기 방향 / 늘리기 / 수평 정렬 / 수직 정렬 / 크기 조절 셀렉터(selector / 선택자) p {color: red; paddin: 5px;} 같은 경우 p : 선택자 (selector) {} : 선언 블록 (Declaration block) color : 선언 부분의 속성(property) red : 선언 부분의 속성값(Property Value) 셀렉터 ..

HTML 가장 기본적인 요소 Tag 의 집합이며, 가장 기본 요소 이다. Ex) 내용 같은 그룹 안에 기능을 넣어줍니다. 기본 구조 head / body / footer로 이루어져 있습니다. TAG 많이 쓰이는 TAG만 모아 봤고, 자세한거는 MDN을 이용하자 HTML 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. 는 CSS를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있습니다. HTML 요소는 HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 요소만 존재할 수 있습니다. HTML 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다. HTML 요소는 문서 ..

DOM 이란? DOM (Document Object Model)은 HTML 및 XML 문서를위한 프로그래밍 인터페이스입니다. 프로그램이 문서 구조, 스타일 및 내용을 변경할 수 있도록 페이지를 나타냅니다. DOM은 문서를 노드와 객체로 나타냅니다. 이렇게하면 프로그래밍 언어가 페이지에 연결할 수 있습니다. 간단히 말해 프로그래머 관점에서 본 HTML 이라고 생각한다. DOM 구조 는 트리 구조로 HTML을 부모 자식으로 나눠 만들어 진다. HTML - JS CRUD // 조회하기 console.log(document.body) // body console.dir(document.body.children) // body 엘리먼트 자식 찾기 // element 만들기 let tweetDiv = documen..

'객체' 객체를 배우면서... 배열과 객체 구조 파악하기 >>> 구분까지 지어서 생각해야 합니다. 객체 속성 조회, 변경, 삭제 등 자유롭게 사용해야 합니다. 객체 메소드 파악하기 객체 X 반복문 파악하기 객체 객체 형태 let obj = { key1 : value1, key2 : value2 }; 그렇다면 객체의 값은 어떻게 출력할까? 방법1 객채명.key이름 >>> value 출력 방법2 객채['key명'] 객채명.key === 객채['key'] >>> = value 객채명[key] = value 객체 메소드 delete : 원하는 객체의 값 하나를 지울 수 있습니다. for ... in 는 객체 key 값을 주로 순회 하면서 값을 가져오기 위할 때 쓰입니다..

'배열' 배열을 배우면서... index, element, length 등을 잘 알아야 사용이 가능하다 스택, 큐, pop 등을 알아야한다! FIFO, FILO 등을 알자! 2차원 배열을 공부하자! 배열 기초 메소드 element를 순회 하면서 조회, 추가, 삭제, 복사, 분리 하는 법을 알아야 한다. >>> unshift, shift, slice, length 변수, 데이터, 특정값이 배열인지 아닌지? >>> Array.isArray element >>> push, pop 특정값 배열에 포함되어있는지 확인 >>> indexOf, includes 배열 배열이란 순서가 있는 값입니다. 즉 순서대로 값이 들어 간다는 말이죠! 배열에서 가장 알고 가야 할 것은 용어 입니다. 용어 element ..