혼자 적어보는 노트

멘토님께 피드백을 받은지는 좀 되었지만 연속되는 과제와 강의^^; 로 조금 늦게 작성을 하게 되었다. 받은 피드백을 다시 한번 상기시키기 위해 적으면서 기록을 해보려고 한다. 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으로 받은 값을 직접 변경하지 않고 새로운 데이터를 만들어서 반환할 수 있다. 이때, 데이터가 캐싱되어 있기 때문에 한번 연산이..

✅ 오늘의 학습 📌 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..

✅ 오늘의 학습 📌 CSS 심화 (3) - SCSS 변수, 데이터, 연산자 - mixin을 사용한 재활용 변수 파일 상단에 전역 변수를 사용할 수 있고 선택자에서 사용 시 지역적으로 선언되어 유효범위를 가진다. *재할당 가능 !global 지역변수에 $h:200px !global; global 플래그를 사용하여 전역화 가능 !defualt 지역변수를 지정할 때 이미 동일한 변수가 있을 경우 기본 값을 사용하겠다 라는 뜻 $primary: blue; .box { $primary: orange !default; background-color: $primary /* blue */ } 문자 보간 #{}를 사용하여 변수값을 넣을 수 있다. $name: "jay"; $path: "assets/images"; .bo..

✅ 오늘의 학습 📌 CSS 심화 (3) - Transform 3D - Columns - Filter - 변수 - @supports - @media perspective - 원근의 의미를 가지고 있으며 원근의 거리를 지정할 수 있다. 함수로 사용 함수로 사용할 경우 변환 효과가 일어나는 요소에 부여한다. .container .item{ transform: perspective(300px) rotateY(45deg); } 속성으로 사용 속성으로 이용할경우 변환 효과가 일어나는 요소의 상위요소에 부여한다. .container{ width: 150px; height: 150px; border: 4px solid; margin: 100px; perspective: 300px; } .container .item{ ..

✅ 오늘의 학습 📌 CSS 심화 (2) - Grid 처음 접하는 grid라서 정리를 하면서 익혀야 할 듯하여 Grid 정리 포스팅을 따로 진행했다. 응용해서 활용해보고 이후에 포스팅 내용에에 추가해 볼 예정이다. ✍ 느낀 점 아직 직접 프로젝트에 적용해 본 적은 없지만 이번에 CSS 과제를 진행하며 Grid를 사용할 수 있으면 사용해 볼 예정이다. 이전에 Flex를 정리하면서 Grid도 해야지 했었는데 학습할 것들이 많아서 미뤄왔었다.. 이번 기회에 미뤄왔던 grid에 대해 조금은 알게 되었고 직접 활용해보면서 익혀볼 예정이다.

✅ 오늘의 학습 📌 CSS 심화 (1) - float - position - 쌓임맥락 - flex float 요소가 원래의 흐름으로부터 빠져나와서 텍스트와 인라인 요소와 함께 배치할 수 있게 해주는 속성이다. - 자식 요소에 float를 사용하면 부모요소의 높이가 사라져버린다. * float가 끝났음을 알려주기 위해 해제(clear) 시켜주어야 한다. - float 속성을 부여하면 자동으로 block 요소로 변경된다. float 해제 방법 - 부모에 overflow 속성 사용 overflow: hidden; - 마지막 자식 요소에 clear속성 적용 .container .item:nth-child(4){ clear: left; } - 부모요소에 clearfix 적용 * 가장 적합한 방식 .clearfix..