🌱 Seoul Software ACademy (SeSAC) 4기 웹 풀스택 교육과정 🌱

청년취업사관학교 SeSAC4기 웹 풀스택 교육과정의 결과물을 모두 정리해 둔 저장소 입니다.

---

✌ 22-06-27: Github setting, VS Code install

💖 22-06-29: HTML Tag

• css
  
• div tag css
  
• table
  
• practice - 카페 음료 문서 작성
  
• practice - 시간표
  
• practice - table 음료
  
• practice - 애벌레
  

🎱 22-07-01: CSS Style, JavaScript

• CSS
  • transform
    
  • animation
    
  • display
    
  • z-index
    
  • practice - img
    
  • practice - animation
    
  • practice - animation text
    
• JavaScript
  • for문
    
  • if문
    
  • function
    
  • switch
    
  • practice - js calc
    
  • practice - 중첩 for문
    
  • practice - while
    

🐱‍🚀 22-07-04: JavaScript Data type

• date 객체
  
• math 객체
  
• object 객체
  
• document 객체1
  
• document 객체2 - getElement
  
• document 객체3 - child
  
• practice - document 객체 calc
  
• practice - document 객체 계산기
  
• practice - 방명록
  

✨ 22-07-06: jQuery

• setValue, getValue
  
• 요소 다루기
  
• practice - 이미지 바꾸기
  
• practice - 클래스(컬러) 바꾸기
  
• practice - 스케줄
  

📷 22-07-08: BootStrap

• bootstrap
  
• bootstrap div col
  
• practice - 웹페이지 만들기
  
• practice - 포트폴리오 만들기
  

🖥 22-07-11: Clone Coding

💦 22-07-13 NCP Server

• practice - 서버에 올려보기
  

⚠ 22-07-15: Git Issue, Merge, Branch

🎁 22-07-18: Node.js Module, Built-in object

• function
  
• variable
  
• function과 variable 모듈 불러와서 사용하기
  
• console 객체
  
• process 객체
  
• timer 객체
  
• url 모듈
  
• fs 모듈
  
• practice - os, path 모듈 사용
  
• practice - url 모듈, key와 value 분리하기
  
• callback function
  
• callback Hell
  
• callback Hell into Promise
  
• practice - callback 예제
  
• practice - callback 예제 Promise로 바꾸기
  

🎨 22-07-20: Node.js Destructuring assignment, Callback Hell, Promise, Async, HTTP

• array
  
• object
  
• class
  
• class, module
  
• callback
  
• promise
  
• async
  
• async, await
  
• practice-promise를 async로
  
• fs module
  
• practice-fs모듈
  
• http
  
• http, file
  
• practice-fs모듈, http와 async
  
• practice-fs모듈, http와 callback
  

🏆 22-07-22: Express, Node Package Manager(NPM), EJS

• express 사용 - index.js
  
• public 폴더 - 정적파일 관리
  
• ejs 문법
  

🎯 22-07-25: HTML form, Body-parser, Json

• form 태그 사용 - index.js
  
• form 태그를 사용해서 데이터 보내기 - index.ejs
  
• form 태그 사용해서 보낸 데이터 화면으로 띄우기 - receive.ejs
  
• practice - get으로 정보받기 - ex30.ejs
  
• practice - post으로 정보받기 - ex31.ejs
  
• practice - 회원가입 폼 만들기 - ex32.ejs
  
• practice - 회원가입 후 이동 화면 - success_join.ejs
  
• practice - 로그인 폼 만들기 - success_join.ejs
  
• practice - 로그인 후 이동 화면 - success_join.ejs
  

💚 22-07-27: Axios, Asynchronous HTTP

• 비동기 통신 Axios 사용 - index.js
  
• 비동기 통신 Axios 사용 - index.ejs
  
• practice - Axios 사용해서 회원가입 폼 만들기
  
• practice - Axios 사용해서 로그인 폼 만들기
  

💎 22-07-29 Day15: MiddlWare, Multer

• multer 사용해서 파일업로드, 미들웨어 사용 - index.js
  
• multer 사용해서 파일업로드 - index.ejs
  
• practice - 회원가입에 프로필 사진 업로드
  
• practice - 프로필 사진 띄우기
  

🥽 22-08-01: DB, MySQL query

🎹 22-08-03: MVC, Route

• MVC - index.js
  
• MVC - routes/index.js
  
• MVC - model/User.js
  
• MVC - controller/UserController.js
  
• MVC - views/index.ejs
  
• practice - MVC 구조로 회원가입, 파일업로드, 회원정보 수정 구현 - index.js
  
• practice - MVC 구조로 회원가입, 파일업로드, 회원정보 수정 구현 - routes/index.js
  
• practice - MVC 구조로 회원가입, 파일업로드, 회원정보 수정 구현 - model/User.js
  
• practice - MVC 구조로 회원가입, 파일업로드, 회원정보 수정 구현 - controller/UserController.js
  
• practice - MVC 구조로 회원가입, 파일업로드, 회원정보 수정 구현 - views
  

🍤 22-08-05: MVC CRUD(1)

• 방명록 구현해보기 - index.js
  
• 방명록 구현해보기 - routes/index.js
  
