# 211012 TIL

# 211012 TIL

장기현장실습

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 부분도 제거할 수 있다.

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

npm init을 하면 package.json 파일이 생성된다. npm i react react-dom으로 react와 react-dom을 설치해준다. npm i -D webpack webpack-cli으로 webpack, webpack-cli를 설치해준다. -D 옵션은 개발 환경에서만 사용한다는 의미이다. 웹팩을 실제 서비스 환경에서 사용하지는 않는다. webpack.config.js 생성하고, 파일안에 내용을 작성해준다. .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 명령어를 사용하면 위의 과정을 자동으로 해준다.

from http://dass-develop.tistory.com/50 by ccl(A) rewrite - 2021-10-13 10:01:11