Education/개품 (야간) 부트캠프 1기 ✔️40 [개발자의 품격 (야간) 부트캠프 1기] - 스물세 번째 미팅 2022년 3월 15일 개발자의 품격 (야간) 부트캠프 스물세 번째 미팅에 참여했습니다. 오늘은 Vue.js 심화 문법으로 mixin을 학습했습니다. mixin은 재사용되는 여러 훅들을 미리 모아서 다른 컴포넌트에서 불러와서 사용할 수도 있고, main.js 파일에 전역으로 설정해놓고 어디에서든지 자유자재로 사용 가능합니다. 마치 리액트의 커스텀 훅 같은 느낌이었습니다. 보통 Axios 모듈을 이용하여 서버 통신을 하는 등 여러 컴포넌트에서 재사용되는 훅들을 많이 지정합니다. 이후 플러그인을 배웠습니다. 플러그인 개념을 활용해서 i18n 다국어 시스템을 지원할 수 있습니다. 이 때 i18n 플러그인의 함수를 reduce 함수와 object의 key와 서버로부터 받아오는 data 두 인자를 가지고 repl.. 2022. 3. 15. [개발자의 품격 (야간) 부트캠프 1기] - 스물두 번째 미팅 2022년 3월 10일 개발자의 품격 (야간) 부트캠프 스물두 번째 미팅에 참여했습니다. 오늘은 Vue.js 5 번째 시간으로 어제 간단히 다뤘던 Vue Lifecycle hooks 에 대해 조금 더 알아봤습니다. before 종류는 거의 잘 안쓰이고, created(), mounted(), updated(), unmounted() 4가지가 많이 쓰입니다. 보통 데이터에 대한 준비가 다 된 시기가 created() 이고, mounted() 는 렌더링 직후입니다. updated()는 데이터 변경이 일어날 때고, unmounted()는 컴포넌트를 빠져나가는 시기인데 이러한 생명 주기를 잘 활용해서 데이터를 받아오는 코드를 잘 분배한다면 퍼포먼스 향상에 큰 기여가 됩니다. provide, main.js에 선언.. 2022. 3. 10. [개발자의 품격 (야간) 부트캠프 1기] - 스물한 번째 미팅 2022년 3월 8일 개발자의 품격 (야간) 부트캠프 스물한 번째 미팅에 참여했습니다. 오늘은 Vue 4 번째 시간으로 중요한 고급 개념들에 대해 학습했습니다. 지난번까지는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 것을 알아보았지만, 이번에는 자식 컴포넌트에서도 부모 컴포넌트로 데이터를 전달하여 좀 더 유연하고 확장성 높인 재사용 컴포넌트 실습을 진행했습니다. 이 때, this.$emit(커스텀 이벤트 이름, 부모 컴포넌트로 전달할 데이터) 구문을 자식 컴포넌트에서 사용하여 부모 컴포넌트로 데이터를 전달할 수 있습니다. 그리고 부모 컴포넌트에서 자식 컴포넌트에 있는 함수도 ref 속성을 활용하면 호출할 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 html 구조도 전달이 가능하여 표준화된 재.. 2022. 3. 9. [개발자의 품격 (야간) 부트캠프 1기] - 스무 번째 미팅 2022년 3월 3일 개발자의 품격 (야간) 부트캠프 스무 번째 미팅에 참여했습니다. Vue.js 세 번째 시간으로 v-if와 v-show의 차이점을 먼저 살펴봤습니다. v-if 는 DOM에서 HTML이 새롭게 생성되고 삭제되는 원리이고, v-show는 이미 DOM에 올라가 있는 상태에서 display: none 으로 CSS가 처리되어 보였다 사라지는 것입니다. 이 원리를 잘 이용하면 관리자, 매니저, 일반 사용자와 같이 로그인 할 때 한 번 인증되면 보여지는 메뉴 부분들이 항상 고정이 되는데 v-if 를 사용하는 것이 효율적입니다. 불필요한 것들을 굳이 v-show를 사용하여 display: none 처리할 이유가 없습니다. 이후에는 computed 개념으로 변경사항을 실시간 감지 가능한 것을 살펴보고.. 2022. 3. 3. 이전 1 2 3 4 5 6 7 8 ··· 10 다음 반응형