리액트 10주차 회고(개인프로젝트 2주차)

개인프로젝트 2주차 회고입니다

한 일

• 사용자가 방 리스트를 볼 수 있도록 구현

느낀점

• 사용자가 서비스를 사용하려면 서비스를 사용하기 위한 문을 열어야 된다 라는 생각에 꽂혀서 로그인과 회원가입을 구현하느라 정신이 없었는데 리뷰어님께서 현재 서비스에 핵심기능이 로그인과 회원가입인지? 이번주 당장 프로젝트를 런칭해야 한다면 가장 핵심적인 기능이 무엇인지?에 대해 물어봐주셔서 작업의 우선순위를 다시 결정하는 시간을 가질 수 있었습니다. 감사합니다 리뷰어님!
• 백엔드 서버로 'firebase'를 사용하기때문에 이에 접근하기 위해 필요한 API KEY를 코드에 넣어줘야 했습니다. 로컬에서는 dotenv를 사용해 간단하게 해결했는데 배포서버에서 문제가 생겼습니다. process.env.[환경변수]에 도대체 어떻게 접근해야 하는지 몰라 많이 헤매었고, 검색과 질문을 통해 이것저것 시도해보느라 시간을 많이 사용하였습니다... 이번 경험을 통해 다음 프로젝트 진행시 같은 이슈가 발생하면 당황하지 않고 이번에 해결한 방법을 잘 기록해두었다가 그땐 시간을 단축할 수 있겠다 라는 생각을 하였습니다.
• 더 많이하고 잘하고 싶은데 저에게 주어진 시간은 퇴근 후 몇시간.. 다음날은 출근을 해야하고.. 마음이 정말 조급했습니다.. 하다보니 새벽이 되어있고 새벽까지 한다고 업무 효율도 나지 않는것 같고 하루에 딱 2시간만 집중에서 하기로 마음 먹고 실천하였습니다. 무리해서 새벽까지 하고 다음날 피곤해서 아무것도 하기싫어지는 번아웃을 해결할 수 있었습니다..ㅎㅎ

배운것

• github actions에서 env를 정의하는 것은 CI를 돌릴 때 .env 파일이 존재하지 않으므로 이를 해결하기 위해 노드 환경변수를 주입해주는 것과 같다.

  // main.yml
  - name: Install and Build 🔧 
          run: |
            npm install
            npm run build
          env:
            API_KEY : ${{ secrets.API_KEY }}

• webpack은 기본적으로 process.env.NODE_ENV값을 제공하지 않으므로 webpack.DefinePlugin을 사용해 webpack이 빌드할 때 노드 환경변수를 전역변수로 변경하여 사용할 수 있도록 해줘야한다.

  //webpack.config.js
  plugins: [
      new webpack.DefinePlugin({
        'process.env.API_KEY': JSON.stringify(process.env.API_KEY),
      }),
    ],

• 노트북 앞에 앉아있는 시간과 작업량은 비례하지 않는다ㅎㅎㅎㅎㅎ 시간을 정해놓고 정해놓은 시간동안 집중하자!!