몽땅뚝딱 개발자

Vue의 Built-In Components ◽ 애니메이션 처리에 필요한 빌트인 컴포넌트이다.진입 전, 벗어나기 전, 진입했을 때 등등의 타이밍을 설정하여 맞는 CSS나 Javascript 훅을 사용하여 표현할 수 있다. ◽ 의 사용 아래는 커스텀 모달을 띄웠을 때 모달 뒤를 dim 처리하기위한 이다. v-show로 출력되거나 사라질 때 css가 적용된다. 📄 HTML 📄 CSS /* dim의 css */ .cover { background-color: rgba(0, 0, 0, 0.4); overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } /* 출력되기 전, 사라지기 전에 적용할 CSS ..

두번째 포스팅은.. 내가 한번도 사용해 본적이 없는 Directive이기 때문에 직접 사용해보고 올리는 사용기이다. v-slot은 설명을 읽어도 이해가되지않아서 이 포스팅이 굉장히 미뤄지고 있었는데, 직접 프로젝트를 구현해서 사용해보다 망치로 머리를 맞은 듯 깨달았다. '그냥 컴포넌트로 쓰지 왜 슬롯을 쓰는거야?' 하다가 '슬롯 진짜 편하다!'로 끝난 여정이었다. ◽ v-slot 슬롯을 여러개 사용하는 경우 슬롯의 이름을 지정해주면 각각의 위치에 들어간다. 추천 신규 테마 달력/다이어리 더 보기 ◽ v-pre 이 엘리먼트와 모든 하위 엘리먼트에 대한 컴파일을 건너 뛴다. 컴파일의 속도를 높이기 위해 사용한다. {{ 이 곳은 컴파일을 건너 뛴다. }} ◽ v-cloak { display: none }의 규..

쿼리 한 줄을 짤 때에도 성능에 어떤 영향을 미칠 지 고민하고 짠다는 서비스회사의 얘기를 처음 들었을 때 꽤나 충격을 받았다. 그 뒤로 늘 일정에 쫓겨 '돌아가기만 하면 되는 코드'만 만들어오던 모습에서 이제는 '좋은 코드'에 가까워지기 위해 노력하고 있다. 이번에 Vue.js로 클론코딩을 진행하며 전혀 사용하지않았던 새로운 방식으로 컴포넌트를 쪼개어보았다. 그러자 컴포넌트의 depth가 많아졌고 필요한 곳마다 같은 파일을, 같은 변수를 Import하는 내 모습을 깨닫고 이건 아니다 싶어 몽땅 지워버리고 적절한 통신방법에 대해 고민하기 시작했다. 내가 알고있는 컴포넌트간의 통신방법은 3가지로 추려볼 수 있다. 1. props & emit 2. eventbus 3. Vuex 지금까지는 eventbus를 제..

https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 모두 풀어보았다! 나도 나중에 직접 만들어보고 싶은 튜토리얼 사이트였다. 정답은 추후 정리할 예정이다.

어느샌가부터 라우터를 설정하며 component 선언을 이렇게 하고 있었다. // router/index.js component: () => import( "./components/Main.vue" ) component를 가져와서 import하는게 아니라 함수형으로 호출하는 방식이디. 캡틴판교님의 Vue.js 실무 강의에서 배우고나서부터 자연스럽게 이렇게 쓰고 있었는데 이유는 홀라당 까먹어버림.. 그리고 돌고돌아 다시 Vue를 하게되면서 이렇게 함수형으로 컴포넌트를 가져오는 이유가 lazy-loading 때문이라는 것을 알게되었다. ◽ lazy-loading이란? lazy-loading은 화면의 보이는 부분, 랜딩페이지 또는 동작에 필요한 소스를 먼저 로드하고 다른 소스는 필요한 시점에 로드하는 방식으로..

먼저, 네비게이션 가드에 대한 지식이 선행되어야 한다. [Vue.js] vue-router의 네비게이션 가드 ◽ 네비게이션 가드(navigation-guard) 네비게이션 가드란 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법이다. ◽ 종류 1) 전역가드: 어플리케이션 전역에서 동작한다. - to: 이동할 URL 정보가 담긴 be-a-weapon.tistory.com ◽ meta 라우터에서 네비게이션 가드를 통해 라우터 이동 시 권한이나 정해진 상태값에 따라 이동에 제약을 걸 수 있다. 예를 들어, 유저가 로그인이 꼭 필요한 페이지에 접근할 때 비로그인 상태라면 로그인 페이지로 redirect 시켜야하고, 로그인이 되어있는 상태일 경우 그대로 이동시키면 된다. 이처럼 '로그인 여부'를 필수로 알..

📄 JS // camelCase로 작성하지 않고 kebab-case로 작성한다. this.$emit(‘my-event’) 📄 HTML 커스텀 이벤트를 지정할 때, 이벤트 이름을 camelCase로 작성하고 위와같이 호출하면 아무런 동작을 하지 않는다. myEvent로 작성 시에 v-on 이벤트리스너는 항상 자동으로 소문자 변환을 하기때문에 myEvent가 아닌 myevent로 변환되기 때문이다. 따라서 이벤트 이름은 kebab-case로 작성하는 것이 좋다. 출처 https://v3.ko.vuejs.org/guide/component-custom-events.html 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

클론코딩에 필요하여 이것저것 미리 만들어보는 중! 원래는 빈 별, 채워진 별 이미지로 구현하지만... 우선 급한대로 이모티콘으로 구현했다. 🍎 🍏 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

보통은 아래와 같이 링크를 걸 것이다. 링크 링크 이렇게되면 글자부분에만 링크가 걸리게 되는데 만약 li 전체에 링크를 걸고싶다면 CSS 속성을 아래와 같이 설정하면 된다. 와 모두에 적용된다. li a { display: block; } 출처 [CSS] li에 영역 전체에 링크 걸기 > 기술자료 | 해피정닷컴 a태그로 링크하면 글씨에만 링크가 걸리죠. 공백에도 링크거는 방법입니다. 아래와 같이 display:block;를 추가해주세요

flex는 가로로 정렬하는 기준을 정하는 속성이라면 grid는 가로와 세로의 규칙을 모두 정할 수 있다. 위의 구성에서 상단의 2줄은 3x2로 구성되어있으며 엘리먼트가 총 6개이다. CSS는 다음과 같다. .box-wrap { display: grid; /* 컬럼의 개수와 너비를 지정한다. 나는 3개로 설정했다. */ /* 1fr 1fr 1fr 등으로 지정 할 수도 있다. */ grid-template-columns: 200px 200px 200px; /* 줄의 개수와 너비를 지정한다. 나는 2개로 설정했다. */ grid-template-rows: 200px 200px; } 그리고 하단의 2줄은 4칸을 차지하는 엘리먼트 1개와 각각 1칸씩 차지하는 엘리먼트 2개로 엘리먼트가 총 3개이다. 이 경우 CS..