🌟엘리스의 좋은점🌟: 백엔드과정이라고 프런트를 하지 않는건 아니다.
6개월의 엘리스과정에서 총 3개의 프로젝트 이외에 1차 스터디로 간단한 FE과정을 거친다.
백엔드 과정을 진행하면서 추가로 총 5주 과정으로 마지막 클론코딩과제의 목표를 향해 진행한다.
당근마켓, 컬리, 배달의 민족,, 등등 유명 서비스의 홈페이지를 클론코딩을 하는데, 나는 에어비앤비를 선택했다. 디스코드채널에서 5주간 함께 프로젝트를 진행할 6명의 팀원들을 모았다. 팀장으로써의 자격이 충분한지는 모르겠지만, 팀장으로 활동하게되면 그래도 좀 더 능동적인 공부를 할 수 있지 않을까? 하는 생각에 용기 내서 팀원구해요~ 하고 올렸던 것 같다.
추가로 코딩테스트를 공부하고 싶었는데, 정해진 오전시간에 매일 프로그래머스에서 4문제씩 풀고 있다. 잘 따라주는 팀원들에 그저 감사할 따름이다.
1주 차는 HTML/CSS를 배웠다. 사실 나는 노마드코더에서 제공하는 HTML/CSS강의를 봐서 빠르게 복습한다는 느낌으로 강의를 봤다.
공부했다는 증거로 매주 토요일마다 자유형식의 과제를 제출하는데, 뭐니 뭐니 해도 별거 아니라도 배운 걸 활용해서 직접 무언가를 만드는 게 공부하는데 최고인 듯 해서 HTML과 CSS를 사용해서 작은 프로젝트를 진행해 볼 생각이다.
뭘 만들어볼까.
사실 이번 주 과제는 뭘 구현하기보다는 HTML구조와 CSS를 잘 활용해서 완성하는 게 첫 번째라고 생각했다. 내가 여행하며 찍은 사진들을 활용해서 온라인 사진전을 만들어볼까?
여행 다니며 공들여 찍었던 사진들은 공들인 것에 비해 너무 쉽게 잊혀지곤한다. 참 아쉬운 부분이다. 사진은 그때의 감정과 함께했던 사람들을 다시 상기시킬 수 있는 좋은 수단이 된다. 소중한 순간들을 다시 끄집어낼 시간이다.
자 이제 만들어봅세.
구성을 토대로 뼈대 HTML을 만들고, CSS로 살을 붙이자. (flexbox, transform, animation, Media Query etc..)
github에 올리기
github 사이트에 들어가서 레퍼지토리를 만드는 쉬운 방법도 있지만, 이번 주에 git강의를 들었으니까, 터미널에서 git을 사용해 보기로 했다.
저장소 생성git init 부터, 파일 생성git add, 저장소 반영git commit, 브랜치 생성git branch, 원격 저장소git remote 까지 강의 듣고 문제 풀 땐 나름대로 잘할 수 있을거라고 생각했는데 조금 긴장되긴 했다.
부푼 마음을 가지고 깃헙 새로고침! 반영되었다..? main브랜치가 아니라 master브랜치에. 깃헙에서 default 브랜치는 main인데 이거 옮기고 싶은데;;; 라는 생각에 이리저리 merge도 해보고~ pull도 해보고~ 결과는 꽝💥💥..쳇
끝까지 혼자 해보고 싶었지만 구글의 힘을 빌렸다.
master에 있던 내용이 main으로 이동된다.
주의! main에 작업한 내용이 삭제되고 master내용이 들어가는 것이다.git checkout master git branch main master -f git checkout main git push origin main -f
어찌어찌 main브랜치에 내용 반영시키기 완료- >_<
그래 이렇게 된 거 배포까지 해보는 거야!
깃헙에 무료 배포하는 방법이 생각났다. gh-pages 에 배포하기. 그렇다면 이것도 터미널에서 진행할 수 있지 않을까?
gh-pages 브랜치 만들고 merge한 후, 원격저장소에 올리면..!
git branch gh-pages
git push --set-upstream origin gh-pages https://goohyunseo.github.io/Moment/
짜잔! 배포 완료!
느낀점
정말 오랜만에 HTML/CSS만으로 웹사이트를 만들었다. JS가 없어서 영혼 없는 웹사이트이지만, 4-5시간 남짓해서 빠르게 만들어봤고, 예전에 배운것 들이 하나하나 기억났다. 그러면서도 까먹은 것들도 있더라. 역시나 완벽한 건 없나보다. 업데이트된 css-layout 강의를 들어야겠다는 생각이 들었다. HCJ녀석들이 지루하긴 해도 노래 들으면서 노래 불러대며 코드치는 맛이 또 있거든.
