[노마드코더] 코코아톡 클론코딩 챌린지 (6/19~7/3)

 

 

---

 

6/16 목

 

세상에나 ... . . 챕터 6까지 다 듣고 publishing our website 듣고 있었는데

Github 에 branch 만들었더니 그동안 만든 파일이 다 날아갔다

내 생각엔 그 동안의 파일들이 깃허브에 저장되지 않아서 생기는 문제 같은데 .. 나 처음부터 다시 만들어야 하는건가 ?

또 머리가 지끈지끈 아파온다 . . . 폭풍검색 시작 ㅜ

강의 댓글에 찾아보니 github에 commit하지 않은 채로 다른 branch로 이동하게 되면 수정했던 파일들이 stashed로 이동하면서 발생하는 현상.. 새 브런치로 넘어갈 때 bring my changes to my new branch 옵션을 선택하거나 commit을 했어야 하는 거임

그래서 stash history 찾아서 restore까지 했는데 commit은 어떻게 하는 거고 ... 어디에 뭘 commit 해야 하는 지 몰라서 또 헤매는 중

 

깃허브 사용법을 유튜브에 검색해봄

git bash 검색했는데 안나오길래 다운받음

제일 먼저 config 어쩌구 이름이랑 메일 입력하라길래 했더니 git command가 아니라고 뜸

git config --list 해서 확인해보니 이미 이름이랑 이메일이 등록되어 있음. 뭐지?

 

 

 

 

나에게 필요한 절차는 아닌 것 같아서 다시 깃허브로 돌아옴

 

 

stash file들이 changes에 넘어와 있었고 니코쌤의 화면을 보니 History에 강의주제별로 활동내역이 쫘라락 나열되어 있는 것을 봄.

한번에 commit할까 고민하다가 그렇게되면 너무 헷갈릴 것 같아서 하나씩 클릭해서 commit함.

 

---

 

6/22 목 

 

드디어 코드 챌린지 등장 ! 코코아톡 클론코딩은 강의를 이미 한번 다 들었기 때문에 1~3일차엔 강의 안듣고 퀴즈만 제출함

 

🔥 첫번째 코드 챌린지 🔥

 

처음엔 <div>와 <span> <input> 이용해서 얼렁뚱땅 완성 .!

근데 label 속성을 사용하라고 ..? 찾아보니 <label>First Name <input /></label> 이런식으로 label 안에 input을 넣어서 사용 가능.

그래서 모두 식을 수정했더니 또 id 속성 사용하라는 조건이 눈에 들어옴 .. 어디에도 id는 없자나 ...

다시 찾아보니 <label for="first_name></label> <input id="first_name"/> 이런식으로 연결이 가능하다는 것 ..... 다시 전면 수정

 

오늘 느낀점은 조건에 맞게 처음부터 잘 짜야 하겠다는 것 ^^,,, 그래도 많은 것을 해 볼 수 있어서 좋은 날이었음 하하

+ 예시에 나온 영상처럼 필수(required)로 지정해놨거나, 양식에 안맞는 값을 입력할 경우

안내 표시가 나와야 되는데 아무리 제출버튼을 눌러도 아무 반응이 없는거임 ...

그래서 찾아보니 formd으로 묶어주지 않아서 그런 것 ! ! ! 웃기게도 이제서야 form의 기능을 알게 됨

강의 들을 땐 그냥 따라가다 보니 코드 따라쓰기 급급한데 직접 해보니 아주 간단해 보이는 것들이라도 다시 깨닫게 되어서 너무 좋군요

---

 

6/24 토

 

🔥 두번째 코드 챌린지 🔥

 

오늘의 코드 챌린지는 옆 화면 속 모양 만드는 것 !

주말 알바 시작했는데 알바 끝나고 하는 코딩은 . . . 할말하않

내가 선택한 일들이니까 버텨 그냥 죤나 버텨 ! ! !

 

암튼 코딩 시자크 ~!

 

 

처음부터 위기 시작 ㅎ

파일들 정리한답시고 html 파일은 html 폴더 만들어서 그 안에 넣고 css 파일은 css 폴더 만들어서 넣어놨는데

아무리 해도 파일을 못 읽는 거임 .......

찾아보니 ./ 로 css 파일 경로를 다시 잡아주라는데

안나옴 ? ? ? 아놔 전에 짰던 코드들 파일 보니까

html은 폴더로 묶여있으면 안되었던 것 .....

