오늘 한 일:

• 배민찬 step5 설계
• html form

주말 할 일:

• html form을 이용하여 로그인 기능 구현하기
  • 간단한 서버 어플리케이션 구현
  • validation
  • 세션관리
  • 배민찬에 적용

배민찬

슬라이딩효과

요구사항 분석

1. ajax를 이용한다
2. DOMContentLoaded 이벤트 발생 이후에 데이터를 불러와서 templating 후 렌더링한다
3. css 애니메이션을 이용한다
   • css class이용
4. 애니메이션: 슬라이딩효과
   • 메뉴의 개수에 따라 애니메이션이 바뀐다(4의 배수인 경우와 아닌경우)
5. 재사용이 가능해야 한다

설계

flow

1. DOMContentLoaded 이벤트 발생
2. ajax를 통해 데이터 요청
3. 받아온 데이터로 html templating
4. templating된 메뉴의 개수에 따라 애니메이션 변경

구조

const sideDishes = new SlideStyleSceneChange({
    ajax: ajax,
    uri: 'url',
    template: fn,
    leftAnimation: // {in: 'string', out: 'str'}
    rigthAnimation: 
})
sideDishes.registerAllEventListener();

class SlideStyleSceneChange {
    registerAllEventListener() {
        // DOMContentLoaded 이벤트 등록
        // left, right 애니메이션 등록
    }
    _init() {} // 렌더링, scence개수에 따른 애니메이션 선택
    _render() {}
    _setAnimationStyle() {}
}

HTML form

<form action ='url' method='httpMethod'>
    <label for='id1'></label>
    <input name='nameOfValue' id='id1' value='defaultValue'>
</form>

• label태그의 for속성은 input태그의 id와 매칭
• input태그의 name과 value는 name=value형태로 매칭된다

GET 메소드

http GET 메소드는 요청메시지에 body가 없으므로 uri에 질의가 들어간다

url?nameOfValue=defaultValue

POST 메소드

post 바디에 적절한 내용이 들어간다

POST / HTTP/1.1
Host: url
Content-Type: application/x-www-form-urlencoded
Content-Length: 

nameOfValue=defaultValue