Issue : git modified even if i didn't modify anything

줄바꿈 문제인 줄 알았지만 권한 문제였음.

1. 줄바꿈 자동 변환 시도 (난 안됨)

git config --global core.autocrlf true

- 텍스트 파일의 줄바꿈(CRLF <-> LF) 자동으로 변환해주는 설정

- 줄바꿈 문제로 인한 불필요한 변경 막아줌

2. 파일 권한의 변경 여부를 Git 무시하도록 설정 

git config core.filemode false

- Git은 기본적으로 파일의 실행 권한 변경도 트래킹 함

- windows에서는 이 권한 개념이 달라서 불필요하게 mode change 가 나타날 수 있음

false 설정시

- 파일의 권한 변경 무시

- git status에 permission 변경 안뜸

참고 링크: 

https://stackoverflow.com/questions/62724723/git-in-visual-studio-code-says-file-is-modified-even-when-there-is-no-change

개발환경 : vscode

언어 : typescritpe + javascript

현상

모든 코드에 빨간줄 뜨면서 'jsx element implicitly has type 'any' because no interface 'jsx.intrinsicelements' exists' 가 뜸.

(에러 캡쳐 못함)

도커 사용해서 코드는 잘 굴러가는 상황

해결

방법 1)

Ctrl+Shift+P > 'Developer Reload Window'

출처 : https://jang8584.tistory.com/295

방법 2)  npm install

>> 윈도우 재설치하면서  npm install 을 안해줬었음. 

전 바보입니다. 

node_modules 가 비어있었네요~ 

nvm 으로 node vesion 맞춰주고 npm intall 해줍니다.

노마드 코더 - 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

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