오류 발생 과정

dotenv 설치 및 .env 파일 작성

.env 파일에서 설정한 환경변수를 사용하기 위해 dotenv 라이브러리를 Node.js 프로젝트에 설치

$ npm i dotenv

환경변수 불러오기

dotenv 라이브러리를 import 코드를 env.js파일로 분리

// env.js

import dotenv from "dotenv"

dotenv.config()

// main.js

import "./env.js"

const API_KEY = process.env.API_KEY

에러 발생 시작

node -r 옵션 사용

node -r dotenv/config index.js

에러 변화 없음

오류 해결

1. dotenv-webpack 설치

웹팩 사용중으로 별도 웹팩 패키지가 있다는 것을 보고 설치

npm install -d --save dotenv-webpack

2. webpack.config.js 파일 내용 추가

// webpack.config.js

const Dotenv = require('dotenv-webpack')

module.exports = {
  plugins: [
    new Dotenv()
  ],

  resolve: {
    fallback: {
        "fs": false,
        "path": false ,
        "os": false
    }
  }
}

해결 완료

참고자료

• dotenv로 환경 변수 관리하기 (www.daleseo.com/js-dotenv/)
• Module not found: Error: Can’t resolve ‘fs’ in (https://dtuto.com/)
• [React] Webpack 환경에서 환경변수 사용 (https://bum-developer.tistory.com/)

1. 메뉴얼 (Manual)

• $ man {명령어} : (Manual) 명령어의 메뉴얼을 보고싶을 때 사용

• $ {명령어} --help : flag(=option) 볼 수 있음(zsh은 안됨)

• $ clear : 작성한 명령어 내역들을 지움 (삭제X)

• $ open {폴더or파일} : 작성한 명령어 내역들을 지움 (삭제X)

  man 사용 예시

  메뉴얼 보기 종료는 “q”입력

2. 파일 시스템 탐색하기 (Navigating file system)

• $ pwd (Print Working Directory) : 현재 나의 위치를 절대경로로 보여줌

• $ ls {폴더명} (List) : 현재 위치하는 디렉토리 안의 폴더와 파일들을 보여줌 지정한 폴더의 목록을 보고싶을 때 사용

  • ls 옵션
    • $ ls -l (long) : 목록을 상세정보까지 보여줌 (이름, 사이즈, 저장시간, 파일 소유주..)
    • $ ls -a (all) : ui상에 보이지 않는 숨긴 파일을 포함하여 보여줌
    • $ ls -al (long all) : 목록을 숨겨진 파일과 상세정보까지 보여줌

• $ cd {폴더명} (Change Directory) : 현재 나의 위치를 절대경로로 보여줌

  • cd 이동 키워드
    • $ cd ~ : 현재 사용자의 최상위(홈) 경로 이동
    • $ cd . : 현재 경로 이동 (변화X)
    • $ cd .. : 상위 경로 이동
    • $ cd - : 직전 이동경로 이동

• $ find 찾을경로 -type {종류} -name “찾고싶은 이름” : 파일 시스템에서 특정 파일이나 폴더를 찾을때 사용

• which {프로그램명} : 프로그램 설치, 설정된 위치 경로 확인할 때 사용

  
  

예시

현재 경로와 하위에 있는 모든 폴더에 한해서 텍스트 파일을 찾고 싶을때

3. 파일 생성 및 관리하기 (Create and manage files)

• $ touch {생성할파일명.확장자} : 새로운 파일 생성할때 사용 존재하는 파일 작성시 수정날짜가 touch작성 시점으로 업데이트 됨

• $ cat {파일명} : 파일 안의 내용을 터미널을 통해 볼때 사용

• $ echo : 문자열을 터미널에 출력할 때 사용, 보통 >와 함께 사용

  • $ echo “문자열” > 생성파일명.확장자 : 파일 생성과 동시에 “문자열” 내용을 반영해 줌 ※ 주의!) 동일한 파일명을 쓸 경우 새로운 “문자열”로 덮어씌워짐
  • $ echo “문자열” >> 생성파일명.확장자 : 기존 파일명을 사용하면 “문자열”이 추가됨

• $ mkdir {폴더명} (Make Directory) : 새로운 폴더를 생성할 때 사용

  • $ mkdir -p {생성폴더명/하위폴더명/하위폴더명} : 경로이동 없이 하위폴더 함께 생성

• $ cp {파일명} {경로(./ ../ ~/)} (Copy) : 파일 복사할 때 사용

• $ mv {파일명} {경로(./ ../ ~/)} (Move): 파일 이동할 때 사용 $ mv {파일명} {변경할파일명} : 파일 이름 변경할 때 사용

  
  

• $ rm {파일명} (Remove) : 파일 삭제할 때 사용

  • $ rm -r {폴더명} : 폴더와 폴더 하위 파일 모두 삭제할 때 사용 (삭제여부 물어봄)
  • $ rm -rf {폴더명} : 폴더와 폴더 하위 파일 모두 강제 삭제

• $ grep “키워드” {*.확장자} (Global regular expression print) : 특정파일에 포함된 키워드를 검색할 때 사용

  • $ grep -n “키워드” {*.확장자} : 키워드가 몇번째 줄에 있는지도 표시함
  • $ grep -ni “키워드” {*.확장자} : 대소문자 구분없이 키워드 검색
  • $ grep -nir “키워드” {경로(./ ../ ~/)} : 지정 경로를 포함한 하위경로에 있는 모든 파일에서 검색

echo 예시

4. 환경 변수 설정하기 (Work with environment variables)

• $ export {변수명}=”설정값” : 환경변수를 설정할 때 사용

• $ unset {변수명} : 설정한 변수를 삭제할 때 사용

• $ env : 내가 설정한 모든 환경 변수를 볼 때 사용

• $ {변수명} : 환경변수를 불러올 때 사용

환경변수란 내 컴퓨터에서 특정한 키워드가 어떠한 일을 하거나 경로를 저장할 수 있도록 만듦 환경변수는 보통 대문자로 만들며 구분자는 _(언더바)를 사용해 변수명을 설정할 수 있음

• 참고자료: https://www.youtube.com/watch?v=EL6AQl-e3AQ