환경변수로 config 보안 수준 높이기.TIL

0. 프로그래머스
1. + number() parseInt() 의 차이점
2. dotenv 로 환경변수 설정하기
3. git 명령어 + commit
4. 프리티어 prettier

공부하며 느낀 점
참조한 사이트

0. 프로그래머스

홀짝 구분하기

단순한 홀짝 구분 문제

const readline = require('readline');
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let input = [];

rl.on('line', function (line) {
    input = line.split(' ');
}).on('close', function () {
    n = Number(input[0]);
    const isEven = n/2;
    
    if (isEven === Math.floor(isEven)){
        console.log (n, "is even")
    } else {
        console.log (n, "is odd")
    }
});

다른 사람의 풀이

   n = Number(input[0]);
    let str = n;
    str+= (n%2===0) ? " is even" : " is odd";
    console.log(str);

문자열을 정수로 변환하기

function solution(n_str) {
    var answer = 0;
    answer = parseInt(n_str)
    return answer;
}

parseInt를 원래 용도인 str을 number로 바꾸는 기능으로 사용하였다.

다른 사람의 풀이

function solution(n_str) {
    return Number(n_str);
}

function solution(n_str) {
    return +n_str;
}

1. + number() parseInt() 의 차이점

• 셋다 문자열로 되어있는 숫자를 number 타입으로 변환한다.

1. + 형변환을 위한 기능은 아니지만, 피연산자를 강제로 숫자로 변환한다.
2. Number() 주어진 값을 숫자로 형변환 한다.
3. parseInt() 문자열을 정수형 숫자로 변환한다.

• + 와 Number()는 문자와 숫자가 섞여있으면 NaN 을 반환한다.
• parseInt() 는 문자열을 만나기 전까지의 숫자만을 반환한다.

const numberNumber = "123456.7";
const numberString = "123사56.7";

console.log("Number(numberNumber) :", Number(numberNumber)); // 123456.7
console.log("+(numberNumber) :", +numberNumber); // 123456.7
console.log("parseInt(numberNumber) :", parseInt(numberNumber)); // 123456
console.log("Math.floor(numberNumber) :", Math.floor(numberNumber)); // 123456

console.log("Number(numberString) :", Number(numberString)); // NaN
console.log("+(numberString) :", +numberString); // NaN
console.log("parseInt(numberString) :", parseInt(numberString)); // 123
console.log("Math.floor(numberString) :", Math.floor(numberString)); // NaN

2. dotenv로 환경변수 설정하기

• dotenv를 사용하는 이유
  aws의 접속키와 같이 구동에 반드시 필요하지만, 남에게는 노출해서는 안되는 정보들이 있다. .gitignore를 사용하여 원격 레파지토리에 올리지 않을 수 있지만 두가지 문제가 있다

1. 있어야할 파일이 올라가지 않으므로 자료를 공유할때 약간의 귀찮음이 발생한다. (키값은 없더라도 파일의 뼈대는 있어야지 작업공유가 쉽다.)
2. 키값이 있는 파일 하나하나마다 예외를 설정해야하는데 오타 또는 망각으로 예외 처리를 못하면 보안사고가 터지게 된다.

dotenv를 사용하면 두 가지가 동시에 해결된다.
.env 파일안에 모든 키값이 들어있으므로, 하나의 파일만 예외처리하면 되기 때문이다. 아주 편리하다.

npm i dotenv : 설치
프로젝트 최 상단 폴더에 .env 파일을 생성한다.

awsId = ImNotId
awsPassword = ImNotPassword

등과 같이 왼쪽에는 변수명 오른쪽에는 넣을 문자열을 입력한다.

불러오고 싶은 js파일 등에서 require('dotenv').config(); 로 불러온 뒤
process.env.awsId 를 하면 된다.
물론 process.env를 그때 그때 치면 비효율적이므로
const env = process.env; 로 선언하여
env.awsId 같은 형식도 가능

사용예시

require('dotenv').config();
const env = process.env;

