[블로그] 화면구현

Bootstrap, merarial css

[] ~ mysql.server start

 

1. navbar, context, header, footer

    - src/main/webapp/WEB-INF/views 에서 화면 작업

    - "/" 는 절대경로

2. 회원가입 화면

3. 로그인 화면

3. 회원가입 action

    - /src/main/resources/static 에서 작업

    - static 폴더는 스프링에서 유일하게 외부에 직접적으로 공유가능한 정적 자원 폴더. URL로 접근 가능.

    - HTML form tag가 아닌 javascript 를 사용하여 Data 추출. 

    - arrow function 사용 이유 : 파일의 this를 binding 하기 위해서. (scope 범위가 다른가봄)

    - function() 으로 하면 this 가 window 객체가 됨.

4. 회원가입 ajax

    - ajax를 이용하여 JSON으로 변경하여 Insert 요청 전달.

    - ajax는 비동기 호출을 해줌.

5. ajax를 사용하는 이유는

    1. 어떤 환경에서든 서버를 하나만 쓰기 위해

       크게 클라이언트는 웹과 앱으로 구분된다. 웹은 요청에 대한 응답으로 HTML파일을 받고, 앱은 데이터(JSON)를 받는다.

       이때, 서버를 이원화 하여 구축하지 않기 위해 JSON 데이터를 리턴받을 수 있는 ajax 통신을 하여 서버를 하나로 통합한다.

       대신 웹에서는 추가적인 요청을 통해 HTML 파일을 받는다.

    2. 비동기 통신을 하기 위해

       요청한 통신이 일어나는 동안 프로그램이 멈추는 것을 막아준다.

        참고 : https://www.youtube.com/watch?v=CBHEPKN3do4&list=PL93mKxaRDidGEaUXprXqhNvSW02xCjLZI&index=19