(TIL 25일차) 스타일쉐어 1차 프로젝트 준비 - CRA 초기세팅 (1)

빡기·2020년 2월 21일

1차 프로젝트 CRA TIL awesome font fontawesome 세팅 스타일쉐어 초기 초기작업

TIL(Today I Learned)

목록 보기

20/43

블로그 내용 작성 전 궁금했던 점 짧게 복습

img 태그와 div의 background의 구분

img 태그는 div와 다르게 background position, size 등 background 속성을 사용 할 수 없어 원하는 크기를 잡거나 위치를 지정하기 힘든 부분이 존재
하지만 img 태그는 검색엔진에서 보여지기 위한 중요한 요소 이기 때문에 검색엔진에 나타내고 싶은 중요한 요소면 img 태그 위주로 사용하고 별 의미 없는 내용이면 background를 사용하도록 하자

input에 label를 덮는 이유

label 적용 전에는 input을 선택하는 경우에만 인식하는데, label 태그를 적용한 후에는 텍스트를 선택해도 input을 선택
사용자가 마우스로 해당 텍스트를 클릭할 경우 <label> 요소와 연결된 요소를 곧바로 선택할 수 있어 사용자의 편의성을 높임

font Awesome 사용법

font-awesome 아이콘 검색 사이트
위에 사이트에서 font-awesome 설치하면 다양하게 아이콘 및 버튼 사용 가능

설치방법

1. Font Awesome 아이콘 대한 패키지를 설치

npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/fontawesome-svg-core

Solid, Regular, Light, Brands 4개의 카테고리와 유/무료 여부에 따라 여러개의 패키지가 존재하는데 무료로 제공되는 Solid, Brands,Regular 3개의 카테고리에 대한 패키지만 설치
(항상 3개를 다 설치할 필요는 없고 사용하시고 싶은 아이콘이 속한 카테고리만 설치하시면 됩니다.)

2. React 컴포넌트 형태로 사용할 수 있도록 해주는 @fortawesome/react-fontawesome이라는 패키지는 설치

npm i @fortawesome/react-fontawesome

웹에서 바로 Font Awesome를 사용하면 일반적으로 수천개에 달하는 아이콘을 모두 로드해야 되서 비효율이 발생, 하지만 JavaScript 기반인 React에서 사용할 때는 특정 카테고리에서 필요한 아이콘만 임포트할 수 있다는 장점

3. font-awesome import 하기

import { faCheckSquare, faSpinner } from "@fortawesome/free-solid-svg-icons";
// 공식사이트안에 solid 아이콘 사용할시 위에 처럼
import { faSquare } from "@fortawesome/free-regular-svg-icons";
// regular 아이콘 사용할시 위에 처럼

4. 사용 예시

import React from "react";
import { faCamera } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

library.add(faCamera)

// 2배 사이즈로 할시 size 속성 이용
<FontAwesomeIcon icon={faCamera} size="2x" />

시작하기 전 프론트팀 초기작업 설정

scss Animation 하는 방법 참조사이트

1. sass를 사용하기 위한 컴파일러 및 로더 설치

npm i --save node-sass style-loader css-loader sass-loader

2. 라우터를 사용하기 위한 라우터 설치

npm install react-router-dom

3. import 절대경로 설정을 위한 설정

제일 상위 폴더에 .env파일을 생성한 뒤 입력하고 저장

NODE_PATH=src/

마찬가지로 제일 상위 폴더에 jsconfig.json 생성뒤 입력하고 저장

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "*": ["*", "src/*"]
    }
  }
}
// 위의 입력하고 import 절대경로 사용 가능
import "Style/Main.scss";