Jveloper

- 구현순서 : 컴포넌트 설계 -> (변수네임 지정) -> 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..

CORS란 Cross-Site Http Request를 가능하게 하는 표준규약이다. HTTP 요청은 기본적으로 Cross-Site Http Request 가 가능하지만, 자바스크립트 (XMLHttpRequest)로 다른 웹페이지에 접근할 때는 Same Origin Policy 로 인해 요청이 불가능하다. 웹 브라우저는 사용자가 특정사이트에 접속중인 상태에서 동시에 다른 사이트를 접근하는 경우, 보안상 문제가 발생했다고 인식하여 이와 같은 행위를 기본적으로 불허한다. 이를 동일출처정책(Same Origin Policy) 이라고 한다. 실제로 기능구현 할 때 다른 사이트를 동시에 접속해야 될 필요가 있다. 예를 들어 a.com 사이트를 이용할 때 로그인 정보는 b.com 에서 가져와야 하는 경우가 있다. 이..

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에서는 아주아주 중요하다 !

리액트 리액트는 이와같이 한방향으로 흐르는것처럼 작동한다 즉, 단방향 통신을 함 제일 중요한 키포인트라고 생각한다 컴포넌트 우선 컴포넌트란 무엇일까? 내가 내린 정의는 이 위의 사진에서 물이 차 있는 하나하나의 잔이라고 생각했다 그 이유는 저 컴포넌트(레고조각)들이 모여서 하나의 작품(레고완성작)이 탄생하는것이라고 생각했기때문이다 그리고 저 잔들이 품고있는 물을 State라고 생각했는데 State는 아래에서 다시 보도록하자 Props props는 제일 위의 사진에서 내려오는 물줄기라고 생각하면 되는데 단순히 사용만 가능, 즉 변경이 안된다 State - 컴포넌트가 가지고있는 데이터 - 굳이 모든 컴포넌트가 가질 필요는 없음 아까 위에서 잔이 품고있는물이라고 언급한 바 있다 "물처럼 흘러가다가 상태를 변화..

참조 : https://allg.tistory.com/29

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...