무작정 프로젝트 해보기 - 1

오늘처음해요·2024년 2월 16일

프로젝트 시작하기

우선 지금 배우고 있는 react 강의에서
CRUD (Create, Read, Update, Delete)를 배우고 있으니
해당 기능을 활용해보고자 하였다.

따라서 만들기 편한 웹사이트 클론 코딩 + CRUD 기능 구현이 플젝의 목표가 될 것 같다.

웹 사이트 정하기

우리는 여기어때 라는 사이트로 정했다
이유는 딱히 없다

파트 구분하기

사실 플젝을 해봐야겠다는 생각으로 다들 호기롭게 모였지만
플젝 경험이 거의 없다보니 뭘 정해야 하는지 협업은 어떻게 할지
아는 것도 없고 감도 안왔다

그래도 몰라서 못한다는 핑계는 그만해야겠다는 생각에

컴포넌트로 구분할 수 있겠다 싶은 부분으로 파트를 나눴다

예시1

예시2

이런 식으로 4가지 파트를 나눴다.

피그마 작업

이런 식으로 홈페이지 요소를 피그마로 재현해보면서
어떻게 만들어야 할지 감을 잡았다

깃 레포 파기

나도 PR 보내서 코드 리뷰를 받아본 적은 있지만
브랜치 파서 PR보내고 merge하는 과정을 겪어보지는 않았다

그래서 그냥 레포 하나 파고
commit, push, checkout -b, merge, 코드 리뷰 등등
하나씩 같이 해봤다

https://github.com/today-is-first/yogi-clone

페어 프로그래밍 해보기

한 명만 코드를 치고 나머지 두 명이 옆에서 조언(간섭) 하는 형식으로 진행했다.
아무래도 다들 처음이고 어떻게 해야할지 감이 안올 것 같아서
어떤 방식으로 진행해야 하는지 맞춰보는 시간이었다.

물론 swipe 기능이 없는 껍데기이지만 결과물이 나왔다

내 파트 작업하기

우선 홈페이지의 Header 부분을 맡은 사람이 없어서 내가 만들었다.

원래 페이지

내가 만든 것

나름 비슷하게 구현하려고 했는데 디테일 차이가 난다
개발자 도구 활용하면 완전히 똑같이 만드는 게 쉬울 줄 알았는데
생각보다 신경써야 할 게 많았다

우선 로고를 따는 것부터 문제였는데

크롬 확장 프로그램인 SVG Gobbler를 활용해서 svg 파일을 받아올 수 있었다.

색은 개발자 도구나 크롬 확장 프로그램인 색상 스포이드 도구를 이용했다

import Logo from '../../public/asset/Logo.svg';
import menu from '../../public/asset/menu.svg';
import person from '../../public/asset/person_outline.svg';

const Header = () => {
  return (
    <section className="header">
      <div className="logo-wrapper">
        <img src={Logo} className="logo" />
      </div>
      <div className="navbar">
        <a>이벤트</a>
        <a>고객센터</a>
        <div className="profile-wrapper">
          <div className="hamburger">
            <img src={menu} />
          </div>
          <div className="profile">
            <img src={person} />
          </div>
        </div>
      </div>
    </section>
  );
};
export default Header;

img 불러올 때 변수로 import 한 후 <img src={변수}/>와 같이 사용해야
혹시라도 발생할 이미지 유실을 방지할 수 있다고 한다

* {
  margin: 0;
  padding: 0;
}

우선 기본으로 설정되어 있는 margin, padding 값을 없애줬다

html {
  font-size: 62.5%;
}

html의 font-size 를 62.5%로 설정했는데

웹 사이트는 기본적으로 16px로 설정되고 이를 62.5% => 10px로 초기 세팅을 했다.

따라서 1rem === 10px이 됨으로 font-size를 16px로 만들고 싶으면 1.6rem으로 적어주시면 된다


/* Header */
.header {
  height: 100%;
  min-height: 7.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 0 4rem;
  & .logo {
    width: 10.5rem;
  }
  & .navbar {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    justify-content: center;
    & a {
      min-width: 4rem;
      padding: 0 1.2rem;
      font-size: 1.6rem;
    }
    & .profile-wrapper {
      border: 1px solid #d6d6d6;
      border-radius: 20rem;
      min-height: 4rem;
      display: flex;
      gap: 0.6rem;
      padding: 0 1.2rem;
      align-items: center;
      justify-content: center;
    }
  }
}

css를 써본 적이 많이 없어서 개발자 도구를 참고하기 보다는 하나씩 만져봤다
유용했던 기능은 margin: 0 auto 이 부분인데

여기어때 사이트는 줌 인/아웃, 창 크기 변화에도 컨텐츠가 가운데에 고정이 되어있는데
방법을 못찾겠어서 고민하다가 chatGPT 한테 물어봤다 ㅎㅎ..

진짜 내 파트 구현하기

원래 사이트

내가 만든 것

일단 내가 구현할 것은 국내 인기 여행지, 해외 인기 여행지인데
두 개 자체가 타이틀, 내용물만 다르지 형태는 똑같아서

TripCard라는 컴포넌트를 만들고 그 안에서도 이미지 + 장소명이 중복적으로 쓰여서

Card라는 컴포넌트를 만들었다

const Card = ({ id, img, name }) => {
  return (
    <div key={id} className="card">
      <img src={img} />
      <span>{name}</span>
    </div>
  );
};

export default Card;

import Card from './Card';

const TripCard = ({ title, tripCardList }) => {
  return (
    <section className="trip-card">
      <div className="title">
        <h2>{title}</h2>
      </div>
      <div className="card-wrapper">
        {tripCardList.map((it) => {
          return <Card key={it.id} img={it.img} name={it.name} />;
        })}
      </div>
    </section>
  );
};

export default TripCard;