들어가며

4주동안 진행되는 원티드 프리온보딩 프론트엔드 인턴십의 1주차가 지나갔다.

이번 1주차의 프로젝트는 인턴십을 지원하기 위해 수행했던 사전과제를 바탕으로 진행되었기 때문에 수월하기도 했지만 또 한편으로는 처음 팀을 구성하고 조율해야하는 부분들이 있어 어려운 부분들도 존재했다. 특히 단기간 오랜 시간을 집중해야 하는 상황 + 협업을 오랜만에 겪다보니 조금 힘들기도하고 적응이 잘 안되는 부분도 존재했다.

언제나 그렇듯이 좋았던 부분도 있었고 아쉬운 부분도 있었는데, 앞으로 더 보람있는 3주를 위해 1주차에 대해 회고를 해보려고 한다.

원티드 프리온보딩 프론트엔드 인턴십 1주차 과제

2023.04.25 - 첫 회의

이번 프로젝트는 동료학습을 통해서 팀에서 생각한 원티드 프리온보딩 프론트엔드 인턴십 선발 과제의 Best Pratice를 만들고 제출하는 과제였다.

Best Practice란 모범사례라는 말로서, 특정 문제를 효과적으로 해결하기 위한 가장 성공적인 해결책 또는 방법론을 의미하는데, 사람들마다 좋은 해결책에 대한 생각이 다를 것이기에 처음 과제를 안내받았을때부터 '아 이거 이미 수행했던 과제를 바탕으로 진행한다고는 해도 쉽지만은 않겠다'라는 생각이 들었다. 특히 이번 과제를 같이 진행하게된 팀원의 수가 총 10명이기에 더욱 그랬다.

과제를 수행하는 기간이 2023-04-25 ~ 2023-04-28로 총 4일이였기에 아무 준비없이 첫 회의에 들어가면 시간적으로 너무 촉박할것 같아 다음처럼 간단히 첫 회의에서 진행했으면 하는 일에 대한 체크리스트를 만들어 갔다.

• 체크리스트
  • 자기소개 및 팀장 정하기
  • Communication Tool - Discord, slack etc.
  • 일정 공유 및 정규 회의시간 정하기
  • Repository 관리 및 README.md 작성법
  • 각자가 생각하는 Best Practice란?
  • Best Practice 선정 단위 - Assignment, Component etc.

이런 준비덕분(때문)이였을까? 자기소개를 하고 팀장을 정하는 자리에서 팀원분들이 나를 팀장으로 추천해주셨다. 이번 인턴십에서 팀장이라는 역할이 기술적인 리딩을 하는 자리는 아니여서 크게 다를 것은 없었지만, 의견 조율과 같은 부분에서 중심을 잡아야 하지 않을까라는 생각에 부담이 있긴 했다. 그래도 이런 경험을 할 수 있는 기회가 많지도 않고, 또 성장하는데에 도움이 될 것 같아 팀장 자리를 맡기로 했다.

그 후 준비해간 체크리스트대로 Best Practice에 대해 얘기를 나누었고, 대략적인 선정 기준을 정한 후 다음 회의 일정을 잡게 되었다.

2023.04.26 - 두번째 회의

두번째 회의에서는 다음과 같은 체크리스트를 만들어가서 회의를 진행했다.

• 체크리스트
  • 팀명 정하기
  • Repository
  • 프로젝트 세팅
  • 컨벤션 세팅
  • 사전과제 Assignment 1-4 리뷰
  • 과제 진행 방향 및 수행

처음 환경설정을 위해 모두가 모여 어떤 라이브러리를 사용할지 또 팀적으로 정하고 갈 컨벤션들에 대해 논의를 나누고 실제 세팅을 진행했다. 역시나 ESLint, Prettier등의 설정이 한번에 완벽히 되지는 않았고 '아 역시 환경설정이 쉽진 않네'라고 생각이 들었고 더 경험을 쌓아야겠다고 느꼈다.

또한 다른 팀원분이 Craco라는 (나는 이번에 처음 알게된) 라이브러리를 사용하자고 의견을 제시해 주셨는데, Craco를 사용하는 이유를 알아보며 지금까지 무심코 사용했던 CRA(Create-React-App)의 내부 구조에 대해서도 더 알 수 있었다.

