Web Dev/ELICE 86

23 (3/3) :: TypeScript 복습, 실습

엘리스 SW 엔지니어 트랙 23일차 김병철 강사님 실시간 강의 23 (2/3) :: Generic 링크 => https://forgottenknowledge.tistory.com/entry/23-23-Generic 23 (2/3) :: Generic 엘리스 SW 엔지니어 트랙 21일차 박성국 강사님 실시간 강의 23 (1/2) :: TypeScript Interface, 사용 이유 & 예시, 상속 링크 => https://forgottenknowledge.tistory.com/entry/23-12-TypeScript-In.. forgottenknowledge.tistory.com 앞의 이론 시간에 배운 내용 복습 조금 interface 클래스와 달리 구성되는 것의 타입만 명시 생성자 메서드 구현 X =>..

Web Dev/ELICE 2021.11.25

23 (2/3) :: Generic

엘리스 SW 엔지니어 트랙 23일차 박성국 강사님 실시간 강의 23 (1/2) :: TypeScript Interface, 사용 이유 & 예시, 상속 링크 => https://forgottenknowledge.tistory.com/entry/23-12-TypeScript-Interface-%EC%82%AC%EC%9A%A9-%EC%9D%B4%EC%9C%A0-%EC%98%88%EC%8B%9C-%EC%83%81%EC%86%8D 23 (1/2) :: TypeScript Interface, 사용 이유 & 예시, 상속 엘리스 SW 엔지니어 트랙 21일차 박성국 강사님 실시간 강의 Interface와 제네릭 타입스크립트에서 조금 더 중요한 개념이라고 하신다 Interface 타입 체크에 사용 변수, 함수, 클래스에 ..

Web Dev/ELICE 2021.11.25

23 (1/3) :: TypeScript Interface, 사용 이유 & 예시, 상속

엘리스 SW 엔지니어 트랙 23일차 박성국 강사님 실시간 강의 Interface와 제네릭 타입스크립트에서 조금 더 중요한 개념이라고 하신다 Interface 타입 체크에 사용 변수, 함수, 클래스에 사용 가능 클래스와 비스므리 하지만 직접 인스턴스 생성 불가 모든 메소드는 추상 메소드 abstract 키워드 사용 안한다 Interface 사용 이유 협업 개발시 공통적으로 사용되는 부분에 대해 미리 정의 추후 코드를 합칠 때 효율적이다 추상클래스 vs Interface 추상 클래스는 전체적인 구조 Interface는 프로그래머간 협업 Interface 예시 interface에서 정한 property는 모두 required 아니면 [grade: number] 이런식으로 활용 가능 value 자리에는 들어올 ..

Web Dev/ELICE 2021.11.25

22 :: 타입스크립트 복습

엘리스 SW 엔지니어 트랙 22일차 온라인 강의날 어제 실시간 강의에서 배운 타입스크립트 복습을 실습과 함께 하는 날 타입스크립트 Microsoft가 개발했구나~ 추가 제공 자료형 tuple 길이와 요소 타입이 정해진 배열을 저장하는 타입 enum 특정 값들의 집합으로 저장 인덱스 번호로 접근 가능 인덱스 변경가능 any 자바스크립트 변수 같은 제한 없는 타입 어제 살펴본 Utility Types에 대해 알아봤다 밑의 유틸리티 타입을 알아두면 좋은 것 같다 Partial Readonly Record Pick Omit Exclude Extract NonNullable Parameters ConstructorParameters ReturnType Required 클래스 클래스도 복습 + 새로운 내용 등장 접..

Web Dev/ELICE 2021.11.24

21 (2/2) :: TypeScript 함수 사용, class

21 (1/2) :: 타입스크립트, Type, Utility Types 링크 => https://forgottenknowledge.tistory.com/entry/21-12-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Type-Utility-Types TypeScript 이용 함수 사용하기전 함수에 대해 알아보기 일급객체의 특징 1. 함수 자체를 값으로 저장 2. 함수를 파라미터로 넣어 줄 수 있다 3. 함수를 리턴할 수 있다 // 함수 자체를 값으로 저장 let sum = function(a, b) { return a + b } function ul(child) { return`${child}` } function makeLi(container, c..

Web Dev/ELICE 2021.11.23

21 (1/2) :: 타입스크립트, Type, Utility Types

