꼬리에 꼬리를 무는 프로젝트💫

원티드에서 주관한 Pre-Onboarding 코스가 마무리될 때쯤 참여자 및 멘토님 간의 소통용으로 마련된 슬랙에 공고가 하나 올라왔다.

코스 이후에 따로 예정된 일정이 없었으므로 나는 밑져야 본전이라는 생각으로 바로 지원을 하게 되었고, 감사하게도 합격하게 되었다.

이 캠프는 연계 기업이 제시한 요구 사항에 맞춘 개발을 하는 프로젝트이며, 나는 ‘슬로워크’의 신규 서비스 기획 및 개발 과제(신규 플랫폼의 카테고리에 따라 콘텐츠를 제시하고, 사용자의 관심사에 따라 추천 / 오렌지레터 제보 및 구독 프로세스를 고도화) 중 후자를 담당하는 팀에 속하게 되었다.

끝날 듯 끝나지 않는 기획😵

우리 팀은 신규 플랫폼이 운영되기 위해 필요한 회원 로그인, 회원가입 및 회원의 정보를 관리하는 마이페이지와 오렌지레터에 실릴 소식을 제보하는 제보하기 페이지를 구현하는 과제를 맡았다. 팀은 기획자 2명, 개발자 2명으로 이루어졌으며, 개발자들 또한 개발 업무가 본격적으로 시작되기 전 기획에 참여하기로 하였다. 나는 피그마를 사용한 와이어 프레임 제작에 착수했다.

기획 업무에 참여하며 개발자로서 추후 개발이 진행되면 에 반영되어야 하거나 기획자와 소통이 필요한 부분에 대해 코멘트를 남겼다. 이는 프로젝트 진행을 도와주신 코치님께서 해주신 조언을 토대로 작성하였는데, 기획 업무에 참여할 때의 자세와 내가 해야할 일에 대해 배우고 경험해볼 수 있었다.

그런데 웹뷰 기준으로 와이어프레임을 거의 완성해갈 때쯤, 파트너사에서 갑자기 모바일뷰로 개발을 요청하셨고…결국 우리는 와이어프레임을 수정하기 시작했다.

따로 또 같이👩🏻‍🤝‍👩🏻

파트너사와의 회의 이후 모바일뷰로 변경하는 것 외에도 추가로 수정해야 할 사항이 많이 생겼기 때문에 정신 없이 회의하고 와이어프레임을 수정하느라 바빴다. 그 과정에서 같은 파트너사로부터 과제를 받은 1팀(우리 팀은 2팀이었다)과 아예 함께 하나의 서비스를 개발하는 것이 더 효율적이지 않을까, 라는 생각이 들었다. 그래서 나는 우리 팀원들과의 회의 시간에 1팀과 함께 프로젝트를 진행하는 것은 어떤지 물었고, 여러 번의 회의 끝에 함께 하기로 합의하였다👍🏻

우리 팀엔 디자이너가 없었기 때문에 1팀의 와이어프레임을 참고하여 디자인을 반영하였고, 그 결과…

이렇게 전에 비해 꽤 보기 좋아졌다👍🏻

1팀과 합치면서 비교적 진도가 빠르게 나가게 되었지만 이미 시간이 너무 많이 지나서…최종 발표일까지 약 3주 반 정도가 남게 되었다. 나는 더 이상 늦어지면 안되겠다는 불안감에 사로잡혀 본격적으로 개발에 착수하였다.

처음 구현해보는 로그인🤯

로그인은 처음 구현해보는 거라 이리저리 검색해가면서 validation까지는 구현해볼 수 있었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// utils/validation/validation.js

