SeSAC4

SeSAC 4기 웹풀스택과정 공부 내용 정리 📝

HTML,CSS, jquery, bootstrap

• HTML
  • tag
    • 실습 - 나만의 메뉴판 만들기
  • table
    • 실습 - 나만의 시간표 만들기
• CSS
  • CSS
  • position
  • display
  • transform
  • animation
    • 방법 1
    • 방법 2
    • 실습 - 원 활용 애니메이션 만들기
• Jquery
  • remove, prepend, before, append, after, html, text
  • val, attr
  • parent, next, children, remove, empty
  • css 추가
  • addClass, removeClass, switchClass, hasClass
  • 실습
    • 과일 골라보세요 만들기
    • jquery이용하여 애니메이션처럼 만들어보기
• bootstrap
  • grid
  • 실습 - 부트스트랩 이용 웹사이트 만들어보기

JavaScript

• array
• for, while
  • 실습 - 구구단 만들기
• this
• DOM
  • getElementsByTagName, getElementById, querySelector
  • createElement, innerText, appendChild, getElementsByClassName, removeChild
  • setAttribute
  • 실습
    • 계산기 만들기
    • 방명록 만들기
    • 네이버 캘린더처럼 일정넣을 수 있는 캘린더 만들기
• 객체
  • date 객체, math 객체
• inheritance
• map, filter 함수

반응형 CSS

• 반응형 CSS
  • 코드 예시 - px, %, em, rem, vw, vh, media
  • 코드 예시 - navBar 생성 및 로우 카드 조절하기 실습.html
  • 코드 예시 - navBar 생성 및 로우 카드 조절하기 실습.css
• CSS-Sass, mixin, styled components, classname

Node.js

• Non-blocking I/O
  • callback
  • promise
  • async_await
    • 코드 예시 - 동일한 로직 여러가지 방법으로 다뤄보기 1. callback
    • 코드 예시 - 동일한 로직 여러가지 방법으로 다뤄보기 2. promise
    • 코드 예시 - 동일한 로직 여러가지 방법으로 다뤄보기 3. async_await
• module
  • fs
    • 코드 예시 - fs 비동기 실행
  • http, server 객체
    • http reply
• npm
  • npm, express, 미들웨어, ejs 내용 정리
    • 코드 예시 - 1
    • 코드 예시 - 2
• Form
  • form, body-parser 내용 정리
    • 코드 예시 - form views/index.ejs
    • 코드 예시 - form index.js
    • 코드 예시 - input 태그
• 비동기 HTTP 통신
  • 비동기 HTTP 통신(ajax, axios, fetch) 내용 정리
    • 코드 예시 - login system(ajax, axios, fetch 방식으로 모두 구현해보기) index.ejs
    • 코드 예시 - login system(ajax, axios, fetch 방식으로 모두 구현해보기) index.js
• 미들웨어
  • multer
    • 코드 예시 - 파일 올리고 이미지 파일 렌더링 하기 index.js
    • 코드 예시 - 파일 올리고 이미지 파일 렌더링하기 index.ejs
    • 코드 예시 - 파일 올리고 이미지 파일 렌더링하기 upload.ejs
• MVC 구조
  • MVC 구조
    • MVC 구조로 만들어보기(DB 제외)
      • 코드 예시 - 회원가입->로그인->프로파일 구현 index.js
      • 코드 예시 - 회원가입->로그인->프로파일 구현 routes/index.js
      • 코드 예시 - 회원가입->로그인->프로파일 구현 model/User.js
      • 코드 예시 - 회원가입->로그인->프로파일 구현 controller/UserController.js
    • MVC 구조로 만들어보기(DB 포함)
      • 코드 예시 - 회원가입->로그인->프로파일 구현 routes/index.js
      • 코드 예시 - 회원가입->로그인->프로파일 구현 model/User.js
      • 코드 예시 - 회원가입->로그인->프로파일 구현 controller/Controller.js

Database

• Database
• SQL
  • DDL, data
  • DML
  • Key
  • function
  • JOIN
    • join 실습
  • Subquery
  • view
• MySQL
  • MySQL 설치
  • DB 연결하기
• Sequelize
  • Sequlize 정리(설치~사용법)
    • 코드예시 - sesac DB의 user, visitor 테이블 사용하여 CRUD구현

통신

HTTP

• Cookie와 Session
  • Cookie와 Session 사용방법 및 설명
    • 코드 예시 - cookie이용하여 모달창 하루동안 꺼지게 만들기 index.ejs

Socket

• Socket
  • socket 이란?
  • socket.io 사용방법
    • 코드 예시 - socket이용하여 채팅시스템 만들기 index.js
    • 코드 예시 - socket이용하여 채팅시스템 만들기 index.html
    • 나만의 채팅 시스템 만들어보기(DM 시스템 추가)

Rendering

• Rendering

React

• React 기본개념 및 다른 라이브러리 설명
• 주요개념
  • 프로젝트 생성 및 jsx문법, Component, props, image, function
  • Ref
• Lifecycle
• Hook-useState, useEffect, useReducer, useMemo,useCallback. useRef
• useState, Event Handling 활용
  • Class Component
  • Function Component
• Router
  • ReactRouter-BrowerRouter, Router, Route, Link
  • useParams, useLocation, useNavigate, searchParams