Main Project #5

jsha·2022년 11월 21일
코드스테이츠프로젝트
0

오늘은 우리 웹페이지 ⭐️글길⭐️의 레이아웃을 통일시켜주고, 페이지도 다 연결해주는 등 전체적으로 정리해주었다! 그러면서 새롭게 알게 된 것들이 많아서 잊기전에 빠르게 정리해본다.

✅ 1. PR 확인할 때 코드만 보나요? NO!!!

팀원이 PR을 올리면 다른 팀원들이 함께 확인하고 머지를 하게된다.
이 때 코드리뷰를 진행하게 되는데, 코드만 쓱 보고 승인하는게 과연 맞는걸까?
인간인데.. 눈으로 쓱 보게되면 분명 놓치는 것이 있을 것이다.

머지 했는데 문제가 생기면 리뷰어도 책임이 있다!

PR 화면 우측 상단을 클릭하면 다음과 같은 화면을 볼 수 있을 것이다.
위에서 안내해주는 gh pr checkout 58을 터미널에 입력하면 해당 PR을 올린 사람의 브랜치로 자동으로 이동하면서 해당 변경사항이 로컬로 들어온다.
이 때 npm start 등 실행하여 다시 코드 리뷰를 해보면 된다.

✅ 2. 절대경로 변경

멘토링을 진행하면서 멘토님께서 상대경로로 작성한 파일을 절대경로로 바꿔보는게 어떻겠냐고 제안해주셨다. 처음에는 와닿지는 않았지만 멘토님께서 해보라고 하셨으니까 전부 변경해주었는데 하면서 왜 그런 제안을 하신건지 알 수 있었다.

디렉토리와 파일이 많아지면서 상대경로로 작성하니 코드가 복잡하고 점점 길어졌다. 경로를 봤을 때 한눈에 파악이 힘들어졌다.

일단, jsconfig.json에 루트폴더를 지정해준다.

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

이렇게 루트 설정을 해주면, 아래와 같이 절대경로로 작성이 가능하다.
import { } from 'components/bookStore/BookStore.style';
-> src 폴더 안에 있는 components 폴더 안에 bookstore 폴더 안에 있는 BookStore 파일이라는 뜻이다!

그리고 레이아웃 폴더 안에서 index.js 파일에 컴포넌트들을 모두 넣고 export 해줘서 다른 곳에서 사용할 때는 import { Button, ReviewSmall } from 'components';이런식으로 간단하게 가져올 수 있도록 해주었다.

✅ 3. import 할 때 주의할 점

export 할 때, export default Main; 이런식으로 컴포넌트를 한가지만 내보낼 때는 import 할 때 import Main from 'pages/main/Main'; 불러올 수 있다.

하지만, export { Nav, Footer, Book, Button}; 여러개를 내보내고 import 할 때는 import { Nav, Footer, Book, Button} from 'components/@layout'; 불러와야 한다. {}를 꼭 잊지말고 해주어야 한다.
여러개 중에 무엇을 불러오라는건지 정확히 말해줘야 이해하니까!

💡 index.js는 그 파일을 포함하고 있는 상위폴더까지만 입력해도 잘 가지고 온다.

✅ 4. .gitignore

이 파일에 PR 할 때 올라가면 안되는 개인정보 등을 넣어두면 그 파일은 제외하고 push가 되는데 더미데이터를 미리 넣어두니까 나중에 팀원들이 파일을 땡겨와서 테스트 할 때 문제가 생겼다. 깃에 파일이 올라가지 않으니까 더미데이터가 없어진 것이다. 백에서 아직 데이터베이스 작업중이라 더미데이터를 만들어 테스트 하고 있는데, 제일 마지막에 설정해주는 것이 테스트하기에 좋은 것 같다.

✅ 5. 라우터 사용법

  • pages 폴더에 만드려고 하는 페이지 만들기
  • constants/routes.js에다가 경로랑 이름 정해주기
  • pages/index.jsx에다가 children 밑에 객체로 추가하기

💡 routes.js에 대문자로 작성해줘야 문제없다, 대/소문자 잘 확인하기

