[SSAC 3기] - 13주차-(1)

SangHoon·2021년 10월 27일

12주차 - (3) 은 개인프로젝트에 사용된 Djnago를 node.js로 컨버팅 실습시간 이였는데, 컨버팅 하다가 멈추고 node.js로 새 프로젝트를 만들고 있는 중입니다.
( 대충 skip하겠단 소리 )

🔯React 2

저번시간에 이어서 이벤트와 내장함수를 이용한 간단한 CRUD를 구현해보자!!

리액트 이벤트 처리 (React Event)

//Event.js
import React, { useState } from 'react'

const Event2 = () => {
    const [username, setUsername] = useState("");
    const [message, setMessage] = useState("");

    const onChangeUsername = (e) => {
        setUsername(e.target.value);
    }
    
    const onChangeMessage = (e) => {
        setMessage(e.target.value);
    }

    const onClick = () => {
        alert(username + ": " + message );
        setUsername("");
        setMessage("");
    }

    const onKeyPress = (e) => {
        if(e.key === "Enter"){
            onClick();
        }
    }
    
    return (
        <div>
            <h1>리액트 이벤트 배워보자!!!</h1>

            <input
                type="text"
                name="username"
                value={ username }
                placeholder="이름을 적어주세요"
                onChange={ onChangeUsername }
            />

            <input
                type="text"
                name="message"
                value={ message }
                placeholder="메세지를 적어주세요"
                onChange={ onChangeMessage }
                onKeyPress={ onKeyPress }
            />

            <button onClick={ onClick }>클릭</button>
        </div>
    );
}

export default Event2

이벤트를 작성할때는 js와 달리 카멜케이스로 작성해야한다!!!!
onChange() 이벤트 핸들링
- onChange는 input 안의 값이 변경될 때에 발생
- input 요소를 랜더링해서 onChange 이벤트 설정
onClick() 이벤트 핸들링
- onClick은 button 요소를 클릭했을 때에 발생
- input 안의 값을 alert에 출력하고 input창의 값의 초기화 설정
onKeyPress() 이벤트 핸들링
- onKeyPress는 특정한 키를 눌렀을때 발생
- 값을 나오게 하려면 e.target.value를 사용
- keycode를 참고 - 주로 사용하는 Enter(13), Esc(27)은 숙지

내장함수를 이용한 CRUD
⬆짜장면입력!⬆추가버튼클릭!⬆커피 더블클릭!

//crud.js
import React, { useState } from 'react';

const Crud = () => {

    const [ food, setFood ] = useState([
        { id : 1, text: "삼겹살" },
        { id : 2, text: "회덮밥" },
        { id : 3, text: "커피" },
        { id : 4, text: "김밥" },
    ]);

    const [ inputText, setInputText ] = useState("");
    const [ nextId, setNextId ] = useState(5);

    const foodList = food.map( foods => <li key= { food.id } onDoubleClick={() => onRemove( foods.id ) }> { foods.text } </li> );

    const onChange = ( e ) => setInputText( e.target.value );
    
    const onClick = () => {
        const nextfood = food.concat({
            id: nextId,
            text: inputText
        })
        setNextId( nextId + 1 );
        setFood( nextfood );
        setInputText("");
    }

    const onRemove = id => {
        const nextfood = food.filter( food => food.id !== id );
        setFood( nextfood );
    }

    return(
        <div>
            <input type="text" value={ inputText } onChange={ onChange } /> 
            <button onClick={ onClick }>추가</button>
            { foodList }
        </div>
    )
}
export default Crud;

map()
- 요소에 대한 조건에 따라 새로운 배열을 만든다.
- forEach 와 유사한 반복문!
```
 const a = [1,2,3];
  const b = a.map(num => num * num);
  // b = 1, 4, 9
```

filter()

조건을 통과?!한 요소의 배열을 반환한다.(삭제)

 const a = [1,2,3];
  const b = a.filter((n) => { return n != 1});
  // b = 2,3

concat()
- 기존배열에 새로운 원소가 추가된 배열을 만든다(추가)

