[항해플러스] 프론트엔드 2기 4주차 WIL

1. 문제

a. 평소에 바닐라 자바스크립트를 거의 사용하지 않는데 과제를 바닐라 js로 풀어보려고 하니까 어떻게 접근해야할지를 몰라서 며칠동안 고민했었던 것 같다. 
b. props drilling을 피하고 외부 컴포넌트에 있는 값을 사용할 수 있는 방법을 고민하였다.

 

2. 시도

a. 처음에는 제공된 코드(main.js)를 그대로 가져와서 리팩토링 해보려고 했는데 DOM 조작을 최소화해야한다는 것을 보고
템플릿 리터럴로 HTML 요소를 생성해볼까 시도해보았다.
b. props를 객체화하여 전달하는 방식으로 여러가지 함수들을 부모 컴포넌트에서 하나의 객체로 합쳐서 그 객체를 props로 전달하였다.

 

3. 해결

a. 그것도 영 맘에 들지 않았고 코드가 지저분해 보였다.
그래서 그냥 리액트를 임포트하고 main.basic.js를 main.basic.jsx로 확장자를 변형하여 리액트 코드로 작성하였다.
b. 하지만 그렇게 작성하니 App 컴포넌트에서 모든 비즈니스로직을 컨트롤하는 형식이 되어버렸다. 켬포넌트에서 다루는 요소에 들어가는 데이터들은 해당하는 컴포넌트에서 가공하거나 처리할 수 있도록 여러 곳에서 사용되는 상태 값을 외부 context로 분리하여 props로 전달하지 않고 사용할 수 있도록 하였다.

 

4. 알게된 것

데이터와 UI, 렌더링 로직을 분리하여 작성하는 것이 클린코드라는 것을 알게 되었고, 무조건 변수는 변수끼리 함수는 함수끼리 모아둘 것이 아니라 관련된 변수와 함수들끼리 묶어서 배치하는 것이 좀더 직관적이고 가독성 좋은 코드라는 것을 알 수 있게 되었다.

 

5. 지난 목표 회고

a. 팀원들과 내가 작성한 코드의 방향성에 대해 설명하고 또 내가 작성한 코드를 더 디벨롭할 수 있는 방법들에 대해 이야기해 보았다. 그래서 내가 생각하지 못했던 부분을 발견할 수 있었고 클린코드에 더 다가설 수 있는 계기가 되었다.
b. 개인 공부 시간을 조금 더 늘릴 수 있도록 했다. 취미생활이 단절되어버린게 조금 아쉽긴 하지만 10주 동안 몰입을 위한 희생(?)이라고 생각하고 참자.....

 

6. 다음 목표

a. 코드 작성한 것에 대해서 다른 동기들과 이야기 해보기
b. 잘 한 팀들이 어떻게 하고 있는지 염탐좀 해보고 벤치마킹좀 해봐야겠다. 이번에 코딩컨벤션을 제대로 정하지 못한 것이 조금 아쉽다.