위코드 week11~12(2차 Project, 프론트 후기) - 2차 프로젝트 기간동안 실질적으로 한것들, 알게된것 , 질문한것

 

 

 

난위도 : 개빡셈....ㄷㄷ

전반적으로 프로젝트 들어가고 난 후 TIL 을 잘 작성 안한것같다

앞으로는 신경쓰고 3차로는 개인프로젝트로 하나 구현할 예정이다

 

 

 

 

 

 

 

 

 

✔️ 2차 프로젝트 기간동안 한것들~!!

*3주차 리팩토링 기간때는 할머니 상때문에 aws 배포만 한점 양해 바람

 

1주차		2주차
기간	내용	기간	내용
10/25 (월요일) at. 서울역	- 초기세팅 및 이슈 생성하기 - 이미지 url 찾기 - 초기세팅한거 clone 받고 오류뜨는지 체크하기 - HTML style 컴포넌트 적용해서 메인페이지 구성하기(style 컴포넌트 에대해 공부하고 적용하기)	11/01 (월요일) at. 서울역	- 커뮤니티 답글 참고해서 로컬스토리지 탬포느린거 해결 - 태규님 모달 코드보고 내것도 짜보기 - 원영님 윤진님한테 재사용 카드컴포넌트 알려주기 - 원영님한테 Linkto 경로 어떻게 할껀지 물어보기(재사용성 고려) - Header에있는 로그인 따로 빼기(재사용으로 쓰고있는 컴포넌트 어떻게 할건지 생각해보기 - 아침에 일찍 서울스퀘어가서 블로그쓰기 - 내일 6시 기상 - fontawesome 밑에 링크대로 전부 바꾸기 className 적용하지말기 - 프론트 코드리뷰 이대 커뮤니티에 질문 폭탄남김
10/26 (화요일) at. 서울역	- Nav 컴포넌트 레이아웃 구성하고 기능구현 - 팀노션 week 2주차로 바꿔도 되는지 물햣어보기 - 각자 이미지 검사하기 - 세션 듣고 develop 브랜치 추가했음 - 빽엔드 모델링한부분 서로 프론트랑 공유했음 - Nav Header 레이아웃 구현했음	11/02 (화요일) at. 을지로입구	- 모달창 열고 닫는 토글에대해 질문하기 - 지우기 버튼 눌렀을때 한탬포 느린거랑 사용하지않는 searchValue 어떻게해야되는지 확인하기 재원님이랑 얘기하기 - TIL 작성하기 - 커뮤니티 질문한거 노셩에 정리하기 - 동권님이랑 같이함 - 검색이랑 모달 잘못짚고 있는거 관희님이 잡아주심
10/27 (수요일) at. 집	- 학점은행제 강의 2개이상듣기 - 윤진님이랑 원영님이랑 Liketo 로 id전달하는 방법에대해 의논하기 - style component 공부해서 가독성있게 코드 수정하기 - Header 에서 안쓰는거 alert 창띄후고 로그인시 어떻게 처리했는지 1차꺼 보고 따라하기 - 다 끝나면 git rebase로 push 올리기(모르면 세션 듣기) - 내일 일어나서 운동 갔다가 TIL 작성하기 - 필요데이터 모델링 짠거 참고해서 휘민님한테 주기	11/03 (수요일) at. 을지로입구	- 문제 4개 해결하기 - 커뮤니티에 올린질문 정리후 개인 노션정리 -관희님이 얘기해주신거 코드반영 아직 안풀린거 등 커뮤니티 남기기 - 프론트 빽엔드 진행사항 확인후 합치기 - 라우팅은 아직 해결못함 - 프론트 병합
10/28 (목요일)  at. 종로	- Nav에서 햄버거바 클릭시 메인카테고리가 나오도록 수정하기 - 검색엔진 클릭시 밑에 추천검색어 등등 나오게하기 - 밑에 footer 레이아웃 구현하기 - Nav 까지 한거 리팩토링한거 - 디테일이랑 메인에 정보줘야될꺼 fetch 요청 routing 적기 - 피어리뷰 남긴거 수정하기 - useParams에대해 공부해보기	11/04 (목요일) at. 을지로입구	- 검색 마무리 및 추가 모달 구현 , 팀소계 라우터 구현 - 빽엔드 데이터 연결하고 수정할부분 수정함 -관희님 전역상태관리 소박한 특강 - 지현님 카카오 로그인 마무리함 - 프론트 + 백 병합
10/29 (금요일) at. 종로	- 중단 카테고리 레이아웃및 Link to로 데이터 보내기 - 학점은행제 과제하기 - cardList 원영님 코드 보고 따로 컴포넌트 분류 안했으면 분류하기 - cardList 목데이터 만들기(원영님꺼 참고) - props로 값을 넘겨서 style.js 구성하기 - 한파일에 scss까지 다 쓰기 - mixin style.css로 다시 구성하기 - 검색바 input 값 적으면 로컬스토리지에 저장되겠음하기	11/05 (금요일) at. 서울역	- 팀원들 merge 됬는지 확인하기 - 발표하는거 마무리 준비하기 - 팀원들이랑 사진찍기 (발표)

 

 

 

 

 

 

 

 

 

 

✔️🤷‍♂️알게된것들~~ 중요~!!!

 

• 검색기능은 해당 검색어를 List 페이지로 전달하고 그 단어로 백엔드에 요청하면된다
• 모달부분은 전체 태그, 모달 외부 태그 , 모달태그 이렇게 3개로 구분하려 로직을짜고
  모달 외부 태그에 state 값을 false 로 줘서 꺼지겠음 하면된다
• 비동기를 동기로 하고싶을때는 setState에 첫번째 인자로 콜백을 넣는다
• 전역으로 관리할때는 app.js 에서 가장 상위에 둘러싼다
• Routes에는 경로에대한 부분을 적고 app.js에는 나머지 부분을 적는다
• fontawesome을 쓸때 <i> 태그로 적어줘야된다 컴포넌트 말고~

 

 

 

 

 

 

 

 

✔️질의 응답~! 개많이 물어봄~!😆😄

 

1. Style Component 질문

- main.js에서 import된 일반 컨포넌트에 직접 style 속성을 주고 싶은데 생각해보니 className은 아닌것같고 style 태그로 감싸자니 코드가 길어질것같고 보통은 어떤식으로 하나요?(main 페이지에서 각각의 컴포넌트 height를 관리하고 싶을때)

- 컴포넌트도 대문자 태그 , 스타일 컴포넌트도 대문자 태그인데 따로 구분하는 방법은 없나요? 모듈이랑 같은 이름으로 style 컴포넌트를 지정할수도 없는것같습니다…ㅠ

- style 컴포넌트에대해 공식문서랑 유튜브 영상(다 영어이거나 자료가 별로없음…) 찾아서 이해하려고했는데 값을 props로 받고 스타일컴포넌트안에 다른 스타일 컴포넌트 적용하는 부분에대해 이해가 잘 않되요 …ㅠ
혹시 따로 추천해주실만한 자료가 있을까요?

Re : 스타일드 컴포넌트는 이름에서 알수 있듯 컴포넌트이기 때문에 props를 이용할 수 있습니다. props를 사용하는 방법은 노션이나 공식 문서에 잘 나와있으니 확인 해주시면 될 것 같아요

스타일드 컴포넌트 자체가 태그와 styling을 합친 것이기 때문에 굳이 구분할 필요가 없습니다. 해당 태그에 원하는 스타일을 주고 싶으면 그 스타일드 컴포넌트를 정의할 때 css를 정의하면 되겠죠?

Re : 컴포넌트도 대문자 태그 , 스타일 컴포넌트도 대문자 태그인데
따로 구분하는 방법은 없나요? 모듈이랑 같은 이름으로 style 컴포넌트를 지정할수도 없는것같습니다…ㅠ

이 부분의 경우 다음과 같이 처리할 수 있습니다

import * as S from "./Main.style"

<S.Container />

2. Rebase 에 관한 에러 질문

 

3. 모달창 구현에 대한 질문

 

4. 동기 비동기에대한 질문

 

 

 

 

 

 

 

🎃참고한 링크 목록emf

 

 

https://styled-components.com/docs/basics#adapting-based-on-props

styled-components: Basics

https://velog.io/@edie_ko/React-세상-간단하게-모달창-만들기-라이브러리-X

React | 세상 간단하게 모달창 만들기 (라이브러리 X)

https://dkje.github.io/2020/10/13/StyledComponents/

[React] Styled Components 사용기 - 어? 쓰흡... 하아.... | Dev X

https://stackoverflow.com/questions/65361114/adding-css-to-font-awesome-icons-with-react-styled-components

Adding css to font-awesome icons with react-styled components

https://erwinousy.medium.com/z-index가-동작하지않는-이유-4가지-그리고-고치는-방법-d5097572b82f

z-index가 동작하지않는 이유 4가지 (그리고 고치는 방법)