혼자 적어보는 노트

✅ 오늘의 학습 📌 Vue (4) - 컴포넌트 기초 - Parcel SFC 프로젝트 구성 - Webpack SFC 프로젝트 구성 - ESlint 설정 하위 컴포넌트의 이벤트 수신하기 props는 외부에서 들어오는 데이터이기 때문에 readonly이다. 그래서 데이터를 수정하려면 데이터가 들어오는 외부에서 변경을 해주어야 한다. const App = { data() { return { fruits: [ { id: 1, name: "apple" }, { id: 2, name: "orange" }, { id: 3, name: "banana" }, ], }; }, methods: { toUpper(fruit, upperText) { fruit.name = upperText; // 받은 fruit 데이터를 대문자..

✅ 오늘의 학습 📌 Vue (3) - 조건부 렌더링 - 리스트 렌더링 - 이벤트 핸들링 - 폼 입력 바인딩 조건부 렌더링 v-if / v-else-if / v-else 조건에 맞는 값에 따라 출력되는 결과를 정할 수 있다. if else-if else!! template template 태그를 사용하면 조건 만족 시 template 내부의 엘리먼트들만 출력된다. 안녕하세요 💡 v-show와 v-if 차이 v-if 데이터가 falsy값일 경우 해당 엘리먼트의 렌더링 자체를 하지 않고 라는 주석이 생긴다. * 초기 렌더링 비용이 낮지만 전환 비용이 높다. v-show 데이터가 falsy값일 경우 해당 엘리먼트는 존재하지만 스타일 속성인 display가 none이 된다. * 초기 렌더링 비용이 높지만 전환 비..

멘토님께 피드백을 받은지는 좀 되었지만 연속되는 과제와 강의^^; 로 조금 늦게 작성을 하게 되었다. 받은 피드백을 다시 한번 상기시키기 위해 적으면서 기록을 해보려고 한다. 1. 마크다운 shortcut 부분 코드 수정 ✍ 기존 코드 export const EditorShortcut = (text) => { let tag; if (/^#\s/.test(text)) { // # tag = document.createElement("h1"); tag.innerText = text.substring(1); return tag; } else if (/^##\s/.test(text)) { // ## tag = document.createElement("h2"); tag.innerText = text.substr..

✅ 오늘의 학습 📌 Vue (2) - computed / watch - 클래스 - 스타일 바인딩 computed 함수가 아닌 데이터로 취급을 하게되고 그 값을 기억을 하게 됨으로써 연산 작업을 반복적으로 하지 않는다. computed: { doubleAge() { return this.user.age * 2; }, }, * 계산된 데이터가 의존하고 있는 데이터가 바뀔 때마다 다시 연산을 한다. * 계산된 데이터를 직접적으로 변경하려고 하면 그 값이 변경되지 않는다. (getter, setter를 통해 변경 가능) computed 활용 json으로 받은 데이터를 가공할 때 json으로 받은 값을 직접 변경하지 않고 새로운 데이터를 만들어서 반환할 수 있다. 이때, 데이터가 캐싱되어 있기 때문에 한번 연산이..

SASS 내장 모듈 Sass 공식문서 @use 를 사용하여 로드할 수 있는 built-in 기능이다. sass의 모듈 시스템이 도입되기 전에는 해당 기능들을 전역적으로 사용할 수 있었고 지금 또한 하위 호환성을 위해 계속 사용할 수 있지만 새롭게 시스템이 도입한 만큼 전역으로 사용하던 방식과 @use로 사용하는 규칙 또한 알아둬야 할 듯하다. Sass의 내장 모듈들은 아래와 같다. sass:color sass:list sass:map sass:string sass:math sass:meta sass:selector sass: color color.adjust($color, $lightness) 해당 컬러를 해당 값 만큼 명도를 줄이거나 높일 수 있다. /* darken($color, $amount); *..

과제를 하면서 공유된 repository에 브랜치를 만들어서 commit/push를 하고 이후 배포를 하고 싶어서 나의 개인 repository에도 연결을 시켜서 push를 하고 싶었다. 즉, 1개의 프로젝트에 2개의 저장소를 연결해서 관리 하는 것이다. 1. 새로운 원격 저장소 연결하기 git remote add [새로운 remote 이름] [새로운 repository git주소] 보통 한 프로젝트에 첫 remote를 연결하면 origin이라는 이름으로 연결이 되는데 기존의 remote와 구분을 하기 위해 이름을 새로 지어서 연결을 시킨다. 나는 project 라고 지었다. 2. remote 확인 git remote -v 위 명령어를 사용해서 연결된 remote를 확인했다. 3. 브랜치 연결 git p..

✅ 오늘의 학습 📌 Vue (1) - Vue 시작하기 - 라이프사이클 - 템플릿 문법 - Data, Method Vue 시작하기! vue는 cdn을 사용하여 html의 상단에 script를 불러와서 간단하게 사용할 수 있다. 기본 구조 {{ counter }} 하단의 Vue.createApp의 mount 메소드를 통해 데이터를 연결해주면 {{ }} 이중 중괄호 구문을 사용하여 counter는 반응형 데이터를 사용할 수 있다. 반응형 데이터란? 데이터가 바뀌면 화면에서도 바뀌는 데이터를 의미한다. ❗❗ 여기서 setInterval 내부에서 일반 함수를 사용하게 되면 this는 함수가 실행되는 위치에서 정의되기 때문에 counter를 찾을 수 없다. console.log(app)을 해보면 app은 proxy..

✅ 오늘의 학습 📌 CSS 심화 (5) - SCSS ㄴ 확장 ㄴ 함수 ㄴ 조건과 반복 ㄴ 가져오기, 모듈 ㄴ 내장모듈 ㄴ 디버그 확장 extentd 특정한 선택자로 만들어진 속성들을 가져와서 사용할 수 있다. *선택자 폭발의 부작용이 있다. % placeholder extend를 위한 확장자 전역의 선택자에서는 사용할 수 있지만 선택자의 내부 블록에서는 사용할 수 없다. 함수와 조건, 반복 @function @function을 사용하여 함수를 생성할 수 있다. $columns-width: 1200px; @function grid($col: 1, $total : 12) { @if($col > $total) { @error '$col must be les then $total.'; } @return $col..