오늘 한 일
어제 정보처리기사 실기 파트 프로그래밍 부분을 한번 다 봤으니 오늘은 SQL 응용 부분을 봤다. 어제 했던 비트연산보다 SQL이 더 재밌었다... 프로시저나 트리거, 사용자정의함수 등은 한 번도 사용해본 적이 없는데 이번에 알게 되었다.
사실 개념들을 주관식 혹은 서술형으로 써야 되는걸 생각하면 이론적인 내용을 한번 손으로 써보긴 해야될 것 같은데 엄두가 안 난다..ㅎ 일단 컴퓨터로 한 번 정리 후 프린트해서 적을까 싶다.
그리고 마침 인프런 세일 중이라 요즘 관심 생긴 DevOps나 docker 등도 공부해보려고 강의를 하나 더 결제했다. 사실 이미 보고 공부할 것 많긴 한데.. 욕심부렸다..ㅎㅎ
정처기 공부 후 어제 이상했던 dev-server를 확인해보니 역시 수정사항이 전혀 반영 안되는 상태라 이 문제부터 찾아봤는데 잘 모르겠다. 핫 리로딩 기능 없이 그냥 wepback 빌드하면서 강의를 계속 들어야될지 고민이다ㅠ
정보처리기사 실기 - SQL응용
시나공 2020 섹션 8 부분 읽고 문제 풀이 완료 (마지막 예상문제은행은 제외)
리액트 dev-server으로 빌드 시 변경사항 반영 안 되는 문제
현재 jsx 모듈 파일이나 client.jsx파일 등을 변경한 후 script에 dev로 저장한 webpack serve --env development 명령어로 빌드하면 지금까지의 변경사항이 전혀 반영되지 않은 옛날 자료로 빌드되는 상태이다. 결국 entry로 넣은 파일을 가지고 app.js를 새로 만들어야 하는데 그러지 않았다는 것 같은데 원인을 모르겠다.
일단 다음 강의들은 webpack으로 빌드하면서 따라가서, 새로운 프로젝트 시작하면 다시 설정해봐야겠다.
// webpack.config.js
const path = require('path');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
// webpack 기본설정
name: 'word-relay',
mode: 'development',
devtool: 'eval',
resolve: {
extensions: ['.js', '.jsx']
},
// entry (input)
entry : './client' ,
// module.rules
module: {
rules: [{
test: /\.jsx?$/,
loader: require.resolve('babel-loader'),
options: {
presets: [
['@babel/preset-env', {
targets: {
browsers: ['> 5% in KR'],
},
debug: true,
}],
'@babel/preset-react'
],
plugins: [require.resolve('react-refresh/babel')].filter(Boolean),
},
}],
},
// plugins
plugins: [
new RefreshWebpackPlugin(),
new LoaderOptionsPlugin()
].filter(Boolean),
// output
output: {
path: path.join(__dirname, 'dist'), // 실제 경로
filename: 'app.js',
publicPath: './dist' // 가상 경로 express.static과 비슷
},
// dev server 설정
devServer : {
devMiddleware: { publicPath: './dist'}, //webpack이 빌드한 파일 위치
static: { directory: path.resolve(__dirname) }, // 실제 존재하는 정적파일 경로
hot: true,
},
};webpack dev server 빌드 시 app.js가 아닌 listing directory 뜨는 문제
dev server 업데이트 안 되는 문제를 해결해보려고 경로를 이리저리 바꾸다보니 이런 에러가 있었다. 내가 만들어 둔 app.js가 아닌 이상한 페이지가 뜬 것인데, 찾아보니 dev server 이용 시 경로를 잘못 적으면 발생하는 에러인 것 같았다.
현재 webpack.config.js에 경로를 적어야 하는 부분이 많은데, 문제를 일으킨 부분은 devServer.static.directory 부분으로 추정된다.
devServer : {
// 기존
static: { diectory : path.resolve(__dirname) },
// 바꿨더니 에러
static : { directory : path.join(__dirname, 'dist') },
...
}사실 path.resolve와 path.join이 무슨 차이인지 모르고 그냥 webpack-dev-server나 pmmmwh/react-refresh-webpack-plugin 공식문서에서 소개하는 예제 코드를 복사했더니 이런 문제가 있었다.
물론 위 코드에서는 함수 두번째 인자로 폴더명이 들어갔는지 여부에서 차이가 난 것 같지만 이참에 path.join()과 path.resolve()의 차이를 찾아보았다.
path.join() vs path.resolve()
path.join()
string인자들을 받아 모두 합쳐 하나의 path로 반환- 왼쪽부터 하나씩 합쳐나감
- ''와 같이 길이가 0인 문자열은 현재 작업 중인 디렉토리인 '.'로 변환
string이 아닌 인자가 들어오면TypeError발생- 참고: node-path.join() 공식문서
path.resolve()
string인자들을 받아 모두 합쳐 하나의 절대경로(absolute path)로 반환- 오른쪽부터 하나씩 합쳐나감
- 절대경로를 만나면 통합을 종료하고 거기까지의 결과물 반환
- 문자열이 /로 시작하면 절대경로 취급
// baz -> /bar/baz
path.resolve('/foo', '/bar', 'baz');- ''와 같이 길이가 0인 문자열은 무시
- 아무 인자 없이
path.resolve()로 사용하면 현재 작업 중인 디렉토리의 절대경로 반환 - 참고: node-path.resolve() 공식문서
