23.11.20 리액트 개인과제 해설 클론코딩

완성은 하지못했지만 일단 제출이라도 할려고 깃허브 read me 라도 꾸미고있다

처음 해보는데 생각보다 간단한편 vs코드에서 작성하는것보다 그냥 깃허브 홈페이지 작성이

이미지 넣기도 쉽고 훨신 간단했다 다음에는 좀더 알아보기 쉽게 만들어봐야겠다

 

그리고 추가로 해설영상보고 클론 코딩을 해보고있다

- [ ]  (1) 프로젝트 셋업
    - CRA boilerplate 로 프로젝트 생성
    - pages/ , components/ , shared/ , assets/ 폴더 작성 및 필요 컴포넌트 사전 작성
    - styled-components, react-router-dom 설치
    - title 변경 (index.html)
    - jsconfig.json 설정 (절대경로 설정)

 

1.프로젝트 셋업

컴파일러 옵션에서 베이스 URL을 src폴더로 맞춰준다

(2) “props-drilling” 브랜치 생성 및 이동

마지막으로 푸쉬를 하는데 결국은 오류가 나서 pull도 땡겨보고 브랜치도 지웠다 삭제해보고 코드를 살짝 변경해서 추가도하고 하는데도 안되서 결국 강제 푸쉬를했다

깃 푸쉬 오류 날때 강제 푸쉬하기

$ git push -f origin main

 

요렇게 입력하면 싹무시하고 강제로 푸쉬 가능하다,(내 로컬 파일을 강제로 동기화 하는방법)

하지만 협력 프로젝트를 할때 메인에 올려버리면 문제가 생기니 다른 개인 feature 브랜치를 만들어

따로 푸쉬하도록하자 사실 혼자 작업하는 브랜치는문제가 없다고한다

---

• [ ] (3) Router 셋업
• react-router-dom 을 이용하여 홈화면과 상세화면에 대한 라우터 설정을 해주세요.

 

라우터 돔도 보일러 플레이트 마냥 기본 설정으로 만들었습니다

실제 사용할 메인페이지는 홈,디테일 페이지 입니다 추가로

<Route path="*" element={<Navigate replace to="/" />} />

 

Navigate 라는 훅을 이용해서 추가 설정이있었는데 해석하자면

"*" 은 "/","/derail"을 제외한 아무 입력값이 주소창에 들어올경우 (ex : / abc진짜아무거나)

<Navigate replace to 를 이용하여 그 주소값을 "/" 즉 홈페이지로 바꿔줍니다 이러면 /detail 에서 아무 주소값을 누른뒤에 홈페이지로 연결 그후 뒤로가기를 눌러도 dtail페이지로 복귀가 가능해집니다

replace 없이 <Navigate to="/" /> 도 가능하지 이렇게 되면 디테일 페이지에서 abc라는 아무 주소값으로 입력되면 홈으로는 가지지만 뒤로가기를 누를경우 다시 abc로이동 그러면 다시 홈페이지로 복귀 무한 루프가 생겨버립니다

(뒤로가기까지 생각하지는 못했는데 앞으로 프로젝트에서는 사용자 UX를 잘 생각해야겠다 )

<Navigate replace to = "/" /> 는 리액트 라우터 돔 사용시에 보일러플레이트 마냥 자주쓸거같다

 

추가로 디테일뒤에/:id 라고 작성했는데 path뒤에 : 가 들어가면 Path Variable 이라고 부르기도하고

리액트에서는 path parameter(params) 라고 부릅니다(지금 코드는 path parameter 이름을id로 정함)

url 에서의 변수같은 역할을 수행합니다 요게있어야 나중에 각각 펜레터 마다 다른화면을 보여준다

디테일 페이지에 들어가 useParams훅을 이용해 파람스에는 어떤식으로 적용이 되나 콘솔로그로 확인하니 params라는 객체 안에 속성으로 Property 라는 id가 잘 들어간걸 확인해볼수있었다

 

추가적으로 구조분해 할당을 이용해 useParams 에서 {id} 값만 빼온뒤 바로 화면에 적용시킬수도있다

 

• [ ] (4) 전역스타일링 적용
• styled-components 를 이용해 주세요. (App.css, index.css 는 삭제하셔도 좋습니다.)

GlobalStyle.jsx 폴더를 만들어준후 https://meyerweb.com/eric/tools/css/reset/ 에서 코드를 긁어와 적용

• reset.css 코드 및 box-sizing 적용

 

원래 box-sizing 는 기본적으로 content-box 가 적용되어있는데 실제사용시 예를 들면 width 300px 짜리 박스를 만들고 양쪽에 15 pading을 적용시에 박스 가로 길이가 330으로 늘어나는등 css 스타일링이 곤란해지는 관계로

박스의 사이즈 값을 고정해줄수있는 border-box 사용이 편하다고합니다

index.jsx에 <Globalstyle /> 삽입후 전역스타일링 적용 완료

---

• [ ] (5) 홈 화면 UI: 배너 및 헤더 파트 UI 구현
• 상세요구사항
• 아티스트탭에서 아티스트를 클릭했을 때 어떤 탭이 활성화되었는지 styled-components의 조건부 스타일링을 적용해 보세요.

Home 에서 사용할 기본 컴포넌트 생성 완료

이제 상단 부분인 <Header> 컴포넌트를 만들어보았습니다

헤더 부분은 거의 완성중 내일 추가로 더 만들어봐야겠습니다