프론트엔드라는 영역은 없었음..
웹페이지, 웹콘텐츠, 웹서비스 (프론트 엔드 백엔드 영역 구분x)
Model View Controller → View 자체가 너무 거대해졌고 , 어려워지고, 복잡해지고
프론트엔드를 담당해! → 웹퍼블리셔, (Css, html)
View 따로 때서 독립적으로 개발하자 !!! (프론트엔드)
리액트에서 폴더구조 설계하는 법 ( 폴더 구조 설계와 어떤 함수를 어디다 두어야 하는지)
View
폴더 구조 설계와 어떤 함수를 어디다 두어야 하는지에 대한 개념을 아직도 잘 모르겠습니다. 어떤 식으로 공부를 해나가야 할까요?
→ 어떤 함수죠?
api 호출하는 함수
UI를 다루는데 상태값 변화시키는 함수일 수 있다.
가장 쉽게 폴더 구조 구현하기
- 감이 없다면 Framework를 참고하는 것도 방법이다. https://nextjs.org/docs/getting-started/project-structure
- url을 기준으로 폴더 구조를 구현한다.
pages 폴더 아래에 폴더랑 함수를 만드는 것만으로도 url이 완성됩니다.
/home.tsx
/ home/login
- 지금 내가 만들고자 하는 파일 혹은 함수는 어떤 정책을 다루는 것일까?
커스텀 훅
UI를 State와 분리시킨 것은 커스텀 훅이 아니다.
대부분의 UI 레이어에서 로직을 별도로 hook으로 분리하는 이유는 UI만 다루고 싶어서다. 만약 다루는 상태값이 일반적이라면 굳이 분리시킬 필요는 없다.
→ 하지만 경험이 적다면 판단하기 어려울 수 있다.
프로젝트 리스트
- MBTI, 애완동물 자랑하는 SNS
- 만원의 행복(?)
갖고 싶은 아이템을 공개적으로 올리고 -> 올린 사람이 n 명의 사람을 모집한다 설명 => 1/n 씩 돈을 기여하도록 하고 => 랜덤으로 당첨이된 사람에게 아이템이 감.
SNS 접목 ) 회원가입 후 지갑에 100만원 자동 충전 => 검색창에 원하는 아이템 작성 => 아이템 확인 후 돈 기여 => 랜덤 뽑기
걱정되는 부분 ) 주어진 API 로 구현이 가능할까요?
- 머쓱이 꾸미는 사이트 개발진스 사이트와 비슷