210708(목) - 세팅 완료, 디렉토리 관련 논의, 컴포넌트 제작 시작

1. 세팅 완료 (프론트)

2. 디렉토리 관련 논의 (프론트)

3. 컴포넌트 제작 시작 (프론트)

---

1. 세팅 완료 (프론트)

파일 확장자 .js vs .jsx

파일 확장자를 .js 또는 .jsx로 설정하는 부분에서 발생하는 기술적인 차이는 없다. .js를 사용하더라도 바벨에 의해서 jsx 확장자가 트랜스파일링 되므로 어떤 확장자를 사용하든지 상관이 없다. 그래서 어떤 것을 사용하든지 상관 없는 입장. 두 확장자를 비교하면 오히려 공식적인 문법이 아닌 .jsx 확장자가 .js에 밀리는 느낌이었다. 사실 어느 한 부분이라도 사용해야만 하는 이유가 있었다면 사용했을 것 같은데, 찾지 못했다. 결국은 .jsx가 표시함으로써 얻는 얻는 이득이 마땅히 없고 오히려 jsx가 공식적인 문법이 아니라는 점 때문에 .js를 사용하기로 결정했다.

emotion vs styled components

- 작성 예정

2. 디렉토리 관련 논의 (프론트)

pages 폴더명에 page 붙일 것인지

사실 pages라는 폴더 안에 있는 파일에 pages라는 단어를 붙이는 것은 엄밀히 말하면 문자열이 추가되어 용량의 낭비일 수도 있다. 하지만 우리 프로젝트의 페이지 수가 적고 조금의 용량 차이보다 페어가 직관적으로 파일을 확인하는 게 더 중요하다고 생각해서 page를 붙이기로 결정했다.

컴포넌트 폴더의 구성

Button이라는 컴포넌트 폴더 안에 Button.js, Button.styles.js, Button.stories.js로 구성하기로 결정. index.js를 쓰지 않은 이유는 cmd + p 로 검색했을 때 그 파일의 주소를 다시 확인해야 하는 불편함이 있어서. 또한 style 파일과 관련해서 컴포넌트 파일에 같이 있는 것과 분리된 파일로 존재하는 게 크게 상관 없다고 생각했다. vscode로 양쪽 나누어서 보는데, 파일 하나에 있든지, 다른 파일에 있든지 똑같다고 느꼈다. 그래서 분리된 파일을 선호하는 크루의 의견을 따르기로 결정헀다.

디렉토리 구조

고민의 흔적 - 큰 의미는 없다..ㅎ

프로젝트에서 사용될 컴포넌트를 어떻게 나눌지 이야기를 나누었다. 이전 미션들에서 자주 사용되는 작은(예를 들어, 버튼) 컴포넌트들은 shared 또는 common 이라는 폴더 속에 위치하고 그러한 컴포넌트들이 합쳐져 또다른 컴포넌트들을 생성하면 mixin이나 다른 폴더에 따로 두어 보관하기도 했다. 하지만 굳이 자주 사용되는 컴포넌트와 이외의 컴포넌트를 구분해야하는 이유가 있나라는 생각이 들었다. 어차피 컴포넌트 수정이 필요하면 보통 cmd + p 검색을 해 들어가서 그러한 분리가 나에게는 큰 의미가 없었다. 시각적으로 vscode 왼쪽의 디렉토리 구조를 보고 찾아 들어가도 오히려 가끔 모호한 컴포넌트가 있어서 어디에 있었는지 잠깐이지만 헷갈리기도 했다. 그래서 components라는 폴더 속에 다 함께 같은 레벨로 두자라는 말이 나왔다. 이 부분은 프로젝트가 커지면 컴포넌트가 많아진다고 하는데, 아직 이 방식이 안 좋은 명확한 이유는 잘 모르겠다. 이야기를 계속 하면서 멍청한 컴포넌트로 만들자는 방식에서 presentational 컴포넌트와 container 컴포넌트로 나누자는 말이 나왔고, custom hook을 사용하여 container 부분을 대체할 수 있겠다는 생각을 했다. 그래서 또 나온 생각이 훅을 직접적으로 사용하여 데이터를 가져와 뿌리는 컴포넌트와 다른 컴포넌트로 나누자는 이야기도 나왔다. 그런데 이런 생각들을 하면서 커스텀 훅을 사용한 컴포넌트를 따로 분리함으로써 얻는 이득이 있나라는 생각을 또 하게 되었다. 커스텀 훅이 변경되어 데이터가 바뀌면 결국은 양쪽 모두의 코드를 건드려야 하니깐? 결론이 나지 않아서 컴포넌트를 직접 분리해서 그 합성의 수를 기준으로 나누어보았는데, 대략 아토믹 디자인 패턴과 조금 비슷해졌다. 그래서 이렇게 나누는 것도 나쁘지 않겠다라는 생각을 하긴 했다. 아 수를 기준으로 했을 처음에 1, 2, 3, 4 이렇게 나왔는데 바로 기각된 이유는 컴포넌트 중간에 새로 만들어서 추가되면 위치 모두 바뀌니까는 의견이 있어서. 다시 돌아가서 확정은 아닌데 아토믹으로 일단 가보면서 기준을 다시 세워보자고 한 상태이다... 아토믹을 반대했던 이유 중 하나는 코딩을 하는데 내가 원자, 분자, 유기체 이런 단어들까지 알아야 하고 그게 뭔지 지식이 있어야 했던 것인데 다시 생각해보면 많은 개발자들이 이미 한 번 쯤을 들어봤을 것이라고 생각해서 방금 말했던 게 이유는 되지 않을 듯? 지금 생각의 흐름대로 글이 진행되는데 사실 결론이 내려지지 않았다는 게 결론.

3. 컴포넌트 제작 시작

스타일링 네이밍

가장 바깥을 감싸는 애를 Container라고 하기로했다

Props 순서

children 맨 앞