킹미넴의 예민한 코드

빌드때마다 env파일의 주소를 바꾸지 않고 빌드하자.

1. 라이브러리 설치

// bash
npm i env-cmd

혹시 안되면 뒤에 —force

2. package.json > scripts에 명령어 작성하기

"build": "craco build", // 프로덕션으로 빌드
"build:dev": "env-cmd -f .env.development craco build", // dev로 빌드

혹시 에러뜨면 기존 빌드폴더를 프로젝트 폴더에서 삭제하고 다시 명령어 실행

3. 빌드생성

// bash
npm run build:dev

Cypress는 E2E테스트에 주로 활용하는데, cypress만으로도 유닛테스트도 충분히 가능하다.

둘중 하나를 한다, 둘 다 한다가 중요한것 보다 테스트코드를 작성한다.가 더 중요하다!

1. 라이브러리 설치

npm install --save-dev cypress

2. cypress.config.ts 자동생성 확인 및 baseUrl 지정

// 테스트를 실행할 baseUrl을 지정해주고, 해당 환경이 돌아가고 있어야한다.
// cypress.config.ts

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    baseUrl: "<http://localhost:3000>",
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

3. package.json에 실행 단축어 지정

"scripts": {
    "start": "craco start",
    ...
    "cypress": "npx cypress open"
  },

4. 실행 후, 자동 실행되는 GUI에 따라 cypress 실행

<아스키 코드 차트>

https://www.ascii-code.com/codechart

날짜를 선택하면 랜덤으로 이름을 생성해주는 로직을 짜야했는데

말이 랜덤이지 날짜+이전에 존재하는 알파벳의 다음 알파벳

조합이라서 어떻게 할지 고민하다가 아스키코드를 사용해보기로 했다.

const generateUniqueName = (baseName, existingNames) => {
    let code = 65;
    let suffix = String.fromCharCode(code);
    while (existingNames.some((o) => o.name === `${baseName}_${suffix}`)) {
      code++;
      suffix = String.fromCharCode(code);
    }
    return `${baseName}_${suffix}`;
  };
  
  // 사용
  const generatedName = generateUniqueName(`${currentName}_${format(new Date(), "yyMMdd")}`, tempData);

1. 함수에 인자로 basename과, 이미 존재하는 이름들로 이루어진 배열(existingNames)을 담는다.

2. 시작은 무조건 A(=65)로 시작.

3. suffix라는 값을 65를 아스키코드 변환한 값으로 만든다. ( 65 => A)

4. 이미 존재하는 이름들의 배열을 돌면서, 이미 이 이름이 존재하는 한(some), 계속 반복문을 돌리며 ASCII 코드 값을 +1씩 올린다.

5. 이름이 존재 하지 않을때, 최종값으로 return 한다.

6. 현재 이름과 현재 날짜(선택한 날짜)를 baseName으로 만들어서 이름이 들어있는 배열과 함께 함수를 사용한다.

왜 ASCII 코드라는게 있는지 사실 의아했는데 사용해보니 정말 존재해줘서 고맙다..ㅠㅠ

+) To-be

- 사실 이름의 갯수가 알파벳 갯수보다 많아지면 AA,AB 이런식으로 늘리는 로직도 구현해야 하지만

현재 시스템에서 그렇게 길어질 일이 없다고 판단했고 뒤에 다른 개발이 급해서 따로 예외처리는 넣지 않았다.

나중에 꼭 구현해야겠다.

환경설정 새로 할 때 참고하기 위해 적어둔다

1. Auto Import

- component 등 자동 import

2. Code Spell Checker

- 오류로 걸리지 않는 영단어 spell 오타 체크

3. Color Highlight

- 컬러코드 사용시 무슨 색인지 미리 보여줌

4. ES7+ React/Redux/React-Native snippets

- 리액트용 코드 스니펫. 내가 주로 쓰는건 rfce

5. ESLint

- 문법 검사

6. Git Graph

- 깃 그래프

7. Git Lens

- 해당 코드를 누가 언제, 무슨 커밋코드에서 작성했는지 보여줌

8. i18n Ally

- 다국어 작업을 하기때문에 사용하는 툴. 일반 개발자는 필수 아님

9. Image preview

- 삽입한 img url을 미리보기 할수 있음

10. Korean Language Pack for Visual Studio Code

- vscode용 한국어팩

11. Live Server

- 개발중인 페이지 라이브 서버를 열어주는 확장

12. Material Icon Theme

- 확장자나 이름에 따라 아이콘을 바꿔주는 확장. 주로 제일 많이 쓰는듯

13. open in browser

- 이전에 자꾸 일반 익스플로러로 페이지가 열려서 깔았던 확장. 오픈할 브라우저를 지정할 수 있다

14. Prettier

- 코드를 가독성 좋고 각자 작업자들끼리 맞춘 표준에 맞게 포맷팅 해주는 도구.

15. Sapphire Theme

- 하늘색을 좋아해서 그냥 이 테마를 쓴다.(대부분의 글씨가 파란계열) Dim으로 가장 어두운 것 사용

16. Tailwind CSS IntelliSense

- 테일윈드용 자동완성 지원 확장

17. Thunder Client

- postman 느낌인데 vscode에서 바로 쓸수 있어서 사용한다

확장을 꽤 많이 쓰고 있다고 생각했는데 20개는 안넘어갔다...ㅎㅎ 혹시 업데이트 되면 추가 하도록 하겠음