1주차 코스를 진행하면서 HTML, CSS, JS의 기초를 진행했습니다. 물론 더 배워야할 부분도 많았지만 진행했던 과제 및 학습 상황에 맞추어 단원별로 개인적인 부분에서 보완하고자 하는 바를 정리하고자 합니다.
HTML
velog 블로깅을 진행하면서도 마크다운 문법을 쓰다가 보면 개요가 한 눈에 들어온다는 것에 착안하여 마크업 문법인 HTML에서도 이를 적용한다고 한다면 더 구성이 짜임새 있는 웹 페이지를 만들 수 있겠다가 첫 번째였습니다. 가장 많이 참고했던 사이트는 네이버에서 운영하는 NULI의 세미나였습니다. 아직까지 시간이 부족한지라 많은 세미나를 보지는 못했지만 시맨틱 웹을 구성하면서 기본적으로 어떤 부분에 주안점을 두고 이를 진행하여야 하는지 확실히 알게 해주는 사이트였습니다.
세미나를 짬내서 보면서 우리가 알고 있는 태그의 의미론적인 해석과 더불어 시맨틱 태그의 구성이 브라우저의 엔진이 어떻게 읽고, 또 부가적으로 스크린 리더에서 이를 어떻게 해석하는지 초점을 가지고 공부를 하게 되었습니다. 물론 코로나 상황이라 실질적인 세미나를 참가하는 것은 제한되겠지만, 정말 많은 도움이 되었던 거 같습니다. 다음에 기회가 있다면 꼭 참가를!
wecode의 코스를 진행하면서 받은 자료로 공부를 하면서 느낀 건 각 태그에 대한 모든 것을 이해하기 보다는 사용에 있어서 태그 사용 이전에 한 번 쯤은 MDN Docs를 검색해보고 진행하는게 얼마나 큰 배움이 되는지 알 수 있었습니다. 물론 스스로가 시간에 쫓기다보니 모든 부분에 신경은 덜 쓴 부분이 있지만, 프로젝트를 진행하면서 초기 세팅부터 잘하는 것이 나중에 소요 시간을 줄여주지 않을까 생각했습니다.
두 번째는 JS뿐만 아니라 React 등 프레임워크에서 DOM 컨트롤에 있어서 HTML 및 노트 트리 구조를 이해하는 것이 전반적인 구성에서 도움이 될 거라는 것이 크게 와 닿았습니다. DOM에서 Tag 및 선택자에 따라서 선정되는 기준이 달라지는걸 이해하기가 어려워서 여러 부분을 검색해가며 아직도 숙달 중입니다. 단항 선택자인지 다항 선택자인지에 따라서 요소 선택에 있어서 고려해야할 점이 달라지는 걸 중점으로 확실하게 제어하고 싶은 부분을 선택하고 생성하는 것을 초점으로 진행 중입니다. 따라서, class와 id의 구성도 더 구체적으로 하는 방법을 알아보고 정리하고자 합니다.
CSS
레이아웃을 구성하면서 페이지 구성에 있어서 미리 개요를 짜서 진행하는 습관을 가져야겠다고 생각했습니다. 물론 현업에 있어서 디자이너분께서 기본적인 UX/UI 부분에 대해서 제안이 있겠지만, 그걸 받았을 때 얼마나 구체적으로 레이아웃을 구성하느냐가 업무의 효율성을 높여 줄수 있을 거라 생각했습니다.
weegle과 colorpicker 관련 예제를 HTML, CSS 만으로 흉내 내어보면서 수직/수평에서 container 구성과 item의 정렬에 있어서 구체적인 능력을 확보하고 실무에 갔을 때 보다 편리하게 적용가능한 생각이 들었습니다. 특히나 flex와 Grid 부분은 일전에도 정리를 하였지만 계속해서 어떤 작업을 진행할 때마다 찾아들어가 보게 되는 걸 보니 더 생각이 짙어졌던 거 같습니다. 그리고 추가적으로 CSS도 변수처럼 활용할 수 있는 방법도 있다는 걸 검색을 통하여 알 수 있었네요. 👉🏻 CSS 변수 사용법.
그리고, FontAwesome 사용법을 잘 몰라서 이번에 조금은 알게 된거 같네요. 이모지나 아이콘에 있어서 무조건적인 이미지 요소를 사용하는 것이 아닌 문자 요소로도 충분히 활용한 유니코드들이 많다는 걸 알 수 있었습니다. 구글이나 네이버 등 포털사이트에서도 전반적인 콘텐츠 구성에 있어서 모든 것을 이미지로 처리하지는 않으며, 해당 요소를 적절히 사용했을 때 브라우저 렌더링에 걸리는 시간 및 용량에 있어서 장점을 가질 수 있을 거 같았습니다.
JS
JS 부분에선 보완해야할 부분이 더 크게 와닿아서 항목별로 정리해보겠습니다.
반복문
우선 배열 순회의 forEach() 메소드와 객체 순회에 있어서 for-in과 for-of 반복문의 비교를 정리하는 것이 필요했습니다. 반복문으로서 기능적인 유사성은 있지만 사용에 있어서 차이를 가지기 때문입니다.
-
iteration
Iteration이란 사전적 의미로 "되풀이"를 의미하며, while문, for문과 같은 문법을 Iteration이라 합니다. JS에서는 Array, String, Map, Set 등의 오브젝트도 반복문을 돌 수 있습니다.Array 외에 다른 오브젝트들이 반복문을 돌 수 있는 이유는 Iteration의 구성요소를 통해 확인할 수 있습니다. Iteration에는 Iterable과 Iterator가 존재하며, 이 두 프로토콜이 모두 존재해야 Iteration을 수행할 수 있습니다.
-
Iterable
Iterable는 오브젝트가 반복될 수 있는지, 즉 반복될수 있는 조건을 가졌는지 말합니다. 그 조건으로는 오브젝트에 Symbol.iterator가 존재해야 합니다. 그런데, 어떤 오브젝트에 Symbol.iterator가 없음에도 Iterable 할 수 있는데요, prototype chain에 의해서 부모에 Symbol.iterator가 존재하면 그 오브젝트는 Iterable 합니다. -
Iterator
반복 대상이 되는 오브젝트의 원소가 순서대로 불려진다는 약속을 의미합니다.
즉, Iterable한 오브젝트가 순서대로 열거될 수 있는지를 의미합니다. 위의 두 프로토콜이 만족되면 해당 오브젝트는 Iteration을 수행할 수 있습니다.
-
-
forEach()
오직 Array 객체에서만 사용가능한 메서드로 현재는 Map 오브젝트, Set 오브젝트에도 지원됩니다. forEach 는 단지 for 문 대신 사용하는 반복 method 입니다. 요소들을 반복하며 callback 함수를 호출을 통하여 진행됩니다.map() 메소드와 차이점은 map 메서드의 return 값은 수정된 값으로 다시 생성된 배열이지만, forEach() 메소드는 자체가 return 하는 것은 아무것도 없다는 것입니다.
-
for-in 문
모든 Iterable 오브젝트의 프로퍼티들을 반복하여 작업을 수행할 수 있습니다. 오브젝트는 기본적으로 {key:value}로 구성되어 있고, for in 구문은 오브젝트의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않습니다. for in문에서 인덱스에 해당하는 변수를 선언할 때, 변수에는 오브젝트의 각각의 키에 해당하는 문자열을 할당받게 됩니다. 물론, 오브젝트의 메소드를 통하거나 프로퍼티 디스크립터에서 열거가 불가능하다면, 이는 진행되지 않습니다. -
for-of 문
for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. for of 구문을 사용하기 위해선 컬렉션 객체가[Symbol.iterator]속성을 가지고 있어야만 합니다.
클래스 & 함수형 프로그래밍
생성자 함수에 익숙해져있던 문법을 얼른 class 기준의 문법으로 익숙해질 필요를 느꼈습니다. constructor 및 메소드를 통하여 원하고자하는 데이터를 같은 양식으로서 인스턴스화하는 과정에 있어서, 차후에는 작은 단위의 함수가 함수를 호출하여 연결하는 것을 목표로 숙달해야 겠다 생각했습니다. 기본적인 함수의 기능을 잘 알고 이를 실현한다면 보다 모듈화된 프로그래밍이 가능해지지 않을까요? 더 인터렉티브한 구성을 가능하게 할 수 있도록 DOM 이벤트 제어와 병행해서 노력해봐야 겠네요. 클론 코딩이라도 더디게 하던 자신을 반성.. 인터렉티브 김종민 디렉터의 클론 코딩을 다시 진행하면서 이를 더 면밀히 구성해볼까 합니다.
실습을 진행하면서는 예전에는 기초적이라고 넘겼던 모든 것을 한 번 더 되돌아 볼 수 있었습니다. 특히 ES5와 ES6 문법와 메소드 활용에 있어서 더 개인적으로 정리가 확실히 필요해 보였고, 앞서 정리한 내용을 갈무리하면서 동기분이 추천한 강의와 함께할 예정입니다.
DOM 컨트롤
가장 부족한 부분이었습니다. 계층화와 트리구조에 대하여 그저 간단한 실습을 통해서 DOM을 컨트롤 할 수 있다고 착각했고, 몇 번의 canvas 실습을 통해서 조금은 안일하게 있었는게 아닌게 샆었습니다. 첫 번째는 노드 트리에 있어서 요소를 생성하고, 붙이고, 선택하여, 제어하는 과정에 있어서 조금 더 구체적인 정리가 필요할 거 같았습니다. 뒤죽박죽으로 하는 것이 아닌 앞서 말한 사이클을 기반으로 제어하고 하는 것을 연습할 수 있는 강의라도 들으면서 보완할 예정입니다. 물론 책으로 우선은 계속해서 연습 또 연습!
두 번째는 이벤트 관리에 있어서 어떤 부분을 더 신경쓰면 UI적으로 즐겨운 경험을 할 수 있게 만들 수 있을까였습니다. 최근들어 언어의 문법에 대해서만 집중하다 보니 본래 관심 분야였던 UI 부분을 놓치고 있다는 생각이 많이 들어서 UI관련 도움될만한 기본서를 검색하고 또 읽어봐야 겠습니다. 짧은 1주일이지만 precourse를 진행하면서 스스로 시간을 할애하고 쓰는 법을 더 구체화 중 입니다. 막상 부트캠프를 따라가다 보니 자신만을 위한 추가적인 학습시간이 부족하다고 느끼고 있습니다.
