ant design 을 이용한 기본적인 틀을 구성한다.
공식문서를 보고 형식변환만 해서 사용하면 되기 때문에 크게 어려움은 없었던 것 같다.
우선 antd와 styled-components를 사용하기 위해서 npm을 이용한다.
>npm i antd @ant-design/icons styled-components정말 편리하고 유용하다고 생각했던건 app.js이다. 페이지의 기본 레이아웃을 유지할 때 굉장히 편리하게 사용할 수 있다.
import "antd/dist/antd.css";
import Head from 'next/head';
const App = ({Component}) => {
return (
<>
<Head>
<meta charSet="utf-8" />
<title>NodeBird</title>
</Head>
<Component/>
</>
)
}_app.js를 사용한 이유는 antd를 사용하기 위해 맨위의 구문을 import 해줘야 하는데 공통 코드가 모든 페이지에 들어가기에 저 부분을 공통적으로 넣기 위해 _app.js에 넣어주었다.
헤더부분이나 바텀을 고정할 때도 유용하게 쓸 수 있다 !
디자인 원칙
-
가로(col)를 먼저 나누고 세로를 나누자 !
보통 가로는 12나 24등분을 많이한다. 이유는 2,3,4,6,8 등등 나뉘는요소가 많아서 그런것 같다. (약수가 많다)
-
배치를 구상할 땐 모바일 > 태블릿 > 데스크탑 순으로 생각하자 !
a태그 새창에서 띄울 때
<a href="https://www.naver.com" target="_blank" rel="noreferrer noopener">...</a> target="_blank" 를하면 새창에서 띄우지만 보안 위험이 있어서 추가적으로 rel="noreferrer noopener"를 적어줘야 위험부담이 없어짐
효율적인 코드 작성하기
useCallback은 함수를 캐싱하는 것,
useMemo는 값을 캐싱하는 것.
컴포넌트에 props로 넘기는 함수가 있으면 꼭 useCallback으로 감싸서 최적화하자!
inline-style 최적화하기
평소 디자인 할 때 귀찮아서 <div style={{ marginTop: "10px" }}> 이렇게 inline-style으로 객체를 주는 경우가 많다.
{} === {}는 false이기때문에 v-dom으로 검사하면 계속 리렌더링이 될 것이다. 나쁜 습관이니 무조건 지양하자!
근데 성능에 크게 영향이 없으면 그냥 인라인 스타일 써도 되긴 하다. 함수컴포넌트에서 return ( ... ) 부분이 v-dom인데 inline-style 되어있는 컴포넌트만 다시 그리기 때문에 만약 렌더링 해야될 부분이 많지 않다면 괜찮을 것이다.. 오히려 메모이제이션 하는 비용이 더 들수도 있다. ( 어렵네 .. )
1. styled-component로 바꾸기
const ButtonWrapper = styled.div`
margin-top: 10px;
`;
...
return (
<ButtonWrapper>
...
</ButtonWrapper>
)2. useMemo로 최적화
cosnt style = useMemo(() => ({ marginTop: 10}), []);
...
return (
<div style={style}>
...
</div>
)3. antd 컴포넌트를 styled-component로 커스텀
//antd 적용 div
<Input.Search enterButton style={{ verticalAlign: "middle" }} />
//커스텀 후
const SearchInput = styled(Input.Search)`
vertical-align: middle;
`
...
<SearchInput enterButton />마무리
내가 진행중인 프로젝트 코드를 적어 올리진 않았지만 내 프로젝트에선 아직 server가 없기 때문에 간단하게 props로 받은 setIsLoggedIn을 이용해서 antd의 Form이 onFinish가 된다면 setIsLoggedIn을 true로 변경하고 AppLayout에서 변경된 isLoggedIn값으로 로그인되어있는지 되어있지 않은지만 확인 가능한 상태까지만 진행했다.
