#1. 첫 프로젝트 시작과 준비

#1-0 들어가는 말

 그동안 여러 강의들을 통해 HTML, CSS, JavaScript, React를 배웠다. 아직 완벽히 마스터 했다라고 말하긴 어렵지만, 그래도 그동안 열심히 공부했으니 이젠 나만의 프로젝트를 시작하여 진짜 내 것으로 만들어 보자!

 

나는 '사람들이 컴퓨터로 가장 많이 하는 게 무엇일까?'를 생각했을 때, 인터넷 검색, 게임, 그리고 쇼핑이라고 생각했다. 그래서 첫 프로젝트로 인테리어 쇼핑몰인 '오늘의 집' 사이트를 클론코딩 해보고자 한다. 

 

기존에 '오늘의 집' 사이트는 크게 커뮤니티, 스토어, 인테리어 시공이란 주제로 나뉘는데 , 나는 이 중 스토어를 중심으로 메인 페이지, 상품 디테일 페이지, 로그인 페이지 등을 제작할 것이다. 나는 프론트 작업을 진행하고, 백엔드 작업은 친한 친구가 도와주기로 했다. (준하 고마워)

 

과연 첫 프로젝트를 무사히 잘 끝낼 수 있을 지 걱정반 기대반이다. 일단 기본 셋팅과 라우터를 정리하면서 '내일의 집' 프로젝트를 시작해보자.

 

---

#1-1 Assets  기본셋팅

 

1) 구글 폰트 적용
- 구글 폰트 사이트(https://fonts.google.com/)에서 노토산스체 검색하여 index.html 파일에 link 태그 적용
- SCSS 파일에 font-family 적용

 

2) 이미지 포맷 정리
프론트 개발자는 이미지 사용용도에 따라 이미지 포맷을 잘 사용해야 된다. 이미지 용량이 전체 사이트 용량의 가장 큰 부분을 차지하기 때문이다.

 

-래스터 이미지(비트맵): png는 용량이 크고 화질이 좋고 투명도를 나타낼 수 있다. jpg는 용량이 작지만 화질이 덜 좋다. 퍼포먼스가 중요한 사이트라면 주로 jpg 이미지 사용을, 이미지 화질이 우선인 사이트라면 주로 png 이미지를 사용하면 되겠다.

-백터 이미지: svg는 확대 시 이미지가 깨지지 않으므로 주로 로고나 아이콘에 사용된다. 그리고 xml 이라는 마크업 언어의 종류이므로 css와 javascript로 수정이 가능하다. 용략도 작다.

※리액트에서 svg 이미지 사용하는 Tip
svg 이미지를 리액트 컴포넌트식으로 사용하면 svg를 쉽게 커스텀할 수 있다. 변경하고자 하는 svg 파일코드를 current로 수정하여 아래와 같이 사용.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="current"
  height="current"
  viewBox="0 0 24 24"
>
  <path fill="current" fill-rule="evenodd" d="...." />
</svg>

import { ReactComponent as Cart } from 'assets/icon/cart.svg';

<Cart width="32" hieght="32" fill="blue"/>

 

3)파비콘(favicon) 적용
- Favicon Generator 사이트(https://realfavicongenerator.net/)를 이용하여 기본 파비콘 svg 파일을 변환시켜 사용하면 편리하다. 변환 후 index.html 파일에 link 태그 적용
- 변환된 이미지는 public 폴더 위치에 파일 넣기

 

---

#1-2 Sass  기본셋팅 

 

- Colors
- Typography
- Layouts
- Mixins

- modules