본문 바로가기

Instagram-clone2

[Instagram-Clone] 로그인/가입 화면 기획 2023-01-08 PM 01:20 로그인 화면 기획 가입하기를 누르면 제자리에서 옆 이미지와 Input만 늘어난다 Login컴포넌트와 SIgn Up 컴포넌트로 나눠야 할 것 같다. Components 파일 구조 기본 적인 파일 구조는 이렇게 가져가야 할 것 같다 (●'◡'●)! 라고 말하는 순간 나의 머릿속에 한가지 섬뜩한 생각이 스쳐 지나간다 "Style은 어디에 저장 하지 (#°Д°)?" 1. Module.css 를 사용하여 컴포넌트 각각에 파일을 추가하여 관리한다 2. Page 폴더에서 한 번에 관리한다 3. Molecules에서 각각 단위의 Layout 마다 관리하기 4. Organisms 폴더에서 각 폴더마다 관리한다 3번으로 결정했다 2023. 1. 8.
[Instagram-Clone] 파일 구조 파일 구조 파일 구조에 대해 깊게 생각해 봐야 할 것 같다. 예전에 작은 프로젝트를 진행했을 때도 파일 구조로 인해 프로젝트가 더러워 보이는 것은 물론 내가 진행하는 프로젝트 이지만 알아보기 정말 어려웠다. 저 당시 프로젝트를 끝내고 나서 "다음 프로젝트 때는 많은 시간을 들여서라도 파일 구조에 대하여 확실히 기획하고 가자" 라고 다짐했었다 그것이 지금이다 Atomic Design React로 프로젝트를 하는 사람들이면 한 번쯤은 고민해 본다는 Atomic Design Pattern (이하 Atomic )이다. Atomic은 Componenet를 정말 잘게 쪼개서 하나하나 조립해 가는 방식이다 사진을 보도록 하자 위 사진은 Navigation Bar을 구성하는 요소를 점점 잘게 쪼개 본 것이다 Atom .. 2023. 1. 8.