자바 웹 공부 33 - typescript + React(Router)

어제 아래 코드처럼 하고 그만했었는데

실행을 해보니 오류가 나서 실행이 안됐었다.

에러가 Absolute route path라고 되어있는데

 

/board로 절대경로를 해놨는데 아래의 코드들을 또 절대경로를 해놔서 그런것이다.

board아래 코드들 맨 앞의 /를 없애주자

 

그러면 잘 나온다. (주소는 3000뒤에 /auth가 들어가있다.)

 

views에 새 폴더, 파일을 만들어주자

여기는 이제 너무 기본이지 않나

 

NavigationBar로 와서 하나 만들어주자

 

navigator를 하나 만들어주고

/auth(로그인 페이지)로 이동하게 해주자

 

로그인 쪽에 와서는 로그인 버튼이 안 보이게 해주려고 한다.

추가해주고

이제 auth에 오면 로그인 버튼이 사라지는 것을 볼 수 있다.

main으로 가는 방법도 만들어 놓자

onClick을 넣어주고 '/'로 Main을 지정해준 뒤

클릭하면 다시 main화면으로 돌아와진다.

 

다시 Main Component로 돌아와서 생각해보자

front에서는 화면을 디자인할 때 공간 분리가 1순위라고 했다.

 

파일, 폴더 추가해주고

 

Main으로 다시 와서

 

MainHead로 가서

 

 

이렇게 쓰려고 했는데 결국 밑에 있는 Grid에도 Card를 똑같이 써줘야 한다 중복해서 쓰는 것은 지향하지말자

 

그래서 새로 파일을 만들어주고

이렇게 만들었지만 Grid도 결국 중복이다 이것도 줄여주자

 

src에 만들어줄거다. 이번엔 ts

 

먼저 interfaces에 index.ts안에 아래 코드 작성

mock으로 가서

 

이렇게 하면 중복을 피하고 Card를 만들 수 있다.

 

저기에 interface와 Props추가해주면 방금 만든 곳에 PreviewCard가 오류가 난다.

item을 넣어주면 에러가 사라진다.

 

이렇게 넣었을 때는

작성자가 총 3배열이 있기 때문에 3개가 나온다.

 

자신이 원하는 사진의 주소를 복사해 mock에 넣어주고 아래 코드를 추가하면 나온다.

사진이 약간 잘린다.

 

BoardListItem을 만들어주고

 

MUI에 Avatar에서 코드를 긁어오자

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />

이렇게 코드를 다 만들면

이렇게 나올텐데 background가 좀 어두운거 쓰는 걸 추천한다..

방금 만든 코드를 복사 후 PreviewCard card안에 붙여넣자

 

import시켜주고

 

Card에 display, flexDirection에 값을 넣어주면

아래로 내려와진다.

 

PreviewCard에서 각각 다 바꿔주자

댓글, 좋아요 쪽에도 값을 바꿔주자

 

잘 안보이긴 한데 만든대로 잘 나와있는 것을 확인할 수 있다.

옆에도 만들어져 있긴 하다.

 

MainContents로 가서

<Pagination count={10} /> 추가

한 뒤

components에 가서

ffffff를 000000으로, 255를 0으로 모두 바꿔주자

 

0px을 120px로 변경

 

MainHead에 pl, pr추가

 

Main index 옆에 있던 sx 삭제

 

MainContents로 가서

pt, px추가

중앙정렬

 

야옹이 사진도 제대로 되어있다.

 

진짜 마지막으로

Box를 추가해주고 원래 만들었던 것들을 안으로 다 붙여놓고

마지막에 Box를 하나 더 만들어 놓고 내일 이어서 하자