const validation = {
  isInput(input) {
    if (!input) {
      return false
    }
    return true
  },

  isEmail(input) {
    if (!input) {
      return false
    }
    const emailReg = /([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/
    return emailReg.test(input)
  },

  isPassword(input) {
    if (!input) {
      return false
    }
    if (!this.isOver8(input)) {
      return false
    }
    const passwordReg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/
    return passwordReg.test(input)
  },

  isOver8(input) {
    return 8 <= input.length
  },

  isNickname(input) {
    if (!input) {
      return false
    }
    return input.length <= 10
  },
}

export default validation

입력이 있는지, 이메일이 형식에 맞는지, 비밀번호가 형식에 맞는지, (비밀번호가) 8자 이상인지, 닉네임이 형식에 맞는지를 판단하도록 하였다.

그런데 로그인 시 백엔드와 어떻게 연결을 해야 할지, 그러니까 로그인 api를 어떻게 사용하면 되는 것인지가 문제였다. 다행히 같은 팀의 백엔드 개발자님이 친절하게 내 질문에 답변을 해주셨고, 덕분에 그 방법을 스스로 정리해볼 수 있었다.

1. post 요청을 보내면 서버가 쿠키 안에 토큰을 넣어서 보내줌
2. 서버로 유저의 정보를 받아오는 get 요청을 보낼 때나 로그인 된 사용자가 제보를 제출할 때 (즉, 사용자가 로그인 된 사용자임을 증명해야 할 때) { withCredentials: true } 옵션을 같이 넣어서 보냄 -> 브라우저에 저장되어 있던 쿠키들이 백으로 같이 넘어가게 됨
3. 로그인할 때 브라우저에 저장되는 쿠키(그 안의 토큰)이 같이 넘어가기 때문에 백에서는 이 유저가 로그인 된 유저라는 것을 알 수 있게 됨
4. 따라서 로그인 시 받아온 쿠키가 브라우저에 저장만 잘 된다면, 그 이후로는 로그인 시에만 사용할 수 있는 api를 호출할 수 있게 됨

따라서 로그인 코드는

1
2
3
4
5
6
7
8
9
10
11
axios
  .post(`${process.env.REACT_APP_API_URL}/auth/signin`, {
    email: loginData.email, // 사용자가 입력한 이메일
    password: loginData.password, // 사용자가 입력한 비밀번호
  })
  .then((res) => {
    // 로그인이 제대로 이루어졌을 때 실행할 코드
  })
  .catch(() => {
    // 에러 발생 시 실행할 코드
  })

이렇게 되고, 만약 로그인 된 상태에서만 호출이 가능한 api라면 (ex. 마이페이지에서 비밀번호를 수정하는 api)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
axios
  .put(
    `${process.env.REACT_APP_API_URL}/user/password`,
    {
      password: passwordData.oldPassword, // 이전 비밀번호
      new_password: passwordData.password, // 바꿀 비밀번호
    },
    { withCredentials: true }, // 로그인 시 받아와서 브라우저에 저장한 토큰을 함께 백으로 보내는 코드
  )
  .then(() => {
    // 비밀번호 변경이 제대로 이루어졌을 때 실행할 코드
  })
  .catch(() => {
    // 에러 발생 시 실행할 코드
  })

이런 식으로 api 요청을 하게 된다.

협업은 언제나 쉬울 듯 어렵고💔

나는 누군가와 같이 팀을 이뤄서 일하는 것에 크게 부담을 느끼지는 않는 편이다.

그렇지만 마냥 쉽다고는 할 수 없는게, 아무래도 세상엔 너무도 다양한 사람들이 살고 있기 때문에 상황에 따라 나의 말과 행동이 내가 원하는 대로 전달되고 이해받지 못할 때도 많기 때문이다.

이번 프로젝트를 진행하면서, 1팀과 합치는 과정에서 아무래도 비대면으로 진행되는 프로젝트이다 보니 소통이 제대로 이루어지지 않아 DB 수정 사안에 관한 작은 문제가 생겼고, 이를 몇 번의 텍스트 소통과 한 번의 비대면 미팅을 통해 해결할 수 있었다.

이때 느낀 것은, 여러 사람들과 함께 일할 때는 상대가 귀찮을까봐 말하려다 마는 것보다는 귀찮을 정도로 오버 커뮤니케이션을 하는 게 더 낫다는 것이다. 소통은 많이 하면 할수록 좋은 것!

이 문제를 겪은 이후,

일부러 먼저 도움드릴 수 있는 게 있는지 먼저 여쭤보는 등 좀 더 세심하게 팀원들에게 주의를 기울이게 되었다.

앞으로 여러 사람들과 부딪히며 일하게 될텐데, 새로운 사람들을 만나는 것은 에너지 소모가 큰 편이지만 그래도 그 사람들로부터 많은 것을 배울 수 있고 지금까지 해보지 못한 경험을 해볼 수도 있다. 가령 이번 프로젝트 같은 경우는 경력 보유 기획자분들과 함께 일하며 경력 보유 여성들의 고충과 함께 실무자로서의 연륜과 역량을 체험해볼 수 있었고, 나보다 먼저 개발을 시작하신 팀원분으로부터 감사하게도 양질의 개발 지식을 마구 전수받을 수 있었다😇.

즐겁게 마무리🤗

이번 프로젝트는 특히 결과물이 마음에 들기도 했고, 코드도 지금까지 내가 작성한 코드들 중 가장 퀄리티가 낫기도 하고😂, 무엇보다 로그인이나 회원가입 같은 지금까지 구현해보지 못한 기능들을 구현해보며 개발 실력을 키울 수 있었던 좋은 경험이었기 때문에 정말 기쁜 마음으로 마무리지을 수 있었다😊

혹시 방문해서 이 글을 읽어주시는 분이 계실수도 있으니 데모 시연 영상을 링크해두겠다.