프론트 공부하기

프로그램 준비

웹페이지 구성 언어

태그의 특징

간단한 회원가입 페이지 만들기

CSS 기본

스타일 적용방식 3가지 실습하기

박스 모델 사이즈

박스 크기 조절하기 실습

정렬 방법

div 정렬 실습

회원가입 페이지 완성시키기

싸이월드 만들기 1일차

HTML , CSS , JavaScript

자바스크립트 - 변수, 상수

자바 스크립트 - 배열

자바스크립트 - 객체

싸이월드 만들기 2일차

자바 스크립트 - 데이터 타입, 연산자

자바 스크립트 - 조건문

for 루프문

자바 스크립트 - 수학 기능

DOM

싸이월드 만들어보기 3일차

직접 만드는 기능 함수

시간관련 내장함수

싸이월드 만들기 4일차

이전에 만들었던 인증번호 전송 보완하기

이벤트 감지

싸이월드 만들어보기 5일차(완)

html 복습 프로젝트 - 회원가입 페이지 만들기

회원가입 페이지 만들기 - 완성

CSS 기본 1

CSS 기본 2

CSS 간단 실습 1 나만의 일기장 페이지 만들어보기

CSS 레이아웃

선택자 2

CSS 레이아웃의 흐름

Float 레이아웃

flex 레이아웃

선택자 3

선택자 4

flex 레이아웃2

CSS 상속

웹폰트 적용시키기 2가지 방법

폰트에 부여가능한 수많은 속성들

단위 px,pt, %,em,rem

캐스캐이딩 - CSS 적용 우선순위

배경 요소들

색상을 넣는 3가지 방법

viewport에 비례하는 vw, vh에대한 내용

단위 심화 - 함수를 사용한 사이즈 지정

Position

transition CSS 변화시에 생기는 애니메이션을 꾸미는 방법

박스의 형태를 변형시키는 transform

transform + transition 동시 적용 시키기

상품 이미지 부분만 구현

트랜지션과 애니메이션 비교 및 애니메이션 설명

간단한 animation 만들기

목표상단의 배너 만들기페이지를 열면 Welcome to my shop 글자가 살짝 튕기듯 나타나도록

grid 레이아웃

flex와 grid 차이점

shop 페이지 만들어보기 v3

반응형 웹

미디어 쿼리

breakPoint란?

max, min

querySelector 입력한 값 가져오기

현재 날짜와 시간을 받아오는 Date

return

for-of / for-in

interval

web storage

ul,ol,li 리스트 태그

DOM

키보드 event

JS에서 HTML태그 만들기

addEventListener

var 키워드를 가능한 지양하는 이유

객체 localStorage 저장하고 가져오기

호이스팅

geolocation - 위치 좌표를 얻어올 수 있음

open weather map 사이트 오픈 API

HTTP 프로토콜

동기, 비동기

promise 객체

then, catch

구조 분해 할당

spread 연산자

깊은 복사, 얕은 복사

rest 파라미터

react 준비

react - 기본 설명

package.json

emotion JSX , CSS-IN-JS

리액트와 컴포넌트

let vs state

데이터 통신 기초

VSCODE 에서 API 요청하기

GraphQL

static routing

static routing board

static routing board query

조건부 렌더링

dynamic routing board query

dynamic routing board mutation

container presenter

export vs export default

set state 동작원리

map을 사용해서 받아온 데이터 div로 만들기

map 데이터 한번에 받아와서 정리 출력하기

map boards delete

board-edit/new

TypeScript 기본 세팅하기

TypeScript 기본

typescript utility type

graphql codegen

event bubbling

stop propatation

UI 프레임워크

modal

prev state

props children

레이아웃 만들기

컴포넌트 합성

글로벌 스타일과 폰트

페이지네이션

페이지네이션2 - next

페이지네이션 - last

ligfting state up

스프레드 연산자와 데이터 복사

comment edit

infinite scroller

class counter

class lifecycle

functional lifecycle