오늘해야할일들
-
최최종 배포 [완료]
-
오류 확인 및 수정 [완료]
-
마케팅 논의 [완료]
-
동영상 촬영 필요
-
대본 작성 [진행중]
-
대본 PPT 작성 [진행중]
-
socket.io 공부
참고한 사이트 : https://soonysoon.tistory.com/65
socket 은 Client와 Server가 소켓통신을 통해서 서로 통신을 주고받음
socket.io 란 websocket기반으로 클라이언트와 서버간의 양방향 통신을 가능하게 해주는 모듈입니다.
기본적인 socket의 연결, 해제기능들을 자바스크립트로 가능하게 만든 모듈이라 생각하면 편하다.
socket 의 핵심 function
emit = 데이터 전송(서버→ 클라이언트 / 클라이언트 → 서버)
on = 데이터를 받는다(서버→ 클라이언트 / 클라이언트 → 서버)
Server 설정 및 소스
-
환경설정 (server 폴더에서 아래의 명령어 실행)
npm i express
npm i cors
npm i nodemon
npm i socket.io
기본 셋팅 코드
-
const app = require('express')()
const server = require('http').createServer(app)
const cors = require('cors')
const io = require('socket.io')(server,{
cors : {
origin :"*",
credentials :true
}
});
io.on('connection', socket=>{
socket.on('message',({name,message}) => {
io.emit('message',({name, message}))
})
})
server.listen(4000, function(){
console.log('listening on port 4000');
})프론트쪽 지식
[useState]
- 동적인 상태인 State를 관리하기 위해 나온 HOOK
- 함수형 컴포넌트에서도 state관리가 가능해짐
기존 클래스 컴포넌트에서 state관리
초기값 설정의 constructor에서 진행해주었고, 상태값을 this를 통해서 불러올수 있다.
[ useEffect ]
-
useEffect render() 가 끝났을 때 ,렌더가 실행될때마다 실행된다
-
클래스의 life cycle 에서 componentDidMount/ componentDidUpdate 를 대신하는 것이다.
-
렌더링 이후에 작업되는 것으로써 네트워크통신이나, 컴포넌트와 상관없는 것들을 변경될 때 사용된다
-
useEffect는 여러개 설치할 수 있다.
-
useEffect의 리턴값에 함수를 제공하면 마무리하는 작업을 진행할 수 있다.(clean up)
-
두번째 원소값을 배열에 넣으면, 그 값이 바뀌지 않으면 useEffect작업을 진행하지 않는다.
-
제출한 브로셔 링크