const s3Client = new S3Client({
  region: 'ap-northeast-2',
  credentials: {
    accessKeyId: env.awsaki,
    secretAccessKey: env.awssak,
  },

json 파일에는 사용할 수 없므로 js파일로 바꾼뒤 사용한다.

{
  "development": {
    "username": "",
    "password": "",
    "database": "",
    "host": "",
    "dialect": "mysql"
  },
  "test": {
    "username": "root",
    "password": null,
    "database": "database_test",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "production": {
    "username": "root",
    "password": null,
    "database": "database_production",
    "host": "127.0.0.1",
    "dialect": "mysql"
  }
}

↑ 변경 전 JSON
↓ 변경 후 JS

require('dotenv').config();
const env = process.env;

const development = {
  username: env.awsec2username,
  password: env.awsec2password,
  database: env.awsec2database,
  host: env.awsec2host,
  dialect: 'mysql',
};
const test = {
  username: env.awsec2username,
  password: null,
  database: 'database_test',
  host: '127.0.0.1',
  dialect: 'mysql',
};
const production = {
  username: env.awsec2username,
  password: null,
  database: 'database_production',
  host: '127.0.0.1',
  dialect: 'mysql',
};

module.exports = { development, test, production };

물론 models/index.js 의 설정도 config.json에서 config.js로 바꿔준다.

추가 : models/index로 해두면 js와 json 모두 읽으며, 우선순위는 js인 것을 직접 확인하였다.

애초에 확장자 없이 해두는 것이 유지 보수에 용이할 것같다.

3. git 명령어 + commit

1. git stash : 임시저장 후 원래로 되돌림
   git stash apply 임시저장 한 거 되돌리기

2. git push/pull <레파지토별명> <브랜치명>
   해당 브랜치 업로드/다운로드 (레파지토리에 브랜치가 없으면 생성)

• commit 스타일 참조
  Git - 커밋 메시지 컨벤션

제목　| type : subject
내용　| 선택사항, 72자 이내의 부연설명 또는 이유
꼬릿말| 선택사항, issue tracker id, 코드 줄번호 등

제목에서 한줄을 띄우지 않으면 내용을 적을 수 없으니 참조할 것

type

* 　   feat : 새로운 기능 추가
* 　    fix : 버그 수정
* 　   docs : 문서 수정
* 　  style : 코드 포메팅, 세키콜론 누락, 코드변경이 없는 경우
*  refactor : 코드 리펙토링
* 　   test : 테스트 코드, 리펙토링 테스트 코드 추가
* 　  chore : 빌드 업무 수정, 패키지 매니저 수정

4. 프리티어 prettier

• 프리티어를 쓰는 이유
  공동 작업을 할 때 코드 스타일을 같게하기 위해
  = 서로의 코드를 읽기 편하게 하기 위함.

VScode에서 prettier 확장프로그램 extension 을 설치한다.

프로젝트 폴더 최 상단에 .prettierrc.js 파일을 생성한다.

//.prettierrc.js

module.exports = {
  singleQuote: true,
  // 문자열은 따옴표로 formatting
  semi: true,
  //코드 마지막에 세미콜른이 있게 formatting
  useTabs: false,
  //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
  tabWidth: 2,
  // 들여쓰기 너비는 2칸
  trailingComma: 'all',
  // 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 	  	//formatting
  printWidth: 80,
  // 코드 한줄이 maximum 80칸
  arrowParens: 'avoid',
  // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
};

내용물의 예시

cntrl + ,을 누른다.

defrault formatter 를 prettier로 바꾼다.

cntrl + shift + p 를 누르고 settings.json을 검색해서 Preferences: Open user Settings (JSON)에 들어간뒤 아래의 내용을 붙여넣는다.

  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },

VScode를 재실행하면 Cntrl + S 또는 Alt + Shift + F 등을 누르면 프리티어의 설정에 맞춰서 코드 스타일이 바뀐다.

공부하며 느낀 점

참조한 사이트

• dotenv
  git ignore
  환경 변수 설정하기

Git - 커밋 메시지 컨벤션

프리티어설정
프리티어설정
프리티어설정
프리티어 초기화
프리티어 초기화