Today I Did
- UI/ Main page
- UI/ MusicalInfo page
- UI/ Favorites page
- UI/ Comment
- UI/ Navigation
- UI/ Footer
오늘 첫번째 프로젝트 마감 날..!! 어제 오전 드디어 bare minimum 구현을 끝내고 오후부터 오늘까지 UI 디자인을 끝냈다. 사흘만에 데브로그를 쓰게 됐는데, 사흘 내내 새벽 3~4시에 작업 끝나고 오전부터 다시 작업 시작하니까 도저히 쓸 시간이 안났다. 내일 회고를 쓸 거니까 오늘은 간단하게라도 써보자하는 마음에 쓴다. 😅
주말 포함 사흘 동안 뮤지컬 즐겨찾기(북마크) / 한줄평(댓글) / 한줄평 좋아요 기능을 구현했는데 진짜 머리 터지는 줄 알았다.. ㅋㅋㅋ ㅠㅠ
가장 힘들었던 부분이 상태 관리였다. 사용자가 로그인한 걸 알고 있어야 어떠한 기능들을 보여줄지 말지 정할 수 있는데, 상태는 새로고침 한 순간 날라가버린다는 것. 그리고 상태가 날라가버리면 리-랜더링된다는 것. 게다가 메인 페이지에서 보는 썸네일과, 마이 페보릿 페이지에서 보는 썸네일은 다른 썸네일이라는 것.. 이러한 리액트의 특성 때문에 머리 터지는 줄 알았다. 🤯
자세한 글은 내일 회고 쓰면서 적겠다. ( ᴗ_ᴗ̩̩ )
중첩의 중첩의 중첩의 삼항연산자 파티 🥳
전반적인 CSS 작업을했는데 styled-components를 적용했다. styled-components는 엘리먼트를 컴포넌트로 쓸 수 있는 것이 가장 큰 장점인데, 같은 div라고 할지라도 전해주는 props에 따라 다르게 속성을 적용 할 수 있다. 이걸 과연 잘 적용했냐고 물어보면 대답할 자신은 없지만 나름 재활용을 하긴 했다.
잘 적용하지 못했다고 느낀 점은 props 별로 속성을 줄 때 삼항연산자, 중첩 삼항연산자, 그 중첩 삼항연산자의 중첩 삼항연산자... 몇 번의 삼항연산자를 중첩해서 썼기 때문이다.
export const Span = styled.span`
display: ${({ infoT }) => (infoT ? 'inline-block' : '')};
font-size: ${({ title, info, infoT }) => (title ? '2.4rem' : info ? (infoT ? '1.5rem' : '1.3rem') : '1rem')};
padding: ${({ title, infoT }) => (title ? '0 1rem 0 0' : infoT ? '0' : '0 0 0 1rem')};
width: ${({ infoT }) => (infoT ? '100px' : '0')};
border-right: ${({ infoT }) => (infoT ? '2px solid #574240 ' : '')};
color: #1c1c1c;
`;위 코드를 보면 아주 난리가 났다 ㅋㅋㅋ
이 코드의 문제점은 무엇일까? 생각해보면 재활용을 하려다 너덜너덜해진 느낌이랄까... ㅋㅋㅋㅋ ㅠㅠ
아마도 내가 재활용의 스킬이 부족하고 설계부분부터 제대로 하지 못해서 생긴 문제같다. 어떤 식으로 재활용을 하면 좋을지, 과연 재활용을 어디어디에 무엇을 해야할지 기본적으로 설계를 탄탄하게 잡고 시작해야 될 거 같다.
기본 브라우저 CSS 제거 & 전역으로 CSS 속성 적용
브라우저마다 기본적으로 갖고있는 CSS 스타일이 있다. 크롬은 padding, margin 10px씩 갖고있다고 기억하는데 예쁘게 디자인하고싶으면 이 CSS들을 다 제거해줘야한다. 노마더코더의 스타일드 컴포넌트 영상을 통해 브라우저의 기본 CSS 제거 방법과 글로벌로 주는 속성을 적용하는 방법을 배웠다. 스타일드 컴포넌트에는 createGlobalStyle 이란 기능이 있는데 이걸 통해 브라우저의 기본 CSS 스타일을 제거할 수 있을 뿐더러 전역으로 CSS 속성 관리가 가능하다!
import { createGlobalStyle } from 'styled-components';
const GlobalStyles = createGlobalStyle`
// 브라우저의 기본 CSS 스타일(user agent stylesheet) 제거
* {
margin: 0;
padding: 0;
font-family: 'Jua','Arial', "sans-serif";
}
body {
box-sizing: border-box;
}
`;
export default GlobalStyles;Footer 하단 고정
처음엔 당연히 네비게이션-컨테이너-풋터 순으로 쓰면 될 거라고 생각했다.
return(
<>
<Navigation />
<Container />
<Footer />
</>
);근데,, 이게 웬 걸,,, 컨테이너 높이(height)에 따라 올라와 붙어버려 화면 하단에 고정이 안됐다 ㅠㅠ 그래서 두번째로 시도한 방법은 컨테이너의 높이를 각 페이지마다 고정시키는 거였다. 어림도 없는 방법이었다 ㅋㅋㅋ.. 각 페이지마다 보여주고싶은 컨텐츠가 다른데 컨테이너의 높이를 고정시킨다는 건 말도 안되는 소리였다.
그래서 구글링구글링~ 하다 찾은 방법은 position 속성을 쓰는 방법이다.
return(
<>
<Navigation />
<Container>
<Body />
<Footer />
</Container>
</>
);제일 큰 컨테이너에 position:relative를 주고 풋터에겐 position:absolute를 주면 된다. 그리고 바디에겐 풋터의 길이만큼 padding-bottom을 주면 되는 거였다...!! 그렇게 속성을 적용하고 확인하니 풋터가 드디어 바닥에 고정됐다!
