# 211013 TIL

장기현장실습

SNU 성문 분석

• 현재 작성된 포맷에 맞게 이미지 이름과 버전을 작성하여 docker build 
  • 빌드가 성공적으로 완료되어 docker images 명령어로 이미지가 생성된 것을 확인함 
  • sudo docker push [이미지이름] 명령어로 해당 이미지를 gitlab에 push함 
• yarn start로 클라이언트 애플리케이션이 로컬에서 잘 돌아가는 것을 확인 
  • 빌드와 셋업파일 생성을 위해 yarn package함 
  • 생성된 셋업 파일 중 msi 설치 파일로 성문분석 프로그램 설치 
    • 분석 시, 특정 파일을 선택할 때 빈 화면이 뜨면서 오류 발생 
      • Json.parse 관련인데 undefined 되어 오류 뜨는 것으로 확인  
• 외부에서 서버 ip로 접근할 수 있도록 세팅해야함 
  • 브라우저에 게이트 주소를 입력하여 포트포워딩을 설정해주면 됨 
    • 게이트 주소는 traceroute lael.be 명령어를 실행시키면 나타난다. 
    • 해당 주소로 접속하여 로그인 한 후, 외부 포트 범위를 지정해주면 된다. 
      • 외부 포트 범위는 외부 IP 주소:외부 포트로 접근하면 내부 IP 주소:내부 포트로 변환해주는 역할을 한다. 

 

 

리액트 학습하기

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

웹팩으로 빌드해보고 바벨 적용하기, 웹팩 데브 서버와 핫 로딩, 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔보기

 

@babel/preset-env 안에는 여러 개의 플러그인이 있다. 그 플러그인 마다의 설정을 해줄 수 있는데, 아래의 코드 처럼 작성하면 된다.

 

webpack.config.js

module: {
  rules: [{
	test: /\.jsx?/,
	loader: 'babel-loader',
	options: {
	  presets: [
		['@babel/preset-env', {
		  targets: {
			browsers: ['> 5% in KR', 'last 2 chrome versions'], // browserslist
		  },
		  debug: true,
		}],
		'@babel/preset-react'
	  ],
	  plugins: ['@babel/plugin-proposal-class-properties'],
	},
  }],
},

 

추가적으로 하고 싶을 때, plugins을 작성하면 된다. loaders(module → rules)에 있는 plugins과는 다르다.

entry → loaders → plugins → output 순서로 작성하면 흐름이 맞는다.

 

• input 에 value를 넣을거면 onChage를 함께 써야하고, 그게 아니라면 value 대신 defaultValue를 넣어주면 된다.
• 웹팩을 수동으로 빌드하면 코드를 수정할 때 마다 명령어를 입력해야 하는데, 불편하니까 자동으로 빌드하는 방법을 알아보자.
  • 리로딩: 새로고침 → 새로고침하면 모든 데이터가 초기화되어 다시 나타남
  • 핫리로딩: 새로고침하지 않고 수정사항을 바로 반영해줌 → 데이터를 저장해두고 변경된 부분만 바꿔줌

 

참고

[HMR] → hot module reloading

[WDS] → webpack-dev-server

 

 

백준 단계별로 풀어보기

1단계: 1, 2, 3단계 풀기 완료!

[js/node.js] 백준 2557번: Hello World

 

[js/node.js] 백준 10718번: We love kriii

 

[js/node.js] 백준 10171번: 고양이

백틱... !!!! 템플릿 리터럴을 사용하자!!