✅ 6. CSS relative, absolute 차이

  • relative : 자기 자신을 기준으로 top, right, bottom, left 의 값에 따라 위치를 지정합니다.

  • absolute : 가장 가까운 relative 조상에 따라 상대적으로 위치를 지정합니다.

SearchContainer에 position : relative를 주고
돋보기 아이콘에 position : absolute를 줘서 배치하였다.

둘의 관계가 잘 이해되지 않아 코드를 따로 입력해서 이해해보았다.

📌 position: absolute는 웹페이지 위에서 부모 엘리먼트와 관계없이 원하는 위치에 배치하게 할 수 있게 해준다
📌 그런데 부모 엘리먼트 중 position: relative를 사용한 엘리먼트가 있으면, position: absolute를 준 자식 요소의 배치 범위를 제한시켜, offset 속성 사용 시 스타일링을 좀 더 원활하게 해준다

즉, relative가 absolute의 활동 범위를 제한시켜주기 때문에 offset 속성을 사용하여 위치를 잡기 좋다


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="container2">
        <div class="child"></div>
      </div>
    </div>
  </body>
</html>



.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
  background-color: green;
  position: relative;
}

.container2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  background-color: yellow;
  position: relative;
}

.child {
  width: 100px;
  height: 100px;
  background-color: orange;

  position: absolute;
  top: 0;
  right: 0;
}

✅ 7. CustomLink

const CustomLink = ({ className, path, children, ...rest }) => {
  return (
    <StyledLink className={className} to={path} {...rest}>
      {children}
    </StyledLink>
  );

이런식으로 작성해서 페이지를 이동시킬 수도 있겠구나 생각했던 코드다.
팀원이 작성한 코드였는데, 사용하고자 하는 곳에서 <CustomLink to='/'> 이런식으로 작성만 해주면 되니까 편하다고 생각했다.

✅ 8. 네브와 푸터 고정시키기

화면에서 네브를 고정시키고 네브에 있는 햄버거 버튼 클릭 시 나오는 모달창도 고정시키기 위해 position: fixed; 를 주었다. Footer를 고정시키기 위해 동일하게 fixed를 주면 화면에 나오는 부분을 무시하고 푸터가 그 위에 나오기 때문에 다른 방법을 찾아보았다.

페이지에서 푸터를 제외한 전체를 감싸고 있는 스타일컴포넌트에
padding-bottom: 200px;을 줘서 푸터가 들어갈 수 있는 공간을 만들어주었다.
그리고 푸터에 height: 200px; position: absolute; bottom: 0;을 주어 맨 밑에 고정되도록하였다.

✅ 9. 파비콘 만들기

사소한 디테일이지만, 설정해주면 정말 그럴듯한 효과를 주는 요소라고 생각한다.
img 디렉토리에 사용 할 이미지를 넣고, index.html 파일에 <link rel="icon" href="./img/ico.png" /> 입력해주었다.

✅ 10. CSS 그레이디언트

네브바에 햄버거 버튼 클릭시 나오는 모달창에 그라데이션 효과를 주었다.
왜 그라데이션을 줄 생각을 못했나 싶었다.

background: linear-gradient(
    to bottom,
    ${Theme.PRIMARY.GREEN},
    ${Theme.PRIMARY.WHITE}
  );

위에서부터 밑으로 그린에서 화이트로 색상을 주겠다라는 뜻이다.
세부적으로 많은 설정을 할 수 있는데 아래 사이트를 참고하였다.

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients

평소에 여러 웹사이트를 방문하며 유심히 살펴보고 이것저것 시도해봐야겠다고 생각한 하루였다. 정말 구현을 하면 할수록 더 많은 것을 해보고 싶어진다. "이것도 해보고 저것도 해볼까?!" 꼬리에 꼬리를 물고 진행이 되는 것 같다.
또한, 파비콘 처럼 사소해 보이지만 만들고나니 완성도가 높아보이는 듯한 느낌을 주는 것들도 있는데, 놓치지말고 꼼꼼하게 구현해야겠다.

profile
jsha
이전 포스트

Main Project #4

다음 포스트

Main Project #6

0개의 댓글