모집마감
인프런 워밍업 클럽 스터디 4기 - 프론트엔드 (Next.js, CursorAI)
무료
초급 / Next.js, CursorAI, React, cursor, 블로그
신청
25. 05. 02 ~ 25. 05. 17
일정
25. 05. 26 ~ 25. 06. 27
초급
Next.js, CursorAI, React
안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂
유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,
인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.
제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.
항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.
감사합니다.
📨 이메일 bruce.lean17@gmail.com
🏋️♀️ 헬스타그램 @helinlee.gram
🧑💻 코딩스타그램 @gymcoding
모집마감
인프런 워밍업 클럽 스터디 4기 - 프론트엔드 (Next.js, CursorAI)
무료
초급 / Next.js, CursorAI, React, cursor, 블로그
신청
25. 05. 02 ~ 25. 05. 17
일정
25. 05. 26 ~ 25. 06. 27
초급
Next.js, CursorAI, React
Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI)
₩165,000
초급 / Next.js, CursorAI, React, cursor, 블로그
5.0
(26)
최신 Next.js v15 App Router를 학습하며 Notion 기반의 실용적인 개발자 블로그를 함께 구축하는 강의입니다. 추가로 Cursor AI 활용법 등 다양한 인사이트도 얻을 수 있습니다.
초급
Next.js, CursorAI, React
최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리
₩22,000
초급 / Vue.js, Vue 3, TailwindCSS, ESLint
5.0
(11)
"Vue 3 완벽 마스터" 후속 강의로 최신 Vue 3 버전의 프로젝트 설정과 최신 스펙을 익히는 강의입니다. Vue 기본편 또는 실전편을 수강하신 분들에게 무료로 제공되는 강의입니다.
초급
Vue.js, Vue 3, TailwindCSS
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
₩44,000
초급 / HTML/CSS, TailwindCSS, JavaScript, 반응형 웹
4.9
(29)
한 강의로 끝내는 TailwindCSS 입문부터 실전까지! 두 개의 프로젝트와 함께 레이아웃 구성부터 반응형 디자인! 다크모드! 까지 완벽하게 배워보세요.
초급
HTML/CSS, TailwindCSS, JavaScript
비동기 프로그래밍: Promise, async/await 끝장내기
무료
초급 / promise, async-await, asynchronous-programming, JavaScript
5.0
(41)
이 강의는 자바스크립트 비동기 프로그래밍에서 Promise와 async/await의 개념과 작동 원리를 명확히 설명하며, 실무에서 비동기 처리를 능숙하게 다룰 수 있도록 돕습니다.
초급
promise, async-await, asynchronous-programming
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
₩99,000
초급 / React, react-query, react-router, React Context, TailwindCSS
5.0
(61)
React를 처음 배우시나요? 이 강의로 하나로 리액트 기초를 다지고, 린캔버스 프로젝트를 통해 실무 경험을 쌓아보세요. 그러면 자신있게 프론트엔드 개발자로 취업할 수 있어요!
초급
React, react-query, react-router
질문&답변
unstable_cache 사용 시 적정 revalidate 값 문의
서비스 특성에 따라 달라지는 것 같습니다.일반적인 가이드라인:개인 블로그: 5-10분 (300-600초) - 글 발행 빈도가 낮아서쇼핑몰 상품: 1-5분 - 재고/가격 변동 빈도에 따라 고려사항:글 작성 빈도 (일주일에 1-2개면 10분도 괜찮을 것 같고)사용자 기대치 (즉시 반영을 원하는지서버 부하 (Notion API 호출 비용) 우선 revalidate 값은 초기에 원하는 값으로 설정하시고 유지를 하며 최적의 값으로 변경하시면 될 것 같습니다.
질문&답변
git hub 브렌치 강의내용 21~24쪽의 내용이 없네요
혹시 아래 repository 말씀하시는 걸까요~?https://github.com/gymcoding/learn-react (사진)
질문&답변
useActionState에서 반환값 필드 생략 시 조건에 따라 에러 발생 여부가 다른 이유
이건 TypeScript의 타입 추론 방식 때문인 것 같습니다.추측해보면:if 문은 TypeScript가 정적 분석할 수 있어서 반환 타입을 엄격하게 검사하는 것 같고try-catch는 런타임에만 실행되다 보니 TypeScript가 catch 블록의 타입 검사를 덜 엄격하게 하는 것 같습니다또 다른 가능성:useActionState의 초기 state 타입 추론이 첫 번째 반환값을 기준으로 고정되는 것일 수도 있고컴파일러가 실행 경로별로 다르게 타입 검사를 하는 것일 수도 있습니다정확한 이유는 React나 TypeScript의 내부 구현을 봐야 알 것 같은데, 안전하게는 모든 반환 객체에서 같은 필드 구조를 유지하는 게 좋을 것 같습니다~!
질문&답변
짐코딩님..! unplugin-vue-router/vite 적용 최근방식 부탁드령요 ㅜㅜ
아래 사항을 체크해 보시겠어요?공식 문서를 보니 핵심 문제가 보입니다:router/index.js 수정import { defineRouter } from '#q-app/wrappers' import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router' import { routes } from 'vue-router/auto-routes' // 자동 생성된 routes 가져오기 export default defineRouter(function (/* { store, ssrContext } */) { const createHistory = process.env.SERVER ? createMemoryHistory : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory) const Router = createRouter({ scrollBehavior: () => ({ left: 0, top: 0 }), routes, // 자동 생성된 routes 사용 history: createHistory(process.env.VUE_ROUTER_BASE) }) return Router }) quasar.config.js에서 플러그인 순서vitePlugins: [ VueRouter({ }), // Vue 관련 플러그인들은 VueRouter 뒤에 와야 함 ['vite-plugin-checker', { /* ... */ }, { server: false }] ] 기존 routes.js 파일 삭제하고 개발 서버 재시작해보세요.
질문&답변
private component 관련 질문
안녕하세요 🙂네, pages/about/_components/ 경로에 배치하는 것도 좋은 방법입니다.다만 팀이나 프로젝트마다 다른 방식을 사용하기도 해요:pages/about/_components/ - 페이지별 분리pages/_components/about/ - 카테고리별 분리components/about/ - 별도 폴더 구조일관성만 유지하면 어떤 방식이든 괜찮습니다.
질문&답변
강의교안 노션에 접속이 안되요
아직도 접속이 안되시나요?https://gymcoding.notion.site/acf439e5e4b04e079104439153a7f223
질문&답변
블로그 목록 조회 시 author 데이터 안나오는 현상
실제 노션 블로그 데이터베이스에 Author 를 설정 하셨을까요~?코드는 이슈가 없는 거 같은데요 노션 설정 또는 계정쪽에서 확인해 봐야 할 것 같아요.- Author 속성에 사용자를 지정했는지- 노션에 사용자 계정(이름 등) 정확히 설정이 되어 있는지
질문&답변
getPostMetadata 내부 함수에서 클로저를 활용하는 방식이 더 나은 선택일까요?
안녕하세요 🙂정말 좋은 질문이네요! 코드 설계에 대해 이렇게 깊이 고민하시는 모습이 인상적입니다. 👍강의에서는 그냥 더 간단해 보여서 클로저 방식을 선택했습니다. 😅두 방식 비교클로저 방식 (강의에서 사용):매개변수 안 넘겨도 되니까 간편함코드가 짧아서 보기 좋음매개변수 방식:함수가 뭘 필요로 하는지 명확함테스트하기 쉬움선택 기준// 간단한 로직 + 한 곳에서만 사용 → 클로저 OK const getCoverImage = () => page.cover?.url || ''; // 여러 변수 접근이 필요할 때도 클로저가 편함 const getMetaDescription = () => { const title = page.properties.title?.title[0]?.plain_text || ''; const excerpt = page.properties.excerpt?.rich_text[0]?.plain_text || ''; return excerpt || `${title}에 대한 포스트입니다.`; }; // 복잡한 로직 + 재사용 가능성 → 매개변수가 나음 const getCoverImage = (cover) => { /* 복잡한 처리 */ }; 결론현재 상황에서는 둘 다 괜찮습니다.클로저든 매개변수든 동작은 똑같고, 이 정도 간단한 함수에서는 큰 차이 없어요. 너무 깊게 고민하지 마시고, 팀 컨벤션이나 개인 취향에 따라 선택하시면 됩니다! 👍
질문&답변
인텔레리제이 세팅환경도 알려주세요
React 개발은 VS Code가 최적입니다React 공식 문서에서도 VS Code를 첫 번째로 추천하고 있고, 실제로 React 생태계는 VS Code 중심으로 발전해왔습니다.공식문서 : https://react.dev/learn/editor-setupVS Code 추천 이유:React 전용 확장 프로그램이 가장 풍부ESLint, Prettier 등 필수 도구들의 완벽한 통합React 공식 문서의 모든 설정 가이드가 VS Code 기준Create React App 등 공식 도구들과의 완벽한 호환성IntelliJ 사용 시 예상되는 문제점:1. 확장 프로그램 부족VS Code: 수백 개의 React 전용 확장 IntelliJ: 제한적인 플러그인 2. 설정의 복잡성ESLint, Prettier 설정이 VS Code 대비 복잡React DevTools 연동 등에서 추가 설정 필요3. 커뮤니티 지원대부분의 React 튜토리얼이 VS Code 기준문제 해결 시 레퍼런스 부족강의에서는 VS Code 사용을 강력 추천합니다:학습자들이 동일한 환경에서 따라할 수 있음문제 발생 시 해결책을 쉽게 찾을 수 있음React 공식 문서의 설정 가이드를 그대로 활용 가능IntelliJ는 Java 개발에는 최고이지만, React 개발에서는 VS Code가 사실상의 표준입니다. 학습자의 혼란을 줄이고 원활한 강의 진행을 위해 VS Code 사용을 권고드립니다.
질문&답변
린캔버스 수정 시 CanvasDetail 컴포넌트 리랜더링 질문
안녕하세요 아래 체크 포인트를 확인해 보시겠어요?LeanCanvas.jsx - handleNotesChange 함수를 확인하세요:const handleNotesChange = (section, updatedNotes) => { const updatedCanvas = { ...canvas, // ← 이게 있나요? [section]: { ...canvas[section], notes: updatedNotes }, // ← 여기도 스프레드 두 개 다 있나요? }; onCanvasChange(updatedCanvas); }; ...canvas 누락 → 다른 섹션 데이터 사라짐...canvas[section] 누락 → 해당 섹션의 다른 속성 사라짐위 코드를 살펴보시면 도움이 될 것 같아요~!
짐코딩님의 소개 - 인프런