Frank의 공부 일지

- 페이스북에서 제공해주는 프론트엔드 라이브러리 - Component 기반: Component에 데이터를 내려주면 개발자가 설계한대로 UI를 만들어 사용자에게 보여준다.-> 코드의 재사용성과 유지보수성을 증가 - JSX 문법: 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 준다. - 단방향 데이터 바인딩: 리액트는 데이터의 흐름이 한 방향으로만 흐른다. 데이터가 내려가기만 하고 밑에서 데이터를 올려줄 수 없기 때문에 부모의 데이터를 바꾸기 위해서는 state를 이용해야 한다. - Props: 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터. 자식 컴포넌트에서 전달 받은 props는 변경이 불가능하고 props를 전달..

동기 - 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식 - 어떠한 일을 처리하는 동안 다른 프로그램은 정지 비동기 - 요청을 보낸 후 응답과는 상관없이 다음 동작이 이루어지는 방식 - 결과가 주어지는데 시간이 오래 걸려도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다. - 처리를 요청할 때 할 일이 끝난 후 처리결과를 알려주는 콜백이라는 함수를 함께 알려준다.

Node.js - Chrome V8 Javascript 엔진으로 빌드된 Javscript 런타임 *런타임 - 특정 언어로 만든 프로그램을 실행할 수 있는 환경 즉, 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있다. - 확장성이 있는 네트워크 어플리케이션 개발에 사용되는 소프트웨어 플랫폼(특히 서버사이드로 많이 사용) - V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임(환경) - 서버 사이드 스크립트 언어가 아니라 프로그램(환경) -> 서버에서도 사용할 수 있도록 만든 프로그램 - 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어짐. - Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있는 것이 특징 - 내장 ..

자바스크립트의 강력한 장점이자 단점은 동적이라는 것이다. 추적이 안되는 객체들이 너무나도 많기 때문에 속성의 변경이 너무나도 쉬우면서, 반대로 변경이 너무 쉬워 잘못된 것을 실행 중에 알게 된다. 실제로 어떤 서비스를 운영할 때에 테스트할 때 발견되지 않았던 버그가 생길 수 있다 이러한 문제를 타입스크립트가 해결해주었는데 타입스크립트는 기본적으로 변수에 타입을 지정해주면서, 코드를 추적해준다. 타입스크립트 장점 - 자바스크립트의 상위 집합 - 모든 코드에 대해 타입을 지정하지 않아도 유추를 통한 타입 제어가 가능 - 절차지향, 객체지향, 함수형 활용 가능 타입스크립트 단점 - 초반 세팅이 불편 - interface나 class 등의 이름 때문에 오류가 발생하기도 함 - 가독성이 상대적으로 떨어짐

자바스크립트는 하나의 콜 스택을 가지는 싱글 스레드 프로그래밍 언어 * 싱글 스레드 - 한 번에 하나의 명령 집합 그렇기 때문에 자바스크립트는 동기식으로 작업을 처리할 수 밖에 없는데, 이로 인해서 많은 문제가 발생 -> 이를 해결하는 방식이 자바스크립트 런타임 자바스크립트 런타임 - 오래 걸리는 일은 백그라운드에서 처리하고 간단하게 처리할 수 있는 작업들만 콜 스택에서 수행한다면 효율적으로 처리할 수 있다. Web API - 브라우저와 함께 제공 - HTPP 전송, setTimeout, DOM Event 등과 같은 다양한 작업 수행 - 브라우저에서 캐싱, 데이터베이스 저장소를 사용할 수 있게 해준다. 즉, Web API를 사용하여 백그라운드에서 비동기적으로 작업을 처리할 수 있다. 이벤트 루프와 콜백 ..

- 객체 기반의 스크립트 프로그래밍 언어 - 웹 브라우저 내에서 주로 사용, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. - Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용 - 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어 - 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 가능

- Cross Origin Resource Sharing의 약자 - 현재 도메인과 다른 도메인으로 리소스가 요청될 경우 ex) http://a.com에서 읽어온 html 페이지지에서 다른 도메인 http://b.com/image.png를 요청하는 경우 - 이런 경우 해당 리소스는 cross-origin HTTP 요청에 의해 요청, 보안 상의 이유로 브라우저는 CORS를 제한 - 하지만 SPA의 경우 RESTful API를 기반으로 비동기 네트워크 통신을 하기 때문에 API 서버와 웹 페이지 서버가 다를 수 있다. 이런 경우에 API 서버로 요청을 할 시에 CORS 제한이 걸린다. Access-Control-Allow-Origin - 이를 해결하기 위한 간단한 방법은 서버의 응답 헤더를 변경해주는 것 - ..

REST - 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것을 의미 - 웹에서 통신을 위해 사용되는 구조 - 전송 관련 상태를 표현하는 구조 - 구성 1) 자원 - URI 2) 행위 - HTTP 메서드 3) 표현 API(Application Programming Interface) - 사용자가 원하는 것에 도달할 수 있도록 한 인터페이스 - 애플리케이션 소프트웨어의 구현 방식을 몰라도 사용자가 API를 통해 사용 가능 - 정보 제공자와 정보 사용자 간 소통하기 위한 하나의 인터페이스 장치 REST API - REST를 기반으로 서비스 API를 구현한 것 - RESTful하다 : REST 구조 스타일로 API가 이루어진 서비스 URI 기본 설계 규칙 - /는 계층 관계를 나타낼 때 사용 -..

Postman - 개발한 API를 테스트하고, 테스트 결과를 공유하여 API 개발의 생산성을 높여주는 도구 - Front 개발자와 협업시 문제점 찾기 위해 사용 Collection 및 Request - 프로젝트 단위로 Collection을 생성 - Collection 내부에 폴더를 만들어 기능별 분류도 한다. - Request를 추가하여 get/post/delete/put 등 지정하여 사용 환경 설정 - 동그라미 친곳에서 만든 환경 설정 - 밑줄같이 중괄호를 사용해 변수 사용 쿼리스트링 - start_date는 쿼리스트링 - params는 :item 같이 사용 multipart-form data 설정 1) 파일+각각 data : 여러 json data를 하나씩 보내는 방법 2) 파일+json data :..

NodeJS - JavaScript를 실행시키는 런타임 환경 - 프로그래밍 언어(프레임워크 X) - Single-Thread 기반 - 비동기 방식 - 이벤트 기반 - Back-end에서만 사용 X(ex-Babel(즉, 프론트에서도 사용) Express - NodeJS 기반의 MVC(Model View Controller) 웹 애플리케이션 프레임워크 - 서버 구축하기 쉽게 틀을 제공 1) HTTP 요청 본문 파싱(bodyParser 처리) 2) 쿠키 파싱(cookieParser 알아서 app.use) 3) 세션 관리 4) 데이터 타입 토대로 한 적절한 응답 헤더 결정 Express 시작하기 1) 직접 설정 - NodeJS, npm 설치 - npm init or yarn init -> package.json..