10월 3주차 주간회고

22.10.10 월요일 🌬🤯🤜

✅ TODAY I DONE

#1 CoStudo Project 주간회의

월요일은 CoStudo Project의 주간회의가 있는 날이다.

오후 2시에 모이고 끝나는 시간은 미정인 회의로 한 주의 계획과 구두로 해야하는 주요 논의 사항에 대해 토의하는 회의다.

주요 논의 사항을 정리해보면....

 

1. 협업 방식

파크의 건의로 Discussion 이나 PR 리뷰의 마감시기, 다른 팀원이 구현한 컴포넌트에 의문이나 개선 방안이 생길 경우 그 의견을 어떤 식으로 전달할지와 같은 협업 방식에 대해 논의했다.

어찌보면 사소하고 별거 아닌 것 같지만 같은 프론트 분야의 4명이 하나의 코드를 공유하여 개발하다보니 원활한 프로젝트의 진행을 위해서는 이런 세세한 협업 방식을 규칙으로 딱 정해두는게 좋은 것 같다.

여담으로 협업 방식을 논의하다 문득 코쿼 시절이 생각났는데, 코쿼 때 2~3주 단위로 단기 프로젝트를 할 때는 이런 세세한 부분에 대한 논의가 좀 사치로 느껴졌었다. 기능 구현하기도 바쁘니까. 그래서 그라운드 룰이라고 큼직한 룰만 잡아놓고 세세한건 적당히 알아서 하자는 식이었는데 자유 프로젝트를 진행하니 이렇게 세세한 협업 방식에 대해 팀원과 함께 논의하고 정하니까 진짜 하나의 프로젝트의 일원으로 다함께 작업을 하고 있구나가 느껴져서 개인적으로 너무 좋았다.

 

2. 컴포넌트 스타일 적용 방식

오늘의 제일 핫했던 주제인데, 어느 정도냐면 논의 시작하기 전에 파크께서 얘기가 길어질 것 같으니 잠깐 쉬고 시작하자고 말씀하실 정도였다. 실제로 회의를 2시간 반 정도했는데 그 중에 1시간 반을 이 주제로 얘기했다ㅋㅋㅋㅋㅋㅋ.

이 주제는 지난 주 파크의 PR에서부터 시작되었는데.

출처 : https://github.com/Co-Studo/Co-Studo-front/pull/41#discussion_r988832490

파크께서 지난 주 메인페이지 작업에 들어가기 위해 지금까지 구현한 컴포넌트들을 활용해 메인페이지의 주요 컴포넌트를 구현해주셨는데 해당 컴포넌트의 스타일을 적용하는 방식에 대해 위와 같은 제이미의 의견이 나왔다.

파크께서 하신 방법은 css props를 사용하여 스타일을 적용하신거고 제이미께서 말씀하신 기존 styled 방식은 스타일이 적용되는 컴포넌트를 styled-components를 사용해 구현함과 동시에 파일도 분리하여 가져와 쓰는 방식이다.

 

이 주제에 대한 내 의견은 css props 방식과 비교했을 때 styled components의 장점 중에 return하는 컴포넌트 구조에서 스타일 관련 코드를 분리하여 구조를 깔끔하고 적절한 네이밍을 통해 각 컴포넌트의 역할에 맞게 한 눈에 파악할 수 있다는 점이 좋아서 가능하면 styled components를 활용하는게 좋지 않을까 생각했다.

css props 방식은 한번도 안써봐서 명확한 장단점은 잘 모르겠지만, 일단 첫인상이 그냥 html 태그에 인라인으로 스타일을 적용하는 느낌이라 근본적으로 html파일과 css 파일을 분리하게 된 원인이 생각나게 해서 갸우뚱 싶었다.

거기다가 css props만 딱 사용하는게 아니고 styeld components도 함께 사용하고 있으니까....

스타일을 적용하는 방식을 하나로 통일하는게 추후의 유지보수를 고려했을때 좋지 않을까?

그런 생각이 들었다.

 

그런데 이제 css props 방식을 주장하시는 파크의 말씀을 들어보니....

1. 스타일 컴포넌트와 react 컴포넌트의 구분이 어렵다.(구분을 위한 추가적인 네이밍 컨벤션 필요)

2. 어떤 html 태그를 사용하는지 명시적으로 보기 쉽다.

3. CSS Override가 쉽다.

4. Styled Components의 적절한 네이밍을 지어주는게 부담이 된다.

5. Styled Components를 사용하면 불필요한 추상화가 발생한다.

결론 : 기본적으로 CSS Props를 쓰되 중복되는 스타일이나 꼭 쓰여야 할 때만 Styled Components를 활용하자.

 

