1주차 미니 프로젝트 : 각 팀의 웹사이트 제작하기
3일차인 오늘, 사실 대부분의 것들은 완성이 된 상태이다.
처음에는 각자의 컴퓨터에서 .html 을 따로 작업해서 압축파일을 전송하여 한 사람이 그 파일을 병합해서 작업했다.
파일을 병합해서 작업하게 되면, 코드가 겹치거나 오류가 발생할 수 있달까...
그럴 때 사용하는 것이 바로 Github 이다. (여기서는 Github 사용법을 다루지 않는다.)
무엇보다 백업과 공유가 편리해 Github를 안 쓸 이유가 없지만, 팀장을 제외하고는 깃허브에 익숙한 사람이 없었다.
웹개발 강의에서 배운바로는 .html 한 화면에서 <style>, <script>를 작성했다.
우리 팀은 (팀장의 현명한 판단으로) .html .js .script 를 모두 분리하여 코드를 짜기 시작했다.
처음에는 양이 적어서 그런가? 싶지만, 나중에 양이 늘어나게 되니 분리하여 쓰는 것이 훨씬 보기 편했다.
오류가 발생함. 창을 띄웠더니 script가 적용되지 않음.
Visual Studio Code에 마켓플레이스에 가면 Live Server를 설치해준다.
live server를 설치한 후, html 파일에 들어가서 오른쪽 하단의 golive를 눌러주면 소스가 확장되면서 창이 실행된다.
일단 go live 실행 전에...
Github 먼저 들어가보자!
Github 로그인 한 상태에서 공동 협업자에게 받은 링크로 Github 링크에 접속한다!
Github 에서 초록색 code 버튼을 누르면
HTTPS 링크가 보인다.
복사버튼을 눌러주기!
복사한 HTTPS의 링크를 터미널에 붙여넣기 해 줄 예정.
VS code 의 터미널 들어가기 전에 바탕화면이나 원하는 경로에 새로운 빈! 폴더를 생성해준다.
그리고 VS code로 넘어오자.
자! 이제 터미널 창에서 새 터미널을 열어준다.
% 옆에 git clone 을 입력한다.
아까 복사했던 HTTPS 링크를 command+v (Window 버전_ctrl+v) 복사 붙여넣기 해준다.
여기서 스페이스바 누르고 . 을 입력하냐 안하냐의 차이가 있는데.
우리는 새폴더를 만들어주고 거기에 파일을 내려받을 예정이라 . 을 입력할 것.
이때 반드시 링크를 입력하고 한번 스페이스바로 띄어쓰기 해준다. 그리고 . 입력
그리고 Enter를 누르면 git clone 실행된다.
VS code에서 처음 만들어주었던 폴더를 열어주면, 파일이 잘 내려받아진 것을 확인할 수 있다.
이제는 ! Golive 기능을 쓸 차례.
굳이 Html 파일에서 창을 열지 않아도 된다.
script.js나 style.css 파일에 들어가서도 Go Live가 있으면 창이 실행된다.
오른쪽 하단 파란 줄에 Go Live 를 눌러보면 소스가 확장되면서 웹페이지가 열린다.
여기서도 해결되지 않는다면.. 그건 각 프로젝트의 보안 키를 잘 입력했는 지 확인해봐야할 것이다.
아무튼 오류 해결 완료! 이제는 실행이 꽤 잘 된다. ~끝~
-----------------------------이제는 여담----------------------------------------------------------
주어진 과제가 있었는데, 카드를 누르면 링크로 넘어가는 방법인데... 해결을 못했다.
팀장님이 해결하신..
데이터를 firebase에 받아서 입력된 데이터를 받아서 띄우는 방식인데, 좀 더 공부를 해보아야할 듯 싶다!
미니 프로젝트까지 얼마나 남았더라? ㅎ 발표준비만 마치면 끝이다!!!
ＴＩＬ 10월 2일
'ＴＩＬ (ToDay I LearNEd) > JavaScript_오류' 카테고리의 다른 글
| JavaScript 입문 : 오류를 발견하고, 오류를 수정하는 방법 (1) | 2024.10.03 |
|---|