![[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스강의 썸네일](https://cdn.inflearn.com/public/courses/335397/cover/133267ea-9728-4642-927e-74a76eaac4c3/335397.png?w=420)
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
코드캠프
수백명의 개발자를 배출한 ‘진짜’ 부트캠프의 완벽한 프론트엔드 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [코드캠프]가 준비했습니다 :)
입문
React, Next.js, GraphQL
웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.
Expo 프레임워크
기초 React.Native
웹뷰와 React/Next 연동
스마트폰 기능 및 권한 연동 (알람, 위치, 시스템 등)
안정적인 하이브리드앱 설계 (마이크로프론트엔드)
⭐ 웹 개발자 연봉 올리기 프로젝트 ⭐
웹 개발 기술을 그대로 이용하여 '앱 개발자'로 성장하기
웹 개발자가 쉽게 역량을 키울 수 있도록 해주는 웹 개발자 필수 강의를 목표했습니다.
개발자는 역량을 계속해서 키워나가야 하는 숙제를 가지고 있습니다. 저 역시 같은 숙제를 매일 하고 있으며, 여러분의 시행착오를 조금이나마 줄여드릴 수 있도록 노력했습니다. 늘 잘 따라와주셔서 감사합니다.
9년차 풀스택 웹 개발자, 하이브리드앱 개발자,
부트캠프 대표강사로서 웹 개발자가 가진 기술로 쉽게 역량을 키울 수 있도록 연구했습니다.
하이브리드 앱 개발자로 쉽고 빠르게 성장할 수 있는 핵심 내용과 실무코드를 공개합니다.
그럼 강의에서 만나요!
크로스플랫폼 하이브리드 앱 개발이란 웹 코드로 다양한 운영체제(Android, iOS 등)에서 동작하는 앱을 만드는 기술이에요. 일반적으로 앱을 만들 때는 각각의 운영체제마다 다른 프로그래밍 언어와 환경에서 별도로 개발해야 하지만, 크로스플랫폼과 하이브리드앱 기술을 쓰면 웹에서 쓰는 React.js와 Next.js 같은 기술을 이용해서 한 번만 앱을 개발하면 여러 운영체제에서 모두 사용할 수 있어요.
대표적인 프레임워크로는 React.Native와 Flutter가 있지만 아쉽게도 이 기술들은 복잡한 환경 셋팅 및 추가적인 많은 학습을 필요로 하고 있어요.
그러나 Expo는 복잡한 환경 셋팅 없이 개발할 수 있는 매우 효율적인 프레임워크입니다.
Expo(엑스포)는 React Native와 웹 기술을 이용해서 모바일 앱(Android, iOS)을 쉽고 빠르게 개발할 수 있게 도와주는 도구이자 서비스예요.
원래 React Native만으로 앱을 개발하려면 개발자가 스스로 복잡한 설정과 환경 구축을 해야 하는데, Expo는 미리 환경을 설정하고 필요한 기능을 준비해줘서, 개발자는 앱의 기능과 디자인에만 집중할 수 있어 매우 쉽게 하이브리드앱을 만들 수 있어요!
Expo가 효율적인 이유는 크게 3가지로 정리할 수 있어요.
1⃣ 웹 코드로 여러 플랫폼에서 사용 가능
Expo를 사용하면 한 번의 개발로 안드로이드와 아이폰에서 모두 실행되는 앱을 만들 수 있어 시간과 비용이 절약돼요.
2⃣ 간단하고 빠른 시작
Expo는 미리 만들어진 환경을 제공해서 복잡한 설정 없이도 곧바로 앱을 만들 수 있어요.
3⃣ 손쉬운 테스트와 공유
앱을 실제 스마트폰에서 쉽게 테스트하고 결과를 실시간으로 볼 수 있어요. 특히 친구나 동료에게 앱을 쉽게 공유해서 테스트해보게 할 수 있어요.
실은 React와 Next를 한번이라도 학습한 분들이라면, 꼭 한 번은 들어야 하는 필수 강의가 될 수 있도록 만들었어요! 우리가 이미 알고 있는 기술로 손쉽게 성장할 수 있는 방법이니깐요.
웹 개발 지식을 그대로 활용해서 손쉽게 앱 개발을 배우고 싶은 분
개인 수익화를 위해 앱 개발에 대한 관심과 열정있는 분
연봉을 올리거나
이직을 희망하는 웹 개발자
이 강의는 단순한 웹뷰 내용만 다루는 강의가 아니에요! 훨씬 더 세심하고 핵심적인 내용들로 가득 채웠습니다. 모바일 기능을 사용하는 Device API부터 효율적으로 모바일 UI를 설계하는 법, 페이지 애니메이션 등 여러분이 앱 개발에 꼭 알아야 하는 모든 내용을 꼼꼼하게 담았습니다.
[강의 목표]
웹 기술을 그대로 활용하여 IOS/AOS 앱 개발 할 수 있는 능력
Expo 프레임워크에 대한 전반 및 다양한 기기 사이즈에 대응 및 설계하는 능력
웹과 앱의 데이터 연동 방법을 이해하고 활용하는 능력
위치, 알람, 카메라 등 다양한 네이티브 기능을 활용할 수 있는 능력
앱 로그인을 이해하고 보안을 강화하여 적용할 수 있는 능력
확장성을 고려하고 메뉴간 도메인을 분리할 수 있는 능력
1. 하이브리드앱_Expo
2. 모바일 UI 설계
3. 디바이스 API 설계
4. 모바일 시스템 기능
5. 모바일 알람 기능
6. 앱 권한
7. 사진확대 및 핀치줌
8. 안드로이드 백버튼
9. 페이지이동 애니메이션
10. 앱 로그인
11. 목록 새로고침
12. 마이크로 프론트엔드
강의에서 다루는 세부적인 내용을 확인해보세요.
체계적이면서도 필수적인 내용들로 채웠습니다😀
리액트네이티브와 Expo
에뮬레이터와 시뮬레이터
리액트네이티브 태그들
웹뷰와 Next 연동
웹뷰 연결 실패 대응
모바일 UI 설계와 하이브리드앱 장점
모바일 UI 비율늘리기
모바일 레이아웃 헤더
로컬 헤더 및 옵션 심화
모바일 레이아웃 푸터
웹뷰 디버깅
디바이스와 웹뷰 데이터전달
디바이스 API
디바이스 시스템정보 API
디바이스 위치정보 API
디바이스 객체 룩업 리팩토링
알림 프로세스
스케줄 알림
알림 클릭
앱 권한 설정
앱 상태 감지
안드로이드 백버튼
useEffect와 메모리누수·커스텀훅
사진 원본 보기
핀치줌
페이지이동 애니메이션
페이지이동 애니메이션 (뒤로가기)
앱 로그인
앱 로그인 토큰 탈취
풀 투 리프레시 (pull-to-refresh)
마이크로 프론트엔드 웹
마이크로 프론트엔드 앱 연결
스케줄 알람
안드로이드 백버튼 (더블클릭 종료)
페이지 이동 애니메이션
풀 투 리프레쉬 (pull-to-refresh)
이 강의는 Javacript와 React.js 또는 Next.js를 선수 지식으로 알고 있어야 해요! 그러나 걱정하지 마세요.
여러분이 어느 수준에 있던, 이 강의를 완강하기 위해서 필요한 핵심적인 Javascript와 Next.js의 내용을 별도로 제공하고 있어요! 각각 어떤 내용을 제공하는지 확인해보세요!
템플릿 리터럴
객체와 대괄호 (접근·생성)
구조분해할당
SetTimeout
삼항연산자
화살표함수와 리턴 생략
스프레드 연산자 / REST 파라미터
Early-Exit
addEventListner
옵셔널 체이닝
JSON.stringify / JSON.parse
switch
객체 키 삭제 및 조회
Promise
async / await
shorthand-property
구조분해할당과 초기값 설정
setInterval / clearInterval
querySelctor
accessToken / refreshToken
HOF
프래그먼트
useState
useEffect
props
children
조건부 렌더링
usePathname
use client
동적라우팅 / useParams
Link
prevState
use server
useRef
커스텀훅
useRouter (router.push)
useRouter (router.back)
앱 라우터 / 페이지 라우터
웹팩
그동안 받아왔던 노원두님의 키워드와 수강평을 정리했습니다.
이 강의를 통해 노원두님과 함께 앱 개발자로 성장해보세요🚀
#친철한 강의
#꼼꼼한
#힘숨찐
#귀에 쏙쏙
#찐개발자
#멘토의 멘토
#원두콩
#좋아요좋아요
⭐⭐⭐⭐⭐ 글쓴이: S S
어려운 용어를 축약적으로 쓰는 타 강의에 겁을 먹으신 분들은 꼭 노원두님의 하이퀄리티를 놓치지 마세요!
⭐⭐⭐⭐⭐ 글쓴이: alopp
진짜 널 사랑해 노원두!
어지간한 것들 모두 진짜 농축되어 있어서 넘후 좋습니다.
⭐⭐⭐⭐⭐ 글쓴이: 공백
진짜 좋은 강의인것 같습니다. 기초부터 부분부터 심화까지 부분 부분이 정밀하고 응축된 강의라 혼자서도 이해하기 좋아요!
⭐⭐⭐⭐⭐ 글쓴이: 김동은
노원님은 가장 필요한 기술들을 커리큘럼으로 매번 개선하시고 실무 경험을 토대로한 예제들로 이해가 잘 되었습니다.
React.js 또는 Next.js 기초 지식이 있으신 분들이 듣기에 최적화된 강의입니다.
다만, 강사님마다 설명하는 스타일도 다르며 코드를 작성하는 법도 다를 수 있기 때문에, 더 효율적인 학습을 위해서 노원두님의 Javascript 뿐만 아니라 Next의 핵심내용까지 보충 영상으로 제공하고 있습니다. 강의 자체가 친철하고 체계적으로 설명하기 때문에 어려움 없이 학습할 수 있습니다.
노원두님은 맥을 사용하고 하기 있기에 강의는 Mac을 기준으로 진행되었습니다.
하이브리드앱의 특성상 Mac과 아이폰을 가지고 있다면 Android/IOS 둘 모두 구현 가능하며 시뮬레이터를 통해 테스트 가능합니다. 만약 Window계열 컴퓨터와 Android폰을 가지고 있다면 테스트는 Android만 가능합니다. IOS까지 테스트 해보고 싶다면 Mac은 없어도 최소 IOS 공기계가 필요합니다.
이 강의에 있는 내용과 실무 예제들은 노원두님이 직접 하이브리드앱으로 만들어 실서비스로 배포한 '솔로트립'을 기준으로 하고 있습니다. 현재 '솔로트립'은 잠시 업데이트 중으로 서비스를 운영하고 있지 않지만 곧 새로운 프로젝트를 도입해서 재오픈 예정입니다. 실서비스로 바로 사용할 수 있는 수준의 내용들로 전체 커리큘럼이 제작되었습니다.
학습 대상은
누구일까요?
기초 웹 개발을 가지고 손쉽게 앱 개발을 해보고 싶은 분
React/Next 경험자로 하이브리드앱 개발에 도전하고 싶은 분
앱 개발자로 연봉을 올리고 싶은 웹 개발자
하이브리드앱 개발 포트폴리오를 만들고 싶은 분
선수 지식,
필요할까요?
React.js 기초
Next.js 기초
웹 개발 기초
13,161
명
수강생
369
개
수강평
188
개
답변
4.8
점
강의 평점
10
개
강의
"Try anything, Try everything!"
코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!
전체
96개 ∙ (33시간 23분)
해당 강의에서 제공:
6. [01-05] 웹뷰
13:37
8. [01-07] 웹뷰 연결 실패
19:47
12. [02-04] 로컬 헤더
48:53
13. [02-05] 헤더 옵션 심화
33:29
15. [03-01] 웹뷰 디버깅
44:32
18. [03-04] 디바이스 API
36:04
24. [05-01] 알림프로세스
07:44
25. [05-02] 스케줄알림
52:14
26. [05-03] 알림 클릭
32:30
27. [06-01] 앱 권한 설정
43:39
28. [06-02] 앱 상태감지
37:58
29. [07-01] 사진 원본 보기
46:42
30. [07-02] 핀치줌
27:54
37. [10-01] 앱 로그인
10:42
38. [10-02] 앱 로그인 실습
01:02:06
43. [12-02 ] 마이크로 프론트엔드 실습 (웹)
01:11:33
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!
₩36,300
25%
₩48,400