
Amazing JavaScript - 입문
무료
입문 / JavaScript, ES6
5.0
(78)
프런트엔드 개발을 위해 필요한 자바스크립트 기초 지식. 실무자로서 꼭 알아야 하는 필수 지식들을 쉽고 빠르게 설명해 줍니다. 2024년 현대 프런트엔드 개발 트렌드를 반영한 기본 강의.
입문
JavaScript, ES6
인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 📣 트위터, 💻 깃헙
📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각과 고민을 들을 수 있는 곳
안녕하세요 인프런 지식 공유자 캡틴판교입니다. 프런트엔드 개발과 관련해서 고민 있으신 분들 편하게 연락 주세요. 프런트엔드 개발자로 진로를 고민하시는 분들 모두 환영합니다. 저의 경험과 조언이 도움이 될 수 있는 분들과 얘기 나눌 수 있으면 좋겠습니다 :)
※ 참고 : 네이버 채용 전형을 진행 중이신 분들은 멘토링이 어렵습니다. 이 멘토링은 네이버와 직접적인 연관이 없으며 IT 업계 선배/동료 개발자로서 진행될 예정이니 참고해 주세요 :)
멘토링을 신청하시기 전에 아래 설문 조사를 꼭 작성해 주시고 신청해 주세요. 아래 설문 조사는 멘티 분들의 사전 준비를 돕고 멘토링을 효과적으로 진행하기 위한 장치입니다.
멘토링 사전 질문지(멘토링 신청하실 때 사전 질문지 작성 여부 꼭 같이 얘기해 주세요 ^^)
편하게 대화 형식으로 진행하려고 합니다. 제가 별도로 준비하는 건 없고, 멘토링을 신청해 주시는 분들께서 함께 얘기해봤으면 하는 질문들과 주제를 가져오시면 편하게 같이 대화 나눌 수 있을 것 같아요. 주로 진로, 구직, 업무, 프런트엔드 개발 학습 방법에 대한 고민이 많으실 텐데 그냥 편한 친구나 선배와 대화를 나눈다고 생각해 주시면 좋을 것 같아요 :)
영상 통화 플랫폼인 줌을 이용합니다. 신청해 주신 멘토링 시간 전에 미리 영상 통화(영상은 필수로 켜지 않으셔도 됩니다)를 진행할 수 있는 환경으로 테스트 및 준비해 주세요 :) 가급적 멘토링에 집중할 수 있는 조용한 공간에서 소음 없이 대화할 수 있는 환경으로 준비해 주시면 좋을 것 같습니다 :)
취직, 이직 준비 관련 상담을 원하신다면 랠릿(Rallit)에 간단한 이력서를 첨부한 후 공유해 주세요. 멘토링 시간을 더 효율적으로 활용하실 수 있습니다 :)
멘토링 신청이 되셨으면 멘토링 당일 날 시작하기 전에 메일과 카카오톡 메시지로 줌 링크를 안내드릴 예정입니다. 멘토링 시작 시간 전에 꼭 메일과 카카오톡을 확인해 주세요 :)
오픈 멘토링도 괜찮으시다면 아래 글 보시고 유튜브 상담소 방송(무료)으로 오셔서 궁금하신거 편하게 질문하셔도 좋습니다 :)
500명 이상의 FE 개발자들이 대화 나누는 방입니다. 와서 편하게 질문해 주세요 :)
https://open.kakao.com/o/ghib5Brf
Amazing JavaScript - 입문
무료
입문 / JavaScript, ES6
5.0
(78)
프런트엔드 개발을 위해 필요한 자바스크립트 기초 지식. 실무자로서 꼭 알아야 하는 필수 지식들을 쉽고 빠르게 설명해 줍니다. 2024년 현대 프런트엔드 개발 트렌드를 반영한 기본 강의.
입문
JavaScript, ES6
실전 프론트엔드 테스트 시작하기
₩55,000
초급 / 소프트웨어 테스트, Cypress, e2e, JavaScript, Next.js, React
5.0
(16)
능력 있는 프론트엔드 개발 실무자가 되고 싶다면 꼭 들어야 할 테스트 강의. 테스팅 입문부터 실전까지 한방에 끝낸다 👊
초급
소프트웨어 테스트, Cypress, e2e
Next.js 시작하기
₩55,000
초급 / Next.js, React, JavaScript
4.8
(73)
React를 시작할 때 꼭 알아야 하는 Next.js 프레임워크. 입문자 관점의 쉬운 설명과 실무자가 만족하는 심도 깊은 동작 원리 이해까지. Next.js를 한방에 해결합니다.
초급
Next.js, React, JavaScript
만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링
₩44,000
초급 / React, JavaScript, 리팩토링
4.9
(28)
실무에서 가장 많이 사용되고 있는 리액트 프레임워크, 쉽고 빠르고 재밌게 배워보세요! 할 일 관리 앱을 만들면서 리액트의 동작 원리, 컴포넌트 설계, 리팩토링 방법을 배워봅니다.
초급
React, JavaScript, 리팩토링
React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)
₩44,000
초급 / React, TypeScript, Vue.js, Vue 3, ChatGPT
4.9
(17)
실무에서 많이 사용되는 React와 Vue의 코드를 작성하면서 타입스크립트 필수 개념을 익히는 강의입니다. React와 Vue에 타입을 입히는 방법, ChatGPT 사용법까지 모두 잡는 실무자와 입문자 모두를 위한 강의!
초급
React, TypeScript, Vue.js
Vue 3 중급 - Composition API
₩55,000
중급이상 / Vue 3, Vue.js
5.0
(47)
Vue 2와 최신 Vue 3에서 모두 사용할 수 있는 Vue Composition API를 가장 쉽고 정확하게 배울 수 있는 강의!
중급이상
Vue 3, Vue.js
질문&답변
컴포넌트가 렌더링되어 HTML이 생성되는 곳 (getServerSideProps VS useEffect)
안녕하세요 제가 답변이 넘 늦어서 죄송합니다 🙂 네 말씀해 주신 대로 이해하셔도 될 것 같아요. 좀 더 정확히 정리해 보자면FE 서버 : 서버 사이드에서 화면을 그리는 곳이 넥스트 서버클라이언트 : 하이드레이션까지 완료한 최종 화면을 보는 곳이 브라우저요렇게 봐주시면 될 것 같네요 :)
질문&답변
<img /> 요소 대신 <Image /> 컴포넌트를 사용해야 하는 이유 (성능 최적화)
안녕하세요, 제가 답이 늦었네요 🙂 네 이미지 컴포넌트는 넥스트에서 추가적으로 캐싱이나 프리로딩 기능 등을 제공합니다. 요거는 대용량 트래픽을 받으시는게 아니라면 쓰시는게 좋아요 :)
질문&답변
ESLint + Prettier 설정 관련해서 질문있습니다
안녕하세요, 혹시 formatOnSave 기능을 끄셨나요? 저장했을 때 ESLint에 설정된 프리티어로 먼저 1차 수정하고, 2차로 프리티어 자체로 포매팅을 하는 경우 위와 같이 나올 수 있습니다 :)
질문&답변
live server 설치 오류
안녕하세요, VSCode 확장 플러그인에서 검색해 보시겠어요?(사진)
질문&답변
프로젝트 생성 관련 가이드 영상은 왜 없는건가요
안녕하세요 재혁님, 요것도 답변 드릴게요.먼저 React와 Vue 프로젝트 모두 별도의 생성 절차를 안내하지 않은 이유는 강의의 핵심에서 벗어난다고 생각했기 때문입니다. 각 프레임워크의 프로젝트 생성 절차는 제 다른 강의들에서 확인하실 수 있어요. 만약, 여기서 바로 확인하시고 싶으면 아래 2개 문서 참고해 주시면 됩니다 :) Vue 프로젝트 생성 절차React 프로젝트 생성 절차
질문&답변
JSX.Element 컴포넌트 타입 정의 관련 재 질의
안녕하세요, 재혁님. 제가 답이 좀 늦었네요. 질문 주신거 짧게 답변 드리면 일단 리액트 컴포넌트 반환 타입은 자동 추론되는 JSX.Element를 쓰시면 됩니다.말씀하신 React.FC는 예전 문법의 잔재로 남아 있었다고 봐주시면 될 것 같아요. 컴포넌트 반환 타입은 명시해서 얻는 이점이 거의 없기 때문에 자동 추론 되는 타입으로 쓰시면 됩니다 :)
질문&답변
JSX.Element 컴포넌트 타입 정의 관련 재 질의
안녕하세요 재혁님, 강의 들으시면서 궁금한게 많아 답답하신거 같은데요. 제가 지금 개인 일정으로 해외에 있어서 차주 월요일에 돌아가는대로 답변 드릴게요. 조금만 기다려주세요 :)
질문&답변
state 변경에 따른 리랜더링 범위가 어떻게 되는 건가요?
안녕하세요, 제가 답이 늦었네요 🙂 state의 변화를 모든 컴포넌트가 감지하지 못하고 있어서 그렇습니다. 리팩토링 한 이후에는 상위 컴포넌트에서 하위 컴포넌트로 변화된 state를 내려주기 때문에 감지가 가능하다고 보시면 되어요 :)
질문&답변
vue3로 따라오시다가 import axios 에러 뜨시는 분들
감사합니다 🙂
질문&답변
vuex 실행시 새로고침해야지만 리스트에 나타나는 현상
안녕하세요, 제가 확인이 늦었네요. 요건 코드 올려주시면 도와드릴 수 있을 것 같아요 :)
2023. 06. 11.
8
[안내] 재밌게 읽을 수 있는 타입스크립트 도서가 출간되었습니다 🎁
안녕하세요, 오랜만에 소식 전하네요.지난 2년간 열심히 집필한 타입스크립트 책이 출간되었습니다. 이제는 고급 프런트엔드 개발자가 되기 위해서 꼭 알아야 하는 지식이 된 타입스크립트인데요. 이 한 권이면 타입스크립트에 대한 전반적인 개념과 기본기를 다지고 실무에서 능숙하게 타입스크립트를 다룰 수 있을 겁니다. 쉽고 재밌게 배우실 수 있도록 열심히 썼으니까요. 많은 관심과 기대 부탁드려요 😄[도서 정보]도서명 : 쉽게 시작하는 타입스크립트특징 : 캡틴판교의 모든 TS 지식이 담긴 책. 이 책을 보면 코딩하는게 더 재밌어 질겁니다.도서 링크 : https://www.yes24.com/Product/Goods/119410497도서 상태 : 현재 예약 구매 기간입니다. 6/16(금)부터 오프라인 매장에서 확인하실 수 있습니다 :)참고 : 제 강의 수강생 분들에 한해서 도서 인증 구매 이벤트를 6/25(일)까지 진행합니다. 이벤트 내용 참고저는 그럼 하반기에 또 알찬 콘텐츠로 찾아뵙겠습니다. 감사합니다 :)
프론트엔드
・
타입스크립트
・
프런트엔드
・
자바스크립트
・
ES6+
・
캡틴판교
・
장기효
・
길벗
・
쉽게시작하는타입스크립트
・
타입스크립트책
2021. 01. 31.
15
프런트엔드 개발 상담소를 소개합니다.
안녕하세요 오늘은 새로운 소식을 하나 들고 왔습니다 :) 올해부터 유튜브를 시작했는데요. 제 강의를 들어주시는 많은 분들이 취직과 이직, 회사에서의 성장에 대해 고민이 많으실 것 같아요. 그래서 매주 토요일 오후 9시 30분에 이런 고민을 얘기해 볼 수 있는 방송을 시작하였습니다. 어제 첫 방송인데 6개의 고민(사연)이 접수되었고 1시간 동안 30명이 넘는 분들께서 재밌게 상담에 참여해 주셨어요. 앞으로도 매주 꾸준히 진행할 계획인데 혹시 관심 있으신 분들이 계실 수도 있을 것 같아 아래에 첫 방송 링크를 남깁니다 :) 프런트엔드 개발 상담소 1회차 방송 다시보기 제 강의를 들으시면서 아마 잘 안되시는 부분이나 개인적으로 프로젝트에 적용하시면서 궁금하신 부분들이 많을 것 같아요. 앞으로는 아래 상담소로 방문해 주시면 같이 코드도 보면서 도움도 드리고 서로 편하게 얘기 나눠볼 수 있을 것 같습니다 :) 프런트엔드 개발 상담소를 소개합니다 그럼 앞으로 질의 게시판 뿐만 아니라 상담소에서도 뵐 수 있길 바라면서 이만 글 줄이겠습니다! :) 장기효 드림 P.S : 상담소에 질문을 올리길 원하시는 분들은 아래 링크로 사연 신청을 해주세요! :) 프런트엔드 개발 상담소 상담 신청
2021. 01. 04.
11
캡틴판교 강의 학생 할인 안내
안녕하세요 캡틴판교입니다. 새해를 맞아 아마 새로운 마음으로 학습에 임하실 것 같은데요 :) 아직 학업 때문에 수입이 없는 학생분들을 위해 간단한 웹 페이지를 하나 제작했습니다. 바로 학생 할인 쿠폰 발급 사이트입니다. https://inflearn-discount.netlify.com/ 사이트 접속하셔서 간단하게 인적 사항 입력하시고 학생증을 인증해 주시면 원하시는 강의 50% 할인 쿠폰을 발급해 드립니다. 추후에 사이트가 활성화되면 할인율을 더 높일 계획이니 참고해 주시면 좋을 것 같아요 :) 그럼 새해에도 건강하시고 재밌게 학습하셨으면 좋겠습니다. 감사합니다 :) 장기효 드림