TIL - Day 35

MyeonghoonNam·2021년 9월 17일

TIL

목록 보기

41/49

프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.

9월 17일 (금)

📚 TIL

1. Vue 학습

2. CSS 심화 세션(With. 레온)

📮 Feelings

1. Vue 학습

클래스와 스타일 바인딩

html 태그의 class 속성과 style 속성에 반응형 데이터를 바인딩하는 방법에 대하여 학습하였다.

각 속성에 객체와 배열 구문을 활용하여 좀 더 동적인 바인딩이 가능하도록 지원하는 뷰의 문법이 굉장히 편리하게 느껴졌다.

클래스 속성에서는 연산된 데이터를 다루는 computed 속성을 좀 더 많이 사용하게 되는 것 같다.

조금 헷갈렸던 부분은 클래스 속성과 스타일 속성에 적용하는 속성에 대하여 클래스는 대쉬케이스를 적용하고 스타일 속성에서는 카멜케이스를 지원해주는 부분이였는데 인라인 스타일에 작성하는 css와 동일한 문법을 지원하도록 뷰가 세심한 최적화가 잘 이루어졌다는 점을 느낄 수 있었다.

조건부 렌더링

개념의 이해는 크게 어렵지 않았다 html 태그에서 디렉티브를 활용해 조건에 따라 태그를 생성할지 말지에 관환 문법이였다.

다만 주의할 점에 대해 더 공부하게 되었는데 v-if와 v-show의 동작 방식에 대한 장단점 비교와 v-for안에서 v-if를 사용할 때 v-for를 template 태그안에서 사용하는 방법에 대해 이해할 수 있었다.

리스트 렌더링

v-for 디렉티브를 사용하여 배열을 기반으로 여러 리스트를 동적으로 렌더링하는 방법을 배울 수 있었다. 그렇게 생성된 리스트 각각의 DOM에 대하여 반응형으로 상태 유지가 잘 이루어지는 것을 보며 최적화가 잘 이루어져있는 vue의 기능을 보고 개발자에게 편의를 보장하는 프레임워크임을 느낄 수 있었다.

하지만 복잡한 동적요소들에 대한 렌더링 과정을 익숙하게 하려면 편리하게 제공하는 기능들에 대하여 더 많은 코드를 개발해야겠다라고 느꼈다.

이벤트 핸들링

기존에 학습하였었던 이벤트 동작 개념에 대한 복습을 할 수 있었고 공부했던 내용을 토대로 Vue에서 여러 이벤트를 다루는 방법에서 개념적인 부분에 대한 이해는 쉽게 할 수 있었다.

인상깊었던점은 Vanilla JS에서 이벤트 제어를 다룰 때는 일일이 이벤트리스너를 등록했어야 하는데 Vue에서는 HTML로 된 리스너를 사용하여 이벤트를 제어하는 방법에서 html과 javascript 따로 이벤트를 수동으로 등록하는 불편함이 없었고 ViewModel 인스턴스가 언마운트 될 때에 자동으로 리스너들이 제거되는 점에서 굉장히 편리한 점을 제공하는 것을 느낄 수 있었다.

2. CSS 심화 세션(With. 레온)

최근에 학습을 깊게 다루어 보았던 CSS, Sass에 대해 멘토님과 함께 여러 느낀점들을 공유하는 시간을 가지게 되었다.

나와 비슷하게 생각하시는 분들도 많았고 내가 생각하지 못했던 새로운 내용에 대해 생각하게 되는 주제도 많았었고 이러한 이야기를 멘토님께 직접 들을 수 있는 시간을 가져서 너무나 좋았다.

전반적으로 CSS의 성능 관련 이슈에 대하여 JS 성능 관련 이슈와 비교해주신 내용들도 흥미로웠지만 가장 인상 깊었던 점은 JS와 CSS의 클론 코딩에 관한 이야기이다.

JS의 경우 클론 코딩의 경우 정확한 답이 나타나 있지 않지만 CSS의 클론 코딩의 경우 실제 웹 페이지에서 구현된 CSS를 직접 확인할 수 있다는 점에서 내가 클론한 코딩과 비교하여 지식을 얻기에 최적화 되어있다는 이야기이다.

클론 코딩에 대해 좀 더 효율적인 학습이 가능하도록 방향을 잡을 수 있게 된 것 같아 좋았다.

마치며 🙏

Vue를 아직 조금 밖에 학습하지 못했다고 생각하지만 지금까지 공부를 진행하면서 계속 드는 생각은 HTML에서의 바인딩된 속성을 이용하여 좀 더 간단히 javascript의 기능들을 웹으로 구현할 수 있다는 것이다.

요즘 느끼는점이 웹에 대해 공부를 처음 시작했을 때의 학습 속도랑은 비교도 안되게 지식을 습득하는 속도가 올랐다고 느낀다는 것이다.

완벽하다고는 할 수 없지만 꾸준히 학습했었던 지식들이 연쇄작용으로 조금씩 조금씩 이어지며 점점 하나의 완성된 개념으로 이해를 하게 되는 과정에서 재미를 느끼게 된다.

Vanilla Js를 기본기로 열심히 공부한 보람이 있다라고 이번 Vue 프레임워크를 학습하면서 절실히 느끼고 있다. 그리고 좋은 점은 Vue를 공부하면서 Vanilla JS에서의 여러 개념과 동작 원리들에 대하여 계속 복기를 하게 되며 동시에 여러 공부가 이루어지는 것 같아 더 좋은 것 같다 !