[원티드 프리온보딩 FE 챌린지 12월] 실전 스킬: 비즈니스 로직 완전 정복 with React

[원티드 프리온보딩 FE 챌린지 12월] 실전 스킬: 비즈니스 로직 완전 정복 with React

 

🗓️ 2023.12.04 ~ 2023.12.17

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

이번 챌린지는 이해가 어려워, 후기만 남깁니다 🥲

 

👩🏻‍💻 [STUDY NOTE]

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

• 컴포넌트가 복잡해지는 원인에 대해 고찰해보기

• 비즈니스 로직을 제압하는 개발자가 퇴근을 한다

• SOLID한 컴포넌트 만들기

• Logic First, React Late

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

이번 챌린지는 이해가 어려워 노션 스터디 노트는 비공개 합니다... 🥲
더더더 많~~이 공부를 해야할 듯한데, 이 스터디 노트를 업데이트 할 날이 올까요...?

---

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

 비즈니스 로직..? 조금 생소한 주제였다. 이번 강의도 왠지 조금 어려울 것 같다고 생각하며 참여했다. 이해되는 날까지 열심히 공부해야지.

 

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

 이번 챌린지의 멘토님은 강의자료를 너무 자세히 잘 정리해주셔서, 언제든지 강의자료를 읽으며 이해를 도울 수 있었다. 또한 디스코드를 통한 소통도 적극적이셨다. 지난번에 같은 멘토님의 Next.js를 주제로 한 프리온보딩 챌린지에도 참여한 적이 있었는데, 그 때에는 Next.js를 사용해 본 적이 없어서 강의자료를 자세히 살펴보지는 않았었는데 다시 찾아보니 당시 강의자료도 디테일했다... 🫢

 여튼 지난 2번의 챌린지 후기에서는 TIL를 각 노션 스터디 노트 페이지에 기록했었는데, 이번에는 비공개를 했으니 이 공간에 공유를 해볼까 한다. (뭐, 거의 반은 어려웠다~ 지만)

---

 

1일차: 컴포넌트가 복잡해지는 원인에 대해 고찰해보기

 

• 강의를 들으며 어려운 부분도 많았지만, 그만큼 배운 것도 많았다. 조금이라도 이해가 되면 내심 기분이 좋기도 했다. 물론, 그 좋은 기분은 잠깐이고 대부분은 물음표 가득한 표정이 되곤 했지만…
• 개발자는 항상 지금 만들고 있는 제품에 대해 만족을 하지 못한다고 한다. 많은 사람들이 시간이 좀 더 있더라면, 더 잘 만들 수 있었을 것이라고 말할 것이다. 하지만 새 프로젝트를 만들어 다시 시작한다 하더라도 실력이 동일하다면 결국엔 같은 결말을 맞이하게 될 것이다. 최근의 경험상 더더욱 인상적으로 남았던 말이었다.
  부트캠프에서 진행했던 프로젝트에서 반드시 하겠다고 했지만 언제부터인가 내팽겨쳐버린 리팩토링, 언제까지 미뤄둘 지 모르는 그 코드들. 차라리 다시 처음부터 만들고 싶다, 라는 생각을 했지만 내 실력이 그대로라면 아마 같은 결과물이 나왔을 것이 뻔한걸 이제는 이해한다. 단순히 시간이 부족해서가 아니라 나의 실력이 그냥 그정도인 것이다. 어떻게든 동작하게 구현은 했지만, 여기저기 지저분한 그 코드들을 보며 리팩토링 꼭 해야지! 하며 기능 구현에 급급했던게 결국은 이렇게 방치되고 말았다. 당시 멘토님이 리팩토링 할 시간에 다른 기능 개발을 하는 것이 회사 입장에서는 훨씬 좋을 거에요, 라는 의견에 반박할 도리가 없었다. 처음부터 잘 짜는 것이 결국엔 최선일지도 모르겠다는 생각을 최근에서야 하게 되었다.
  그러니까, 코드를 짜면서도 “일을 줄이는 일”을 해야하는 것에 공감이 되었다. 이는 비단 개발시에만 고려해야 할 문제만은 아닌 것 같지만.
