프론트엔드 개발자의 기록 공간

❗❗ 데브코스 42일차 (09.28) Vue2일차가 시작 되었다. 공식문서 기준으로 이론을 설명하고, 실습을 진행하다보니 시간이 다소 많이 소요되었다. 문법은 다루지 않을 예정이여서 Vue만의 독특한 방식 몇 개를 소개를 하겠다. ✅ HTML 클래스 바인딩 Vue는 HTML 태그내에서 여러가지 문법을 사용할 수 있다. if, for 등등 또한 변수 및 객체를 전달하여 클래스를 동적으로 전환할 수 있다. //예시코드 //결과값 v-bind:class 또는 줄여서 :class의 문법 형태로 사용할 수 있다. //배열 구문 data() { return { activeClass: 'active', errorClass: 'text-danger' } } //결과값 ✅이벤트 핸들링 Vue에서 이벤트 핸들링은 "v-o..

❗❗ 데브코스 41일차 (09.27) 드디어 JS 프레임워크, 라이브러리 3대장을 배우기 시작했다. 우선 상대적으로 러닝커브와 진입장벽이 쉬운 Vue를 2주간 학습할 예정이다. 그 후 React를 학습하고 두 가지 중 하나를 선택해 프로젝트를 수행하게 된다. (Angular는 다루지 않는다.) (문법은 포스팅하지 않을 예정입니다.) ✅ HTML로 Vue 이용하기 npm으로 각종 라이브러리를 설치해서 Vue 프레임워크를 다루기 전에 HTML 파일에서 실습해보자. 1. head에 CDN 주소를 입력해주면 된다. 2. Vue객체를 이용하기 위해서는 Vue.createApp("여러가지 옵션").mount("Vue.JS와 연결한 html요소를 선택자로 넣어줌") HTML에서 사용하는 Vue의 구조는 위와 같은 방..

❗❗ 데브코스 8주차 09.20 ~ 09.24 8주차는 추석 기간이 껴있었다. 추석 기간에는 강의가 없었지만 밀린 강의와 html&css Clone 과제를 수행했다. 지난 시간에 배웠던 SCSS를 활용하여 네이버 or 유튜브 한 개, 자유 주제 한 개, 총 두개의 사이트를 SCSS로 Clone하는 주제였다. 지정 과제는 flex를 실습하고 싶어서 일정한 구조를 가진 유튜브를 선택했고, 자유 주제는 가고 싶은 회사인 당근 마켓을 정했다. ✏️ HTML&CSS Clone Tip ✅ colorzilla 사이트의 배경색, 폰트 색상 등 여러 색상을 적용해야 할 때, 해당 색상을 알려주는 Chrome 확장 프로그램이다. 해당 확장 프로그램을 설치해주고 실행시키고 난 후, 색상을 추출하고 싶은 곳에 커서를 가져 놓..

❗❗ 데브코스 35일차 (09.17) 어제에 이어 Sass(SCSS)에 대해 학습을 진행했다. 본 글은 SCSS를 중심으로 문법을 소개할 예정이다. SCSS를 학습하면서 느낀점은 멍청했던(?) CSS를 JS처럼 하나의 언어처럼 사용할 수 있다는 점이였다. 변수, 함수, 조건문, 반복문을 사용할 수 있을 뿐만 아니라 내장 모듈을 이용하면 join, map 등도 사용가능 하다. 개발자들은 재사용성이나 직관성에 미쳐있는 것 같다...ㅋㅋ ✏️ SCSS 문법 ✅ 중첩문 사용 //scss .parent { width: 200px; height: 200px; .child { width: 100px; height: 100px; } } //css변환 .parent { width: 200px; height: 200px;..

❗❗ 데브코스 34일차 (09.16) 오늘은 CSS Preprocessor (CSS 전처리기)에 대해서 학습을 진행했다. 웹 학습 당시 CSS를 학습하면서 Sass, SCSS가 대충 CSS를 편리하게 사용해주는 문법으로만 알고 있었다. 현업에서 많이 이용한다는 얘기를 종종 들었기 때문에 학습해야지 생각만 했다가 이번 기회를 통해 배우게 됐다. (CSS 프레임워크만 사용하던 과거를 반성합니다...) ❓ CSS Preprocessor ❓ 웹에서는 표준 CSS만 동작할 수 있다. 하지만 CSS를 사용해본 사람들은 CSS가 얼마나 불편한지 느꼈을 것이다. 이러한 CSS를 똑똑하게 사용할 수 있도록 도와주는 도구인 CSS Preprocessor(CSS 전처리기)가 탄생했다. 종류에는 Sass, Less, Styl..

❗❗ 데브코스 33일차 (09.15) 지난 26일차에 이어 CSS심화 2번째 Part를 학습했다. Gird에서 넓이에 관한 옵션들과 3D 트랜스폼, @supports(기능쿼리), @media(미디어쿼리)에 대해 학습을 진행했다. ✏️ Grid_넓이 옵션 부모요소를 Grid Container(그리드 컨테이너), 자식요소를 Grid Item(그리드 아이템) 이라고 지칭하습니다. 1. minmax 함수 : 행과 열에 대한 최소 넓이와 최대 넓이에 대한 내용을 지정할 수 있다. //부모요소 container { grid-template-columns: minmax(100px, 1fr), minmax(200px, 1fr); } minmax(100px, 1fr) => 최소한 100px, 최대한 1fr 크기로 지정 ..