```js
 const a = [1,2,3];
  const b = a.concat(4);
  // b = 1,2,3,4
```

🧶Node.js 3

node.js 웹소켓 socket.io에 대해서 배워보자!!

네트워크
- 네트워크는 Net + Work 의 합성어로써 컴퓨터들이 통신 기술을 이용하여 그물망처럼 연결된 통신 이용 형태를 의미
- 두 대 이상의 컴퓨터들을 연결하고 서로 통신할 수 있는 것
통신
- 사람 또는 기계들 간의 여러 종류의 매체를 이용하여 정보를 전달 하는 과정
프로토콜
- 디바이스 간에 데이터를 주고 받을 때 사용하는 상호간의 규칙 !
- 3요소 : 구문, 의미, 타이밍
웹소켓
- Transport protocol의 일종으로 서버와 클라이언트 간의 효율적인 양방향 통신을 실현하기 위한 구조
- 서버와 브라우저 사이에 양방향 소통이 가능
- 웹에서도 채팅이나 게임, 실시간 주식차트와 같은 실시간이 요구되는 응용프로그램의 개발을 한층 효과적으로 구현할 수 있음
Socket.io
- 실시간으로 상호작용하는 웹 서비스를 만드는 기술인 웹소켓을 쉽게 사용할 수 있게 해주는 모듈
- 작동원리 : 서버와 클라이언트간의 웹소켓 연결을 HTTP 프로토콜을 통해 이뤄지고, 연결이 정상적으로 이뤄지면 서버와 클라이언트 간에 웹소켓 연결 (TCP/IP기반)이 이루어지고 일정 시간이 지나면 HTTP 연결은 자동으로 끊어집니다.
- 설치 : npm install --save socket.io

socket.io 를 이용한 웹소켓 사용

app_socket_io.js : 서버사이드

const express = require( 'express' );      
const app = express();                    
const port = 8000;  

const http = require( "http" ).Server( app );
const io = require( "socket.io" )( http );

app.set( "view engine", 'ejs' );          
app.set( " views", __dirname + "/views"); 

app.get('/', ( req, res ) => {
    res.render( 'socket' );
});

io.on( "connection", function ( socket ) {
    console.log( "socket connected");

    socket.on ( "aaa", () => {
        console.log( "aaa" );
    });
    
    socket.on ( "bbb", () => {
        console.log( "bbb" );
    });

    socket.emit( "ccc" );

    socket.on('disconnect', function(){
	 console.log('server disconnected');
    });

});

http.listen ( port, () => { 
    console.log( "8000!" );
});

socket.ejs : 클라이언트사이드

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
	<script>
            let socket = io.connect();
            socket.emit( "aaa" );
            socket.emit( "bbb" );

            socket.on( "ccc", function( data ) {
                alert( "ccc" );
            });

        </script>
    </head>
    <body>
        <h1> Socket View 파일입니다. </h1>
    </body>

socket.on('이벤트 명', Callback Function)
- 해당 이벤트를 받고 콜백함수를 실행
- 통신을 받는다 즉, 수신
socket.emit('이벤트 명', Data)
- 이벤트 명을 지정하고 데이터를 보냄
- 통신을 보낸다 즉, 송신
connection 이벤트
- Client 와 연결되었을 때 발생
disconnection 이벤트
- Client 와 연결해제되었을 때 발생

💦문제해결

💣💣💣💣💣💣💣💣💣💣💣💣💣

Warning : Each child in a list should have a "unique" key prop.
-> index 추가하고 key 값을 index로 줌으로써 해결
( 공식문서에 index 사용하지말것을 권고;;)

TypeError: socketio is not a function
-> 에러가 이거랑 비슷했는데 정확히 기억이 안난다.
-> npm install socket.io 가 되지 않고 뜬 에러로써, node, npm 버전을 새로 업데이트 해준후 npm install socket.io@2.30 으로 특정 버전을 설치해주어 해결 참고
-> 아래의 방법대로 업그레이드
```
> npm cache clean -f
> npm install -g n
> n latest     
> n 12.22.6
> node -v
```