Udemy web bootcamp

완전한 웹 개발 부트 캠프

자원

https://www.appbrewery.co/p/web-development-course-resources

프로젝트

• 프로젝트 1 : HTML 사용 개인 사이트 -https://sdkdeepa.github.io/resume/

• 프로젝트 2 : CSS 소개 -https://sdkdeepa.github.io/profile/

• 프로젝트 2 최종 : HTML, CSS 및 Bootstrap -https://sdkdeepa.github.io/udemy-bootstrap/

• 프로젝트 3 : 주사위 게임 -JS 및 DOM 방법 -https://sdkdeepa.github.io/dice

• 프로젝트 4 : 드럼 키트 -JS 키보드 이벤트 -https://sdkdeepa.github.io/drumming/

• 프로젝트 5 : Simon Game -JS 및 JQuery -https://sdkdeepa.github.io/simon-game-jquery/

• 프로젝트 6 : BMI 계산기 -Node.js 및 Express.js. BMI 계산을 위해 Get 및 Post와 같은 API 방법을 사용하는이 프로젝트

---

• 프로젝트 7 : 날씨 앱 -Node.js 및 Express.js. 이 프로젝트는 외부 날씨 API를 사용하여 게시물 요청이 전송 된 후 날씨 데이터를 얻기 위해 전화를 걸었습니다.

• 프로젝트 8 : 뉴스 레터 가입 -HTML, CSS, Bootstrap, JS, Nodejs, Express, API, NPM, Nodemon, Body-Parser 등 -https://shrouded-river-17694.herokuapp.com/

• 프로젝트 9 및 10 : TODO 목록 앱 - TODO List App v2의 연속. GET, POST 및 DELETE ROUT를 추가했습니다. 이제 오늘 및 사용자 정의 목록을 위해 TODO 목록을 작성하고 삭제할 수 있습니다. 사용자 정의 목록은 홈 루트 (예 : /Work)에 추가 할 수 있습니다. MongoDB Altas Cloud 데이터베이스 사용 데이터가 수집됩니다. Heroku를 통해 호스팅 된 응용 프로그램. 확인 : https://tranquil-earth-77166.herokuapp.com/

• 프로젝트 11 : Multipage Personal Blog 웹 사이트 - HTML, CSS, Bootstrap, JS, Node.js, Express.js, Body -Parser, API, EJS, Heroku, Mongoose, MogoDB Altas Cloud Cluster를 사용하여 멀티 페이지 개인 블로그 응용 프로그램을 생성했습니다. 체크 아웃 : https://morning-brook-32061.herokuapp.com/

프로젝트 와이어 프레임의 예

• 프로젝트 2. 와이어 프레이밍 틴고 .png

주제가 다루었습니다

HTML, CSS, JavaScript, Bootstrap 4, Dom & Dom Manipulation, JQuery, Node.js, Express, 반응 EJS, Body-Parser, Nodemon, Lodash, Mongodb, Mongodb Atlas, Mongoose, Mongoose-Encryption, Dotenv, Md5, Bcrypt, Passport-Local-Mongoos, Passport-local-mongoos. Passport-Google-Path20, Mongoose-FindorCreate, Express-Session, API, JSON, 인증, MailChimp API, Heroku를 처음부터 REST API 빌드.

섹션 9 : JavaScript ES6 소개

• 116-117 : 도전 : 텍스트로 케이싱 변경
• 118 : JavaScript의 기본 산술 및 모듈로 연산자
• 121-122 : 기능 1 부 : 도전 - 카렐 로봇
• 124 : 기능 2 부 : 매개 변수 및 인수

섹션 10 : 중간 JavaScript

• 131 : JavaScript의 임의 숫자 생성 : 사랑 계산기 구축
• 132 : 제어 명세서 : IF-ELSE 조건부 및 논리 사용
• 코딩 운동 5 : BMI 계산기 고급 (IF/else)
• 코딩 운동 6 : 도약 연도
• 138 : 요소 및 중간 배열 기술 추가

섹션 12 : 보스 레벨 챌린지 1- Dicee Game

• 외부 JS 파일을 만듭니다
• 주사위 이미지를 추가하십시오
• 임의의 숫자를 만듭니다
• 두 IMG를 무작위 주사위로 변경하십시오
• 두 IMG 요소를 모두 변경하십시오
• 타이틀을 변경하여 승자를 표시하십시오

섹션 13 : 고급 JavaScript 및 DOM 조작

• 172 : 고차 기능 도전

섹션 14 : 드럼 키트

• 171 : 버튼에 이벤트 리스너 추가
• 174 : 웹 사이트에서 사운드를 재생하는 방법
• 176 : JavaScript에서 스위치 문을 사용하는 방법
• 179 : 키보드 이벤트 리스너 사용을 위해 키 프레스 확인
• 181 : 웹 사이트에 애니메이션 추가

