1. creat-react-app
이미 만들어진 폴더 안에서 create-react-app . 를 터미널에 입력하면 그 폴더 이름으로 리액트가 설정된다.
2. index.html 설정
favicon.svg
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2929 5.29289C14.6834 4.90237 15.3166 4.90237 15.7071 5.29289L21.7071 11.2929C22.0976 11.6834 22.0976 12.3166 21.7071 12.7071L15.7071 18.7071C15.3166 19.0976 14.6834 19.0976 14.2929 18.7071C13.9024 18.3166 13.9024 17.6834 14.2929 17.2929L18.5858 13H3C2.44772 13 2 12.5523 2 12C2 11.4477 2.44772 11 3 11H18.5858L14.2929 6.70711C13.9024 6.31658 13.9024 5.68342 14.2929 5.29289Z" fill="black"/>
</svg><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="유튜브 API를 이용하여 나만의 사이트를 만드는 튜토리얼입니다."/>
<meta name="keyword" content="포트폴리오, 리액트, react, react.js, 코딩 사이트, 사이트 만들기, 리덕스" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<title>나만의 유튜브 코딩 사이트 만들기 🧐</title>
</head>
<body>
<div id="root"></div>
</body>
</html>// <div id="root"></div>를 설정해주어야 react를 뿌릴 수 있다.
3. src 기본 설정
src에서 파일을 작업하면 public에서 보여준다.
마지막에 페이지의 console에서 에러가 없는 지 꼭 확인해야 한다.
설치해야 할 모듈들...
|
- react를 설치합니다. `npx create-react-app 타이틀`
- react-router-dom을 설치합니다. `npm install react-router-dom`
- axios를 설치합니다. `npm install axios`
- react-icons을 설치합니다. `npm install react-icons`
- react-player를 설치합니다. `npm install react-player`
- sass를 설치합니다. `npm install sass`
- react-helmet-async를 설치합니다. `npm install react-helmet-async`
- swiper를 설치합니다. `npm install swiper`
|
4. 나만의 유튜브 사이트 만들기 : SCSS 셋팅하기 https://webstoryboy.co.kr/1967
scss세팅1
scss세팅2
style.scss
//import 순서 중요
@charset "UTF-8";
//setting
@import "setting/fonts";
@import "setting/vars";
@import "setting/reset";
@import "setting/mixin";
@import "setting/common";index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './assets/scss/style.scss';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
'대외활동 > 멋쟁이사자처럼_프론트엔드 12기' 카테고리의 다른 글
| 멋사 FE 여기톤. MTV방식으로 백엔드와 프론트엔드 연결하기 (0) | 2024.07.19 |
|---|---|
| react로 파비콘(아이콘) 넣기 & 제목(title) 바꾸기 (0) | 2024.07.14 |
| 멋사 FE 5주차. 과제 React로 todolist만들기 폴더 만들기 (0) | 2024.05.21 |
| 멋사 FE 5주차. 과제 REACT 컴포넌트 사용 (0) | 2024.05.20 |
| 멋사 FE 스터디 1주차_웹디자인 기능사 정리 (0) | 2024.05.12 |
