[React]뽀모도로 타이머 개발 시작 1일차 - 준비하기

시작이 반. 리액트 프로젝트 생성하기

이번 프로젝트는 익숙하지만 복습한다는 마음으로 '리액트'를 이용해서 개발을 진행하려고 합니다.

vscode 설치나 확장 프로그램은 취향차이도 있고 검색하면 금방 나오기 때문에 생략하겠습니다. 만약 기회가 된다면 제 설정 내용을 보여드리도록 하겠습니다. 일단 vscode를 실행하고 ctrl + `(1 옆에 있는키)를 누르면 아래쪽에 터미널이 열리게 되는데 여기서 아래 내용을 입력합니다

npx create-react-app pomodoro-timer

pomodoro-timer는 이번에 생성할 프로젝트 이름이며, 자유롭게 지정이 가능하지만 대문자는 입력이 불가능합니다. 

설치가 완료되면 vscode에서 ctrl을 누른 상태에서 K,O 키를 순서대로 누르면 폴더 열기 화면이 나오는데 여기에서 생성한 폴더로 이동하셔도 됩니다. 이렇게 하면 나중에 vscode를 닫았다 재실행 할 때 프로젝트 폴더가 바로 열리게 됩니다.

TailwindCSS 설치하기

화면을 예쁘게 꾸며주는 CSS를 쉽게 사용할 수 있는 프레임워크인 TailwindCSS를 설치하겠습니다. 물론 세세한 부분을 꾸미기 위해서 직접 css파일을 수정하는 경우도 있지만, 제 경우에는 간단한 CSS는 클래스명으로 스타일링 할 수 있는 TailwindCSS를 선호하는 편입니다. 아래 링크를 클릭해 TailwindCSS 가이드 페이지로 이동하시면 설치방법과 자세한 설명을 확인할 수 있습니다(영어)

https://tailwindcss.com/docs/guides/create-react-app

Install Tailwind CSS with Create React App - Tailwind CSS

 

 

 

npm install -D tailwindcss
npx tailwindcss init

tailwindcss를 설치하는 명령어 입니다. 위 명령어를 입력하면 루트 폴더에 tailwind.config.js이 생성되어 있을텐데 파일을 열고 아래 내용대로 입력합니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src 폴더 안에 있는 index.css 파일을 열어서 맨위에 아래 코드를 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

App.js 파일을 열어 내용을 전부 지우고 아래 코드를 입력합니다. 그 전에 src폴더에 있는 'App.css'와 'logo.svg'파일은 사용하지 않기 때문에 삭제해 줍니다.

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

터미널에서 아래 명령어를 입력하면 로컬서버를 열어서 현재까지 입력한 내용을 확인해 볼 수 있습니다.

npm start

아래와 같이 흰색 화면으로 좌측 상단에 'Hello world!'가 적혀있으면 설치가 잘 된 겁니다. 

이제 기본적인 개발 준비가 완료되었습니다. 내일부터 제대로 개발을 시작해 보도록 하겠습니다.

이전 글 보기

뽀모도로 타이머 - 생애 첫 사이드프로젝트

뽀모도로 타이머 - 생애 첫 사이드프로젝트