팀 프로젝트 3일차 회고

오늘은 어제보다 더 제대로 작업을 하지 못한 날이 됐다.

배포를 미리 해놓은 상황이라, front에서 로그인 관련 api를 사용해보고 싶다길래
해보라고 했는데 바로 막혔다.

바로 CORS 에러의 벽에 막혀버렸다.

문제가 있는 이유는 아래와 같았다.

일반적인 api는 사용이 가능했지만, Cookie를 활용하는 로그인 api에서는 CORS 보안 정책에 의하여 막혀버린 것.

Cookie는 유저의 중요한 정보가 보통 들어있기 때문에 보안 옵션이 쎄게 들어가있는데, 이부분이 문제가 됐다.

나 또한 쿠키의 해킹을 막기 위하여 아래와 같이 보안 설정을 따로 해놓았다.

 res.setHeader(
      'Set-Cookie',
      `refreshToken=${refreshToken}; path=/; domain=project08.site; Secure; httpOnly; SameSite=None;`,
    );

근데 의문인 것은 이래도 쿠키로 들어가면 아래처럼 모조리 다 보여서 암호화를 한번 더 걸어줘야하는지 고민이 조금 있긴 하다.

아무튼 쿠키의 정보는 중요하다보니 CORS (요청하는 도메인이 같아야한다) 에러에 막혔는데, 이 부분을 핸들링 하는 과정에서 엄청나게 오랜 시간을 사용했다.

main.ts

app.use(cookieParser());
  app.enableCors({
    origin: 'http://localhost:3000',
    methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
    allowedHeaders: [
      'Access-Control-Allow-Headers',
      'Authorization',
      'X-Requested-With',
      'Content-Type',
      'Accept',
    ],
    credentials: true,
  });

최상단인 main.ts에 이런 옵션을 적용해놓고 프론트에서 프록시를 써서 해결해봐! 라고 했는데 계속 적용이 되지 않는 일이 발생했다.

그러다가 저녁 7시쯤이 되어서 검색을 하다가 어떤 오버스택플로우 글에 아폴로 서버가 main.ts의 옵션을 무시할 수 있어! 라는 글을 보게 되었는데...

app.module.ts

GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: 'src/commons/graphql/schema.gql',
      context: ({ req, res }) => ({ req, res }),
      cors: {
        Credential: true,
        origin: ['http://localhost:3000'],
      },
    }),

cors를 쳐보니 자연스럽게 옵션이 나오는 것을 확인했고, 저렇게 작성을 하니 문제가 해결됐다...^^...

내가 지금까지 찾아봤던 글에서는 대부분이 front 단의 처리만을 알려주고 있었는데 (프록시를 써서 돌아가서 접근해라)
결국은 애초에 아폴로 서버에서 해당하는 옵션을 무시해서 cors가 적용이 되지 않고 있었다는 것이였다.

아무튼 그래서 늦은 시간이지만 이 문제는 해결이 됐다.

PM이 되어버린 입장에서 발생한 문제

뭐 말해봐야 나쁜 점이겠지만, 좋은 것만 골라서 쓴다고 좋은게 있지는 않으니 이야기를 하고 넘어가야한다.

현재 기획은 내가 메인프로젝트(1달전)부터 진행을 해왔던 것을 확장하여 팀 프로젝트로 진행을 하고 있는 상황이다.
(물론 투표로 어떤 것을 하자고 정해진 것이긴 하지만)

그러다보니 PM이 되어버렸는데 일하는 양이 상당히 많이 늘어나게 되었고, 신경 쓸 부분이 너무 많아진 상태가 되었는데
소통의 부재가 조금 있어서 파트너 백엔드가 조금 아쉬움을 느끼게 되어서 면담 시간을 가지게 되었다.

계속 내가 고민을 하고 작업을 해왔던 것이기 때문에 필요 api를 그림을 다 그려놓고 있었는데, 이 부분에 대한 설명이 모자랐고
이러면서 조금 수동적인 작업 을 하게 되어서 이야기를 하게 되었다.

결국은 취업을 위한 포트폴리오를 만들고 있는 과정인데, 자신이 어필을 하기 위한 것들이 모자르다. 라는 것이 주된 이유였다.

사실 이 부분에 대해서는 계속 고민을 하고 있었기 때문에 내가 먼저 꺼냈어야 했었기에 미안한 부분이 많이 컸다.

그래서 미리 생각을 하고 있던 중요하다고 해야하는 업무를 서로 분담하게 되었고,
조금 더 앞으로 해야하는 과정을 알 수 있도록 깃허브의 칸반보드를 사용해서 어떤 작업을 해야하고 정리를 하기로 결정을 했다.

이런 일이 또 생기지 않도록 조금 더 주의를 하면서 리프레쉬를 할 겸 회의를 자주 해야할 것 같다.

3일차 회고 끝.