최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리
₩22,000
초급 / Vue.js, Vue 3, TailwindCSS, ESLint
5.0
(2)
"Vue 3 완벽 마스터" 후속 강의로 최신 Vue 3 버전의 프로젝트 설정과 최신 스펙을 익히는 강의입니다. Vue 기본편 또는 실전편을 수강하신 분들에게 무료로 제공되는 강의입니다.
초급
Vue.js, Vue 3, TailwindCSS
안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂
유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,
인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.
제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.
항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.
감사합니다.
📨 이메일 bruce.lean17@gmail.com
🏋️♀️ 헬스타그램 @helinlee.gram
🧑💻 코딩스타그램 @gymcoding
최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리
₩22,000
초급 / Vue.js, Vue 3, TailwindCSS, ESLint
5.0
(2)
"Vue 3 완벽 마스터" 후속 강의로 최신 Vue 3 버전의 프로젝트 설정과 최신 스펙을 익히는 강의입니다. Vue 기본편 또는 실전편을 수강하신 분들에게 무료로 제공되는 강의입니다.
초급
Vue.js, Vue 3, TailwindCSS
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
2일만
20%
₩35,200
₩44,000
초급 / HTML/CSS, TailwindCSS, JavaScript, 반응형 웹
4.9
(17)
한 강의로 끝내는 TailwindCSS 입문부터 실전까지! 두 개의 프로젝트와 함께 레이아웃 구성부터 반응형 디자인! 다크모드! 까지 완벽하게 배워보세요.
초급
HTML/CSS, TailwindCSS, JavaScript
비동기 프로그래밍: Promise, async/await 끝장내기
무료
초급 / promise, async-await, asynchronous-programming, JavaScript
5.0
(17)
이 강의는 자바스크립트 비동기 프로그래밍에서 Promise와 async/await의 개념과 작동 원리를 명확히 설명하며, 실무에서 비동기 처리를 능숙하게 다룰 수 있도록 돕습니다.
초급
promise, async-await, asynchronous-programming
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
2일만
20%
₩79,200
₩99,000
초급 / React, react-query, react-router, React Context, TailwindCSS
5.0
(26)
React를 처음 배우시나요? 이 강의로 하나로 리액트 기초를 다지고, 린캔버스 프로젝트를 통해 실무 경험을 쌓아보세요. 그러면 자신있게 프론트엔드 개발자로 취업할 수 있어요!
초급
React, react-query, react-router
포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편
2일만
20%
₩70,400
₩88,000
입문 / HTML/CSS, JavaScript, github-pages, 포트폴리오
5.0
(14)
HTML&CSS, 자바스크립트를 배웠다면 이를 활용하여 직접 포트폴리오 사이트를 만들고 배포해 보세요. 실제로 써 보는 것은 우리의 실력을 향상시키는 데 큰 도움이 될 것입니다.
입문
HTML/CSS, JavaScript, github-pages
[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
2일만
20%
₩132,000
₩165,000
중급이상 / Vue.js, Nuxt.js, pinia, Vue 3
5.0
(49)
Vue 기반으로 성능이 뛰어난 웹을 빠르게 만들 수 있도록 도와주는 Nuxt 프레임워크 강의입니다. 현업에서 Vue를 사용하고 계신 분들이라면 꼭 보셔야하는 강의라고 자신있게 말씀드릴 수 있을 거 같아요~!
중급이상
Vue.js, Nuxt.js, pinia
질문&답변
이벤트 수식어 event 전달인자 관련 질문
안녕하세요 질문에 답변 드리기 전에 해당 질문은 Vue 문법이기 전에 자바스크립트 함수 전달 및 호출 방식의 차이이기에 이점을 먼저 말씀드리고 설명하도록 하겠습니다. 자바스크립트의 함수 전달과 실행의 차이를 상세한 예제로 설명드리겠습니다.1. 일반적인 함수 전달과 실행의 차이// 1. 함수 정의 const greeting = (name) => console.log(`Hello ${name}`); // 함수 직접 실행 greeting('John'); // 출력: Hello John // 함수 전달의 예 const people = ['John', 'Jane', 'Mike']; // forEach에 함수 자체를 전달 people.forEach(greeting); // 출력: Hello John, Hello Jane, Hello Mike // 함수를 직접 실행하는 경우 people.forEach((name) => greeting(name)); // 위와 동일2. 이벤트 핸들링에서의 실제 예제// HTML // 직접 실행 버튼 // 함수 전달 버튼 // // 1. 이벤트 핸들러 함수들 const printEventInfo = (message, event) => { console.log('메시지:', message); console.log('이벤트 타겟:', event.target); console.log('태그이름:', event.target.tagName); }; const onKeyupHandler = (event) => { console.log('입력된 키:', event.key); console.log('이벤트 타겟:', event.target); }; // 2. 함수를 직접 실행하는 방식 const btn1 = document.querySelector('#btn1'); btn1.addEventListener('click', (event) => { printEventInfo('버튼1 클릭됨', event); }); // 3. 함수 자체를 전달하는 방식 const btn2 = document.querySelector('#btn2'); btn2.addEventListener('click', function(event) { console.log('이벤트 객체 자동 전달됨:', event); }); const input1 = document.querySelector('#input1'); input1.addEventListener('keyup', onKeyupHandler); // 이벤트 객체 자동 전달3. 이것이 Vue에서는 이렇게 표현됩니다 직접 실행 버튼 함수 전달 버튼 export default { methods: { printEventInfo(message, event) { console.log('메시지:', message); console.log('이벤트 타겟:', event.target); console.log('태그이름:', event.target.tagName); }, onClickHandler(event) { // 이벤트 객체 자동 전달 console.log('이벤트 객체 자동 전달됨:', event); }, onKeyupHandler(event) { // 이벤트 객체 자동 전달 console.log('입력된 키:', event.key); console.log('이벤트 타겟:', event.target); } } } 이처럼 Vue의 이벤트 핸들링은 자바스크립트의 기본적인 함수 전달 방식을 그대로 따르고 있습니다: 함수를 직접 실행할 때는 필요한 인자를 모두 명시적으로 전달해야 합니다 함수 자체를 전달할 때는 브라우저가 이벤트 발생 시 자동으로 이벤트 객체를 첫 번째 인자로 전달합니다이러한 개념은 자바스크립트의 기본 동작이며, Vue는 이를 더 편리한 문법으로 제공하는 것뿐입니다.
질문&답변
피니아 persist 질문드립니다!
Pinia persist에서 데이터를 암호화하기 위해서는 persist 플러그인의 serializer 옵션을 참고할 수 있습니다. 예를 들면:import { defineStore } from 'pinia' import CryptoJS from 'crypto-js' const ENCRYPT_KEY = 'your-secret-key' export const useUserStore = defineStore('user', { state: () => ({ name: '', email: '' }), persist: { storage: localStorage, serializer: { serialize: (state) => { return CryptoJS.AES.encrypt(JSON.stringify(state), ENCRYPT_KEY).toString() }, deserialize: (state) => { const decrypted = CryptoJS.AES.decrypt(state, ENCRYPT_KEY).toString(CryptoJS.enc.Utf8) return JSON.parse(decrypted) } } } })이와 같이 참고할 수 있고요. 아래 링크는 참고 링크입니다.https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html#serializerhttps://www.npmjs.com/package/crypto-js
질문&답변
prefetching 질문
안녕하세요!1. export default {} 선언 관련:이는 Vue의 컴포넌트 정의 방식과 관련이 있습니다. 문법을 사용하더라도, Vue 컴포넌트가 정상적으로 등록되기 위해서는 기본적인 컴포넌트 정의가 필요합니다. // 여기서는 export default가 필요 없습니다 export default {} 2. custom 속성과 prefetching 관련:custom 속성은 NuxtLink의 기본 동작을 비활성화하고 사용자 정의 렌더링을 가능하게 합니다. 이때 prefetching도 기본 동작의 일부이기 때문에 비활성화됩니다.custom 속성을 사용하면서 prefetching을 원하신다면: Prefetching Test 1 또는 prefetching이 필요한 경우 custom 속성을 제거하고 스타일링을 다른 방식으로 처리하는 것을 추천드립니다: Prefetching Test 1 이와 같이 UI Framework 와 NuxtLink를 사용하실 때 다양한 접근 방법을 생각해 볼 수 있어요 🙂
질문&답변
[nuxt] [request error] [unhandled] [500] __QUASAR_SSR_SERVER__ is not defined
해결되어 다행이에요 🙂 프로그래밍 강의 특성상 라이브러리가 업그레이드 되면 강의시점의 가이드와 다를 수 있는데요.라이브러리 설치하실 때 공식문서를 한번씩 참고하시면 다양한 문제를 사전에 방지할 수 있을거예요 👍관련해서 영상도 만들었으니 참고하시면 도움이 될 것 같아요 🙂 https://youtu.be/pqDzX8q16Nc
질문&답변
빨간 밑줄 질문이요..
안녕하세요 🙂JSX 문법은 HTML 문법과 조금 다른데요 HTML를 JSX로 변환하는 사이트를 추천드릴게요https://transform.tools/html-to-jsxeslint 오류도 규칙 off 하시면 됩니다.이미지에 규칙 오류는 "no-unused-vars": "off" 해주시면 돼요
질문&답변
route.meta? 에서 물음표 개념
해당 ?. 문법은 자바스크립트의 옵셔널 체이닝(Optional Chaining) 연산자입니다. 객체의 중첩된 속성을 안전하게 접근할 수 있게 해주죠.// route.meta가 없어도 에러가 발생하지 않고 undefined 반환 route.meta?.width // route.meta가 없으면 에러 발생! route.meta.widthroute.meta가 없을 때 에러를 방지하기 위한 안전장치라고 생각하시면 됩니다. 현재는 meta가 항상 존재해서 ?를 제거해도 작동하지만, 향후 meta가 없는 경우를 대비한 방어적 코딩 방식입니다.
질문&답변
template 조건부의 차별점에 대한 질문
Vue에서 과 일반 HTML 태그(예: )를 사용한 조건부 렌더링의 주요 차이점을 설명해드리겠습니다.1. 렌더링 결과의 차이은 실제 DOM에 렌더링되지 않는 래퍼(wrapper) 요소입니다. 조건이 참일 때 내부 컨텐츠만 렌더링됩니다.나 다른 HTML 태그는 조건이 참일 때 래퍼 요소 자체도 함께 DOM에 렌더링됩니다.예시를 통해 살펴보겠습니다: 제목 내용 1 내용 2 제목 내용 1 내용 2 렌더링 결과: 제목 내용 1 내용 2 제목 내용 1 내용 2 2. 사용 시 고려사항은 불필요한 DOM 노드를 추가하지 않으므로 DOM 구조를 더 깔끔하게 유지할 수 있습니다.CSS 스타일링이나 레이아웃에 영향을 주지 않습니다.반면 나 다른 HTML 요소는 추가적인 스타일링이나 클래스 적용이 필요할 때 유용할 수 있습니다.3. 성능은 추가적인 DOM 노드를 생성하지 않으므로 미세하게나마 메모리 사용량이 적습니다.많은 조건부 렌더링을 사용하는 대규모 애플리케이션에서는 이러한 차이가 누적될 수 있습니다.따라서, 단순히 여러 요소를 그룹화하여 조건부 렌더링만 하려는 경우에는 을 사용하는 것이 좋습니다. 추가적인 스타일링이나 이벤트 핸들링이 필요한 경우에만 일반 HTML 요소를 사용하는 것이 권장드립니다.
질문&답변
조건부 렌더링에서 로직 처리 차이
React 컴포넌트를 구조화하는 두 가지 방식에 대해 설명드리겠습니다.두 방법 모두 동작은 동일하지만, 각각 다음과 같은 장단점이 있습니다:현재 작성하신 방식:let defaultIconTag = "/img/heart/heart-icon.svg" if (isFavorite) { defaultIconTag = "/img/heart/heart-fill-icon.svg" }장점: 코드가 간단하고 직관적입니다단점: 로직이 복잡해지거나 재사용이 필요한 경우 관리가 어려워질 수 있습니다별도 메서드로 분리하는 방식:const getHeartIcon = (isFavorite) => { return isFavorite ? "/img/heart/heart-fill-icon.svg" : "/img/heart/heart-icon.svg"; }장점: 로직을 재사용하기 쉽습니다테스트 작성이 용이합니다컴포넌트 로직과 UI 렌더링 로직을 명확히 분리할 수 있습니다단점: 간단한 로직의 경우 오히려 코드가 복잡해질 수 있습니다저의 경우 별도 메서드로 분리하는 방식을 선호하는 편입니다. 그 이유는:1. 코드 유지보수가 쉬워집니다2. 로직이 복잡해지더라도 깔끔하게 관리할 수 있습니다3. 다른 컴포넌트에서도 해당 로직을 재사용하기 쉽습니다하지만 이는 절대적인 규칙은 아니며, 상황과 팀의 컨벤션에 따라 유연하게 선택하시면 됩니다. 현재처럼 단순한 조건문의 경우는 변수로 처리하는 것도 충분히 좋은 방법입니다.
질문&답변
via.placeholder.com 오류
공유해 주셔서 감사합니다 🙂
질문&답변
사진 오류
안녕하세요 🙂 https://i.ibb.co/XbsPPmQ/image.png (클릭)이미지가 나오고 있는데요, 다른 이미지로 하셔도 돼요 👍