노마드 코더 - 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 공부할 준비 완료!!

1. 저장소와 연결이 잘 돼있는지 확인

$ git remote -v

2. fork한 원본 저장소가 없다면 등록하기

$ git remote add upstream fork한_원본_저장소.git

위 명령어는 upstream이라는 이름의 원격 저장소 추가 를 의미


3. 최신 commit 가져오기부터 내 저장소에 commit push 하기까지

$ git fetch upstream
$ git merge upstream/master
$ git push origin master

위 세가지 명령어 실행 시 충돌이 없다면 잘 가져올 것임

1. 반올림함수 : ROUND

select ROUND(숫자데이터) from TableName;

ex) table명 : userTable, 반올림 할 데이터 : 10.26

select ROUND(10.26) from UserTable;

2. 평균 구하는 함수 : AVG

select AVG(ColumnName) from TableName;

+함수 안쓰고 평균 구하기

select SUM(ColumnName)/COUNT(*)) from TableName;

COUNT(*)은 데이터 총 갯수

* : 전체

안녕하세요

다시 돌아왔습니다~.. 

오랜만에 별거 아니지만

매 번 잊어버리는

깃랩 레포지토리 삭제

깃랩 레포지토리 삭제

0. 삭제할 project 클릭

1. Settings > General 클릭

2. 맨 아래 위치한 Advanced 'expand' 클릭

3. 맨 아래 위치한 'Remove project' 클릭

4. type ~ to 사이에 적힌 word 작성 후 confirm 클릭