지난글:https://gall.dcinside.com/programming/1361406




오늘은 어제 하다 말은 웹팩 마스터하기와 소켓을 복습하기로 했다

웹팩은 대충 흐트므르에서 js파일을 불러다 쓰는데

로드할 파일이 많을수록 속도가 느려지거 여러가지 문제가 많아서

이 파일을들 하나로 합쳐주는 역할이라 하더라


js뿐만 아니라 이미지,css같은 파일도 다 번들링이 가능하다캄

import React from 'react'; import ReactDOM from 'react-dom'; import Style from "./App.css"; import Icon from './logo.png'; import Json from './data.json'; import Text from './data.txt'; function App() { return ( <div className='container'> <h3 className='title'>webpack example</h3> <div>{`name : ${Json.name}, age : ${Json.age}`}</div> <div>{`text : ${Text}`}</div> <img src={Icon}/> </div> ) } ReactDOM.render(<App/>, document.getElementById('root'))

이 예제는 js안에 여러가지 파일을 모다가지고

웹팩으로 처리하는 예제인데 

html에서 일일이 태그써서 임포트 안하고 저걸 컴파일한 파일 하나만 불러오면 된데나

하여튼 조낸 복잡하다 

const path = require('path') module.exports = { //... module:{ rules:[ // ... { test:/\.(png|jpg|gif)$/, use : 'file-loader' }, { test : /\.txt$/, use : 'raw-loader' }, ], }, mode : 'production' };


webpack.config.js 라는 파일을 만들고

그안에다가 설정을 해줘야한다 위 예제만 봐도 괄호 지옥이 보인다




이번에도 내가 대충 알아들을수있을 정도로 정리를 쌋다





다음으로 어제 봤던 socket.io를 복습하면서 예제로 채팅사이트를 만들어봤다


클라이언트 설정



서버쪽 설정



원래라면 도큐먼트에 채팅 내용이 떠야하지만 귀찮다

그냥 되는거만 확인하면 되니까 간결하게 콘솔에다 채팅내용을 띄운다




실제 동작 모습


소켓도 대충 예제를 만들면서 대략적인 개념을 잡았다








그리고 이제 실제 게임 제작에 앞서

먼저 예제 프로젝트 구조를 한번 살펴봤다




클라이언트쪽 네트워크 설정을 쓴 파일이다

프로젝트 구조 보는데

player.js , input.js 등등

진짜 각각의 기능 하나하나를 칼같이 구분해서 각자의 js파일에다 써놨더라

하나의 파일은 진짜 단 하나의 기능을 위해서만 존재하고 다른건 일체 없음

아직 현업 경력 없는 국비충으로썬 감탄을 금치 못했다



그런데 윗줄에 import문에 socket.io-client랑

쓰로틀은 대체 뭐하는건가 싶었는데

알고보니 백엔드에서 패키지로 받아논걸 임포트 하면 프론트에서도 그냥 쓸수가 있는거더라

제이쿼리를 <sexcript src='cdn주소</span><span style="background-color: rgb(140, 140, 140); color: rgb(255, 255, 255);">'> </sexcript>로 불러다 쓰는게 아니라

npm 패키지 받은걸 그냥 임포트 해서도 가능하다는거임



프로젝트 패키지





그리고 이건 클라랑 서버공용으로 쓰는 상수 집합이던데

오브젝트 동결까지 해놓은거 보면 존나 FM인듯



어제 오늘 웹팩이랑 소켓 공부를했다

오늘은 한 4시간정도 했는데

내 대가리로는 생각보다 진도가 많이 더딤

그래도 차근차근 배워나가야지 뭐


여튼 시작전에 기본적인 기능을 뗏으니 이제 

진짜 프로젝트를 시작한다 

근데 중간중간 또 뭐하나 배워야할 개념있으면 중간으로 세서

개념 확립부터하고 다시 진행할 예정임