• 추상화에 대해 다시 생각해볼 계기가 되었던 것도 좋았다. 이전에는 길고 복잡한 로직이라면 당연히 분리하는 것이 바람직하다고 생각하며, 단순히 어떠한 로직에서 코드조각 뭉탱이를 툭 떼어버리는 것이 끝이었는데, 추상화라는 것이 단순히 함수를 분리하는 것에서 끝나는 것이 아니라는 것을 알았다. 강의 예시 코드 중 쫓겨난 코드가 되어버린 fetchData 함수는 좋지 못한 예가 되었고, 그 이유를 이해할 수 있었다. 데이터를 fetch하는 함수는 많은 경우 분리시키는 로직으로 작성을 하지만, setData와 navigate를 인자로 받아 함수 하나가 많은 동작을 하고, 사실상 재활용하기 어렵게 만든 것은 바람직하지 않은 것이다.
  또한 누군가 작업한 “추상화”, 이 추상화에 대한 관점과 생각이 개발자마다 다르다는 사실도 흥미로웠다. 동료 개발자가 추상화 작업을 한다고 하면 약간은 겁이 나고 조심스러워 진다는 의견도, 누군가 추상화한 컴포넌트를 써본 적 있느냐는 질문에 “아…” 라고 탄식을 내뱉으며 뭔가 깨달아버린 나의 모습도 재미있었다. 물론 실무를 경험해보지 못한 나의 탄식은 상상에 의한 것이었지만.
• 첫 날 강의 마지막 즈음, 라이브러리 코드를 뜯어본 이야기가 나왔다. 나는 아직 전혀 모르겠어서 도전하지 못한 영역인데, 유명한 라이브러리 코드를 보는 사람들이 정말 많았다. 나와 비슷한 생각을 하는 분도 있었는데, 그 분이 “라이브러리를 뜯어보고 싶은데,, 봐도 모르는 실력이네요.. 그래도 찬찬히 뜯어보는 게 도움이 많이 될까요??” 이런 질문을 하셨다. 업무에 필요한 것 위주로, 차근차근 보는걸 연습해보라는 피드백이 있었다.  🔗 오픈소스는 이렇게 뜯어보고 참여하면 됩니다 어떤 분이 댓글로 추천해주신 오픈소스 뜯어보는 방법을 설명해주는 영상인데, 한번 봐야겠다.

---

 

2일차: 비즈니스 로직을 제압하는 개발자가 퇴근을 한다

 

• 너무나 잘 이해되어서 뿌듯했고, 많은걸 배웠다고 말하고 싶지만, 단 1%도 그렇게 말하지 못할 만큼 나에게는 어려운 주제였다. 멘토님도 “비즈니스 로직”이라는 주제를 가지고 프리온보딩을 준비할 때 이 주제가 신입/주니어 개발자에게는 좀 어렵지 않을까? 라는 피드백도 받았고, 그런 고민도 하셨다고 했다. 그 어려움을 느끼는 사람이 바로 나였던 것이다. 하지만 헤매는 나의 눈빛과는 무관하게 많은 사람들이 무수히 많은 공감과 질문을 던지며 잘 따라가고 있었다. 😇 아… 나도 이해하고 싶어… 나의 의견을 말하고 싶단 말이야… 뭐, 오늘의 TIL를 한마디로 표현하자면 그렇다는 것이다.
• 어려웠지만 배움은 있었다. “프론트에서 해드릴게요.” 라는 말을 해볼 기회는 없었지만, 이 말의 무게를 알게 되었다. 이전에 아무것도 모르고 javaScript를 배울 적엔 관련 메서드를 보고 필터와 정렬 기능은 프론트에서 구현을 하는거구나, 라고 무의식중에 생각을 했었다. 그러다 부트캠프에서 예제코드를 보며 필터와 정렬과 같은 기능을 백엔드에서 처리해준다는 사실을 알게 되었고, API를 통해 받아온 데이터를 화면에 뿌려주기만 하면 된다는 사실이 너무 신기하고 편할것 같아서 놀랐던 기억이 난다. 하지만 동시에 이는 선택의 영역이라고 생각했다. 프론트에서 처리를 할지, 백에서 처리를 할지 소통을 통해 결정할 문제라고 생각했었는데, 이번 강의를 통해 이러한 로직은 백엔드에서 처리를 하는 것이 바람직하다는 것을 알게 되었다.
  🔖 “프론트엔드는 데이터를 받아 화면에 렌더링하는 역할에 대한 책임이 명확해지고, 백엔드는 DB에서 데이터를 가져와 비즈니스 요구 사항에 맞게 가공한다는 책임에 대해 보다 명확한 코드가 되었음을 확인할 수 있습니다.”
  그리고 정렬이나 필터의 조건이 변경되면 이는 쿼리 스트링으로 다시 API를 요청하는 방식으로, 지금껏 작게나마 해봤던 프로젝트에서 적용했던 방식이었다.
