노마드 코더 - ReactJS로 영화 웹 서비스 만들기

Window 기준

목차

#8 Introduction
#9 Setup
#10 JSX & Props
#11 State
#12 Making the Movie App
#13 Conclusions
#14 Routing Bonus

#1~#7까지는 안할거에오. 리액트 아예 처음 접하시는 분이라면 꼭 하고 시작합시다!!

9.1 Creating a Github Repository

1. create repository 

2. repository 연결

git init // git 생성
git remote add origin https://github.com/uyeah0/MovieApp.git // 연결
git remote -v // 연결 확인

3. commit push 커밋푸시

git add . // 모든 파일 등록

git commit -m "#1.0 Creating your first React App" // 커밋 메세지 작성 후 등록

git push origin master // git repository에 push하여 커밋 최종으로 올리기

노마드 코더 ReactJS로 영화 웹 서비스 만들기

web 소켓 얘기하다가 급 react 기초 다지기 . . 빠르게 훑고 가면 좋을 거 같아서 후딱 진행해보겠습니다.

Window 기준

목차

#1 [Update] Introduction
#2 [Update] The Basics of React
#3 [Update] State
#4 [Update] Props
#5 [Update] Create React App
#6 [Update] Effects
#7 [Update] Practice Movie App

#8 Introduction
#9 Setup
#10 JSX & Props
#11 State
#12 Making the Movie App
#13 Conclusions
#14 Routing Bonus

#1~#7까지는 안할거에오. 리액트 아예 처음 접하시는 분이라면 꼭 하고 시작합시다!!

9.0 Creating your first React App

1. create-react-app

(node_env_14) C:\Study>npx create-react-app movie_app

2. package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },​

start : 개발 서버를 시작하고 애플리케이션을 브라우저에서 실행하는 명령어 

- 실시간으로 파일 변경 감지

- 브라우저를 자동으로 새로고침 하거나 변경된 부분 즉시 반영

build : 프로젝트 배포용 빌드 변환 명령어

- 소스 코드 최적화 배포용 버전 변환

- 코드 압축, 분할, 이미지 최적화 등 프로덕션 환경에 맞게 설정 조정

- 배포하기에 적합한 파일들을 build/ 디렉터리에 생성

test ( 테스트를 자동으로 실행하여, 코드가 예상대로 작동하는지 확인 가능),

eject (프로젝트 설정을 커스터마이징 하기 위해 react 앱 기본 설정 노출) 는 사용안한다네용

3. npm start

localhost:3000 번으로 웹페이지 열려따!

성공적

  Local:            http://localhost:2:30003000
  On Your Network:  http://172.16.1.92:30002:3000

Local : 컴퓨터에 있는 거

On Your Network : 다른 사람이 이 사이트 확인해볼때 폰에 테스트 하거나 wifi로 접속 가능

노마드 코더 ReactJS로 영화 웹 서비스 만들기

web 소켓 얘기하다가 급 react 기초 다지기 . . 빠르게 훑고 가면 좋을 거 같아서 후딱 진행해보겠습니다.

Window 기준

목차

#1 [Update] Introduction
#2 [Update] The Basics of React
#3 [Update] State
#4 [Update] Props
#5 [Update] Create React App
#6 [Update] Effects
#7 [Update] Practice Movie App

#8 Introduction
#9 Setup
#10 JSX & Props
#11 State
#12 Making the Movie App
#13 Conclusions
#14 Routing Bonus

#1~#7까지는 안할거에오. 리액트 아예 처음 접하시는 분이라면 꼭 하고 시작합시다!!

1. nodejs, npm 설치 되었다면 npx 설치

(node_env_12) C:\Study>npm install npx -g

2. node, npm, npx, git 설치 확인

ISSUE  : react 12버전이 너무 낮다고 하네요 . .ㅎ

node 14 버전으로 진행했습니다!!

Window 기준

nodeenv 설치 안하신 분 보고 오셔요.

2024.11.09 - [개발ING/자유로운 개발] - [websocket 정복] nodejs 가상환경설정 도구 nodeenv 설치 (윈도우)

1. nodeenv로 nodejs 환경 생성 (cmd창)

C:\Study>nodeenv --node=14.0.0 node_env_14

위치 바꿔서 다시 환경 생성 했더용. ㅎㅎ

2. 가상환경이름\Scripts\activate 가상환경접속

C:\Study>node_env_14\Scripts\activate // 가상환경 접속

3. create-react-app

(node_env_14) C:\Study>npx create-react-app react-movie-web-service // 가상환경 내에서 react 프로젝트 생성

노마드 코더 ReactJS로 영화 웹 서비스 만들기 < 를 할거기 때문에 ~

react-movie-web-service 파일로 만들어줍니다.

+ 개발자 같이 react 파일 여는법

code 파일명 입력하면 vscode 열립니당 ^^

code react-movie-web-service

진짜루 시작!! 

다음 글 부터는 코딩 진행합니당

websoket 공부해보려고 했는데 node 14버전 이상만 된다고 함.

그러나 회사 node 버전이 13 이라면?

이럴 때 두 버전을 분리하여 사용할 수 있는 가상환경을 사용한다.

난 아나콘다 env 는 사용해봄. 아마 node도 비슷할 듯? 

https://github.com/ekalinin/nodeenv#install

*공식 문서 참고*

Window 기준

1. nodeenv 설치

- user\usename 이 위치 cmd 창에서 함. (경로는 상관없음)

pip install nodeenv

*설치확인 필수*

- 버전 뜨면 설치 완료

nodeenv --version

2. nodeenv로 nodejs 환경 생성

2-1. node 최신 버전 설치 : nodeenv <환경_이름>

2-2. node 특정 버전 설치 : nodeenv --node=<버전> <환경_이름>

env 이름이 node_env_14 라면 아래와 같이 생성

(난 노드 14버전 사용할 예정이라 14를 붙임)

2-1. node 최신 버전 설치

nodeenv node_env_14

2-2. node 특정 버전 설치

nodeenv --node=14.0.0 node_env_14

3. nodeenv 환경 활성화

- user\usename 이 위치 cmd 창에서 하면. 이 위치에 폴더 생성됨. (어느 경로에 하던 상관없음.)

node_env_14\Scripts\activate

난 이제 websocket 공부할 준비 완료!!

멍청한 짓 엄청 함.. 

- button onClick에 setState를 넣어서 값 변경하는데 안바뀜

- setState is not a function 이 계속 뜸 

- 잘못된 코드

const {isThemeUpdate, setIsThemeUpdate} = useState(false);

- 올바른 코드

const [isThemeUpdate, setIsThemeUpdate] = useState(false);

<div style={isStyle? {width:'20px'}: null} />

<div style={isStyle? {width:'20px'}: {width: '20%'} />

React sass 연결 시 오류

고생함

해결방법!!

1. sass 재설치 - 난 안됨

npm uninstall node-sass;

npm install node-sass@4.14.1

2. sass 설치..(?)

npm add node-sass classnames react-icons

classnames 부터는 안해도 될듯.. 조건부 스타일링을 편하게 할 수 있다고 합니다..

yarn 사용하는 분들은 위에 명령어로 npm -> yarn 바꾸면 됨!!

참고 : 리액트를 다루는 기술 - 개정판 (김민준 지음)