🎈 프로그래머스 데브코스 7주차

7주차에서는 6주차의 CSS 심화 연장선과 Vue 기초에 대해 학습하였다. CSS 심화는 SCSS로 이어나갔으며 Vue는 라이프사이클과 기초 문법에 대해 학습하였다. 7주차 과제는 SCSS와 BEM을 이용해 반응형 웹사이트를 클론 코딩하는 것이었다. 유튜브, 네이버 등 자신이 원하는 사이트를 클론하는 과제였는데 해당 사이트의 HTML과 CSS 레거시 코드를 안보고 하려다 보니 오랜 시간이 걸렸다. 아직 css에 대해 많이 미흡하다고 느낀 한 주였다😂

Week7 - Day 1 ~ Day 2.

SCSS를 처음 접하게 되었다. css에서도 조건문을 사용할 수 있고 따로 변수를 만들어 관리할 수 있는 장점도 있지만 무언가 공부할게 배로 더 생긴 느낌이었다..😂

SCSS - 주석, 변수, 데이터, 연산자, 재활용, 함수

Week7 - Day 3.

드디어 vue에 대해서 공부하게 되었다. 항상 React만 끄적끄적거리고 vue는 자세히 보지 않았는데 이번 기회에 제대로 공부하게 되었다. 반복문, 조건문 등 기존에 사용했던 JSX와 다르게 v-bind, v-for, v-if등을 태그 안에서 선언해서 사용하는 점이 제일 흥미로웠다.

Vue 라이프사이클, 템플릿 문법

Week7 - Day 4.

오늘은 vue의 computed와 watch에 대해 학습하였다. computed는 계산된 결과값? 이라고 이해했다. 데이터를 computed에서 가공해서 template 태그에서 호출해서 사용하면 된다. watch는 감시하고싶은 대상을 가져와서 적으면 대상에 변화를 감지해 커스텀 메서드를 실행할 수 있다.

computed, watch

Week7 - Day 5.

다섯째 날에는 조건부 렌더링, 리스트 렌더링 등을 배웠다. 프로젝트를 진행하면서 가장 많이 사용하지 않을까 싶은 개념들을 배운 날이다. v-bind를 :로 축약해서 사용하고 이벤트는 @로 축약하는 등 좀 더 간단하게 코드를 작성하는 법도 학습하였다.

조건부 렌더링, 리스트 렌더링, 이벤트 핸들링, 폼 입력 바인딩, 컴포넌트 기초

회고

CSS를 학습하면서 CSS의 중요성, css만으로 여러 효과를 나타낼 수 있고 많은 기능을 구현할 수 있다는 것을 깨닫는 시간이었다. 또한 JS와 CSS를 함께 쓰는게 제일 효율적인 방법이라고 느꼈다. 아직 css를 적재적소에 사용하지 못해 앞으로 많은 css를 활용한 기법들을 보며 눈에 익혀야겠다.
vue를 처음 접해서 그런지 많이 재밌었던 시간이었다. 라이프 사이클을 배우면서 언제 해당 사이클을 호출해서 사용하면 좋겠는지 머리속에서 그리면서 학습하니 훨씬 이해가 잘 되었다. created와 mounted를 자주 사용할 것 같다. 재미를 가지고 있는 초심을 가지고 앞으로 쭉 더 배웠으면 한다.