하단에 폼생성하기 버튼(관리자가 폼을 생성할 수 있는 페이지로 이동) 도 있는데 썸네일에서 잘렸다 ㅎㅎ..
위의 파란 폼 작성하기 버튼을 누르면 사용자가 폼을 작성할 수 있다.
제풀된 폼 확인하기를 누르면 사용자가 작성한 데이터를 볼 수 있다.
프로젝트의 가장 첫번째 화면인 메인페이지를 live share를 이용해서 팀원분과 함께 만들었다.
CSS는 styledComponent를 사용하였다.
시작 전에 팀원들의 node 버전이 달라서 버전을 통일해 package-lock.json의 충돌을 해결했다.
styledComponent
styledComponents는 컴포넌트 레벨로만 스타일링을 해봤는데 전역 스타일링을 시도해보는 것은 처음이었다.
styledComponent에서 제공하는 createGlobalStyle()함수를 사용해서 전역 스타일링을 할 수 있었다.
GlobalStyle 컴포넌트를 만든 후 기본적으로 적용되는 css 스타일을 적어주었다.
GlobalStyle.js
import { createGlobalStyle, css } from "styled-components";
const globalStyle = css`
* {
box-sizing: border-box;
}
body {
font-family: "Helvetica", "Arial", sans-serif;
line-height: 1.5;
}
a {
text-decoration: none;
}
`;
const GlobalStyle = createGlobalStyle`
${globalStyle}
`;
export default GlobalStyle;그리고 App.js에서 적용을 해 주었다.
App.js
import { HashRouter, Routes, Route } from "react-router-dom";
const Layout = styled.div`
margin: 0 auto;
max-width: 1000px;
`;
function App() {
return (
<Layout>
<GlobalStyle />
<HashRouter>
<Routes>
<Route path="/" element={<MainPage />}></Route>
<Route path="/result/:id" element={<ResultPage />}></Route>
<Route path="/submitted/:id" element={<SubmittedePage />}></Route>
<Route path="/create" element={<CreateFormPage />} />
</Routes>
</HashRouter>
</Layout>
);
}
export default App;이렇게 하면 컴포넌트 레벨에서 스타일해줄 부분이 줄어들어 여러 컴포넌트에 동일한 스타일을 반복해서 정의할 일이 줄어든다.
그리고 프로젝트를 진행하면서 HashRouter를 처음 보았는데, BrowserRouter와 비슷한 역할을 한다는 걸 알게되었다.
HashRouter를 사용하면 주소에 해쉬(#)가 붙고 검색 엔진이 읽지 못하고 HashRouter은 해시 히스토리를 지원하지 않기 때문에 BrowserRouter를 더 많이 사용한다고한다.
Craco환경에서 alias 설정
Craco(Create React App Configuration Override)는 create-react-app(CRA)을 쉽게 설정하기 위해 만들어졌다.
CRA에서 eject를 하지 않아도, root 폴더에 craco.config.js를 추가함으로 eslint, babel, postcss 등을 쉽게 설정할 수 있다.
// jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"assets/*": ["./src/assets/*"],
...
}
}
}alias설정을 통해서 파일 경로를 짧게 쓸 수 있었고 매우 편리했다.
참고
