TIL

# 211012 TIL

inthess 2021. 10. 13. 09:50

장기현장실습

SNU 서버 세팅

  • snu repository에 초대 받고 설명 들음  
    • analysisapp: 클라이언트 코드 (vue.js로 작성됨) 
    • analysisapp_react: 클라이언트 코드 → analysisapp을 react로 작성한 코드 
    • analysissite: 서버 코드 
    • analysissite_v1: 서버 코드 중, 엔진을 바꾸면서 따로 뺀 코드 

 

  • 프로젝트를 빌드해서 다른 원격 프로그램에서도 설치할 수 있도록 하자. 
  • package.json의 script를 보면 package-win이 있는데, 이는 윈도우 환경에서 설치할 수 있는 셋업파일도 함께 만들며 빌드해준다. 윈도우 환경에서 package-win을 실행하자. 그런데 빌드하는 과정에서 여러 오류가 발생할 수 있으니 주의할 것. 그리고 win의 target이 nsis, msi가 있는데 만약 nsis 관련 오류가 난다면 msi만으로 커버할 수 있기 때문에 넘어가도 된다. 
  • 스피커넷 2번째걸로해야함, Cuda 가 아니면 돌아가지 않음, GPGPU 

 

  • snu 레포에서 setup_docker_repository.sh 의 내용을 터미널에서 직접 쳐보면서 서버 세팅을 함 
  • 이후, ifconfig 명령어를 통해 서버의 ip 주소를 확인함 → 192.168.1.31 
  • 이 ip 주소를 yarn build한 클라이언트 앱에 넣어 해당 프로그램이 잘 작동하는지 확인 
    • 1:1 성문분석 시, 다른 사람의 목소리를 비교했음에도 99%가 뜨는 문제 발생 
    • 이 문제는 이미지 0.0.3에 해당하는 Dockerfile이 잘 적용되지 않았음을 의미 
  • 따라서, 
    • analysissite 폴더에 있는 Dockerfile을 docker build —tag [이미지 이름]:0.0.5 . 명령어로 빌드시켜 어떤 부분에서 에러가 나고 어떤 부분이 적용이 되지 않은 건지 파악  
      • 직접 Dockerfile을 수정해도 되고, docker exec it [컨테이너 id] /bin/bash 명령어를 통해 컨테이너에 직접 들어가서 파일을 수정해도 됨 
    • 빌드가 오류 없이 잘 완료되어 이미지가 생성되었기 때문에, 해당 이미지로 docker-compose.yml의 이미지 부분을 수정해줌 
    • docker-compose down으로 기존에 실행되던 서버를 꺼주고, 다시 docker-compose up으로 0.0.5 이미지가 반영된 서버를 실행시켜줌 
    • ip 주소로 접속해서, gpgpu 부분이 잘 적용되고 1:1 성문분석 기능도 잘 작동하는 것을 확인 

 

  • 앞으로 해야할 일 
    • 해당 0.0.5 이미지 이름이 dockerfile 이니까 이거를 0.0.3처럼 snu로 바꿔서 빌드하고 setup_docker_repository.sh에 pull 하는 명령어에서 push로만 바꾸면 gitlab에 업로드가 될 것임 그렇게 업로드 하기 
    • 윈도우 환경에서 클라이언트 코드를 yarn package 해서 셋업파일 생성하기 → 해당 파일을 전달해주면 완료! 

 

 

리액트 학습하기

웹 게임을 만들며 배우는 React (15/64)

 

- 웹팩 설치 및 세팅

모듈시스템이 생기면서 자신이 원하는 모듈만 골라서 불러올 수가 있게 되었다. HTML script 태그 하나에 자바스크립트 하나만 불러올 수 있기 때문에 웹팩을 사용한다.

웹팩은 여러개의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어주는 역할을 한다. 하나로 합치는 과정에서 바벨을 적용할 수도 있고, 코드 중간 중간 적혀있는 console.log 부분도 제거할 수 있다.

웹팩하려면 노드를 알아야하는데, 여기서 말하는 노드는 자바스크립트 런타임이다. 웹팩도 자바스크립트를 사용하기 때문이다.

  1. npm init을 하면 package.json 파일이 생성된다.
  2. npm i react react-dom으로 react와 react-dom을 설치해준다.
  3. npm i -D webpack webpack-cli으로 webpack, webpack-cli를 설치해준다. -D 옵션은 개발 환경에서만 사용한다는 의미이다. 웹팩을 실제 서비스 환경에서 사용하지는 않는다.
  4. webpack.config.js 생성하고, 파일안에 내용을 작성해준다.
  5. .jsx를 사용하려면 babel을 적용해야 하는데, 바벨안에서도 jsx를 사용할 수 있도록 설정해야한다. npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader 명령어로 설치한다.

webpack.config.js

const path = require("path");

module.exports = {
  name: 'word',
  mode: 'development',
  devtool: 'eval',
  resolve: {
	extensions: ['.js', '.jsx']
  },
  entry: {
	app: ['./client'],
  },
  module: {
	rules: [{
	  test: /\.jsx?/,
	  loader: 'babel-loader',
	  options: {
		presets: ['@babel/preset-env', '@babel/preset-react'],
		plugins: ['@babel/plugin-proposal-class-properties'],
	  },
	}],
  },
  output: {
	path: path.join(__dirname, 'dist'),
	filename: 'app.js'
  },
};

 

→ create-react-app 명령어를 사용하면 위의 과정을 자동으로 해준다.

저작자표시 (새창열림)