인공지능 웹 서비스 프로젝트가 드디어 끝! 팀원들과 으쌰으쌰하면서 5주라는 기간 동안 어떻게 해왔는지도 모르게 후루룩 지나간 느낌이 제일 강하다. 인간은 망각의 동물이기 때문에 그동안 밀린 이슈들을 모아모아 회고에 적기로 한다.
사실 프로젝트 하면서 초기 세팅을 하면서 제일 신경 쓴 것은 폴더 구조였다. 사바사 케바케라고는 하지만 실제 현업에서 사용하는 방법이 궁금했고 우리 팀은 다음과 같이 설정했다.
└── front
├── public
└── src
├── assets
│ ├── images
│ └── svgs
├── components
│ ├── button
│ ├── header
│ ├── input
│ ├── layout
│ ├── loader
│ └── modal
├── hooks
├── libs
├── pages
│ ├── community
│ ├── home
│ ├── intro
│ ├── kakaoMap
│ ├── landmark
│ ├── login
│ ├── mypage
│ ├── recommend
│ └── register
├── queries
├── states
└── styles
└── base
public과 src로 폴더를 나눴고, 또한 src에서는 components와 pages로 나눈 것이 가장 큰 특징이라고 할 수 있다. components 폴더에서는 정말로 컴포넌트화하여 재사용이 가능한 코드들을, pages에서는 각 화면마다 컴포넌트를 나눠서 작업했다. page안에서 한번 사용될거 같은 컴포넌트들을 각 pages 폴더 내에서 처리했다.
매번 프로젝트를 할 때, 상대경로로 import를 하는 것이 번거로웠는데, 이번에 jsconfig
절대경로 설정이라는 신세계를 알게 되었다. 이번 프로젝트는 정말 파트너님께 많이 배웠다..! 항상 감사하다😭
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
폴더 구조와 연결되기도 하는 image 경로 설정인데, 초반에 항상 이미지를 한번에 불러오지 못해 애를 먹었었다. 다음은 권장되는 이미지 불러오는 방식이다.
import Image from "assets/images/Image.png"
background-image height에 50%를 설정해주었지만, 이미지를 불러오지 못했다. 이때 background-image에 position: absolute, 부모에 position : relative를 설정해준다.
height나 width를 %로 지정해줄 때, 기준이 부모로부터 %이기 때문에 부모는 position이 relative여야 한다.
기본적으로 div의 width는 100%, height는 auto로 설정되며, 따라서 background-image의 height는 지정을 해주는 것이 맞다.
html
, body
, #root
에 overflow-x: hidden를 설정한다.+) 여기에 position: relative / width, height도 100%로 설정하기도 함..!
프로젝트를 하면서 만나는 undefined들.. 이번에도 역시나 많은 undefined를 만나고 이들을 처리하는 법을 배웠다.
const { data } = useGetData()
const { userName } = data || {}
🔼 위와 같은 레이아웃을 위해display: table
속성을 사용하던 중, 좌우 정렬을 위해서text-align: center
를 적용했다. 그런데 가운데 bar 부분에서 이슈가 발생하였다.
🔼 바로 bar 두개가 분리가 분리되던 것..!
const BarContainer = styled.div`
width: 230px;
height: 6px;
background-color: ${({ theme }) => theme.colors.gray02};
border-radius: 4px;
position: relative;
`;
const Bar = styled.div`
width: 80%;
height: 6px;
background-color: ${({ theme }) => theme.colors.secondary};
border-radius: 4px;
display: inline-block;
position: absolute;
top: 0;
`;
display: inline-block
, text-align: left
속성 부여하여 해결하였다.