• 방명록 구현해보기 - model/Visitor.js
  
• 방명록 구현해보기 - model/Visitor.js
  
• 방명록 구현해보기 - controller/VisitorController.js
  
• 방명록 구현해보기 - views/index.ejs
  

⛈ 22-08-08: MVC CRUD(2)

• practice - 회원가입, 로그인, 회원정보 수정을 DB와 연동하여 구현하기 - index.js
  
• practice - 회원가입, 로그인, 회원정보 수정을 DB와 연동하여 구현하기 - routes/index.js
  
• practice - 회원가입, 로그인, 회원정보 수정을 DB와 연동하여 구현하기 - model/User.js
  
• practice - 회원가입, 로그인, 회원정보 수정을 DB와 연동하여 구현하기 - controller/UserController.js
  
• practice - 회원가입, 로그인, 회원정보 수정을 DB와 연동하여 구현하기 - views
  

💻 22-08-10: ORM, Sequelize

• Sequelize - index.js
  
• Sequelize - config/config.json
  
• Sequelize - routes/index.js
  
• Sequelize - model/index.js
  
• Sequelize - model/Visitor.js
  
• Sequelize - controller/VisitorController.js
  
• Sequelize - views/index.ejs
  
• practice - 회원정보 관리 추가하기 - index.js
  
• practice - 회원정보 관리 추가하기 - config/config.json
  
• practice - 회원정보 관리 추가하기 - routes/index.js
  
• practice - 회원정보 관리 추가하기 - model/index.js
  
• practice - 회원정보 관리 추가하기 - model/User.js
  
• practice - 회원정보 관리 추가하기 - controller/UserController.js
  
• practice - 회원정보 관리 추가하기 - views
  

🍪 22-08-12: session, cookie

• Cookie&Session - index.js
  
• Cookie&Session - views
  

👨‍👩‍👦‍👦 22-08-15 ~ 22-09-02: Team Project

🌪 22-09-05: CSS Responsive Web Design

• CSS 스타일 초기화 - normalize.css
  
• CSS 스타일 초기화 - reset.css
  
• 반응형 웹 - HTML
  
• 반응형 웹 - CSS
  
• practice - html1
  
• practice - html2
  
• practice - css
  

🎃 22-09-07: Socket(1)

• Socket.io - index.js
  
• Socket.io - index.html
  
• practice - chatting 구현 - index.html
  
• practice - chatting 구현 - index.js
  
• practice - chatting 구현 - chat.html
  

🍕 22-09-14: Socket(2)

• nickname 사용하기 - index.js
  
• nickname 사용하기 - views/main.html
  
• nickname 사용하기 - views/chat.html
  
• nickname 사용하기 - public/css/chat.css
  

🥨 22-09-16: Socket(3)

개인프로젝트👩‍💻 - socket.io 이용해서 채팅 사이트 구현

📃 22-09-19: AWS, 포트폴리오 만들기

개인프로젝트👩‍💻 - socket.io 이용해서 채팅 사이트 구현을 AWS를 이용해서 서버에 올리기

✂ 22-09-21: React

• React Project 생성 - src/index.js
  
• React 클래스형&함수형 Component - src/ClassComponent.js
  
• practice - props - App.js
  
• practice - props - App.css
  
• practice - props - Prop1.js
  
• practice - props - Prop2.js
  
• practice - props - Prop3.js
  
• practice - props - Test.js
  
• practice - props - Test2.js
  

💜 22-09-23: state와 useState

• state, useState - index.js
  
• state - StateClass.js
  
• state - StateFunction.js
  
• practice - 숫자 증감(Class) - Ex56Class1.js
  
• practice - 숫자 증감(Function) - Ex56Function2.js
  
• event - EventClass
  
• event - EventFunction
  
• event - Event
  
• event - EventC
  
• practice - Handler_ex
  

💚 22-09-26: map(), filter

• index.js
  
• map() - map.js
  
• filter() - sample.js
  
• practice - Event_ex.js
  
• practice - Event_ex2.js
  
• practice - Event_ex2.css
  

🧡 22-09-28: 객체지향 vs 절차지향

• index.js
  
• 상속 - App.js
  
• practice - 학생정보 상속 - Ex62.js
  
• ref - Ref.js
  
• practice - ref - scrollBox.js
  
• practice - ref - scrollBox.css
  
• lifeCycle - LifeCycle.js
  

💰 22-09-30: Hooks, sass

• index.js
  
• hook - useState
  
• hook - useEffect
  
• hook - useReducer
  
• hook - useMemo, useuseCallback, useRef
  
• hook - useMemo, useuseCallback, useRef
  
• sass - UseSass.js
  
• sass - UseSass.scss
  
• css module - CSSModule.js
  
• css module - CSSModule.module.css
  

✉ 22-10-05: React Router

• index.js
  
• App.js
  
• ReactRouter.js
  
• Main.js
  
• Product.js
  
• practice - Ex64.js
  
• practice - Ex64.js
  
• practice - ExMain.js
  
• practice - Student.js
  
• practice - ExCSS.css
  

🔐 22-10-07: passport(google, kakao)

👩‍💻 22-10-07 ~ 22-10-14: 개인 프로젝트