오늘 한것 어제 node.modulo로 만든 서버를 express로 리팩토링 하였다. 확실히 코드 자체가 간결해 졌다. checkpoint를 통해 비동기와 export에 대해 내가 잘 이해하고 있는지 아닌지 알 수 있었다. 오늘 메모 Express http 서버를 위해 작고 강력한 툴을 제공하는 프레임워크 1.Middleware( 중간 공정 ) ex) 자동차 만들기 (컨베이어 벨트) 프레임 만들기 => 부속품 끼우기(request, response, next) => 출고 (컨베이어 벨트를 지나가면서 뭔가 하나씩 추가가 된다.) 2.Router 라우팅은 어떤 네트워크 안에서 통신 데이터를 보낼 경로를 선택하는 과정이다. 클라이언트 입장에서는 정해준 경로대로 요청하면 되지만 서버는 설계를 해주어야한다, 즉 ..

오늘 한것 toy problem 12번 바이너리서치의 변형 문제 전에 만들어 두었던 chatter 박스를 server에 연결 시켜 보았다. 어떻게 완성하긴 했지만 아직 이해가 되지 않는 부분들이 있어서 더 공부 해바야 될것 같다. 오늘의 메모 Exports 는 Es6 문법 require 는 commonJs 사용법 : https://blueshw.github.io/2017/05/16/ES-require-vs-import/ 데이터를 보낼때는 serialize (직렬화) 시켜야 한다. (JSON.stringify) 앞뒤로 데이터 들이 추가 되어서 보내진다. (Header,body…) (깊게 공부할때 추천하는 책 : HTTP 네트워크 베이직 영진닷컴) OPTION 은 브라우저가 자발적으로 보내는 것이다. 클라이..

Node란 "노드는 v8엔진으로 만들어진 javascript 런타임이다." 위의 문장에서 나오는 V8 이란 자바스크립트를 기계어로 컴파일 해주는 역활을 하고 Runtime 이란 프로그래밍 언어가 구동되는 환경을 말한다. 즉 풀어서 말하자면 "자바스크립트를 컴파일 해주는 엔진으로 빌드된 자바스크립트가 구동중인 환경이다!" 이벤트 => 유저의 버튼 클릭 or 네트워크 리소스를 요청하는 것등 노블로킹 vs 블로킹 1.블로킹 => 다음 함수의 실행이 현재 함수 종료 이후에 이루어 지는것 (커피 주문받기 => 샷 추출 => 커피 만들기 => 전달하기 => 새주문받기) 2.논블로킹 => 다음 함수의 실행이 현재 함수의 종료를 기다리지 않음 (커피 주문 => 샷 추출 => 커피 만들기 => 전달하기 새 주문 받기 =..

React에서 컴포넌트를 만들땐 기능별로 분리하고 재사용 가능한 컴포넌트를 만드는것이 좋다. React 에서 map 사용시 인덱스값 꼭 받기 Class 에서 함수 사용시 this.props 이렇게 써야한다. 초기값이 없을 경우 고민을 해보아야 한다. Oncontextmenu => 마우스 오른쪽 클릭 uniqueId => 랜덤한 값이 나온다. 스타일 컴포넌트 On drag 드래그 끌기

todolist를 리엑트를 사용하여 구현을 하는데 상위 컴포넌트 에서 하위 컴포넌트로 어떤 식으로 내려줄까에 대한 고민을 많이 하였다. App 이라는 컴포넌트를 최상위에 두고 아들로 각각 todolist 와 category로 나누는 구조로 만들었다. 그리고 데이터에 어떤 값들을 추가해서 내려줘야하는지에 대한 고민도 많이 했다. 세션을 진행하다가 생긴 오류 Parsing error: Only one default export allowed per module. Export default class 를 사용하는 상태에서 Export defalut를 아래에서 한번더 정의해 주어서 요류가 발생 React 사용시 한번 더 확인할 것 React 에서 함수를 설정하여 값을 넣을때 {} 꼭 쓰기 파일을 vs 코드에서 ..

1.Component 컴포넌트는 웹 사이트를 조각 낸 것으로 그 조각 하나하나가 각자 기능을 한다. 유투브의 동영상 플레이어를 예로 든다면 전체를 감싸는 App, 동영상 플레이어 그리고 동영상을 재상하는 부분, 재생목록, 재생목록에서 보여주는 동영상과 그 동영상에 대한 설명이 모두 각각의 컴포넌트이다. 컴포넌트는 잘게 쪼갤수록 좋다. 잘게 쪼갤수록 재사용성이 높아지고 하나의 컴포넌트에서는 하나의 기능만을 함으로 에러를 잡기에도 좋다. // 함수 컴포넌트 function welcome(props) { return Hello, world!; } //ES6 class 사용 컴포넌트 정의 class Welcome extends React.Component { render() { return Hello, {thi..