[1人 프로젝트] 트위터 클론코딩 5회차

구글에서 지정한 닉네임이 표시된다.

🎉 성과

완성한 부분

소셜 로그인시 소셜에서 사용하던 닉네임 불러오기, GitPage로 배포

 

 

---

 

 

✨ 느낀점

👍 알게 된 점

배포 할 경우 색인 추가

배포하기 전에는 상관없었지만, 배포 후에는 내가 생성한 트윗을 불러오기 위해서는 색인이 필요하기때문에 색인을 추가했다. 색인을 추가하지 않을경우에는 내가 만든 웹사이트가 제대로 작동하지 않게된다. 색인추가 방법은 배포 후에 콘솔창을 띄우게되면 색인추가하라는 링크를 클릭하면 해당 홈페이지로 이동하게되는데, 그 때 색인을 추가하면된다. 

 

React를 사용한 웹사이트 Git-Page로 배포하기

1. 내가 만든 코드를 깃허브에 올린다.

2. 터미널에서 깃페이지로 올려주는 모듈을 설치한다.

npm i gh-pages

3. package.json 파일 제일 밑에 homepage를 작성한다.

"homepage": "https://깃허브닉네임.github.io/깃허브저장소이름/"
작성할때 '작은따옴표'를 사용하면 작동안된다. 꼭 큰따옴표를 사용하자

4. package.json파일에서 "script"부분에 배포를 실행할 코드를 작성한다.

"predeploy": "npm run build",
// predeploy는 deploy가 실행되기 전에 우선 실행된다.
// npm run build는 배포할 파일을 만드는 것이다.

"deploy": "gh-pages -d build"
// gh-pages모듈을 실행하여 마무리 한다.

5. 터미널에서 해당 코드를 입력해 배포를 시작한다.

npm run deploy

6. 배포완료했다는 메시지가 나타나고, 약 5분정도 기다리면 배포가 완료된다. 

정상적으로 실행되지 않는다면, Branch가 gh-pages인지 확인하면 된다. 확인안해도 자동으로 바꿔지지만 그래도 한번 확인해보자

 

❗  보완할 점

1. CSS작업
2. 깃허브, 구글에 사용된 사용자 이미지 불러와서 화면에 표시하기

1. 강의는 여기서 끝났고, CSS작업을 통해 트위터 웹사이트를 멋지게 꾸며야겠다.

2. 내가 필요한 부분을 더 채워넣는 과정을 해봐야겠다. 내가 생각한 부분은 구글과 깃허브에 프로필 사진을 불러와 트위터에 표시하는 것이다.