이번엔 내가 프런트엔드 개발자에 대한 정보를 정말 많이 받았고 유튜브 강의도 정말 유용하게 봤던 드림 코딩 엘리 채널의 유료 강의 나만의 포트폴리오 사이트 만들기 강의를 들었다.
우선 수업 초반에 나만의 디자인 로고 만들기와 bem에 관한 내용은 정말 유익했다.
1. BEM이란
그중에서 BEM에 관한 내용이 되게 인상적이었고 우선 BEM이란 Block Element Modifier의 줄임말이고 간단하게 말그대로 html 내에서 block, element, modifier의 요소로 나눠서 __, --와 같은 특수기호로 네이밍을 편하게 한다는 이론이다.
자세한 내용은 이미 많은 사람들이 쉽게 알아보기 쉽게 정리한 내용이 있고 나는 나나님의 글이 되게 좋았다. >>https://nykim.work/15
[CSS 방법론] BEM 방식
오늘은 CSS 방법론을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지' 고민해보는 거죠. 방법론에는 여러 가지가 있는데, 최근 BEM을 실무에 도입하
nykim.work
단순하게 내가 전에 작성했던 코딩과 BEM을 적용한 코딩의 길이가 다를뿐더러 아래와 같이 작성할경우 내가 만약에 어느 섹션에 어느 부분의 css를 변경해야 할 때 찾기 어렵다는 단점도 있었고, 코딩의 길이가 길어서 파일의 용량이 커진다는 단점도 있으며, 가시성이 너무 안 좋은 단점도 있었다.
그래서 앞으로는 BEM의 기법에 근거하여 모든 코딩을 작성하려고 마음먹었고 이번 포트폴리오 사이트부터 적용했다!
2. HTML, CSS
그동안 만들었던 클론코딩의 경험을 바탕으로 html과 css부분은 강의를 듣고 코딩하기보단 코딩을 먼저 하고 강의를 들으면서 어떤 부분이 좀 더 좋은 방법이 있는지 비교하면서 들었는데 그중에서 가장 좋았던 점은 바로 :root로 css 도입부에 font size나 background 색깔을 미리 지정해놓고 한 번에 입혀주고 본문 내에서 비슷한 맥락의 내용이 나올 때 모두 같은 class나 h1과 같이 묶어주어 한번에 관리하는 것이었다.
애초에 프론트엔드 입문을 드림 코딩 유튜브를 통해서 했던 터라 클론 코딩할 때도 간단하게 root에서 선언하고 시작했지만 완전히 똑같이 코딩하고 싶은 마음에 개발자 툴이나 cssviewer 같은 extension을 통해서 직접 값을 주는 경우가 많았다.
하지만 이번에 포트폴리오 사이트를 하면서 비슷하게 묶을수 있는 것은 처음에 페이지 구상할 때 h1, h2, h3로 묶었고 html을 다작 성하고 css 입힐 때 한 번에 모두 지정해주었고 css파일을 상당히 깨끗하고 빠르게 작성했던 것 같다.
그동안의 클론코딩 했던것만큼 페이지 내에 내용들이 많지 않았기도 했고 html과 css는 이제 어느 정도 할 줄 알았기 때문에 금방 끝났는데 그동안에는 animation효과를 거의 1도 안 넣었었기 때문에 되게 낯설었는데 강의에서 간단한 animation효과 몇 개를 알려줬고 그중에서 유용했던 것은 마우스를 hover 했을 시 opacity를 0에서 1로 만들어주고 transition에서 ease를 주어 화면이 나타나게끔 하는 방법과, transform에서 rotate을 준다음 hover 했을 시 rotate의 값만큼 움직이도록 하여 highlight 하는 방법이 있었다.
이 부분은 상당히 유용해서 다음에 나만의 사이트를 만들 때 사용할 수도 있을 것 같았다.
3. Java Scpript
우선 순수한 바닐라 Java Script를 사용했으며 그동안에 배웠던 이론과 이전에 들었던 노매드 코더 수업을 통해 Java Script에 대해 어느 정도 자신감이 붙어 있었고 앞의 html, css를 강의의 도움 없이 거의 혼자 완성했던 터라 자만감까지 있었는데 수업을 들으면서 바로 꼬리를 내렸고 공부 mode로 들어갔다.
1- addEventLister
그동안의 썻던 addEventLister라고는 끽해야 click이었었는데 이번엔 scroll이벤트가 상당히 많았다.
ellie님께서 말하시길 실제 웹사이트에서 scroll이 상당히 많이 쓰인다고 하셨고 실제로 내가 가장 많이 방문하는 웹사이트인 Youtube로 예를 들어봐도 스크롤했을 시 아래에 계속 영상이 생기는 것을 알 수 있다.
그중에서 scroll에 관련된 함수도 몇개 알게 되었고 대표적으로 scrollby(a, b), scrollto(a, b)이 있고 내 a는 x축 b는 y축을 조절 가능하고 단위는 px이다.
scrollby는 지정한 px만큼 화면내에서 이동하고 scrollto는 지정한 픽셀로 이동하는 기능이었으며 함수 내에 object처럼 scrollto({})로 선언하여 안에 behavior이라는 요소로 화면을 smooth 하게 움직이는 기능도 넣어 줄 수 있었다.
이것은 강의롤 통해 mdn에서 검색해서 알아낸 방법이고 내가 구글링 해서 알아낸 방법은 css에서 html {scroll-behavior}을 통해 smooth를 주어서 이동시키는 방법도 있었다. 다만 이 방법은 화면 내 모든 scroll을 지정한 값으로 설정하기 때문에 개별적으로 변경해야 한다면 Java Script를 통해서 설정해야 한다.
그리고 'wheel'이라는 event도 있었는데 이 event는 코딩으로 이동하는 scroll을 제외하고 사용자가 직접 마우스나 터치패드로 화면을 scroll했을때만 적용되는 event이고 이게 써야 되는 상황이 마지막 즈음에 나왔다.
2- intersectionObserver
이 강의는 이 기능을 위한 강의라고 봐도 무방할 정도로 나에게는 상당히 유용하고 오랜시간 고민했던 기능이다.
간단히 설명하자면 Starcraft(Korean traditional Game)의 observer처럼 사용자가 어떤 행동을 하고 있나 observe 하는 기능이고 그 observe 한 내용에는 상당히 많은 정보가 들어가 있다.
우선 위와 같이 observer로 선언해주고 뒤에 콜백 함수와 observer에 관한 option에 관한 것 두 개의 argument를 받는데 여기서 observerCallback는 아래의 정보를 받아온다.
그리고 두 번째로 observeroption은 이 observer의 세부 설정을 해주는 것인데 대표적으로 root, rootmargin, threshold가 있고 root는 가시성을 확인하는 요소이고 default값은 뷰포트이다.
rootmargin은 default값의 바깥 마진을 주어 실제 그 마진을 포함 안 범위부터 observe를 시작한다.
threshold란 0~1의 값을 가지고 0.25는 25퍼센트 0.5는 50퍼센트 1은 100퍼센트이고 이 퍼센트만큼 들어왔을 때 observing 하고 콜백 함수를 호출하게 된다.
이게 기본 내용이고 이것을 통해 구현하고자 했던 것은 위의 캡처 내용처럼 화면이 특정 section에 들어욌을떄 navbar에 있는 버튼에 border가 생기게 해 주는 것이었다.
우선 border를 빼주고 넣는 것은 classlist의 add와 remove를 통해서 active 함을 넣고 뺴주는것으로 구현했다.
이제 본론으로 와서 section이 isintersection 될 때 현재 section은 active를 빼주도록 하고 현재 section의 다음 section은 active를 넣어주어 화면이 넘어가면서 자연스럽게 border를 주는 것이었는데 여기서 문제가 하나 발생했다.
isintersection이 scroll을 아래로 할 때는 현재 section +1의 section값을 설정해야 하고 isintersection이 scroll을 위로할 때는 현재 section -1의 section값을 설정해줘야 한다.
이것 자체를 이해하는데도 상당히 오래 걸렸는데 이를 어떻게 구현하는가에 관한 것이 나를 더 힘들게 했다.
본론부터 말하면 scroll을 위로할 때의 event에서 getboundingrect.y값을 확인해보면 음수이고 반대로 할 때는 양수이다.
이는 직접 console.log()하여 알아낼 수도 있고 간단하게 설명을 하자면 화면이 스크롤을 아래로 할 때는 inintersecting 되는 기준이 위로 올라가면서 빠지므로 y값이 음수가 되는 것이고 반대는 양수가 되는 것이다.
이제 어떻게 해야 되는지 알았으므로 if문을 통해 설정해줬고 화면을 이동함에 따라 border를 설정해주는 기능이 구현됐다.
하지만 여기서 문제 두 가지 생겼는데 첫 번째는 threshold를 0.3을 설정해서 값을 채우지 못하는 큰 화면에서는 마지막 section과 첫 번째 section이 threshold에서 설정한 부분만큼 만족하지 못해 활성화가 안되는 것과 두 번째는 처음에 scrollto를 통해서 navbar에 버튼을 클릭했을때 옮겨주는 코딩부분과 위에서 작성한 부분이 겹쳐서 작동이 버벅이는 것이 있었다.
두번쨰는 위에 scrollto에서 언급했듯이 scroll이벤트 대신 wheel을 적용해주어 간단하게 해결했다.
첫 번째 문제는 본문의 스크롤의 처음과 끝에서 발생하는 문제여서 위 사진의 아래처럼 scrolly가 0일 때 위에서 설정한 배열의 0번 값을 주고 scroll의 끝에서는 마지막 section이 활성화되게 하는 것이었는데 강의에서는 아래와 같이 해줬다.
보통 위처럼 하면 되겠지만 나는 저렇게 코딩하니 계속 마지막 버튼이 활성화되지않았고 화면을 줄였을때는 또 마지막 버튼이 활성화되길래 일시적 오류인줄 알았지만 화면을 refresh해도 같은 문제가 발생했고 근본적인 원인을 찾기위해 console.log 하여 위의 코딩에 양옆값을 비교해보니 왼쪽값은 4221.5였고 오른쪽값은 4222였다.
양옆의 값이 다르기 때문에 당연히 버튼이 활성화 되지 않는 것이었고 그동안의 공대를 다녔던 수학적 센스에 근거하여 왼쪽 값이 반올림되어서 이러한 결과가 나왔을 거란 생각을 도출했고 실제로 mdn에서 검색해보니 clientheight은 정수의 값을 반환하며 반올림 한값을 준다고 돼있었다.
그래서 처음엔 ===왼쪽에 있는 값에 math.round를 줘서 반올림해서 해결하려 했으나 그것보다 오른쪽에 clientheight대신 위의 사진처럼 getboundingclientrect(). height으로 바꿔서 해결했다.
이번에 이 수업을 들으면서 이론으로 배웠던 foreach나 indexOf와 같은 기능들이 쓰였는데 이게 과거에 이론으로 분명히 배웠음에도 실전에 와보니 전혀 적용이 안됐다.
오늘 또다시 느낀 게 코딩은 실전이고 선 이론 후 코딩보다는 선 코딩 후 이론이 더 좋은 것 같다는 주관적인 생각이 들었다.
https://endmoseung.github.io/porfolio/
Gmon's portfolio
Skills Skills & Attributes 꼼꼼하진 못해도 열정적이고 되새기는 습관이 있습니다. 평소 칠칠치 않은 성격이라 덤벙거릴때도 있으나 누구보다 저를 잘 알고있기 때문에 어떤일이든 자주 되새기는 습
endmoseung.github.io
위는 내 포트폴리오 사이트고 이번에 강의를 들으면서 수업내용으로서 포트폴리오를 만들었지만 훗날 많은 프로젝트와 기술을 더 연마해서 더 이쁘고 알찬 내용으로 포트폴리오를 리워크 해줘야겠다는 생각을 했고 그럴 예정이다!