팀프로젝트 - 도움이 될만한 기능들

프론트엔드로 새롭게 발견한 기능들

프로젝트를 준비하다가보니, 학원에서 배우지 않았던 새로운 기능들도 하나하나 익혀가는 것 같다.
(혹시 모른다, 배운건데 내가 까먹었던 건지도..ㅋㅋ)

몇개 되지는 않지만, 하나하나 적어가면서 남겨놔야지.

1. npx create-react-app {폴더명} - - template redux

기존의 리액트 앱을 만드는 일은 간단하다. 작업을 할 디렉토리에서 npx create-react-app {폴더명}
을 입력하면 간단하게 리액트 앱이 만들어졌다. 물론 이 다음에 npm install redux 를 입력하면
리덕스를 사용할 수 있지만, 리액트를 설치함과 동시에 리덕스도 추가시킬 수 있는 명령어가 있더라.
기존 리액트 설치 명령어 뒤에 -- template redux 만 추가해주면 된다. 유용하게 쓰일거 같다.

2. rsf 명령어

우리가 처음 html 을 배울때, html 의 기본 틀이란게 있었다.
!DOCTYPE 부터 시작해서, head, body 등 기본적으로 항상 존재하는 베이스 요소가 있었는데,
이들을 바로 생성할 수 있는 단축키가 있었다, ! + enter 이다.

그런데 리액트에도 이런게 있더라. 일단 맞는지는 모르겠지만, 리액트 js 파일의 기본구성은

import React from 'react';

function App() {
  return (
    <div></div>
  );
}

export default App;

이정도가 될거 같은데, 이것을 명령어 하나로 세팅해주는 기능이 있었다.

VScode 확장(expansion) 탭에서 reactjs code snippets 를 검색해 설치해보자.
그 다음에 js 창에서 rsf + enter 를 입력하면 위의 코드가 세팅되는걸 볼 수 있다.
이 또한 시간단축에 아주 좋을테니 잘 기억해두자.

3. 픽토그램 아이콘 사용

디자인을 하는데 가장 빈번하게 사용되는것 중 하나가 바로 '아이콘' 이다.
그중에서도 특히나 픽토그램 아이콘은 UI 에서 많이 쓰이는 요소 중 하나이고.
이 아이콘을 사용할 수 있는 방법을 알았다.

npm install @material-ui/core 을 먼저 설치하고
npm install @material-ui/icons 을 설치하면 아이콘 사용이 가능하다.

컴포넌트의 형태로 불러올 수 있다. import를 확실하게 해줘야한다.
만약 이것들이 정상적으로 작동한다면

이런 아이콘들을 사용가능하니까 이것도 메모.