이런 말씀이셨는데...솔직히 내 기준에서는 위에 쓴대로 React 컴포넌트와의 구분이 힘들긴 해도 추가적인 네이밍 컨벤션을 사용한다면 Styled Components로 스타일을 분리를 한게 오히려 구조를 한눈에 파악하는게 좋다고 생각해서 파크의 말씀에 납득은 갔지만 크게 와닿지는 않았다. 거기다 사실 주요 근거로 말씀하셨던 컴포넌트의 추상화 부분이 약간 학습이 필요한 부분이라 한번에 이해가 안가서 더 그랬던 것 같다. (컴포넌트 추상화 자료)

 

하지만 지금 내가 css props 방식에 불호인 점이 명확히 css props 의 장단점을 알아서가 아니라 단순히 안해본 방식이라 불호인건가? 생각해보니 react 의 시작을 styled components와 함께 했었기 때문에 그냥 그 방식에 너무 익숙해져서 편파적으로 생각하는게 아닌가? 그런 의문이 들었다. 그래서 이 참에 새로운 스타일 적용 방식을 한번 시도해보고 그 장단점을 직접 체감해보는 것도 좋을 것 같다는 생각이 들어서!!!

 

최종적으로!!! 1시간 30분의 긴 논의 끝에!!!

css props를 default로 꼭 필요한 곳에서만 styled components를 활용! 하는걸로 결론을 지었다! 와아!

일단 해당 방식으로 해보고 추가적인 의견이 생기면 그때 다시 얘기하기로 했다.

 

너무 긴 논의였어서 되짚어 회고하는 지금도 약간 기빨리는 느낌이 든다...(^-ㅠ)

사실 약간 주제가 딱 이 주제 뿐 아니라 제이미의 댓글 아래 추가로 도니가 남겨주셨던 애초에 스타일 코드를 html 이 담긴 컴포넌트와 파일을 분리하는게 맞나? 그렇게 분리할거면 애초에 css in js 방식을 쓰는게 맞나? 라는 의문이나, 외부에서 컴포넌트에 스타일을 주입해주기 위한 인터페이스인 sx props를 적용하는건 어떻게 생각하는지? 적용한다면 어떤 문제가 있을지 이런 부분에 대해서도 약간 주제가 이리저리 바껴가지고 더 길게 얘기를 나눈 것 같다.

 

하지만 그만큼 스타일과 관련하여 여러 주제에 대해 논의를 할 수 있어서 충실하고 알찬 주간 회의였던 것 같다!

^_^)b 굳굳! 만족!

 

#2 JS 스터디

도쨈과 함께 코쿼가 끝나고 JavaScript 의 기본기를 다지며 면접 대비도 하자는 의의로 7월 말부터 DeepDive 책을 이용해서 자바스크립트 스터디를 주 1회 진행하고 있다.

이번 주 주제는 프로토타입이었는데...원래 스터디는 어제, 일요일 밤 10시였는데 내용이 너무 흉악해서 다들 만장일치로 시간이 좀 더 필요할 것 같아 오늘, 월요일 밤 11시로 미뤘다.

프로토타입에 대해 아리까리하고 어렴풋이 알고 있던 부분들을 명확히 아 이제 뭔지 감이 좀 잡힌다 수준으로 학습했다.

그런데...뭔가를 암기를 할 때 입으로 소리내서 중얼거리는걸 좋아하는데 이번에 프로토타입을 공부하면서 몇번이나 혀가 꼬였는지 모른다. 무슨 잰말놀이 하는 줄 알았다.

진짜....

프로토타입도 객체이고 모든 객체는 프로토타입을 가지므로 프로토타입도 자신의 프로토타입을 가진다.
생성된 프로토타입의 프로토타입은 Object.prototype이다.
프로토타입을 가리키는 프로토타입 프로퍼티...
- 이웅모, 『모던 자바스크립트 Deep Dive』

@_@)...오메...헷갈리기도 엄청 헷갈리고 혀도 꼬이고...진짜 고역이었다. ㅅㄹㅈ....

 

그래도 어찌저찌 잘 준비했다!

답변은 매번 그렇듯이 확신이 없는 부분에 대해 또 쭈굴거리면서 답변해서 자괴감이 또 쌓였지만..^-ㅠ)...

계속 연습하다보면 늘겠거니 생각한다....

 

❌ BACK STEP

토요일 하루종일 잠만 잤더니 밤낮이 극단적으로 바껴서 오늘 아침 7시에 잠들고 2시에 깨가지고....

프로젝트 회의 + 프로토타입 공부 + JS 스터디 밖에 못했다.

덤으로 운동도 못했다....

 

⭕ ONE STEP

한게 별로 없지만 그래도...

프로젝트 회의에 열씸히 참여하고...!!

프로토타입도 열씸히 공부해서...!!

JS 스터디에도 열씸히 참여했다...!!

^ -ㅠ)gㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