아마 html이랑 css가 다른 폴더라서 경로 인식이 안되었나 보다. 엄청 금방 찾아낸 오류 같지만 이미 40분 소요 ㅎ

다시 후딱 해볼게요

오늘은 쉽네요 . . . 저문제만 해결하니 순식간에 완료 ㅋㅋㅋㅋ 30분도 안걸림 ㅜ

어쩌겠음 ,, 알아가는 단계인걸 ㅜ 난 천재가 아니니 당연하다 하루하루 조금씩 코딩을 하세요. 밥 먹는 것처럼 !

일요일은 쉬고(라고 하지만 바닐라JS 챌린지 해야함) 월요일에 다시 봅시댜 ~ 

 

---

 

6/26 월 

 

🔥 세번째 코드 챌린지 🔥

 

 

https://replit.com/@yeonna18k/YouAreAwesomeBlueprint-2#index.html

YouAreAwesomeBlueprint (2)

 

---

 

6/27 화

 

🔥 네번째 코드 챌린지 🔥

 

 

조금 어려웠지만 용케 완성 

 

https://replit.com/@yeonna18k/YouAreAwesomeBlueprint-3

YouAreAwesomeBlueprint (3)

 

---

 

6/28 수

 

🔥 다섯번째 코드 챌린지 🔥

 

참고) 스크롤 캡쳐 : 캡쳐할 화면에서 F12 키 눌러서 개발자도구(검사) -> ctrl + shift + p -> full 검색 후 스크린샷 누르면 저장됨

 

https://replit.com/@yeonna18k/WeLoveYouBlueprint

WeLoveYouBlueprint

 

---

 

6/29 목 

 

🔥 여섯번째 코드 챌린지 🔥

 

 

https://replit.com/@yeonna18k/WeLoveYouBlueprint-1

WeLoveYouBlueprint (1)

 

---

 

6/30 - 7/1 금-토

 

🔥 일곱번째 코드 챌린지 🔥

 

 

 

야무지게 hover over하면 약하게 테두리 생기는

효과도 넣었다 이말이여 ~

 

사실 페이지 복붙한 거지만, 앨범 사진이랑 제목 그리고 자세히 보면 그림자 색상까지 바꿔줌

노래 플레이 바는 구현하려다가 포기 ,,, 프로그레스 바 왜이렇게 어렵냐고요

 

https://replit.com/@yeonna18k/WeLoveYouBlueprint-2

WeLoveYouBlueprint (2)

 

WeLoveYouBlueprint (2)

 

---

7/2 - 7/3 일-월

 

🔥 마지막 코드 챌린지 🔥

 

하.. 중간에 갑자기 화면이 깨지고 난리가 나서 갑자기 왜이러지 했는데

나도 모르는 사이에 reset.css를 삭제했던 거였음 ...

원래 만들어놓은 파일 삭제해놨으면 어쨌을뻔 ,,,,, 다행히 빠르게 해결하고 마무리 들어갑니다요 ㅠㅠ

깃헙도 해야하는데 ,,, 넘어야 할 산이 제법 많네요

 

Github 대쉬보드에서 create a new repository -> 다운받은 깃허브 프로그램에서 file / clone repository 하면 불러올 수 있음.

 

 

website를 publish 하려면 branch 이름은 무조건

⭐gh-pages⭐로 해야함.

 

브랜치를 생성하고 Publish branch 클릭.

그렇게 되면 그 코드가 온라인으로 업로드 됨.

 

그런다음 github.com/내 아이디/저장소 들어가서

 2 branches 클릭 -> main과 gh-pages 있음

 

깃허브 저장소의 우측 하단의 Environments 를 보면

github-pages가 나와있는데, 클릭해서 열면(view deployment) 나만의 깃허브 사이트 주소가 나옴 ! ! !

 

수정할 떄 : 모든 수정은 master branch에서 해야 함. master !!!!!

master에서 commit 하고 push 한 다음, gh pages도 업뎃 해줘야함 (만약 하지 않는다면, 내 url로 접속할 경우 변화가 업뎃되지 않음)

gh-pages로 가서 상단바의 Branch -> update from main 클릭. -> push origin

 

https://yeonna18k.github.io/kokoa-clone-challenge-2023/

Welcome to Kokoa Talk

 

깃허브 쫄지 말고 차근차근 하면 될 것을 . .  무사히 시간 안에 제출완료

현재시각 오전 4시 01분 ㅎ 이제 얼른 자자 ..

 

 

 

---