클린코드로 유명한 로버트 마틴이 좋은 객체 지향 설계의 5가지 원칙을 정리SRP: 단일 책임 원칙(single responsibility principle)OPC: 개방-폐쇄 원칙(open/closed principle)LSP: 리스코프 치환 원칙ISP: 인터페이스 분

추상화캡슐화상속다형성객체들의 모임으로 파악하고자 한다.유연하고 변경하기 쉽다.클라이언트는 대상의 역할(인터페이스)만 알면 된다.클라이언트는 구현 대상의 내부 구조를 몰라도 된다.클라이언트는 구현 대상의 내부 구조가 변경되어도 영향을 받지 않는다.클라이언트는 구현 대상

props, state 를 통해 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업루트 컴포넌트에서 시작해서 업데이트가 필요하다고 플래그가 지정된 모든 컴포넌트를 찾는다.지정되었다면 FunctionComponent()를 호출하고 렌더링 결과를 저장한다.컴포넌트 반환값은

첫 요청에서 이미지를 다운받고똑같은 요청임에도 다시 다운을 받아야 한다.데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다.인터넷 네트워크는 매우 느리고 비싸다.브라우저 로딩 속도가 느리다.느린 사용자 경험첫 요청에서 이미지를 다시 요청하자.

HTTP 전송에 필요한 모든 부가정보ex) 메시지 바디의 내용, 메시지 바디의 크기, 압축, 인증, 요청 클라이언트, 서버 정보, 캐피 관리 정보 ...표준 헤더가 너무 많음필요시 임의의 헤더 추가 가능General 헤더: 메시지 전체에 적용되는 정보Request 헤더

클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능1xx (informational): 요청이 수신되어 처리중2xx (Successful): 요청 정상 처리3xx (Redirection): 요청을 완료하려면 추가 행동 필요4xx (Client Error): 클

데이터 전달 방식은 크게 2가지쿼리 파라미터를 통한 데이터 전송 \- GET주로 정렬 필터 (검색어)메시지 바디를 통한 데이터 전송 POST, PUT, PATCH회원 가입, 상품 주무느 리소스 등록, 리소스 변경이미지, 정적 텍스트 문서정적 데이터는 일반적으로 쿼리

URI 설계에 가장 중요한 것은 리소스이다.회원을 등록, 수정, 조회하는 것이 리소스가 아니다.회원이라는 개념 자체가 리소스이다.회원이라는 리소스만 식별하면 된다 => 회원 리소스를 URI에 매핑계층 구조상 상위를 컬렉션으로 보고 복수단어 사용 권장 (member =>

HTML, TEXTIMAGE, 음성, 영상, 파일JSON, XML (API)거의 모든 형태의 데이터 전송 가능서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용HTTP/0.9 1991년: GET 메서드만 지원, HTTP 헤더 없음HTTP/1.0 1996년: 메서드,

Uniform Resource IdentifierURI? URL? URN?URL: 리소스 위치URN: 리소스 이름URI: 리소스 식별자Uniform: 리소스 식별하는 통일된 방식Resource: 자원, URI로 식별할 수 있는 모든 것 (제한없음)Identifier:

클라이언트가 서버와 통신을 하려면 인터넷 즉, IP(인터넷 프로토콜)이 필요하다.클라이언트 IP: 100.100.100.1 => 서버 IP: 200.200.200.2클라이언트인 내가 서버로 메시지를 보내보자.대상 IP 주소에 데이터 전달패킷(packet)이라는 통신

노드는 ts 파일을 실행시킬 수 없다.tsc 명령어로 js 파일을 만들고 노드로 실행할 수 있다.이를 합친 ts-node 라는 것도 있다.프로젝트를 생성하고, ts 설정을 하자.npm init tsc --init컴파일을 관찰모드로 하고 노드몬으로 js 파일이 바뀔 때마

declare로 ts에게 알릴 수 있다.타입스크립트 지원이 안되면누군가 만들어놓은 type 관련 라이브러리를 설치해서 사용하면 된다.

웹팩은 코드를 묶어서 임포트를 덜 할 수 있게 해준다.최적화해서 적은 코드를 다운받게 해준다.빌드 단계를 쉽게 추가할 수 있다.ts-loader, typescript, webpack, webpack-cli, webpack-dev-server 를 설치하자.webpack-

파일이 처음으로 임포트 되었을 때 1회 실행되고다른 파일에서 같은 파일을 임포트할 때는 다시 실행되지 않는다.

tsconfigoutFile 은 ts가 namespace 와 연결되도록 한다.module AMD로 수정한다.클래스 이넘 인터페이스를 네임스페이스로 감싸고 export한다.import는 아래와 같이 한다.하지만 es6 모듈 사용법을 권장한다.

프로젝트 목록을 드래그 앤 드롭을 적용해보자.먼저 HTML에 원하는 태그에 draggable="true" 속성을 추가하자.위 인터페이스를 사용할 것이다.이것을 implements 해보자.아이템에 dragstart, dragend를 적용했다.드롭될 목록에 dragover

프로젝트 인원이 1명일 때와 아닐 때다르게 렌더링하기 위해서 게터를 사용해보자.

Component 클래스를 상속해서 목록을 렌더링 해보자.

추상 private 는 ts가 지원하지 않는다.public 메서드는 private 메서드 위에 작성하는 것이 좋다.제네릭과 상속으로 코드 리팩토링을 해보자.