react44 [220413] 데이터(props)가 바뀌면(state) 화면이 바뀐다(component) 한 페이지를 그릴때 , 보여지는 화면에 관련된 모든 컴포넌트를 가져오는 리액트의 습성때문에 기본적인 요청&응답이 길다. 예) 로그인 버튼을 누름 -> 로그인에 관련된 컴포넌트 모두 가져옴. 데이터를 건드리지 않고 화면을 모두 그리고 난 후에는 완료되었다는 신호를 준다. ComponentDidMount라는 신호 (DOMContentLoad와 목적이 같음) 여기부터 비동기통신인 AXIOS를 사용해서 비동기적 통신으로 데이터와 접속함. 리액트는 NODEJS와 webpack의 도움을 받아서 이루어진다. webpack : 100개의 서로다른 js를 1개의 js로 통합시켜주는 번역기 ( = 번들파일) 왜? -> 다른 js 파일을 만들다보면 변수명이 겹치게 되는데 그런 일을 방지해줌. 등장배경 -> require이 .. 2022. 4. 15. [220413] 리액트 시작하기 (react, react-dom, 컴포넌트) 사전지식 자바 프레임워크라고도 부르고, 자바 라이브러리라고 부르는 리액트. 조금 자세히 따지자면 프레임워크에 가깝다. 라이브러리 : 폴더 구조가 없음 프레임워크 : 폴더 구조가 있음 1. react 시작하기 react는 react문법을 사용해서 작성한다. react-dom은 바뀐 값을 찾아서 그 영역만 바꿔준다. 주로 맨 마지막 한줄만 사용함 1-1. react 문법 버튼을 리액트로 만드는 코드 //인자값 3개 들어가는 React.createElement() //첫번째 인자 : 엘리먼트 명 //두번째 인자 : 속성값 //세번째 인자 : innerHTML React.createElement('button', null, '버튼') 1-2. react-dom 문법 //ReactDOM.render() //첫번째.. 2022. 4. 15. [220317] websocket (웹소켓) 구현하기 / 채팅창 만들기 목록 1. websocket 사용환경 만들기 2. 요청/응답 코드 작성하기 3. websocket의 이벤트 4. string 형식으로 데이터를 주고받는 websocket 5. 채팅창 완성하기 외부 라이브러리 ws 설치하기 $npm install ws 라이브러리 가져와서 세팅하기 const webSocket = require('ws') 백엔드에서 요청을 받아주는 코드 작성하기 handshake를 만들고 Connection을 이루는곳까지 코드로 구현했다. //socket.js const webSocket = require('ws') module.exports = (server) =>{ // 클래스 문법이니까 new로 선언 const wss = new webSocket.Server({server}) //응답이.. 2022. 3. 18. [220317] websocket (웹소켓) 개념 정리 기존 지식 정리 1. HTTP (HyperText Transfer Protocol)란? 인터넷에서 데이터를 주고받을 수 있는 프로토콜(규칙) HTTP 요청 (request) 웹 페이지를 열고 폼에 내용을 입력하면 웹 서버와 웹 브라우저가 데이터를 교환한다. 웹 브라우저는 데이터 헤더를 붙여 오픈할 웹페이지의 주소를 웹 서버에 요구한다. HTTP 응답 (response) 웹 페이지의 요청을 받은 웹 서버는 서버 정보 or 처리 결과를 나타내는 오류 코드와 메시지의 헤더를 웹 페이지 콘텐츠에 붙여 응답한다. 2. AJAX(Asynchronous Javascript And XML)란? 브라우저에서 url의 이동 없이(새로고침 없이) 서버에 요청하는 행위. 페이지 전체를 다시 작성하지 않고도 필요한 데이터만 받.. 2022. 3. 17. 이전 1 2 3 4 5 다음
