Day14
어제는 토요일이었다. 몸을 좀 쉬게 하고 밀린 블로그도 조금씩 썼더니 시간이 다 가버렸다,,
오늘은 집중해서 작업해야겠다.
12일차에는 구조만 잡아두었고, 오늘은 코드를 작성했다.
Navigation
App.js에서 Route를 사용하여 맞는 경로로 진입했을 시 해당 컴포넌트만을 렌더링 할 수 있게 설정했으니 Navigation에서는 경로를 설정해주기만 하면 될 것이라고 이해하고 여기서는 Route가 아닌 Link 컴포넌트를 사용했다.
❗map을 뿌리는 과정에는 반드시 key가 필요하다!
css 마지막 요소를 제외하고 속성주기
요소 :not(:last-child) {
padding-right: 15px;
}css 첫번째 요소와 마지막 요소에 속성주기
:first-child {
font-family: SUIT-Bold;
}
:last-child {
padding-left: 10px;
}Header
헤더 안에 네비게이션이 있는 형태로 만들었다.
카테고리와 로그인 시 보일 네비게이션 하나, 로그아웃 시 보일 네비게이션으로 총 3개의 네비게이션으로 구성했다.
조건부 렌더링으로 로그인과 로그아웃을 구분해서 보여줄 예정이다.
긴급회의
저녁에 팀장님이 긴급회의를 소집하셨다.
우리는 프론트 1명과 백엔드 2명으로 파트를 나누었는데, (내가 프론트)
현재 우리 프로젝트는 프론트가 CSR 방식, 백이 SSR 방식을 채택하고 있어 설계가 잘못되었다고 하시는 것이다.
나는 리액트 라우터를 사용하면서 SPA를 구현할 수 있다는 건 알았지만 그게 CSR이나 SSR과 관련이 있다거나 하는 걸 몰랐다🥲
그런데 그걸 구현하려면 무엇을 어떤식으로 바꿔야하는지 모르는 상태여서 잠깐 멘붕이 왔다.
지금 프론트 작업이 산더미처럼 남았는데 연결작업도 고난일 것으로 보여서 너무 슬펐다.....
그러니까 빨리 목업을 끝내야 연결 작업에도 집중할 수 있을 것 같다.
프론트가 한 명이라서 신경써야 할 부분도 몇 배나 많지만 이 프로젝트가 끝나면 분명히 그만큼 성장해있을 거라 믿는다❗
Footer
svg import
svg를 ReactComponent로 import하고 svg파일의 width와 height의 값을 "current"로 바꾸면 값을 props 시켜서 적용할 수 있다.
또는 svg 파일을 import 하고 import 한 이름으로 경로를 지정할 수 있다.
손이 좀 느리기도 하지만 고려해야 할 점들이 마구 생각나서 작업량이 적었다😭 조금 더 속도를 내야해..!!
내일은 메인페이지, 로그인, 회원가입까지는 만들어보자!
참고 사이트
