차마시는 개발자

😸 Vue TIL 😽 Done it 😼 코드리뷰 회고 1 ~ 7: https://gwpaeng.tistory.com/418 Vue: https://gwpaeng.tistory.com/419 😼 React JSX 보통 {}를 이용하여 실행합니다. 😼 값 default 함수.defaultProps 함수.defaultProps = { size: 200, }; 인자에 지정 function 함수({ size = 200 }) {} 😼 값 type check import PropTypes from 'prop-types'; 함수.propTypes = { size: PropTypes.number, }; 😼 useState useState: 지역상태 관리하기 위한 것(Hook) 값이 변경되면 다시 렌더링 한..

😸 Vue TIL 😽 Done it 😼 컴포넌트 기초 props 전달 html -> component app.component에서 upper-name component를 만들고 html에서 을 이용해서 사용합니다. html에서 upper-name component의 props로 :props이름=""를 이용하여 data를 보내주고 upper-name component에서 이를 사용합니다. $emit 전달 component -> html $emit을 사용하여 $emit에서 커스텀 한 이름(to-upper)로 html의 해당 컴포넌트의 @to-upper=""을 이용해서 값을 보내줍니다. App의 methods 사용 html의 to-upper="methods"와 같이하여 methods를 사용합니다. const ..

😸 Vue TIL 😽 Done it 😼 조건부 렌더링 😼 태그 해당 태그 부분은 렌더링 안되고 내부에 구조만 렌더링 됩니다. 😼 v-show VS v-if v-if 요소 구조 자체를 추가, 삭제 초기 렌더링 낮다, 전환비용 높다 v-show 구조를 만들고 style="display:none"을 추가, 삭제 초기 렌더링 높다, 전환비용 낮다. 구조를 먼저 생성하기 때문에 {{}}내부 데이터가 미리 나올수 있다. 그래서 => v-cloak과 같이 사용 v-cloak : 디렉티브 요소를 넣어서 동작하고 data에 준비 끝나면 vue 내부동작에 의해 v-cloak 요소 제거 [v-cloak]: { ... } 😼 리스트 렌더링 😼 :key a in as같이 객체를 반복할 때 순서대로 나오지 않을 수 있어서 각 노..

😸 Vue TIL 😽 Done it 😼 Proxy data 불변성을 위해 주로 일반 함수로 작성을 합니다. Proxy : 기본적인 동작의 새로운 행동 정의 : 특정 data가 언제 조회되고 할당되는지 감시하여 중간에 logic 추가 const app = { data: function() { a = 0; } } // new Proxy(target, handler) const proxyA = new Proxy(app.data, { get(target, key) { //값 조회 } set(target, key,value) { //값 지정 및 할당 } }) 😼 computed, watch computed : 공통된 함수를 사용할 때 캐싱하여 1번만 실행하고 가져다 쓰는 곳(낭비 x) but methods에서는 ..

😸 Vue TIL 😽 Done it 😼 Vue 시작 vue는 data가 바뀌면 화면이 바뀌는 반응성 프레임 워크입니다. (반응성을 가진 data를 반응형 data라고 합니다.) vue를 살펴 보기 전에 this에 대해 조금 더 공부하면 좋을 것 같습니다. {{counter}} v-model , 요소 같은 양식을 지정하는 html 요소에 연결하는 디렉티브(양방향) v-if 조건문, v-for 반복문 😼 Vue Application & instance createApp : Application instance를 반환하며 이 instance는 application 컨테스트를 제공합니다. mount : Application 루트 컴포넌트의 템프릿을 렌더링하여, 제시된 DOM element의 innerHTML을 ..

😸 CSS TIL 😽 Done it 😼 @extend 이미 작성해 놓은 선택자 가져오기 but!! @mixin을 주로 사용합시다. 추가로 @media에서는 @extend를 내부에서 선언해야만 사용가능합니다. 또한 선택자 폭발이라는 부작용이 있는데 중첩을 할 때 선택자 부분도 상속이 되면서 문제가 발생한는 것입니다. //1. .a { } .b { @extend a; }%: placeholder로 오로지 @extend 규칙을 확장해서 사용할 수 있는 것 %a { } .b { @extend a; }@mixin 사용 방법 // @mixin 사용법 @mixin a { } .b { @include a; }😼 함수 js에서의 function과 매우 유사합니다. 다만 @를 붙여줘야 합니다. @function a() {..

😸 CSS TIL 😽 Done it 😼 Sass 중첩 .container { &:hover { // &: 상위 선택자 } @at-root .item { // @at-root: root 선택자] } //flex-grow, flex-shrink, flex-basis 편리하게 사용하기 flex: { grow: 1, shrink: 0; basis: auto; } } 😼 Sass 변수 선언 $를 붙여서 사용합니다. 😼 유효볌위 변화시키는 flag !global: 전역 변수로 변환 $w: 200px !global; !default: 기존에 있는 변수 값 사용 유효범위 내에서 이미 있는 변수에 값을 재지정 했을 때 재지정 값을 사용X $w: 500px !default; 😼 보간 "#{변수, 값}" 을 사용합니다. 선..

😸 CSS TIL 😽 Done it 😼 다단 : 한페이지를 여러 조각으로 나누는 것 column-count: auto: 조각낼 갯수(= 1) column-width: auto: 지정된 값을 기준으로 최적의 너비를 자동으로 판단한다. column-rule:: 단과 단 사이에 선을 넣어주는것(border와 유사) column-gap: normal: 단과 단사이의 gap 😼 Filter blur(0): 흐림 처리 grayscale(100%): 무채색 invert(100%): 색상 반전 drop-shadow(x축거리 y축거리 그림자흐림정도 그림자색상): 그림자(배경색상이 없는 경우 설정된다.) brightness(1): 명도 contrast(100%)..