섹션 15 : 보스 레벨 챌린지 2- 시몬 게임

• JS와 JQuery를 추가하십시오
• 새로운 패턴을 만듭니다
• 애니메이션과 사운드로 사용자에게 순서를 보여줍니다.
• 어떤 버튼을 누르는 지 확인하십시오
• 버튼 클릭에 사운드를 추가합니다
• 사용자 클릭에 애니메이션을 추가하십시오
• 게임을 시작하십시오
• 게임 시퀀스에 대한 사용자의 답변을 확인하십시오
• 게임 오버
• 게임을 다시 시작하십시오

섹션 19 : node.js가있는 Express.js

• 241 : Express를 사용하여 첫 번째 서버 생성
• 242 : 요청 및 응답 처리 : GET 요청
• 244 : 경로 이해와 작업
• 246 : 계산기 챌린지 설정
• 248 : HTML 파일로 요청에 응답합니다
• 249 : Body Parser와의 요청을 처리합니다
• 250 : BMI 라우팅 챌린지

섹션 20 : API- 응용 프로그램 프로그래밍 인터페이스

• 258 : 노드 https 모듈로 GET 요청
• 259 : JSON을 구문 분석하는 방법
• 260 : Express를 사용하여 라이브 API 데이터가있는 웹 사이트를 렌더링
• 261 : Body Parser를 사용하여 서버 프로젝트에 대한 요청을 구문 분석 : 날씨 프로젝트

섹션 21 : 뉴스 레터 가입

• 263 : 가입 페이지 설정
• 264 : API를 통해 MailChimp의 서버에 데이터를 게시합니다
• 265 : 성공 및 실패 페이지 추가
• 266 : Heroku로 서버를 배포합니다

프로젝트 : https://shrouded-river-17694.herokuapp.com/

섹션 22 : EJS

• 282 : 템플릿? 템플릿이 필요한 이유는 무엇입니까?
• 283 : 첫 번째 EJS 템플릿 생성
• 284 : EJS 템플릿 내부에서 코드 실행
• 285 : 웹 페이지에서 서버로 데이터를 전달합니다
• 287 : 웹 사이트에 미리 만든 CSS 스타일 시트 추가
• 288 : 템플릿 vs 레이아웃 이해
• 289 : 노드 모듈 내보내기 이해 : 파일 간 기능 및 데이터를 전달하는 방법

섹션 23 : 보스 레벨 챌린지 3- 블로그 웹 사이트

• 집으로 돌아와서 집에 콘텐츠를 추가하십시오 .ejs
• HomeStartingContent에서 Home.ejs로 데이터를 전달하십시오
• 헤더 및 바닥 글을 집에 추가하십시오 .ejs
• 헤더와 바닥 글을 부분 폴더로 옮겼습니다
• 경로를 추가하고 연락처를 추가하고 컨텐츠를 전달하고 연락하십시오 .ejs.
• 헤더에 Nav Href를 추가하십시오
• Compose Form 및 Post Route를 추가하십시오
• 텍스트 필드를 추가하여 양식을 작성하고 부트 스트랩을 사용하십시오
• 게시물에 대한 JS 객체를 만듭니다
• 게시물을 게시물 배열로 푸시하십시오
• 렌더링 어레이에 게시물을 추가합니다
• 모든 게시물을 통해 루프
• foreach를 사용할 루프를위한 리팩토러
• 각 게시물을 집으로 렌더링합니다
• 익스프레스 라우팅 매개 변수 /게시물 /: 블로그 포스트 추가
• URL에서 제목과 일치하는지 확인하기 위해 게시물 배열을 통해 루프
• lodash를 추가하고 타이틀에 _.lowercase를 사용하십시오
• 각 블로그 게시물에 대한 별도의 페이지
• 홈페이지에서 우체체를 100 자로 잘라냅니다
• 게시물에 추가 읽기를 추가하십시오

섹션 27 : 몽구스

• 357 : 몽구스 소개
• 358 : Mongoose와 함께 데이터베이스에서 읽습니다
• 359 : Mongoose와의 데이터 검증
• 360 : Mongoose를 사용하여 데이터를 업데이트하고 삭제합니다
• 361 : Mongoose를 사용하여 관계 설정 및 문서를 포함시킵니다

섹션 28 : 모든 것을 정리합니다

• 364 : Todolist 프로젝트를 다음 단계로 가져 가서 Mongoose와 연결하십시오.
• 365 : 데이터베이스 항목을 Todolist 앱으로 렌더링합니다
• 366 : Todolist 데이터베이스에 새 항목 추가
• 367 : Todolist 데이터베이스에서 항목 삭제
• 368 : Express Route 매개 변수를 사용하여 사용자 정의 목록 작성
• 369 : 맞춤형 유아자에게 새 항목 추가
• 370 : Custom Todo Lists에서 Lodash 재 방문 및 항목 삭제

