광고 수익을 창출할 웹사이트 만들어보기 3-2(React 서버 github 소스 업로드]

이번엔 React서버 바로간다.

한번 해봤으니 짧게 쳐버린다.

 

---

1.init 먼저 빠르게 해준다.(초기화)

 

cd D:/emoji-generator-frontend
git init

 

---

2.제외파일 선택

React프로젝트는 .gitignore파일이 create-react-app 명령어로 프로젝트 생성할때 만들어 지나보다.

이미 .env.local과 다른 환경별 .env 파일들이 .gitignore에 포함되어 있으니 추가로 .env를 넣지 않아도 된다. (쥐리는 리액트다.)

 

---

3.API키 .env로 빼기

python과 똑같이 .env파일을 써서 내 카카오톡 API key를 감출거다.

프로젝트의 루트디렉토리에 .env파일을 추가해 내 API 키를 작성한다.

REACT_APP_KAKAO_API_KEY=<내 kakao API KEY>

---

4.App.js에 하드코딩으로 들어가있던 API key 로직 수정

useEffect(() => {
    if (window.Kakao && !window.Kakao.isInitialized()) {
        const kakaoKey = process.env.REACT_APP_KAKAO_API_KEY;
        window.Kakao.init(kakaoKey);
        console.log('Kakao initialized');
    }
}, []);

---

5. 추적할 파일 Git에 추가(add 명령어)

git add .

를 했는데 이상한 warning 로그가 발생했다.

PS D:\emoji-generator-frontend> git add .                                                           
warning: in the working copy of '.gitignore', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'README.md', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package-lock.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'public/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'public/manifest.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'public/robots.txt', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/App.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/index.css', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/index.js', LF will be replaced by CRLF the next time Git touches it

 

이 메시지는 파일의 줄바꿈(Line Endings) 형식이 서로 다르다는 경고라고 한다.
Windows와 Unix/Linux/macOS는 줄바꿈 형식이 다르기 때문에 발생하는 문제이며, 코드에 영향을 주지는 않지만
협업 환경이나 코드 스타일을 통일하기 위해 해결하는 것이 좋다고 한다.

 

• LF(Line Feed): Unix/Linux/macOS에서 사용되는 줄바꿈 형식.
• CRLF(Carriage Return + Line Feed): Windows에서 사용되는 줄바꿈 형식.

 

 

나는 Windows에서 개발했지만, 추후 AWS EC2(linux)서버에 배포할 예정이기 때문에 해결해야 한다.

 

해결방법은 아래와 같다.

1. Git 설정 변경

Git이 자동으로 줄바꿈 형식을 관리하도록 설정합니다. 아래 명령어를 실행하세요:

git config --global core.autocrlf true

true 옵션:

• 체크아웃 시(로컬로 파일을 복사할 때) CRLF로 변환.
• 커밋 시 Git 저장소에 LF로 저장.

2. 기존 파일 업데이트

위 설정을 적용한 후, 기존 파일의 줄바꿈을 재변환하려면 아래 명령어를 실행하세요:

git rm --cached -r .
git reset --hard

• git rm --cached -r .: Git의 캐시를 지우고 새로 파일 상태를 갱신. (rm은 리눅스 리무브 명령어임)
• git reset --hard: 로컬 파일을 변경된 상태로 복원. 

이 정도 하고 다시 add 해보자.

 

또 뜨는데?

 

왜 뜨는지 모르겠어서 직직피티한테 물어보자.

경고 제거 방법

1. .gitattributes 파일 추가
   프로젝트 루트 디렉토리에 .gitattributes 파일을 생성하거나 수정하세요. 다음 내용을 추가합니다:

* text=auto

 

이래도 또 뜬다.

그래서 "국룰 해결방법"을 쓰기로한다.

 

VS코드를 껏다 킨다.

다시 위에 사항을 진행한다.

잘된다.

어이무

...... 넘어가자.

 

---

6. GitHub 레포지토리 생성

 

github 로그인 - 새 레포지토리 생성 - 제목,설명,공유여부 - Create repository 고고

 

 

---

7. 원격 저장소 연결

git remote add origin https://github.com/<githug ID>/emoji-generator-frontend.git

 

8. GitHub로 푸시

git push -u origin master

 

9.실패

error: failed to push some refs to 'https://github.com/haksa789/emoji-generator-frontend.git'

 

10. 까먹은 commit 해주기 ㅋㅋ

git commit -m "initial commit"

 

11.다시 푸쉬

git push -u origin master

 

12.머쓱해하기

 

중간에 조금 이상한 과정이 있었지만 넘어가자.

---

..다음화에 께숙....