✍️ 프론트엔드 개발 입문 4주차를 돌아보며
4주라는 짧은 기간동안 무엇을 했는지, 어떤 것을 배웠는지 톺아보고 앞으로의 공부 계획도 세워보고자 한다.
1️⃣주차
HTML, 웹 접근성과 웹 표준 등의 개념들에 대해 배우고 html의 기본 구조에 대해 익혔다.
문서를 구성하는 기본적인 태그들과 테이블 태그 등 자주 쓰이는 태그들을 배웠다. 매우 짧은 교육 과정이다보니 1주차부터 바로 css까지 진도를 나갔다.(box model 개념, float, display 등)
예제 실습으로 html 구조를 짜고 css로 스타일을 입히고 문서에 배치하는 연습을 진행했다.
무엇을 먼저 고려해야하는지 우선순위에 대한 감이 없었으므로 문서의 구조를 파악하고 지정하는 것부터 쉽지 않았다. 강사님이 치는 코드를 따라 치고 이해만 하기에도 여력이 없었다.
매일 복습을 했고, 벨로그도 복습과 학습 기록 차원에서 시작하게 되었다.
2️⃣주차
html과 css의 상호작용을 집중해서 학습했다.
이전까지는 html 문서 내에 style 태그로 css를 입히는 방식만 썼었는데, 2주차 들어서 css 파일을 분리해서 작성했다.
css에서 html에 선택자로 접근하는 방법이 처음에는 복잡하게 느껴졌는데 자바스크립트 선택자 배울 때 그건 엄청 단순한 것이었다는 회상을 하게 되었다..
그리고 google font를 통해 폰트 가져오는 방법, font-awesome으로 아이콘 이미지 쓰는 방법, 이미지에 position값을 줘서 일부분만 사용하는 splite 등을 간단하고 중요한 팁들을 알게 되었다.
css도 워낙 빠르게 끝나서 float 이나 transition 등 헷갈리는 부분이 다수 남아있다.
1주차에서부터 조금씩 익숙해지는 것들이 있다는 게 신기했지만, 학습 진행속도에는 현저히 못 미쳤다.
내가 따로 공부를 할 수밖에 없다는 것을 느끼게 되었다. 이런 강제적인 동기부여가 생겨서 계속 이어갈 수 있다고 생각한다.
3️⃣주차
css에서 flex 배운 게 가장 기억에 남는다.
float 쓰고 일일이 position 값 주면서 고생했던 것을 flex가 매우 손쉽게 처리해버리는 게 충격적이었다. 다른 강의를 들으면서 flex쓸 때 고려해야하는 단계를 정리 해두었다.
- 누구를 flex 시킬 것이냐.
(가로로 놓은 싶은 요소들의 부모요소 = flex-container)
Ex. 가로로 놓고 싶은 게 li라면 ul 또는 ol
- 배치 방향이 가로냐, 세로냐 (속성 : flex-direction)
- 가로 (row)가 디폴트임.
- 세로라면 column
- 한 줄로 놓을 것이냐 여러 줄로 놓을 것이냐(속성 : flex-wrap)
- 한 줄(no-wrap)이 디폴트
- 여러 줄이라면 wrap
- 어떻게 정렬시킬 것이냐 (속성 : justification-content은 main-axis 기준, align-center는 sub-axis 기준)
- flex-start가 디폴트
- apace-between은 요소 사이의 간격만 주는 것이고, space-around는 요소들을 감싼 공간과 요소 사이의 간격까지 고려한다.
flex로 잠깐의 재미를 맛보다가, 3주차 중간부터 자바스크립트 학습이 시작되었다.
내가 생각했던 것과는 달리 자바 스크립트도 console이나 document 객체의 함수를 통해 브라우저에서 바로 확인이 가능했다.
배열, 스트링 등 객체 타입이나 for, if else, whlie 등과 같은 구문은 빅데이터 프로그래밍이나 특수자료조직론 전공수업에서 데이터베이스 다룰 때 썼던 파이썬 문법과 유사했다.
계속 처음 보는 것만 배우다가 드디어 내가 아는 게 나올 때의 반가움을 느꼈다.
자바스크립트 진도를 나가면서 노마드코더의 바닐라 JS 강의 학습과 챌린지를 동시에 시작했다.
객체나 속성, 값, 변수, 함수 등 개념이 머릿속에서 뒤엉킨 느낌이었는데 그것을 정리하는 데 도움이 되고 있다.
4️⃣주차
자바스크립트 라이브러리인 제이쿼리를 배웠다.
곧 5주차에는 또다른 라이브러리인 리액트를 배우는데, 이 전까지는 제이쿼리도 라이브러리인지 모르고 있었다.
순수 자바스크립트보다 코드가 간결해진다는 장점이 있다.
제이쿼리로 window 객체에 scroll이벤트 연습해보는 과정에서 응용해서 스크롤해서 섹션 넘어갈 때마다 gnb에 해당 섹션의 색을 주는 코드를 짜봤는데 잘 적용이 돼서 매우 기쁘고 짜릿했다.
그 다음 예제에서 같은 동작을 훨씬 가독성 좋고 간결한 코드로 짤 수 있다는 것을 확인했지만 이 또한 좋은 공부가 되었다!
- 해당 코드
$(window).on('scroll',function(){ var nowScroll = $('html,body').scrollTop(); var num; if(nowScroll>=0 && nowScroll<764){num=0} if(nowScroll>=764 && nowScroll<1528){num=1} if(nowScroll>=1528 && nowScroll<2292){num=2} if(nowScroll>=2292 && nowScroll<3056){num=3} if(nowScroll>=3056 && nowScroll<3820){num=4} var scrollColor = $('.section').eq(num).css('background-color') $('.gnb li').eq(num).children('a').css({color:scrollColor}); $('.gnb li').eq(num).siblings().children('a').css({color:"#999"});
제이쿼리 배우면서 여기에 플러그인을 삽입하는 방법도 배웠다.
배너의 이미지 슬라이드나 캐러셀을 제이쿼리로만 짜보면서 이해도 잘 안가고 매우 고통받았었는데, 마치 css의 flex처럼 만능해결사를 만난 기분이었다.
하지만 디폴트값에서 pagination, navi 등을 바꾸는 과정에서 또 고통이 찾아왔었다.
그 이후에는 제이쿼리를 잠시 내려두고, 다시 자바스크립트 내장 객체와 함수들을 배우면서 어느 정도 쿨다운이 되는 느낌이었다.
정규표현식의 기본적인 내용도 다뤘는데 제대로 쓰기까지 많은 시간이 걸리리라는 생각이 들었다.
💡 +) 웹 접근성
html과 css를 공부하면서 웹 접근성에 대해 느끼는 바가 컸다.
코드를 효율적으로 짜는 것뿐만 아니라 모든 사람들이 차별 없이 웹을 사용할 수 있도록 코드를 작성하는 관점을 고려해야한다고 생각하게 되었다.
display:none이 필요한 요소에 클래스명을 blind를 쓰는 것의 차별적 시선을 감지하지 못했는데 그 대신 hidden으로 작성하는 것을 팀원을 통해 배웠다.
어제는 강의를 듣다가 WAI-ARIA라는 웹 접근성을 향상시키는 기술 명세에 대해 알게 되었다. 특히 aria-label, aria-hidden 같은 속성을 적극적으로 활용할 수 있겠다는 생각이 들었다.(예를 들어 폰트어썸과 같은 아이콘이 별점 등 반복적으로 나올 때 이를 span으로 묶어서 aira-hidden 속성에 true 값을 준다!)
💡 +) 공부 계획
- css에서 헷갈리는 부분 복기하고 연습해보기
- 노마드 코더 자바스크립트 반복 학습하기(들을수록 이해도가 느는 느낌)
- 일주일 기한 내에 내가 좋아하는 책을 소개하는 웹페이지 만들어보기!
