앱센터 1번째 차시 - 나만의 명함 만들기

과제 목표 : react 프로젝트를 생성하여 나만의 명함을 만들고 깃허브 공간에 올리기

1. react 프로젝트 생성

npm create vite@latest

위 명령어를 통해 react 프로젝트를 생성합니다.
평소에는 습관적으로 입력하곤 했는데, 이번에는 위 명령어가 어떤 의미인지 알아보려고 합니다.

• npm create의 의미 : 특정 템플릿 생성기를 실행하자는 의미로, 쉽게 말해 새로운 프로젝트의 기본 뼈대를 만든다고 생각하면 됩니다.
• vite의 의미 : vite는 툴의 종류 중 하나인데요, React, Vue, Svelte 등 여러 프레임워크를 지원합니다. 저는 이 중 react를 사용할 예정입니다. 즉, vite를 지정했다는 건 vite라는 툴을 이용하여 기본 뼈대를 만들겠다는 의미라고 할 수 있습니다.
• @latest의 의미 : vite의 가장 최신 버전을 가져와서 프로젝트를 생성하겠다는 뜻입니다.

한 줄로 정리하자면,
"vite라는 툴의 가장 최신 버전을 가져와서 새 프로젝트 폴더를 만든다"
라고 할 수 있습니다!

2. 프로젝트 기본 구조 알아보기

프로젝트를 생성하면 위 사진과 같은 구조를 볼 수 있는데요.
(사용되지 않을 일부 파일 및 폴더는 삭제한 상태임.)
간단하게 알아보자면 아래와 같습니다!

• index.html : 브라우저가 제일 처음 읽는 파일.

<div id="root"></div>

위와 같이 빈 박스가 들어있어서 react가 해당 빈 박스에 화면을 그려 넣는 방식.

• main.jsx : 진짜 entry point임! index.html의 <div id="root">를 찾아서, 그 안에 <App /> 컴포넌트를 넣음.
• app.jsx : 메인 컴포넌트로, 실제로 화면에서 보여주고 싶은 UI를 작성하는 파일.

즉, 명함을 만들기 위해서는 app.jsx에 원하는 내용을 작성해주면 됩니다.

3. Flexbox

flexbox란, "Flexible Box Layout"의 줄임말로 유연한 박스 배치 방식입니다.

flexbox는 부모-자식 관계로 동작합니다.

부모 : 컨테이너
자식 : 아이템

즉, 부모 컨테이너 안에 들어있는 모든 요소들을 자식 아이템이라고 할 수 있습니다.

1주차 교안 내용에 따르면 위와 같은 내용들을 참고할 수 있습니다.

• flex-direction을 통해 메인 축을 정해 가로 배치를 할 것인지 세로 배치를 할 것인지 결정 가능.
• justify-content, align-items 등을 통해 축 정렬 가능.
• flex-grow, flex-shrink, flex-basis 등을 통해 아이템 속성들 조절 가능.

4. 명함 만들기

디자인 써클이라고 하는 웹사이트에서 아래와 같은 참고용 명함 레퍼런스를 가져왔습니다.

구역을 한 번 나눠보겠습니다.

저는
1. 로고 영역 2. 직책 영역 3. 이름 영역 4. 하단 정보 영역
이렇게 4가지 영역으로 나누어 생각했습니다.
제가 작성한 코드를 간단하게 살펴보도록 하겠습니다.

// App.jsx
import React from "react";
import "./App.css";
import mail from "./assets/mail.png";
import github from "./assets/github.png";
import velog from "./assets/velog.png";

function App() {
  return (
    <div className="card">
      {/* 1. 로고 영역 */}
      <div className="logo">
        <h1>HUIWON</h1>
        <p>INCHEON UNIVERSITY</p>
      </div>

      {/* 2. 직책 영역*/}
      <div className="position">개발자</div>

      {/* 3. 이름 영역*/}
      <div className="name">유 희 원 Yu Hui Won</div>

      {/* 4. 하단 정보 영역*/}
      <div className="footer">
        <div className="left">
          <p>서울특별시 서대문구</p>

          {/* 전화번호, 이메일 */}
          <div className="contact-item">
            <span>010-8560-4428</span>
            <img src={mail} alt="메일 로고" className="icon" />
            <span>heuiwon716@gmail.com</span>
          </div>

          {/* 깃허브, 벨로그 */}
          <div className="contact-item">
            <img src={github} alt="깃허브 로고" className="icon" />
            <span>Dead-or-Alive0609</span>
            <img src={velog} alt="벨로그 로고" className="icon" />
            <span>https://velog.io/@hi_1/posts</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

먼저, App.jsx 파일을 통해 구역을 나누어 박스들을 만들어 주었습니다.
className으로 박스들을 구분해주고, h1 / p / span 태그를 적절히 사용해주었습니다.
로고 이미지의 경우 assets 폴더를 만들어 정적 파일을 넣은 후 import하여 사용해 주었습니다.

tip)

• h1 태그 : 제목 태그(굵고 큰 글씨)
• p 태그 : 문단 태그
• span 태그 : 인라인 태그로, 문장 안에서 특정 부분만 묶을 때 사용. CSS 스타일을 일부 텍스트/요소에만 적용하고 싶을 때 자주 씀. 줄바꿈이 되지 않는 것이 특징.
• div 태그 : 블록 요소 → 한 줄 전체 차지, 줄바꿈 발생.

// App.css
/* 전체 페이지 중앙 정렬 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #f5f5f5;
}

/* 명함 박스 */
.card {
  width: 500px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 로고 오른쪽 정렬 */
.logo {
  text-align: right;
}

.logo h1 {
  margin: 0;
}

.logo p {
  margin: 0;
  font-size: 12px;
  color: #555;
}

/* 직책 */
.position {
  font-size: 14px;
  color: #444;
}

/* 이름 크게 */
.name {
  font-size: 22px;
  font-weight: bold;
}

/* 주소 */
.address {
  margin: 0;
  font-size: 14px;
  color: #333;
}

/* 연락처 */
.contacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #333;
}

.icon {
  width: 16px;
  height: 16px;
}

어쩌고 저쩌고 코드 설명

브라우저에서 실행시 아래와 같은 결과물을 보입니다.
🔗나만의 명함 만들기_배포 링크

5. 깃허브에 올리기

교안에 나온 깃 플로우를 참고하여 깃허브에 올려보도록 하자.

이슈 생성 시 필요한 Commit Type에 대해 간단하게 알아보면 다음과 같다.(출처가 기억이 안 나요 죄송해요)

• feat : 새로운 기능 추가
• fix : 버그 수정
• docs : 문서 수정
• style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
• refactor : 코드 리펙토링
• test : 테스트 코드, 리펙토링 테스트 코드 추가
• chore : 빌드 업무 수정, 패키지 매니저 수정