다시 영영사전으로 돌아왔다. 결국 단어라는 게 문맥 속에서 그 의미가 나타나기 때문에 최대한 많은 예문을 보는 게 낫겠다는 생각이 들었다. 그리고 확실히 두 번째 읽고 있는 River Boy가 더 잘 읽힌다. Mockingjay를 끝으로 판타지나 SF는 조금 더 나중에 읽어야겠다는 생각이 든다. 아무래도 지금 현실에 기반을 두지 않다 보니 현실에서는 사용되지 않는 새로운 단어들도 많고, 내 멋대로 상상하게 되는 경우가 비일비재해진다. 일단 먼저 기본에 충실해야야겠다.
Mockingjay는 재미없다. 그런데 이게 내 이해와 관련된 게 아닐까 걱정된다. 중간중간 흐름이 끊어진 채로 읽는 느낌인데, 하필 내가 이해하지 못한 부분이 책의 핵심 내용이었다거나 하는 경우라면 재미가 없을 수밖에 없을 것 같긴 하다. 아무래도 나중에 한번 더 읽어 봐야 할 것 같다.
영한사전으로 단어를 찾으니....속시원하다. 그동안 Oxford Learner's Dic.을 이용해서 단어를 찾고 quizlet에 정리하는데 시간을 굉장히 많이 쏟았었는데, 그냥 네이버 영한사전에서 검색하고 바로 클릭해서 단어장에 입력하는 것으로 방법을 바꿨다. 단어를 외우는데 집중하는게 아니라, 그 의미만 기억하는 방법으로. 단어들이 머리속에 떠오르는 어떤 이미지로 기억된다면 한국어든 영어든 상관이 없지 않을까 생각이 들었다. 일단은 이 방법으로 최대한 많이 책을 읽어봐야겠다.
npm init --yes (--yes or -y : npm 초기화시에 물어보는 여러 질문들을 넘기는 명령어)
--yes(-y) 명령어를 입력하면 아래 사진과 같이 가장 기본적인 내용만 package.json에 담기게 된다.
b. .gitignore 설정
아래 사진과 같이 gitignore.io 사이트에서 키워드를 넣고 Create 한 후 나온 텍스트로 .gitignore 파일 생성
2. 필요한 패키지 설치
패키지는 개인, 팀 별로 천차 만별일테니 참고만.
a. devDependencies
1. npm i @babel/core @babel/node @babel/preset-env --save-dev(node가 이해할 수 있는 문법으로 변경) 2. npm i eslint-config-prettier --save-dev(eslint-config-prettier : prettier와 충돌할 설정들을 비활성화) 3. npm i eslint-plugin-prettier --save-dev(eslint-plugin-prettier : eslint에 prettier의 포매팅 기능을 추가) 4. npm i nodemon --save-dev(nodemon : 코드 수정 시 자동으로 서버 재시작)
5. npm i prettier-plugin-prisma --save-dev(prettier-plugin-prisma : prisma 사용 시 prettier 기능 적용)
6. npm i prisma --save-dev(prisma : 데이터베이스에 대한 접근을 쉽게 하도록 도와주는 소프트웨어) b. dependencies 1. npm i @prisma/client --save(@prisma/client : prisma를 이용하여 DB 제어) 2. npm i bcrypt --save(bcrypt : 암호화 관련 패키지) 3. npm i cors --save(cors : 브라우저에서 다른 출처의 리소스를 공유)
4. npm i dotenv --save(dotenv : .env 파일로부터 환경 변수를 읽어 들임)
5. npm i express --save(express : Node.js 웹 애플리케이션 프레임워크)
6. npm i jsonwebtoken --save(jsonwebtoken : 유저 정보가 담긴 JSON 데이터를 암호화해서 클라이언트와 서버 간 전달 가능)
최종적으로 설치된 패키지(package.json)
3. 환경 설정
환경 설정 역시 개인, 팀 별로 다를 테니 참고만.
a. .babelrc 설정 및 package.json script 수정(start 추가)
// .babelrc
{ "presets": ["@babel/preset-env"] }
// package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon server.js --exec babel-node" // 추가
},
b. .env 설정
.env는 환경변수 파일로 key = value 형태로서 변수로 설정된 key에 해당하는 값을 process.evn.key 형태로 사용이 가능하다.
// .env
DATABASE_URL="mysql://USERNAME:PASSWORD@localhost:3306/DB_NAME" // mysql 사용
PORT = 8080
SECRET = testproject // jsonwebtoken 검증시 필요
위 명령어를 실행한 폴더 하위에 'test-project'이라는 폴더가 생기면 CRA 설치 완료. 해당 폴더를 vsc로 열면 아래와 같은 폴더 구조를 갖게 된다.
vsc에서 터미널(단축키: cmd + j)을 열어 npm start 명령어를 실행하면 아래와 같이 정상적으로 실행이 되는 것을 확인할 수 있다.
2. 필요한 패키지 설치
패키지는 개인, 팀 별로 천차 만별일테니 참고만.
패키지 설치시 package.json 파일에 해당 패키지가 추가가 되는지 꼭 확인한다. 만약 추가가 되어 있지 않으면 해당 프로젝트를 다른 사람이 clone 받았을 때 패키지를 설치할 수가 없다.
<패키지 설치 옵션 간단 설명> --save : dependencies에 추가됨(npm5 이상부터 생략 가능)(dependencies : 실제 애플리케이션 운용에 필요한 패키지) --save-dev(또는 -D) : devDependencies에 추가됨(devDependencies : 개발에 필요한 패키지)
a. devDependencies 1. npm i eslint-config-prettier --save-dev(eslint-config-prettier : prettier와 충돌할 설정들을 비활성화) 2. npm i eslint-plugin-prettier --save-dev(eslint-plugin-prettier : eslint에 prettier의 포매팅 기능을 추가) 3. npm i prettier --save-dev --save-exact(--save-exact : 버전이 달라지면서 생길 스타일 변화를 막기 위함) b. dependencies 1. npm i react-router-dom --save(react-router-dom : router 사용) 2. npm i styled-components --save(styled-components : javascript에서 css 사용이 가능한 스타일링 프레임워크) 3. npm i styled-reset --save(styled-reset : css 설정 초기화)
a. public 폴더(아래 사진) - images 폴더 생성 - 불필요한 파일 삭제 - index.html에서 불필요한 부분 삭제 및 추가
b. src 폴더(변동이 많기 때문에 자세한 코드는 아래 github에서 확인) - 불필요한 파일 삭제 - components, pages, styles 폴더 생성 - Routes.js 파일 생성(react-router-dom 패키지를 사용할 경우) - config.js 파일 생성(API를 일괄적으로 관리해주기 위한 용도) - GlobalStyle.js, Theme.js 파일 생성(styled-components 패키지를 사용할 경우)
5. 최종 결과물
위와 같이 초기 설정을 해서 나온 결과물은 아래 그림과 같다. 코드는 아래 gitghub에서 확인 가능!
그동안 모르는 단어가 나오면 oxford learner's dictionaries에서 찾고 quizlet을 이용해서 정리를 했었는데, 생각보다 시간이 많이 걸렸다. 그리고 영영사전으로 단어를 찾으니 뭔가 그 단어에 대한 개념이 정확히 꽂힌다는 느낌이 들지 않았다. 결국 다시 영영사전으로 돌아가긴 하겠지만, 오늘부터는 일단 많은 단어를 접해야겠다는 생각에 영한사전으로 단어를 빠르게 익히는 방법으로 변경했다. 그래서 그런가 확실히 읽는 속도는 빨라진것 같다.
