데이터 바인딩(Data Binding)과 MVVM (Vue, React)UI(View)와 데이터(Model)를 자동으로 연결해주는 기술즉, 데이터가 바뀌면 UI도 자동으로 바뀌고 UI가 바뀌면 데이터도 자동으로 바뀌는 연결 구조 종류타입설명예시단방향 바인딩(One-way)데이터 -> UI만 반영React 기본 방식 (Props)양방향 바인딩 (Two-way)데이터 UI 상호 반영Vuew의 v-model, Angular의 {(ngModel)} MVVM (Model-View-ViewModel) 패턴데이터 바인딩을 체계적으로 적용하기 위한 아키텍쳐 패턴구성요소역할Model실제 데이터 또는 상태 (API 응답, 사용자 정보 등)View화면(UI) - 사용자에게 보여지는 부분ViewModelView와 Mo..
Express, Socket.io를 사용하여 채팅구현하기 - (4) 채팅 구현
채팅 기능 구현 기본 동작은 이해했으니 진도를 쭉 나가겠습니다. 구현해야하는 기본 기능을 먼저 확인해보겠습니다. > 추가할 기능 TODO - 사용자가 들어오고 나가는 부분을 캐치하여 서버가 안내하는 말을 노출한다. - 메세지를 전송하고 받아야한다. - 스타일을 입힌다. > 사용자가 들어오고 나가는 부분을 캐치하여 서버가 안내하는 말을 노출한다. 입장할 때 작성했던 connection이 기억나는가요? 퇴장할 때 이벤트도 같은 곳에 추가합니다. 사용자가 입장 시(소켓연결) 발생하는 이벤트 호출에 대한 바인딩 작업은 app.js의 connect 콜백함수 내부에서 작성되었습니다. // app.js io.sockets.on('connection', function(socket){ socket.on('newUser..
Express, Socket.io를 사용하여 채팅구현하기 - (3) 통신 기본 세팅
socket.io 모듈을 사용해 통신 기본 설정하기 > 클라이언트 스크립트 파일 생성 후 로드시키기 src 하위에 js 폴더를 생성하고 그 안에 index.js 파일을 생성합니다. 폴더구조는 아래와 같습니다. 통신 스크립트를 추가하기 전에 앞서서 index.html에 관련 js 파일을 로드합니다. // index.html welcome index.js는 생성했는데, socket.io.js도 생성해야하나요? 라고 질문하신다면 아니라고 답하겠습니다. socket.io.js는 서버 실행 시 자동으로 생성되기때문에 welcome 문구를 지우고 동적인 값을 넣기 위해 div 태그에 id값을 넣었습니다. // app.js io.sockets.on('connection', function(socket){ socket..