😀 하게 된 이유와 후기 먼저!

SSAFY라는 1년간의 부트캠프 이후, FE 신입으로써 채용시장은 너무나 가혹했다. 비록 백엔드와 협업하는 4개의 사이드 프로젝트를 진행하면서, 기본적인 FE Developer로써 역량은 함양할 수 있었지만 디테일이 부족했다고 느꼈었다.

흔히 채용공고를 볼 때,

• CI/CD 경험 여부
• TDD 경험 여부
• 데이터 시각화 경험
• 성능 개선 경험(useCallback, useMemo, React.memo)

이러한 부분들에 대한 결핍이 있었고, 예상대로 비전공인 나에게 2023년 상반기 채용시장은 지옥이었다. 하지만 원티드 프론트엔드 프리온보딩 인턴쉽 4주의 과정은 나에게 가뭄에 단비와 같은 경험이었고, 2023년 하반기 채용시장에 대한 나의 자존감을 회복 할 수 있었다고 생각한다.

저기 위에 적혀있는 데이터 시각화 경험을 제외하고는 모두 경험할 수 있었고, class를 통해서 HttpClient를 만들어보는 식으로 class를 배우기만 했지 실제로 만들어본 적은 없었는데 이번에 해보게 되어서 좋았다.

8회의 과정에 대해서 2회의 동료학습과 1회의 토이프로젝트 경험은 뜻깊었고, 꼭 포트폴리오에 남겨서 나의 성장을 꼭 보여주면서 멋지게 최업하고싶다. 고맙다 프리온보딩!

😋 각 과정별 스포일러(?)

총 8개의 과정이 있고 내가 짧게 어떤 부분을 배웠는지 회고하는 차원에서 글을 남겨보려고 한다. 물론 내용은 모두 공개하면, 대외비라고 생각해서 이미지는 감춰야지...

링크 아직 안올림

이제 해당 이미지를 클릭해서 내가 남겨놓은 자료를 여러분들도 참고하면서 스스로 공부해보는 것도 좋지 않을까? 하는 생각이다.

week 1-1 과제를 하기에 앞서 알아야 할 팀으로 일하는 법, 개발자의 기본기

• eslint를 통해서, 버그를 방지
• prettier를 통해서 코드를 포맷팅 함으로써 가독성을 증대
• husky를 통해서 eslint와 prettier를 강제로 계속 적용시키기

week 1-2 프로젝트를 지속적으로 통합하고 배포하는 법

• AWS S3를 통해서 CRA를 통해서 만들어낸 프로젝트 배포
• 프로젝트의 수정사항이 자동으로 반영되어 배포가 지속되는 GITHUB ACTION으로 CI/CD 구축

week 2-1 React Hook의 심층 활용

• useCallback, useMemo, React.memo를 통해서 렌더링 최적화 방법과 원리를 이해
• useEffect, useState 등의 리액트 Hook에 대한 학습
• Context API를 통해서 전역으로 API를 요청하여 특정 컴포넌트로 데이터를 보내주기

week 2-2 Clean Code와 소프트웨어를 유연하고 확장성있게 만드는 법

• 각 기능을 세부적으로 분리하여 함수명만 보고도 어떤 기능을 하는 지 알게 하는 관심사의 분리
• 관심사의 분리와 기능의 재사용성을 위해 Custom Hook 만들기
• 만약에 작은 단위로 기능이 분리가 되지 않는다면, 횡단 관심사
• 각 함수이자 기능은 특정 상태 및 함수에 의존성이 높지 않게 코드를 작성해야한다. 유지보수와 서비스의 안정성을 위해서

week 3-1 TypeScript로 안전하고 표현력이 높은 애플리케이션 작성하기

• Redux를 통해서 전역으로 관리하여 상태 관리를 비교적 엄격하고 깔끔하게 할 수 있음
• Action 객체를 리듀서로 전달하기 전에 동기적으로 어떤 과정을 거쳐야한다면, 필요한 Redux Middleware

week 3-2 Redux의 철학과 미들웨어의 원리 이해하기

• 타입스크립트를 통해서 어떤 형식의 데이터가 이동하는 지에 대한 흐름의 가독성을 높이기 위해서 사용하는 방법과 이유를 배움
• 스크립트의 코드가 실행되기 위해서 세팅되는 환경을 실행 콘텍스트라고하고, 그 원리를 학습하기 위한 깊은 이해를 요구하는 이론

week 4-1 프론트엔드 테스트 기법 이해하기