그 후 Assignment 별로 각자가 생각하는 Best Practice에 대해 얘기를 나누었다. 팀원분들마다 어떤 코드가 좋다고 생각하는 이유가 다양했고, 다른 관점들에 대해 듣다보니 코드를 바라보는 시야가 넓어지는것 같아서 좋았다. 아마 이런 점이 동료학습의 가장 큰 장점이 아닐까?

여튼 각 Assignment마다 특별한 부분이 있기는 했지만 공통적으로 코드의 가독성, 성능 최적화, 유저 편의성이 Best Practice로 선정하는데에 가장 중요하다고 정해졌고 이 세가지 항목을 신경쓰면서 기능을 구현하기로 했다.

그 후

두번째 회의 이후로는 회의를 통해 선정한 Best Practice에 따라 Assignment별 담당자가 기능을 구현했고 이를 PR한 내용을 같이 확인하며 코드 리뷰를 진행했다. 더 자세한 내용은 README.md를 통해 확인 가능하다.

KPT

과제를 진행하면서 많은 부분들에 대해 생각해 볼 수 있었고, 알게 된 점들도 많아서 좋았다. 하지만 아쉬운 부분도 존재했는데 각 부분을 정리해보고자 한다.

Keep

• 몇번의 프로젝트를 진행하면서 기록의 중요성에 대해 많이 느끼게 되었다. 이번 인턴십에서는 꼭 문서화를 잘 해보자고 생각했는데 뛰어난 팀원분들 덕분에 만족스러운 README.md 및 기록을 남길 수 있었다!

Problem

• Github을 통해 코드를 관리할 때, Issue를 발행하고 그 Issue 번호에 따라 새로운 branch를 생성한 후 코드를 작성하고 develop branch에 병합한 후 마지막에 develop branch를 main branch에 병합하는 전략을 택했다. 그런데 중간에 develop branch에 PR을 날려야 하는데 main branch PR을 날린 것을 제대로 확인하지 못하고 병합을 하는 실수를 2번이나 반복했다. 리뷰 과정의 체크리스트를 만드는등의 실수를 최소화하는 방법을 생각해 봐야 할 것 같다.

• 확실히 10명이나 되는 사람들의 일정이 조율되기는 어려웠다. 의견 공유에는 화상회의와 같은 실시간 소통이 가장 효율적이라고 생각하는데 이게 쉽지만은 않을 것 같다. 이번에는 수행했던 사전과제를 바탕으로 해서 수월했지만 다음부터는 새로운 과제를 수행하고 이를 바탕으로 의견을 나누어야 하는데 Issues, Pull requests등을 조금 더 잘 활용할 방안에 대해 생각해 봐야 할 것 같다.

Try

• 더 많은 의견을 공유하자 ! - 이번 인턴십에 참여하면서 가장 중요하게 여겼던 점은 (물론 취업에 도움이 되기에 선택한 것이지만) 성장이다. 특히 평상시에 가지기 어려운 다른 개발자와의 소통을 통해 내가 생각하지 못했던 관점을 알아 가고 싶다고 생각했다. 인턴십 기간동안 보람찬 3조가 되자!라는 의미에서 보람삼조라는 팀명을 정했는데, 정말 보람찬 기간으로 만들기 위해 더 많은 의견을 공유하고 배워가야겠다.

😱 문제발생

원티드 프리온보딩 프론트엔드 인턴십에 참여하여 1주차 과제를 진행하던 중이었다.
1주차 과제는 인턴십에 참여하기 위해 수행했던 사전과제를 동료학습을 통해 리팩토링 하는 것이였고, 나는 팀원들과의 토의로 얻은 Best Practice의 기준을 가지고 Assignment1의 기능 구현을 맡아 코드를 작성하고 있었다.

• Assignment 1
  • 회원가입과 로그인 페이지에 이메일과 비밀번호의 유효성 검사기능을 구현해주세요
    • 이메일 조건: @ 포함, 비밀번호 조건: 8자 이상
  • 입력된 이메일과 비밀번호가 유효성 검사를 통과하지 못한다면 button에 disabled 속성을 부여해주세요

Assignment 1의 유효성 검증을 구현하기 위해 정규식을 이용하는게 좋을 것 같다라는 의견을 수용해, password: /^.{8,}$/g의 정규식을 통해 코드를 작성하고 정상적으로 동작하는지 확인을 하는데 갑자기 다음과 같은 문제가 발생했다.

