[인공지능 웹 서비스 프로젝트] 22.07.03 최종회고 上

garaming·2022년 7월 10일
0

드디어 찐막!

인공지능 웹 서비스 프로젝트가 드디어 끝! 팀원들과 으쌰으쌰하면서 5주라는 기간 동안 어떻게 해왔는지도 모르게 후루룩 지나간 느낌이 제일 강하다. 인간은 망각의 동물이기 때문에 그동안 밀린 이슈들을 모아모아 회고에 적기로 한다.



폴더 구조

사실 프로젝트 하면서 초기 세팅을 하면서 제일 신경 쓴 것은 폴더 구조였다. 사바사 케바케라고는 하지만 실제 현업에서 사용하는 방법이 궁금했고 우리 팀은 다음과 같이 설정했다.

1) Front 폴더

└── 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
  • publicsrc로 폴더를 나눴고, 또한 src에서는 componentspages로 나눈 것이 가장 큰 특징이라고 할 수 있다. components 폴더에서는 정말로 컴포넌트화하여 재사용이 가능한 코드들을, pages에서는 각 화면마다 컴포넌트를 나눠서 작업했다. page안에서 한번 사용될거 같은 컴포넌트들을 각 pages 폴더 내에서 처리했다.

  • 매번 프로젝트를 할 때, 상대경로로 import를 하는 것이 번거로웠는데, 이번에 jsconfig 절대경로 설정이라는 신세계를 알게 되었다. 이번 프로젝트는 정말 파트너님께 많이 배웠다..! 항상 감사하다😭

2) jsconfig 절대경로 설정

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
  • 위와 같이 프로젝트 root에 jsconfig.js 파일을 설정해놓으면 더이상 ../../ 로 힘들게 여행을 하지 않고 import를 할 수 있다.

image 경로 설정

폴더 구조와 연결되기도 하는 image 경로 설정인데, 초반에 항상 이미지를 한번에 불러오지 못해 애를 먹었었다. 다음은 권장되는 이미지 불러오는 방식이다.

  • image는 경로를 설정하여 활용할 때에는 public 폴더에 집어넣는다. 다만, src 폴더에 이미지 파일을 집어넣을 경우 import로 처리한다.
import Image from "assets/images/Image.png"
  • 예를 들면 이미지를 import 하여 src나 url에 넣어 사용해준다.

1) background-image CSS - position 설정

  • background-image height에 50%를 설정해주었지만, 이미지를 불러오지 못했다. 이때 background-image에 position: absolute, 부모에 position : relative를 설정해준다.

  • height나 width를 %로 지정해줄 때, 기준이 부모로부터 %이기 때문에 부모는 position이 relative여야 한다.

  • 기본적으로 div의 width는 100%, height는 auto로 설정되며, 따라서 background-image의 height는 지정을 해주는 것이 맞다.

2) 가로 스크롤

  • 가로 스크롤이 생기지 않게 하기 위해서는 먼저 100vw를 지양한다.
  • reset.css와 같은 전역 css 파일 중 html, body, #rootoverflow-x: hidden를 설정한다.
    +) 여기에 position: relative / width, height도 100%로 설정하기도 함..!

무수한 undefined

프로젝트를 하면서 만나는 undefined들.. 이번에도 역시나 많은 undefined를 만나고 이들을 처리하는 법을 배웠다.

1) or 연산자

const { data } = useGetData()

const { userName } = data || {}
  • undefined가 올 경우를 대비해 or 연산자를 사용하여 undefined가 올 경우 빈 객체를 가져오게 한다.

2) loader 구현

  • 데이터를 다 받아오지 못하여 undefined가 반환될 때 isLoading 상태를 만들어 로딩화면이나 스켈레톤 이미지를 보여준다.
  • 이때 리액트 쿼리의 status 속성을 사용하면 간단하게 작성할 수 있다.

table 속성 레이아웃

1) table-cell의 text-align: center 속성 적용


🔼 위와 같은 레이아웃을 위해 display: table 속성을 사용하던 중, 좌우 정렬을 위해서 text-align: center를 적용했다. 그런데 가운데 bar 부분에서 이슈가 발생하였다.

🔼 바로 bar 두개가 분리가 분리되던 것..!

Bar Component Code

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;
`;
  • BarContainerdisplay: inline-block, text-align: left 속성 부여하여 해결하였다.

2) table간 상∙하 간격

  • 전체를 감싸는 container를 만들어 height를 지정해주면 상하 간격을 조정할 수 있다.
profile
Connecting the dots

0개의 댓글