인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 📣 트위터, 💻 깃헙
📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각과 고민을 들을 수 있는 곳
👨🏼🏫 인사말
안녕하세요 인프런 지식 공유자 캡틴판교입니다. 프런트엔드 개발과 관련해서 고민 있으신 분들 편하게 연락 주세요. 프런트엔드 개발자로 진로를 고민하시는 분들 모두 환영합니다. 저의 경험과 조언이 도움이 될 수 있는 분들과 얘기 나눌 수 있으면 좋겠습니다 :)
🔎 가능한 멘토링 분야
- 프런트엔드 개발자로 성장하는 방법
- 프런트엔드 개발자 취업준비
- 이직 준비(이력서, 포트폴리오 등)
- 퍼블리셔에서 프런트엔드 개발자로 직무 전환하기
- 프런트엔드 개발 분야 학습 방법
- 기타 개발자로서 진로에 대한 고민 모두
※ 참고 : 네이버 채용 전형을 진행 중이신 분들은 멘토링이 어렵습니다. 이 멘토링은 네이버와 직접적인 연관이 없으며 IT 업계 선배/동료 개발자로서 진행될 예정이니 참고해 주세요 :)
📚 멘토링을 신청하기 전에 꼭 해야할 일
멘토링을 신청하시기 전에 아래 설문 조사를 꼭 작성해 주시고 신청해 주세요. 아래 설문 조사는 멘티 분들의 사전 준비를 돕고 멘토링을 효과적으로 진행하기 위한 장치입니다.
멘토링 사전 질문지(멘토링 신청하실 때 사전 질문지 작성 여부 꼭 같이 얘기해 주세요 ^^)
🏃🏻♀️ 진행 방식
편하게 대화 형식으로 진행하려고 합니다. 제가 별도로 준비하는 건 없고, 멘토링을 신청해 주시는 분들께서 함께 얘기해봤으면 하는 질문들과 주제를 가져오시면 편하게 같이 대화 나눌 수 있을 것 같아요. 주로 진로, 구직, 업무, 프런트엔드 개발 학습 방법에 대한 고민이 많으실 텐데 그냥 편한 친구나 선배와 대화를 나눈다고 생각해 주시면 좋을 것 같아요 :)
📚 멘토링에 필요한 준비
영상 통화 플랫폼인 줌을 이용합니다. 신청해 주신 멘토링 시간 전에 미리 영상 통화(영상은 필수로 켜지 않으셔도 됩니다)를 진행할 수 있는 환경으로 테스트 및 준비해 주세요 :) 가급적 멘토링에 집중할 수 있는 조용한 공간에서 소음 없이 대화할 수 있는 환경으로 준비해 주시면 좋을 것 같습니다 :)
취직, 이직 준비 관련 상담을 원하신다면 랠릿(Rallit)에 간단한 이력서를 첨부한 후 공유해 주세요. 멘토링 시간을 더 효율적으로 활용하실 수 있습니다 :)
🏃🏻♀️ 멘토링 진행 안내
멘토링 신청이 되셨으면 멘토링 당일 날 시작하기 전에 메일과 카카오톡 메시지로 줌 링크를 안내드릴 예정입니다. 멘토링 시작 시간 전에 꼭 메일과 카카오톡을 확인해 주세요 :)
🔎 프런트엔드 개발 상담소 안내
오픈 멘토링도 괜찮으시다면 아래 글 보시고 유튜브 상담소 방송(무료)으로 오셔서 궁금하신거 편하게 질문하셔도 좋습니다 :)
🍔 카카오톡 오픈 채팅방
500명 이상의 FE 개발자들이 대화 나누는 방입니다. 와서 편하게 질문해 주세요 :)
https://open.kakao.com/o/ghib5Brf
강의
로드맵
전체 5수강평
게시글
질문&답변
컴포넌트가 렌더링되어 HTML이 생성되는 곳 (getServerSideProps VS useEffect)
안녕하세요 제가 답변이 넘 늦어서 죄송합니다 🙂 네 말씀해 주신 대로 이해하셔도 될 것 같아요. 좀 더 정확히 정리해 보자면FE 서버 : 서버 사이드에서 화면을 그리는 곳이 넥스트 서버클라이언트 : 하이드레이션까지 완료한 최종 화면을 보는 곳이 브라우저요렇게 봐주시면 될 것 같네요 :)
- 0
- 1
- 152
질문&답변
<img /> 요소 대신 <Image /> 컴포넌트를 사용해야 하는 이유 (성능 최적화)
안녕하세요, 제가 답이 늦었네요 🙂 네 이미지 컴포넌트는 넥스트에서 추가적으로 캐싱이나 프리로딩 기능 등을 제공합니다. 요거는 대용량 트래픽을 받으시는게 아니라면 쓰시는게 좋아요 :)
- 0
- 2
- 168
질문&답변
ESLint + Prettier 설정 관련해서 질문있습니다
안녕하세요, 혹시 formatOnSave 기능을 끄셨나요? 저장했을 때 ESLint에 설정된 프리티어로 먼저 1차 수정하고, 2차로 프리티어 자체로 포매팅을 하는 경우 위와 같이 나올 수 있습니다 :)
- 1
- 2
- 215
질문&답변
live server 설치 오류
안녕하세요, VSCode 확장 플러그인에서 검색해 보시겠어요?(사진)
- 1
- 2
- 176
질문&답변
프로젝트 생성 관련 가이드 영상은 왜 없는건가요
안녕하세요 재혁님, 요것도 답변 드릴게요.먼저 React와 Vue 프로젝트 모두 별도의 생성 절차를 안내하지 않은 이유는 강의의 핵심에서 벗어난다고 생각했기 때문입니다. 각 프레임워크의 프로젝트 생성 절차는 제 다른 강의들에서 확인하실 수 있어요. 만약, 여기서 바로 확인하시고 싶으면 아래 2개 문서 참고해 주시면 됩니다 :) Vue 프로젝트 생성 절차React 프로젝트 생성 절차
- 1
- 3
- 125
질문&답변
JSX.Element 컴포넌트 타입 정의 관련 재 질의
안녕하세요, 재혁님. 제가 답이 좀 늦었네요. 질문 주신거 짧게 답변 드리면 일단 리액트 컴포넌트 반환 타입은 자동 추론되는 JSX.Element를 쓰시면 됩니다.말씀하신 React.FC는 예전 문법의 잔재로 남아 있었다고 봐주시면 될 것 같아요. 컴포넌트 반환 타입은 명시해서 얻는 이점이 거의 없기 때문에 자동 추론 되는 타입으로 쓰시면 됩니다 :)
- 1
- 2
- 103
질문&답변
JSX.Element 컴포넌트 타입 정의 관련 재 질의
안녕하세요 재혁님, 강의 들으시면서 궁금한게 많아 답답하신거 같은데요. 제가 지금 개인 일정으로 해외에 있어서 차주 월요일에 돌아가는대로 답변 드릴게요. 조금만 기다려주세요 :)
- 1
- 2
- 103
질문&답변
state 변경에 따른 리랜더링 범위가 어떻게 되는 건가요?
안녕하세요, 제가 답이 늦었네요 🙂 state의 변화를 모든 컴포넌트가 감지하지 못하고 있어서 그렇습니다. 리팩토링 한 이후에는 상위 컴포넌트에서 하위 컴포넌트로 변화된 state를 내려주기 때문에 감지가 가능하다고 보시면 되어요 :)
- 1
- 2
- 293
질문&답변
vue3로 따라오시다가 import axios 에러 뜨시는 분들
감사합니다 🙂
- 2
- 2
- 376
질문&답변
vuex 실행시 새로고침해야지만 리스트에 나타나는 현상
안녕하세요, 제가 확인이 늦었네요. 요건 코드 올려주시면 도와드릴 수 있을 것 같아요 :)
- 1
- 2
- 317
블로그
전체 32023. 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% 할인 쿠폰을 발급해 드립니다. 추후에 사이트가 활성화되면 할인율을 더 높일 계획이니 참고해 주시면 좋을 것 같아요 :) 그럼 새해에도 건강하시고 재밌게 학습하셨으면 좋겠습니다. 감사합니다 :) 장기효 드림