Frontend Fundamental 모의고사 2회차 회고

토스에서 진행하는 frontend fundamental 모의고사 1회 차와 2회 차를 모두 참여하였다.

 

참여했던 이유는 단 하나다. 

다른 프론트엔드 개발자들은 어떤 코드를 지향하는 것인지, 어떤 방향성을 갖고 코드를 작성하는지 궁금했다.

무엇이든지 배울 점들이 있을 것 같아서 신청을 했고, 운이 좋게 2회 모두 참여할 수 있었다.

 

1회 차 모의고사

1회 차 모의고사 때 주어진 과제는 실제로 이전에 풀어보았던 과제가 출제되었다. 

과제의 난이도는 어렵지 않았지만, 토스에서 보고자 했던 것은 확장성 있는 코드와 유지보수가 쉬운 코드인지 보는 것이었다.

 

확장성 있는 코드와 유지보수가 쉬운 코드는 내 나름대로 정의를 가지고 풀어 나아갔다. 

그럼에도 많은 궁금증과 고민이 있었고, 이것들을 품은 채, 라이브 해설강의를 들어보았다. 

 

해설강의는 토스에서 현재 뛰고 계시는 Chapter Lead분이 직접 어떤 부분들을 집중해서 보고 있었는지 알려주셨다. 

 

이때 내가 배웠던 점은 

1. 추상화와 추출의 명확한 차이
2. UI와 코드의 일대일 대응

 

 

1번에 대한 구체적인 내용은 이 글에서 볼 수 있다. 이 글을 작성해주신 분이 해설강의를 진행해 주셨다. 되게 센스있게 코드를 작성하시는 것 같았다.

나는 이전까지 단순하게 "추출"을 하고 있었다. 그리고 지금 생각하면 부끄럽지만 스스로 뿌듯해했었다.

"추상화"를 제대로 하기 위해서는 확장성이 있어야 하고, 공통되는 부분들을 명확하게 파악하고, 컴포넌트의 책임을 명확히 하고, props를 받을 것이 있다면 외부에서도 쉽게 이를 파악할 수 있게 설계하는 것이 중요했다. 당연히 읽기도 쉬운 코드라는 조건도 만족해야 했다.

이는 단시간에 잘할 수 있는 것이 아니었고, 많은 시간과 노력이 필요했다. 

 

2번에 대한 내용은 말 그대로 코드와 UI를 잘 맵핑하여 코드를 직관적으로 파악하고 이해할 수 있게 하는 것이었다.

이렇게 되면 코드의 유지보수성이 올라가고 쉽게 예측이 가능하기 때문에 비교적 이해하는데 덜 피로한 효과가 있다.

일대일 대응

 

물론 항상, 100%, 정답은 없다.

상황에 따라 잘 적용할 수 있는 능력을 길러야 하고, 이에 맞게 꾸준히 시도하고 경험하는 것이 중요하다고 볼 수 있다.

 

 

2회 차 모의고사

1회 차 모의고사가 끝이 나고 4개월 뒤에 2회 차 모의고사가 열렸다. 

이번에는 리팩토링 모의고사였다. 

내가 얼마나 발전했는지 확인할 수 있는 시간이었다. 

 

확실한 거는 이전 해설강의에서 배웠던 점들을 떠올리고, 평소에서 연습했던 부분들은 쉽게 적용할 수 있었다. 

그럼에도 추상화를 가져가는 단위/범위를 선정하는데 고민이 많이 들었고, 예측이 불가능한 props를 처리하는 방법에 대해서도 고민을 많이 했었다.

이번에도 이런 고민들을 유념한 채로 라이브 해설강의를 들었다. 

 

하나 놓치고 있던 점은 일대일 대응을 지금껏 "잘못 적용"(주관적 기준)하고 있었다는 점을 깨달았다.

위의 이미지는 "올바르게" 적용한 버전이다.

 

이때 내가 배웠던 점은 

1. UI와 코드의 일대일 대응("올바른" ver.)
2. 예측이 가능한 코드 작성

 

1번은 아래의 이미지와 같은 방식으로 구현을 했었다.

"100%", "무조건", "정답"은 없다는 점을 인지하고 읽어주시면 될 거 같다.

 

아래의 코드가 틀렸다기보다, 처음에 코드를 마주했을 때 일대일 대응이 바로 되지 않아서 코드를 짧은 시간 내에 직관적으로 이해하기/예측하기가 힘들 수 있다. 

실제로는 <신청자 정보 입력 컴포넌트 />를 타고 들어가서 코드를 읽어야 한다는 단점도 있다. 

일대일 대응(my version)

 

2번은 말 그대로 예측이 가능한 코드를 작성해서 다른 이의 코드를 읽는데 에너지를 덜 쓰는데 초점이 맞춰져 있다.

"이 props는 왜 전달하지?" 하고, 컴포넌트를 타고 들어가고, 여러 파일을 넘나드는 행동을 하는 것을 최소화하는 것이 중요하다. 

 

이 부분은 평소에도 많이 연습했다고 생각했지만, 이번 과제에서 곤란한 부분들을 마주했고, 

이후에 리팩토링을 진득하게 해 보면서 나름대로 해결책을 찾아서 뿌듯하다. 

 

---

마무리

매 회차를 진행할수록 성장하는 경험을 하고 있다. 이번에도 갈고닦을 구석들이 있어서 기쁘고, 다음에는 얼마나 성장을 한 상태에서 모의고사를 진행할지 기대가 된다. 

이런 모의고사 덕분에 코드를 작성하는 것이 요즘은 너무 즐겁다. 코드를 작성하면서 하는 고민들마저 즐겁다. 문제를 풀어나가는 과정 자체가 이렇게 재미있다는 사실을 다시 한번 느낄 수 있었다.