[원티드 프리온보딩 FE 챌린지 3월] React 실전 가이드: 면접 및 실무 기술

[원티드 프리온보딩 FE 챌린지 3월] React 실전 가이드: 면접 및 실무 기술

 

🗓️ 2024.03.04 ~ 2024.03.17

원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다.

 

👩🏻‍💻 [STUDY NOTE]

⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기

• 1차

  • web의 역사 (browser 렌더링, AJAX, DOM, Virtual DOM)

  • react 기본 기념 (render(), jsx, hooks)

  • 이력서 관련 팁

• 2차 redux-toolkit 상태관리

• 3차 현업 프로젝트에 적용하는 패턴 (project structure, error handling)

• 4차 coding convention, 이력서 feedback

📚 노션에 정리한 스터디 노트 

1️⃣ 브라우저, DOM을 바탕으로 react를 파악합니다.
2️⃣ redux-toolkit 상태관리
3️⃣ 현업 프로젝트에 적용하는 패턴 (project structure, error handling)
4️⃣ coding convention, 이력서 feedback

 

🤚🏻 사전과제

GitHub - sw2377/wanted-pre-onboarding-fe-quest-2403: 2024년 3월 원티드 프리온보딩 FE 챌린지 사전과제

 

• 과제 요구사항 중 전역상태 관리 툴로 가능하면 Redux나 Redux-toolkit 사용을 권장했는데, 이전 부트캠프 프로젝트에서 Redux-toolkit을 사용했음에도 불구하고 몇달만에 다시 사용하려고 하니 기억이 하나도 나지 않았다. 세팅부터 공식문서를 참고해서 따라했는데, 왜이렇게 복잡하고 어려운건지…
• 이번에 Tailwind CSS를 간단하게라도 접해보고 싶어서 사용해보았다. Tailwind CSS를 사용해본 사람들로부터 대부분 편하고, 좋다는 평을 많이 들었었다. 개인적으로는 스타일 지정을 위해 Tailwind에서 지정한 className을 외워야 한다는 점, html 코드가 지저분해진다는 점 등이 단점으로 다가와서 굳이 사용하지 않았었던 것 같다. 하지만 이번에 사용해보니 조금만 익숙해지면 className을 하나하나 암기할 필요까지는 없을 듯 했다. (VSC 익스텐션도 한몫했다.) html 코드가 지저분해지는건… 음… 좀 더 공부해봐야 할 것 같지만, 여러모로 장점이 많은 것 같았다.
• 이번 사전과제에서는 정말 간단하게 사용했었지만, 좀 더 공부해서 프로젝트에도 적용해보고 싶다는 생각이 들었다.
• Redux-persist를 사용하여 화면이 새로고침 되어도 저장했던 데이터가 사라지지 않도록 구현해보았다. 과제 요구사항에는 없었지만, 다른 사람들이 구현한 과제를 보다가 Redux-persist라는 모듈을 사용한 사람이 있어서 나도 해봐야지 싶어서 적용해보았다. Redux-persist를 통해 로컬 스토리지에 todo list의 데이터를 저장할 수 있었고, 이는 화면이 새로고침 되어도 데이터가 유실되지 않는 장점이 있다.
• 얼마 전 Zustand를 사용했을 때 zustand persist로 데이터를 로컬 스토리지에 저장하는 기능을 구현하였는데, Redux-persist도 이와 마찬가지가 아닐까 생각했었다. 세팅은 구글링해서 찾아본대로 하니 간단하게 구현할 수 있었다.

---

► 챌린지 전, 🔥 목표 및 다짐

• 지난 2월 챌린지와 비슷하게 React에 대한 전체적인 이야기와 함께 면접 준비, 그리고 실무기술에 대해 다루는 챌린지인것 같다. 여전히 취준생인 나는 “React 실전 가이드: 면접 및 실무 기술”라는 주제에 끌려 다시 챌린지 신청을 했다.
• 이번 강의에서 Redux-toolkit을 통해 상태관리 하는 방법을 배우고 적용해보는 세션이 있는데, flux 패턴과 toolkit에 대해 더욱 익숙해지는 계기가 되고 싶다. Redex-toolkit을 공부도 해보고, 사용도 해보았지만 여전히 흐름은 익숙하지 않은 것 같다.
• 현업에서 일해본 경험이 없어서 현업에서 프로젝트를 어떤 방식으로 진행하는지 궁금했었는데, 이번 챌린지를 통해 배워가고 싶다.

► 4번의 수업이 끝나고, 강의 후기

• 기초적인 내용부터 실무 가이드까지 배울 수 있었던 강의였다. 이번 멘토님은 React-Native로 모바일 개발을 한다고 하셔서 그런지 React-Native도 배워보기를 강력 추천하셨다. 모바일 화면 개발이 좋아 React 보다는 React-Native로 개발을 하는 쪽을 선택하셨다는 것도 인상적이었다. 나 또한 언젠가부터 모바일 개발도 재미있겠다는 생각은 하고 있었지만, React-Native가 정말 괜찮을까 라는 의문이 조금 있었다. (물론 아직 리액트로 웹 개발 실무도 해보지 않아서 조금 망설여졌던 것 같다.) 하지만 JavaScript와 React를 사용하는 프론트 개발자에게 React-Native라는 정말 좋은 도구가 아닌가. 배워봐야겠다는 생각이 들었다.
• 매 세션마다 이력서 피드백을 해주는 시간이 있었는데, 다른 사람들의 이력서를 볼 기회가 흔치 않았기 때문에 많은 도움이 되었다. 다른 사람들의 이력서를 보면 왜 나는 자꾸만 서류 탈락을 하는지 알 것 같기도 했다. 뽑아주면 정말 열심히, 잘 할 자신이 있지만 그 전에 내 서류는 매력이 없어 보였다. 전공자도 있고, 경력자도 있고, 프로젝트도 많아 보였고, 해왔던 일들을 잘 정리해서 이력서에 볼 거리들이 많아 보였던 사람들과 달리 부트캠프 하나 수료하고, 팀 프로젝트 한두번 한 것이 딱히 내세울게 없어 보였다. 휴 😮‍💨 직무를 전환하기 전에는 그래도 꽤 많은 사람들이 함께 일하자고 오퍼도 주고, 여러 차례 제안받기도 했는데 전혀 다른 업계에 뛰어들고 나니 내가 할 수 있는게 그리 많지 않다는 사실과 강점이 돋보이지 않는다는 것이 어렵다. 할 수 있을까, 점점 자신감이 떨어진다. 이렇게 갑자기 신세한탄
• 이러나 저러나 강의는 열심히 들었다. 여전히 모르는 것들이 많다. 공부를 하다보면 더 알고 싶은 마음이 든다. 이번 강의에서는 현업에서는 잘 사용하지 않는 것으로 알았던 ContextAPI를 사용해 모달을 만드는 실습이 꽤 재미있었다. 물론 다시 한 번 봐야할 것 같다. 모달은 그냥 모달인줄 알았는데, 이를 효율적으로 관리하는 방법 또한 생각해 봐야 한다. 이런건 아직 AI가 대체할 수 없겠지..? 아닌가..?