• 리액트 Hook이 존재하는 이유인, 클로저에 대한 이론적인 내용
• useState와 useEffect를 직접 구현해봄으로써 클로저의 필요성을 느낌

week 4-2 실행 컨텍스트와 클로저 그리고 React Hook

• TDD 라는 테스트 주도 개발이 서비스의 안정성을 높이는 것에 얼마나 도움이 되는지 알게 해줌
• expect().matcher() 의 형태 테스트를 시도하고, 거기에 맞게 기능을 구현하고, 어떤 코드를 작성하여 기능을 리팩토링 할 지 정하는 식으로 학습하곤 했다.

😀 3개의 토이 프로젝트 후기

Organization 으로 되어있어서 공개가 안되기 때문에 노션이나 개인 레포지토리를 따로 만들어서 진행해야할 것 같다. 링크나 레포지토리 정리가 끝이 나면, 링크를 따로 올려둘 생각이다. 혹시나 도움이 되는 사람이 있으면 좋겠다...

1. 1차 동료 프로젝트

사전 과제를 기반으로 해서 Best Practice를 선정하여, 진행했다. 사실 본인은 누가 잘했다고 할 수가 없었다. 왜냐면 코드가 제각기 다 달랐고, 각각의 코드는 장단점이 뚜렷했기 때문이다. 그래서 투표할 때도 사실 제일 심플하다고 생각했던 Practice에 투표를 던졌다.

결국은 웹 퍼블리셔를 2년간 하신 분의 프로젝트를 BP로 선정하였다. 물론 개인적인 견해는 조금 코드가 복잡하지 않나? 하는 생각이 있었지만, 다수의 견해가 우선이라고 생각해서 선정했고, 리팩토링을 했다.

리팩토링을 하면서, 다들 높은 에너지를 사용하여 진지하게 임했고 성공적으로 동료학습을 마쳤다고 생각했다. 그리고 역시나 우리 조의 코드가 문제가 있음을 말하는 과제 피드백에 뽑히게 되었고, 내 예상대로 코드의 복잡성이 높다는 것이 문제였다. 그래서 조금 아쉬운 감이 있었다.

2. 2차 동료 프로젝트

음... 해당 프로젝트가 사실 가장 아쉽다. 이 당시에 내가 몸이 너무 안좋았다. 최근 급격하게 불어난 살 때문인지, 취업 준비에 대한 스트레스가 높아서인지 몸에 좀 문제가 있었다. 그래서 이런 것 때문에 여러 검사일정을 잡게 되었고 사실 이전처럼 집중하지 못했다.

그럼에도 불구하고, 팀원들이 각각 본인의 개인 프로젝트를 완성하고, 같이 모여서 BP를 정하고 그걸 리팩토링하고 버그를 발견해서 다시 리팩토링 하는 식으로 하자고 했다. 근데 여기서 약간의 서운함 또는 외로움이 느껴졌다.

사실 나는 해당 프로젝트를 원활하게 진행하기 위해서 팀장의 말대로 개인프로젝트를 완성했고, 버그도 같이 잡기 위해서 노력했다. 하지만 코드를 직접 타이핑한 적이 없고, 아프다고 빨리 개인 프로젝트를 진행하지 않았다는 이유로 함께 동료학습을 한 사람에서 제외가 되었다.

그래서 개인프로젝트로 남기게 되었고, 이런 사람이 저 뿐만 아니고 다른 조에도 있지 않을까하는 생각에 정치에 대한 필요성도 느꼈다. 개인적으로 싫은 말 못하는 스타일이라서 말하지 못했는데, 다음 인턴쉽에서는 참가자들이 이런 안타까움이 없도록 원티드에서 조금 케어를 해줘야하지 않나 싶다.

3. 최종 토이프로젝트

개인적으로 가장 성장할 수 있었던 프로젝트가 아니었나 싶다.
지금까지 배웠던, custom Hook을 통해서 Redux를 통해서 전역 상태관리를 하였던 상태를 가지고 오는데 있어서 관심사의 분리를 실천했다.

그리고 class를 사용해서 HttpClient를 만들어보고 이제 대한 싱글톤 패턴을 적용했다고 생각한다. 그리고 디바운싱을 통해서 http 요청을 최대한 적게 해보는 경험도 해서 전문성이 늘었다고 생각한다.

그래서 앞으로 이런 방식으로 프로젝트를 진행해서 나의 발전을 위해 노력해야겠다는 생각을 했다.

😭 감사합니다.