이 포스팅은 노마드 코더님의 트위터 클론코딩을 학습 후 작성하였습니다. (무료!!)
https://nomadcoders.co/nwitter
트위터 클론코딩 – 노마드 코더 Nomad Coders
React Firebase for Beginners
nomadcoders.co
먼저 강의가 들어가기전에 nodejs가 필요하다. 준비되지 않았다면 설치 후 진행하자.
node -v터미널에서 위의 명령어를 입력하면 현재 node의 버전을 확인할 수 있다.
또한 백엔드 서버의 역할을 수행해 줄 firebase의 계정도 생성해 두자.
https://firebase.google.com/?hl=ko
Firebase | Google's Mobile and Web App Development Platform
개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.
firebase.google.com
이제 사전 준비는 끝났다.
이번 강의에서는 Vite를 사용하여 React를 구성할것이다.
|
사용처
|
React 애플리케이션 개발 도구
|
iOS와 Android 플랫폼에서 네이티브 애플리케이션 개발 라이브러리
|
|
특징
|
빠른 개발 서버를 제공하여 코드 수정 사항을 빠르게 반영할 수 있음
|
JavaScript와 네이티브 컴포넌트를 사용하여 애플리케이션을 구축
|
Vite를 사용해야 하는 이유
Vite
Vite, 프런트엔드 개발의 새로운 기준
ko.vite.dev
With NPM
npm create vite@latest
터미널에서 위의 명령어 입력과 함께 y를 입력해 주자.
프로젝트 name을 입력해 주고
React - TypeScript + SWC를 선택해 주었다.
여기서 SWC란 Speedy Web Compiler의 약자로 Rust라는 언어로 제작이 된 말 그대로 매우 빠른 자바스크립트 컴파일러이며, 기존 Babel이 하던 일의 대체제라고 한다.
code nwitter-reloadedVScode를 열어보자.
project가 잘 생성되었다.
여기서 터미널을 열고(ctrl+`) npm install을 하자.
이제 project를 실행해 보자.
npm run dev
앱의 초기 화면을 볼 수 있다.
이제 불필요한 파일들을 정리할 차례이다.
src 폴더에 있는 index.css, App.css, assets를 삭제하고, App.tsx를 간단하게 만들어 주자.
function App() {
return <></>
}
export default App
index.html에서 title을 변경해 준다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nwitter Reloaded</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Git
다음은 git 저장소를 initialize 해준 후에
git init .그리고 만들어둔 깃 주소를 연결해 준다.
git remote add origin 깃리포지토리주소Dependency
npm i react-router-dom@6.14.2강의에 명시된 버전에 맞게 react DOM 설치
npm i styled-reset기본적인 css style 초기화
npm i styled-components@6.0.7styled-components 설치
npm i @types/styled-components -Dtypescript는 추가로 types styled components 설치
모든 설치가 끝났다면, 이제 준비는 다 된 것이다.
'개발일지 > React' 카테고리의 다른 글
| [노마드 코더] ReactJS 트위터 클론 코딩 - Authentication (1) | 2025.01.17 |
|---|---|
| [노마드 코더] ReactJS 트위터 클론 코딩 - Router (2) | 2025.01.14 |
| ReactJS 로 영화 웹 서비스 만들기 #8 Old Codes (3) | 2024.08.28 |
| 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #7 Practice Movie App Styles (0) | 2024.08.21 |
| 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #7 Practice Movie App (0) | 2024.08.20 |
