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

❗❗ 데브코스 45일차 (10.01) 밀리고 밀리다 한 달 만에 다시 이어서 작성하는 Vue 강의... 5일차에는 Vue의 상태 관리 개념을 익힌다. 같은 레벨의 컴포넌트에서의 여러 단계의 props 전달과, 중앙 상태 관리인 Vuex에 대해 다뤄 볼 것이다. ✅ Provide / Inject 일반적으로 데이터를 부모에서 자식 컴포넌트로 전달해야 할 때 props를 사용한다. 상위에서 하위의 deth가 깊어지면 지속적으로 props를 사용해서 전달해야 할까? ex) root -> parent -> child1 -> child2 ->.... child5의 컴포넌트 구조가 있을 때, root에서 child5로 데이터를 넘긴다면 수많은 컴포넌트에서 props가 타고 타고 내려갈 것이다. 같은 계층에서 이러한 ..

❗❗ 데브코스 44일차 (09.30) 4일차는 Vue 강의 뿐만 아니라 라이브러리 통한 개발 과정에서 필요한 환경설정인 Webpack에 대한 강의로 이루어진다. ✅ Webpack 자바스크립트 기반으로 개발 규모가 커지면서 js, jsp, cjs, sass 등의 파일들과 모듈들이 많아지게 되면서 이를 관리하는 시스템이 필요해지게 된다. Webpack은 여러개의 파일을 실제로 웹 브라우저에서 동작할 수 있도록 하나의 파일로 합쳐서 반환해주는 모듈 번들러(Module bundler)이다. 이러한 Webpack은 개발 환경에서 webpack.config.js로 생성해서 필요한 옵션을 지정해서 사용해주면 된다. 몇 가지 기본적인 예시를 보자 const path = require('path') module.expo..

❗❗ 데브코스 43일차 (09.29) Vue3일차...React가 그리워지기 시작했다... Vue의 강력한 장점 양방향 바인딩과 Vue 프로젝트를 사용하기에 앞서, 환경세팅을 위한 node, npm에 대해서 강의가 진행 됐다. ✅ 양방향 바인딩 "v-model" 디렉티브를 사용하면 input, textarea, select 요소들에 양방향 데이터 바인딩을 생성할 수 있다.코드 예시를 통해 알아보자. 1. Input 예시 //Vue 코드 Message is: {{ message }} data() { return { message: '' } } 위의 코드를 실행하면 input값에 적힌 내용에 따라 "message" 변수가 실시간으로 바뀐다. Vue를 처음 학습하면 이 문법이 좋은지 이해가 안 될 것이다. 리..

❗❗ 데브코스 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 확장 프로그램이다. 해당 확장 프로그램을 설치해주고 실행시키고 난 후, 색상을 추출하고 싶은 곳에 커서를 가져 놓..