엘리스 SW 엔지니어 트랙 21일차 박성국님 실시간 강의날 노드와 타입스크립트를 강의해주실 박성국님 프로그래머가 되면 코드를 쓰는 시간보다 코드를 읽는 시간이 늘어난다 하신다 타입스크립트(TypeScript) 트랜스파일러다 Babel과 같은 JavaScript의 슈퍼셋이라 말한다 JavaScript의 모든 기능과 + 추가적인 기능도 제공 Type(유형) => 명시적인 데이터를 설명 컴파일 언어 TypeScript를 왜 사용하나? 규모가 크면 TypeScript를 사용하는 것 같다고 하신다 코드를 읽을 기회가 많아지는데, 보고 이해하기 좋은 코드(클린코드)를 사용하는데 도움이 된다 객체 복사 헷깔릴 수 있는 객체 복사 참고용 box1 = Object.assign({}, box) box2 = {...box,..

Web Dev/ELICE 2021.11.23

20 :: Ajax, Axios, 코드 입력 기계

엘리스 SW 엔지니어 트랙 20일차 프로젝트날 프로젝트를 하기전에 FetchAPI와 같은 비동기 통신에 대해 알아봤다 Ajax(Asynchronous JavaScritp and XML) 비동기 자바스크립트라는 의미 화면 전체 새로고침 없이 일부 데이터만 로드 가능(비동기) 비동기를 사용한 자바스크립트를 Ajax라고 부른다!! 알고나면 컨셉은 참 쉬워~ 근데 XMLHttpRequest를 사용할 때만 Ajax라고 부를라나? Axios 웹 브라우저랑 Node.js에서 비동기 통신을 위한 라이브러리 Ajax 기법 중 하나라고 아니라 Ajax처럼 사용된다고 써있다 Fetch vs Axios Fetch 장점 자바스크립트 내장 => import, 별도 설치 필요 없음 Fetch 단점 예전 익스플로러 버전에서 지원안하..

Web Dev/ELICE 2021.11.20

19 :: HTTP, REST API, Fetch API

엘리스 SW 엔지니어 트랙 19일차 온라인 강의날 async / await 사용법을 알아보고 HTTP(Hypertext Trasfer Protocol) 서버와 클라이언트 간의 통신하는 방법을 정한 것 서버와 클라이언트 사이에 많은 요소와 절차가 존재 HTTP는 이런 요소들 사이의 통신 방법 규정 여러 통신 방법 중 하나 HTTP가 나오기전에는 마구잡이 요청하고 보내고 했나보다 서버 주소, 요청 메서드, 상태 코드, target path, 헤더 정보, 바디 정보 등 포함 요청 메서드 GET - 가져올 때 POST - 보낼 때 PUT, PATCH - 업데이트 DELETE - 삭제 REST API(Representational State Transfer API) 서버 API와 클라이언트 간 통신의 구조의 베스..

Web Dev/ELICE 2021.11.19

18 :: 프론트엔드 vs 백엔드, JSON, fetch()

엘리스 SW 엔지니어 트랙 18일차 이고잉님 실시간 강의날 16일차 싱글어플리케이션 복습으로 시작 오늘은 만든 내용을 저장하는 백엔드로 들어간다 프론트엔드 웹 서버에 index.html 등 저장하지만 해석은 클라이언트 브라우저가 한다 클라이언트 사이드 기술 = 프론트엔드 백엔드 일반 웹 서버는 동작이 정해져있지만, 커스텀 웹 서버는 모든일을 할 수 있다 이 커스텀 웹서버는 python, php, node.js, spring 등으로 만들고 DB와 소통한다 서버 사이트 기술 = 백엔드 이번주는 백엔드가 주체 웹 서버가 클라이언트에 응답하는 주체가 Json, xml, csv 요즘은 Json이 압도적으로 우세 fetch가 대박 꼭 알아야겠군 이 코드는 꼭 이해하자 fetch('/topics') .then(fun..

Web Dev/ELICE 2021.11.18

17 :: 비동기, Promise 예시

엘리스 SW 엔지니어 트랙 17일차 온라인 강의날 비동기, Promise에 대해 조금 깊게 들어가는날 자바스크립트 엔진은 하나의 메인 스레드 코드를 한 줄씩 실행 동기 반복문, 함수 호출 등 오랜 시간을 메인 스레드를 오래 점유하면 프로그램이 멈춘다 가령 반복문 무한루프 등 비동기 대표적으로 setTimeout(), fetch() 있다. 한 코드가 종료되기전에 다른 코드가 진행된다 시간이 걸리는 행동을 기다리며 동시에 다른 일을 처리할 수 있다 비동기 코드는 정해진 함수(setTimeout, fetch, Promise ... ) 이 함수를 비동기 API라고 부른다 Promise 비동기 처리의 순서 조종 new Promise(callback) callback에는 resolve, reject를 받는다 순서를..

Web Dev/ELICE 2021.11.17
728x90