Home 페이지
dummydata로 map으로 질문 뿌리기
어제는 dummydata를 끌고와서 map으로 뿌려주던 것이 생각이 안나서 movie API를 임의로 갖고 왔었다.
오전에 게시물 관련 DummyData를 끌고와서 Top Questions쪽에 쭉 뿌려주었다.
- static 폴더를 만들어서 그 안에 dummydata를 넣고 이 파일을 불러올 페이지에 import 시켜준다음에 dummyVotes.map~ 함수를 쓰면 그대로 나온다
- dummydata는 배열 안에 객체 형식으로 작성했다.
- 위에 더미데이터는 예시이고 뿌려준 건 다른 블로그 데이터라 내용이 다르다!
페이지 공간체크 하면서 CSS 작성 중 조심해야 했던 것들
-
헤더랑 NavBar는 다른 분이 맡아서 헤더와 사이드바가 없으니 공간체크하기가 너무 힘들었다. 임의로 만들어서 questions 공간 체크했다.
- 이 때 주의할 점은 임의로 만든 컴포넌트를 NavBar, Header, Sidebar 이런 이름으로 지으면 안된다!
- 다른 이름으로 지어야 나중에 합칠때 다른 분이 맡은 NavBar, Header, Sidebar 겹치지 않기 때문에 깃허브 충돌을 피할 수 있다.
-
오른쪽 노란색 Notice 같은 거 UI만 만드려고 했을 때도 간과했던 점
- 내 기준으로 왼쪽은 NavBar, 오른 쪽은 파일 명을 Sidebar.js 컴포넌트로 만들어버렸다.
- 나중에 Sidebar를 만든 분이랑 파일 명이 겹쳐서 합칠때 애먹었다.
questions/ask 페이지
컴포넌트화
- 페이지가 위에서 아래로 흘러서 flex 기능은 나름 쉬웠으나 div가 엄청 많아서 작업하기 헷갈렸다.
그래서 질문 안내부터 제목, 문제쓰기, 해결해보기 부분을 다 컴포넌트로 나눠서 파일로 다 나눠버렸다.
그랬더니 훨씬 보기 좋아져서 작업하기 더 수월햇다.
- 원래는 이 가운데 한 뭉텅이를 한 파일에 작성하다가 너무 보기가 힘들어서 6개의 컴포넌트로 나누었다!
- 그리고 이 컴포넌트 전체는 페이지에 간단히 담았다.
이미지 쓰기
-
아이콘은 캡쳐해서 이미지로 따서 public파일에 넣어준 다음에
<img src ="파일명">이런 식으로 넣어주었다. -
width={} ,height ={} 숫자로 넣어야하는 거 주의하기!
- Next.js는 src 폴더를 그냥 /로만 써도 알아서 파일을 잘 찾아간다
- Next.js는 src 폴더를 그냥 /로만 써도 알아서 파일을 잘 찾아간다
How?