하나의 프로젝트를 더하고 요새 자바스크립트 공부 하느라 업로드가 늦었따.. html, css를 통한 정적 웹사이트를 하나더 함을 끝으로 이제 자바스크립트를 공부하려고 마음먹고 대망의 op.gg클론 코딩을 시작했다.
그동안 했던 사이트들과는 다르게 모바일 버젼과 pc버젼이 따로있는 적응형 사이트였고 op.gg home사이트는 그동안 했던 사이트보다는 훨씬 간결했고 내용도 적어서 이틀정도 걸렸던것 같다. 내가 평소에 애용하던 사이트였기도 했기에 흥미가 갔고 내가 나중에 취업하고 싶은 회사 이기도 했다.
평소에 롤을 좋아하기도 하고 (TMI로 다이아1 99포가 탑레다. ) 평소에 관심종자(?)라서 남에게 보여지길 좋아하던터라 op.gg라는 회사가 더 끌렸던것 같다.
이번 사이트를 만들면서 제일 특이했던점은 다크모드가 있던것이었는데 자바를 1도안하고 html과 css로는 구현하기 힘들것같아 자바를 배우고 다시 만들어 보기로 했다.
여러 css 기능들도 배웠는데 그중에서 제일 기억에 남는것들은 input:focus{outline :none); 기능으로 인풋박스 클릭시 border를 없애는 기능과 글자가 일정수가 넘으면 ...으로 표시되는 text-overflow : ellipsis;기능이었다.
ellie의 드림코딩 유튜브에서 세로로 2줄이상은 말줄임표로 제한하는 기능은 알았었는데 가로로 말줄임하는것도 있다는 사실이 놀라웠다.
이제 어느정도 html과 css로써 정적인 사이트는 할 수 있겠다는 생각이 들어 자바스크립트를 공부 하기 시작했다.
원래 드림코딩엘리 유튜브에 있는 자바스크립트 완전 정복하기로 공부를 조금 했었는데 이 부분이 이론 중심적이다 보니 아무래도 내용이 조금 따분하고 기억도 잘 안 났던것 같다.
그렇게 구글링을 하던 도중 노마드코더에 유튜브 클론앱 정복하기가 초심자를 위한 강의면서 무료라는 정보를 입수했고 바로 강의를 시작했는데 여기도 초반부분이 이론이 중심이라 조금 따분했지만 뒤에 가면갈수록 실제 vscode를 이용해서 클론앱을 완성해가는 과정이라 흥미도 많이 생겼고 op.gg를 만들면서 이런기능은 자바스크립트로 구현했으면 좋겠다고하는 부분을 실제로 해보려고 노력했던것 같다.
그중에 하나가 앞서 말했던 다크모드 구현하기였는데 아직 완전 구현하진 못했지만 초반부에 배웠던 toggle기능으로 body에 backgroundcolor를 검정색으로 껏다 켰다를 구현 할 수 있게 되었다.
현재 만들고 있는 op.gg의 전적을 검색했을시 나오는 웹이고 실제 모델은 나의 전적이다.
자바 스크립트만 공부하면 따분 할것 같아서 프로젝트를 병행하면서 하려고 했으며 다음 포스트에 대한 스포가 될 사진이라 볼 수 있다.
다시 자바스크립트에 관한 내용으로 돌아와서 정말 많은 기능을 배웠다.
절대 불가능할것만 같았던 javascript로 html 부분에 div나 li를 만들수도 있었고(createElement) 그 안에 텍스트를 넣던지(innerText)
한번 불러왔던 값을 localstorage에 set하고 다시 get하여 새로고침했을때 정보가 남아있게 하는것도 가능했다.
그러고 math기능으로 랜덤변수를 만들수 있으며 이는 평소에 게임을 좋아하는 내가 친구들을 위한 웹을 하나 만들겠다고 다짐했는데 math기능을 통해 랜덤으로 미션을 고르고 그걸 수행하는 warcraft3의 유즈맵 원랜디전용 웹을 만들면 재밌을것 같고 친구들에게도 나에게도 추억이 될것 같아 꼭 완성도 있게 만들고싶다.
진짜 살면서 처음으로 공부하면서 재밌다고 느꼇다.
학교 시절엔 마냥 학교를 가야하니 수능공부를 어쩔수 없이 했고 성적에 맞춰서 왔던 대학교에서 처음 배우는 전공 과목은 나를 정말 힘들게 했지만 자바스크립트를 배우면서 정말 시간가는줄 모르고 카페에서 열심히 공부했던것 같다.
처음에 이론만 했을떄는 자바스크립트는 전혀 재밌지 않았지만 실제 앱을 만들고 그 과정에 필요한 기능들을 찾고 구현하니 정말 재밌고 공부도 잘된다고 느꼈다.
백문이 불어일견이라는 말도 있듯이 프로그래밍은 무조건 실제 해보는게 답인것 같다는걸 오늘 느꼈다.
정말로 자바스크립트로 구현 할 수 있는게 무한할거라고 생각하고 앞으로 자바스크립트 좀 더 재밌게 공부해서 다양한 웹사이트 만들어 보고 싶다.
끝으로 혹시나 이글을 보시는 분들중 정말 코딩을 처음 시작한다면 노마드코더 강추합니다!!!