8자리의 비밀번호를 입력했을때 error message가 정상적으로 사라지길래 검증이 잘 되는구나 생각했는데, 추가적으로 비밀번호를 입력할때 마다 error message가 생겼다 없어졌다 하는 것이다. 즉 비밀번호를 입력할때마다 정규식으로 검증한 결과가 바뀐다는 것이였는데, 혹시나해서 정규식으로 검증한 결과를 개발자 도구를 통해 살펴보았다.

같은 정규식으로 같은 값을 검사했는데도 그 결과가 계속해서 바뀌는 현상이 일어났는데, 아무리 생각해도 이해가 되지 않아 ChatGPT를 통해 질문을 해 본 결과 다음과 같은 답을 받을 수 있었다.

😊 문제해결

ChatGPT 답변을 바탕으로 조금 더 이해를 위해 검색을 해보니 RegExp.prototype.test()의 대한 MDN 문서에서 전역 플래그와 test()라는 항목으로 예시를 들어주며 설명을 해주고 있어 왜 이런 현상이 발생했는지 알 수 있었다.

정규 표현식에 전역 플래그를 설정한 경우, test() 메서드는 정규 표현식의 lastIndex를 업데이트하고 test()을 다시 호출하면 str 검색을 lastIndex부터 계속 진행하는데, lastIndex 속성은 test()가 true를 반환할 때마다 증가하고 test()가 false를 반환할 땐 0으로 초기화되어 결과가 계속해서 바뀌던 것이였다.

exec() 메서드도 test() 메서드처럼 전역 탐색 플래그를 제공한 정규 표현식에서 여러 번 호출하면 이전 일치 이후부터 탐색한다고 하니 정규식을 사용할 때 주의해야 할 것 같다.

정규식이 정말 유용한것은 알지만 항상 어렵게 느껴지는 것 같다. 그래도 이렇게 정규식에 대해 알아볼 기회가 있을 때 마다 잘 정리해서 능숙해지려고 노력해야겠다!

참고

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

지원 계기

작년 12월에 제로베이스 커넥to 과정을 마치고 개인적으로 React, Next등의 기술 스택을 공부하고 관련한 개인 프로젝트를 진행하며 프론트엔드 개발자로의 취업을 위해 노력중이었다. 하지만 이전에 부트캠프를 통해 공부를 할때와는 다르게 내가 올바른 방향으로 학습하고 있는지도 확신할 수 없었고 아무래도 혼자서 프로젝트를 진행하다 보니 의지도 나약해지는 부분이 생겨 단기간에 학습을 마무리하고 본격적으로 구직활동을 시작하려고 마음먹었다.

신입들을 뽑는 기업들에는 어떤 곳이 있을까 궁금하여 원티드에 들어갔다가, 배너를 통해 프리온보딩 프론트엔드 인턴십이라는 프로그램을 알게 되었다. 4주 동안 기업 과제를 수행하며 기술 역량과 협업 역량 향상을 시키고 실제 기업 채용으로 까지도 이어지고 있다는 얘기에 관심이 생겼다.

커리큘럼을 살펴보니 React Hook의 심층 활용, 관심사의 분리, 프론트엔드 테스트 기법 이해하기 등 공부는 하고 있었으나 실제로 잘 이해되지 않거나 부족하다고 느꼈던 부분들에 대해 채울 수 있는 과정이라 생각했고, 바로 취업을 하는 것보다 장기적으로 더 나은 개발자가 되는데 도움이 되지 않을까 생각하여 지원하기로 결심했다.

지원 절차

지원절차는 사전과제와 더불어 원티드 이력서만 제출하면 되어 간단했다. 물론 사전과제의 실현도에 따라 불합격 가능성이 있어서 걱정이 되긴 했었는데 과제 난이도가 높지는 않아서 충분히 합격할 수 있지 않을까 생각했다. 다음은 내가 수행한 사전과제의 github 주소이다. 사전과제

결과

나름대로 과제 수행을 잘 했다고 생각하여 합격하지 않을까 생각했지만, 약간의 불안감도 존재하기는 해서 혹시라도 불합격하면 바로 구직활동을 시작해야겠다 마음먹고 포트폴리오를 마무리 하고 있었고, 결과발표 당일 언제 발표가 나는거지 기다리고 있었는데 다행히 합격 문자를 받았다.

마치며

4주동안의 짧다면 짧고 길다면 긴 기간동안 열심히 몰입해서 많이 성장할 수 있도록 노력해야겠다. 4주 후의 회고에서는 꼭 만족스러운 모습으로 볼 수 있길!