섹션 29- 웹 응용 프로그램 배포

• 374 : 데이터베이스로 웹 앱을 배포하는 방법
• 374 : MongoDB Atlas를 설정하는 방법
• 375 : 데이터베이스가있는 앱을 Heroku에 배포합니다

폴더 : 프로젝트 9 및 10 : TODO 목록 https://tranquil-earth-77166.herokuapp.com/

섹션 30- 보스 레벨 챌린지 4- 블로그 웹 사이트 업그레이드

• 381 : MongoDB로 구성된 게시물을 저장하십시오
• 382 : 게시물을 렌더링하기 위해 홈페이지를 찾으십시오
• 383 : Save ()가 오류없이 완료된 후 홈페이지로 리디렉션
• 384 : Post _id를 기반으로 올바른 블로그 게시물을 렌더링합니다

폴더 : 프로젝트 11 : 블로그 웹 사이트 완료 https://morning-brook-32061.herokuapp.com/

섹션 31- 처음부터 나만의 편안한 API 구축

• 389 : 서버 챌린지 설정
• 391 : 모든 기사를 얻으십시오
• 392 : 새 기사 게시
• 393 : 모든 기사를 삭제하십시오
• 394 : Express를 사용하는 체인 경로 처리기
• 395 : 특정 기사를 받으십시오
• 396 : 특정 기사를 넣으십시오
• 397 : 특정 기사를 패치하십시오
• 398 : 특정 기사를 삭제하십시오

폴더 : Wiki-Api

섹션 32- 인증 및 보안

• 403 : 설정
• 404 : 레벨 1- 사용자 이름 및 비밀번호로 사용자 등록
• 406 : 레벨 2- 데이터베이스 암호화
• 407 : 환경 변수를 사용하여 비밀을 안전하게 유지합니다
• 408 : 레벨 3- 해싱 비밀번호
• 410 : 레벨 4- bcrypt를 사용한 소금 및 해싱 비밀번호
• 412 : 레벨 5- 쿠키 및 세션을 추가하기 위해 Passport.js를 사용합니다.
• 413A : 레벨 6 -OAUTH 2.0 & Google과 로그인 구현 방법
• 413B : 레벨 6 -Facebook과 Oauth 2.0
• 414 : 사용자가 비밀을 제출하게합니다

폴더 : 비밀

섹션 33- reft.js

• 422 : JSX 코드 실습
• 423 : JSX & ES6 템플릿 리터럴의 JavaScript 표현식
• 424 : JSX 실습의 JavaScript 표현
• 425 : 속성 및 스타일링 반응 요소
• 426 : 반응 요소에 대한 인라인 스타일
• 427 : 반응 스타일 연습
• 428 : 반응 구성 요소
• 429 : 반응 구성 요소 연습
• 431 : JavaScript ES6 가져 오기, 수출 및 모듈 연습
• 434 : 골키퍼 앱 프로젝트 - 1 부
• 436 : 반응 소품
• 437 : 소품 연습을 반응합니다
• 438 : React DevTools -https://990sq.csb.app/
• 439 : 구성 요소에 데이터 매핑 -https://0lrqy.csb.app/
• 440 : 구성 요소에 데이터 매핑 실습 -https://1kzup.csb.app/
• 441 : JavaScript ES6 MAP/필터/감소
• 442 : JavaScript ES6 화살표 기능
• 443 : Keeper App Project -Part 2
• 444 : Ternary 운영자 및 운영자와 조건부 렌더링을 반응
• 445 : 조건부 렌더링 실습 -https://pr7ow.csb.app/
• 447 : 반응 후크 - usestate
• 448 : usestate hook 연습
• 449 : JavaScript ES6 객체 및 배열 파괴
• 450 : JavaScript ES6 파괴 도전
• 451 : 반응에서의 이벤트 처리
• 452 : 반응 형태
• 454 : 복잡한 상태 변경
• 455 : 복잡한 상태 실습 변경
• 456 : JavaScript ES6 스프레드 연산자
• 457 : JavaScript ES6 스프레드 운영자 실습
• 458 : 구성 요소 트리 관리
• 459 : 구성 요소 트리 연습 관리
• 460 : 골키퍼 앱 프로젝트 - 파트 3
• 461 : 반응 의존성 및 스타일링 키퍼 앱 -https://pbt9b.csb.app/

사용 된 도구

• 코데 펜
• 원자
• 우편 집배원
• 하이퍼 터미널
• 비주얼 스튜디오 코드
• https://codesandbox.io/