[파이널 프로젝트] 개발 일지-1

📌 개발 진행 및 완료상황

페이지 만들기 전에, 컴포넌트 먼저 만들자!

 

 

1. 체크박스 컴포넌트 만들기 (view파일 만들어서 테스트 해보기,,)

[참고]
수업 때 배운 modu-next 폴더의 views의 signUp.view와 components의 ClientCheckBox

 

2. 추천 검색어를 표시하는 재사용 가능한 칩스 컴포넌트 만들기

 

 

[이슈] 

App.tsx 파일에서 컴포넌트를 넣어주고 localhost에서 확인해보니 {term} 이라고 그대로 노출됨.. 

map부분 코드를 보니까 말도 안되게 label을 문자열로 쓰고 있었다 

label까지 치고 엔터쳐서 자동완성 된 것 같다 😕

 

암튼 빼주니까 잘 나오는 걸 확인했고

스타일도 적용까지 끝 !

 

 

3. 탑탭(TopTab) 컴포넌트 만들기

 

[이슈] 

클릭된 탭에 active라는 클래스를 붙여서 위의 이미지처럼 선택된 탭에 컬러, 밑줄을 주기위해

isActive가 true면 active를 붙이고 효과적용, false면 빈 문자열을 붙여서 효과가 적용되지 않도록 했는데,, 

cx 함수의 두 번째 인자로 조건부 클래스를 전달할 때, 삼항 연산자가 아닌 객체 형식을 사용해야한다고 함

하핫,,,

검색해보고 이렇게 수정했다 !

 

 

4. 하단 필터 팝업 컴포넌트 만들기

 

이런 필터 버튼을 클릭하면

 

바텀시트가 올라오는 컴포넌트

 

여기서는 잊지 않고 두번째 클래스 네임을 객체형식으로 넣어줬다! 

 

 

 

📌 To-do list

• reset css 파일 생성하고 적용하기
• view 파일 분리 여부
• 깃 머지 해보기 (프론트)

 

📌 회고

 

수업 중 사용한 classNames 라이브러리에 className을 여러개 적용할 수 있다는 걸 오늘 처음 알았다..!

생각해보면 당연한거긴 한데 문제는 내 생각이 너무 짧다는 것 ^^ㅎ

가끔 듣는 다른 인강 강사님이 "이 컴포넌트의 입장에서 보면 뭐가 필요할까요?" "이 버튼의 입장에서 보면 뭐가 있어야 작동할까요?" 이런 식으로 설명해주시곤 하는데, 오늘 정말 내가 작성할 코드의 입장에서 뭐가 필요한지를 단계적으로 생각해보는 사고가 필요하다고 느꼈다. 물론 시간이.. 오래 걸리겠지? 😮‍💨 

 

 

 

---

📝 컴포넌트 용어에 대한 정보

https://yozm.wishket.com/magazine/detail/1292/

 

📝 만든 컴포넌트로 페이지 구성할 때 참고할 부분

git repository 중 modu-test의 리액트 훅 폼 예제 (CheckBox 컴포넌트를 사용하는 페이지에서 리스트 처리를 하고 <field set>으로 감싸주기)