Jveloper

express - middleware 미들웨어 함수는 req(요청) 객체, res(응답) 객체, 그리고 어플리케이션 요청 - 응답 사이클 도중 그 다음의 미들웨어 함수에 대한 엑세스 권한을 갖는 함수이다. 미들웨어란 간단하게 말하면 클라이언트에게 요청이 오고 그 요청을 보내기 위해 응답하려는 중간(미들)에 목적에 맞게 처리를 하는, 거쳐가는 함수들이라고 보면 되겠다. 미들웨어가 하는 일 - 모든 코드를 실행 - 요청 및 응답 객체에 대한 변경을 실행 - request - response 주기를 종료 - 스택 내의 그 다음 미들웨어를 호출 미들웨어의 유형 1) 어플리케이션 레벨 미들웨어 - 어플리케이션 전체 영역에서 처리 가능. 앱에 대한 request가 발생할때마다 실행 2) 라우터 레벨 미들웨어 - 라..

commonJS - module.exports - exports - require REST API document write(백엔드 개발자가 서버를 어떻게 꾸려놨는지 클라이언트도 이해하고 사용할 수 있게 작성하는 문서) package.json

JavaScript - 싱글스레드 기반의 언어(코드를 순서대로 읽어나간다) EventLoop : https://www.youtube.com/watch?time_continue=747&v=8aGhZQkoFbQ - 콜백함수는 Callback Queue를 돌고 나오고 그냥 함수는 call Stack으로 들어갔다가 나온다 - 위에서 말했듯 자바스크립트는 싱글쓰레드기반의 언어라 순서대로 읽어나가기 때문에 예상대로라면 하나의 함수가(또는 라이브러리같은 것) 다 실행이 될때까지 아무것도 못하는 상태여야하는데, 그것을 비동기(논블로킹)를 씀으로써 queue로 넘겨서 실행하고 있게하고 나머지 함수들은 다 실행을 시키고 마지막에 기본함수들이 다 호출되는 시점에 queue에서 다 실행된 비동기를 꺼내줌으로써 호출시점을 다르..

- 구현순서 : 컴포넌트 설계 -> (변수네임 지정) -> create react-app 으로 환경구축 -> 코드 작성 & css - Issue : 코드를 작성해가는것과 css를 같이 만지면서 진행을 했는데 그렇게 나아가다 보니 이미 시간을 많이 쏟은 상황이었는데 fakedata로 만들어놨던게(서버를 만지지 않았고 api를 땡겨오는 상황도 아니었음) 꼬이기 시작하더니 나중에는 다 뒤집어 엎어야 할 상황에 놓이게 되었다 데이터가 꼬였던 이유는 초기값같은것( ex) [ {초기값: []}, {초기값2 : []} ] )을 주지않고 this.state에 [], {} 이렇게만 놓고 this.setstate로 {}를 설정하고, []에 push를 하는방식으로 하려하니 객체의 키값으로 어떤것이 들어오는지 미리 알수가 없..

React JSX(javascript + XML) render(){ return ( hello world ! ) } 이런식으로 html 태그인 div안에 감싸서 쓰는 문법을 JSX라고 한다 Virtual Dom 이라는애가있고 얘가 필요한 부분만 업데이트해주기때문에 DOM을 직접적으로 건드리면 안된다 ! Lift Cycle 컴포넌트가 렌더링이 되기전부터 렌더링이 끝날때까지의 생명주기가 있고 그 생명주기들을 세분화 시킨 메소드를 쓸수있다 componentDidMount, componentDidUpdate 등등.... 렌더링 순서가 어떤식으로 진행되는지 아는것이 정말 중요 class 에서만 life cycle을 쓸수있는데 그 이유는 React.component 에서 상속을 받기때문 Lifting state u..

react https://program-developer.tistory.com/32 chatter-box(client) sprint review 이번 sprint 남겨야 할 부분 : 웹서비스는 Client server가 연결되어있는 구조로 되어있고, "짜여져있는 server를 client에서 어떻게 띄웠을까.." "server는 어떻게 이루어져있길래 client를 보내줄수 있었을까?"를 생각해보자 (client와 server가 어떻게 통신을 할까?) chatter-box(client) peer review 완벽하지못한개념을 짚고갔으면 하는 바램을 말씀해주셨다 Spread , Set 등등 ES6 Syntax -> 런코와 블로그를 통해 공부하도록 하자 react에서는 아주아주 중요하다 !

fetch "Fetch API 의 가장 유용하고, 핵심적인 함수는 fetch() 함수이다. 가장 간단한 형태의 fetch() 함수는 URL 을 인자로 받고 응답을 처리하기 위한 promise 를 반환한다. 응답을 처리할 때 Response 객체를 이용할 수 있다" const app = { server: "http://52.78.213.9:3000/messages", init: function(){ app.fetch(); }, fetch: function(){ fetch(app.server, { // { return response.json(); }).then(json => { makeChatBox(json) //********* 이 부분이 핵심 */ }) }, send: function(messages)..

Chatterbox-client 주요키워드 client server browser http API database Client 서버에게 데이터를 요청하는 존재 쉽게 말해서 고객, 소비자 Browser 서버에 데이터를 요청해서 받은 데이터를 보여주는 것 Server 자원을 serve하는 주체 예를 들자면, 주방에서 음식을 서빙하는 아르바이트 같은 존재 Database 자원을 저장하는 창고 예를 들자면 음식(리소스)이 쌓여있는 주방 Http(Hyper Text Transfer Protocol) 인터넷에서 데이터를 주고받을 수 있는 프로토콜 프로토콜은 규칙 클라이언트와 서버간의 소통할때의 규칙 서버가 알아들을 수 있게 요청을 할 수 있는 방법 HTTP 1.1 vs HTTP 2.0 현재쓰고 있는건 HTTP 2...