• 하지만 그 이후의 강의는 사실상 이해가 어려웠다. 이해가 어려워지자 어느 순간부터는 실시간 강의는 편한 마음으로 듣고, 이번 멘토님이 강의자료를 너무 잘 정리해 주셔서 복습하는데 시간을 들였다. 하지만 복습을 하며 비즈니스 로직을 분리하는 예제를 봐도, 더 읽어봐도 좋은 자료들을 읽어봐도 이해하기가 어렵고, 어느 시점에서 어떻게 적용을 해봐야할지 감이 잡히지 않아서 살짝 좌절했다. 나는 앞으로 나아가고 있는게 맞을까, 의문을 배운 날이었다. 하지만 포기하지 않을테다.. 🤯🔥

---

 

3일차: SOLID한 컴포넌트 만들기

 

• 사실 이 날의 강의는 우려했듯이 어렵고 이해가 잘 안되어서 거의 라디오처럼 듣고만 있었다. 그렇게 해서라도 듣는게 도움이 되는건지, 안듣는것만 못한지 의문이 들었지만 다른걸 할 의욕이 안들어서 틀어놓고 듣기만 했다. (다음주 강의는 난이도가 상당히 높다고 말씀하시던데… 패스해야 하나 고민중이다…)

---

 

4일차: Logic First, React Later

 

• 이 날은 결국 참여하지 않았다.
• 제공된 자료를 읽으며, React로 개발시 UI를 먼저 그리고 API 호출 로직을 View와 연결하는 흐름을 뒤집어 작성한다면 여러 이점이 있는 것을 알게 되었다. 이전까지는 선호도의 문제라고 생각했던 부분이, 이 또한 다 이유가 있구나, 라는 생각이 들었다. 즉, 비즈니스에 필요한 기본적인 요소를 먼저 정의하고 구현한 뒤 UI를 작성하여 기능과 연동한다면 얻게 될 장점들에 대한 이야기였다. 사실 아직 그림이 잘 그려지지는 않아서 구체적으로 생각해보지는 못했지만, 생각의 전환을 이뤘다는 점에서 의미가 없지는 않았다. (몇 개월 후 다시 보면 분명 이해할 수 있을 것이다)

---

 

• 강의를 듣다보니 이해가 잘 되지 않고, 어려웠던 부분이 많아서 결국 끝까지 듣지 못했다. 세번째 강의쯤에는 거의 라디오처럼 듣는 수준이었고, 결국 마지막 강의는 패스했다. 하지만 멘토님께서 강의자료를 너무 잘 정리해주셔서 강의자료를 읽어보며 조금이마나 생소했던 주제에 다가갈 수 있었던 것 같다. 물론 여기서 끝이 아니라 내일을 위한 도약이라고 하자… 😇
• 마지막 강의 “아하! 모먼트”의 성장에 관한 이야기를 인상적으로 읽었다. 개발자들은 공부하는 것을 참 좋아하고(?) 성장을 정말 중요하게 생각한다. 물론 상당히 주관적이고, 다루기 어려운 문제이기는 하다. ‘어제 보다 나은 오늘의 나’, 단순히 무언가를 경험했다는 것 자체만으로 성장이 이루어지지 않는다는 것에 동의한다. 또한 성장이 보통 선형적이라기 보다는 계단식이라는 표현에도 공감이 되었다. 그 계단식 성장에 “아!”라는 깨달음을 얻기까지는 단지 시간의 흐름에 의존하는 것이 아니라 의식적인 노력이 반드시 필요하다. 알고 있었지만, 누군가 이렇게 뼈때리는 이야기를 하면 나는 또 다시 나를 되돌아볼 기회를 가진다.