목록web (12)
관심쟁이 영호
[#6-2 Spring Boot 정주행] View Path를 없애보자! ㅣ MVC 프레임워크 만들기
이전 포스팅에서 FrontController를 통해서 공통 처리를 가능하게 하였다. 하지만 View의 Path를 설정하는 부분과, Servlet에서 View & 또 다른 Servlet으로 넘겨주는 함수가 모든 컨트롤러에 적용된다는 것을 알 수가 있었다. 이번 포스팅은 View Path 중복 코드 문제를 해결한다. 그리고 이전 포스팅의 코드를 계속해서 사용할 예정이다. [#6 Spring Boot 정주행] MVC 프레임워크를 직접 만들어보자 이전에 포스팅한 글에서 서블릿 dispatcher를 통해서 JSP를 반환하는 것까지 성공했다! 하지만 문제가 있었다. 이번 포스팅에서는 해당 문제들을 짚어보고 하나씩 해결해보면서 MVC 프레임워크를 만 bestkingit.tistory.com 목차 전략 코드 적용 Fr..
[#6-1 Spring Boot 정주행] MVC 프레임워크를 직접 만들어보자
이전에 포스팅한 글에서 서블릿 dispatcher를 통해서 JSP를 반환하는 것까지 성공했다! 하지만 문제가 있었다. 이번 포스팅에서는 해당 문제들을 짚어보고 하나씩 해결해보면서 MVC 프레임워크를 만들어보는 과정을 가질 것이다. (참고로 Spring 또한 해당 역사를 밟아오면서 발달한 것이다!) [#5 Spring Boot 정주행] HTTP로 HTML을 응답해보자! 이번 시간에는 서버를 만들어서 html을 리턴해보자! 먼저 서버를 만들자. 다음에 나오는 코드는 이전 시간에 했던 프로젝트에서 계속 유지한다. [#3 Spring Boot 정주행] HttpServletRequest, HttpServletResponse bestkingit.tistory.com 목차 문제점 FrontController Fron..
이번에는 웹에서 이루어지는 상호 작용을 전반적으로 살펴보고 몇 가지의 기술 들을 살펴볼 것이다. 목차 웹 기본 구조 서블릿 HTTP 웹 기본 구조 사용자와 서버로 나누어 생각해보자! 우리가 네이버에서 "뉴스" 버튼을 클릭하면 뉴스 화면으로 이동한다. 실제로 내부에서는 어떻게 이루어질까?? 다음을 보면서 이해해보자! 사용자가 "뉴스" 버튼을 클릭한다. 사용자의 웹 브라우저가 요청 메시지를 보낸다. (ex. naver.com/news) naver.com가 DNS를 거쳐 naver의 ip주소로 변경되어 보내진다. (ex. 192.123.123/news) 192.123.123/news 정보가 웹 애플리케이션 서버를 거쳐 http 메시지로 변경된다. naver의 서블릿 컨테이너로 해당 http 메세지가 도착한다...
[Thymeleaf] BootStrap 템플릿 적용, 레이아웃 및 템플릿으로 나누기
오늘은 Thymeleaf에서 템플릿 조각, 레이아웃 나누기 기능을 공부해볼 예정이다. 목차 부트스트랩 템플릿 구하기 템플릿 조각 나누기 레이아웃 생성 템플릿 조각과 레이아웃이란? 먼저 적용을 하고, 무엇인지 알아보자. 부트스트랩 템플릿 구하기 부트스트랩에서 템플릿을 구해서 가져올 것이다. 먼저 아래의 링크로 가서 템플릿을 가져오자. https://startbootstrap.com/ Free Bootstrap Themes, Templates, Snippets, and Guides Start Bootstrap develops free to download, open source Bootstrap 5 themes, templates, and snippets and creates guides and tutori..
[Spring Boot] 파일 업로드
오늘은 Spring Boot를 이용하여 파일 업로드에 대해서 공부할 예정이다. 목차 HTML Form 전송 방식 File 도메인 생성 게시글 쓰기 Post Mapping 수정 파일 올리기 Service 작성 FileHanler 작성 HTML 폼 전송 방식 파일을 서버와 주고받기 위해서는 가장 먼저, HTML Form 전송 방식을 알아야 한다. 두 가지의 전송 방식이 있다. application/x-www-form-urlencoded multipart/form-data application/x-www-form-urlencoded - 해당 방식은 HTML 폼 데이터를 서버로 전송하는 가장 기본적인 방법이다. form 태그에 enctype 옵션을 넣어주지 않으면 브라우저는 헤더에 다음 내용을 추가한다. Con..
[React #4] JSX 문법 ㅣ UserState
이번에는 UserState에 대해서 공부를 해보자! 먼저 아래의 코드를 보자. let number = 1; const add = () =>{ number++; console.log('add', number); } return ( 숫자 : {number} 더하기 ); local:3000 으로 접속해서 "더하기" 버튼을 클릭하면 console로 number 값을 확인할 수 있다. 하지만 숫자: {number}인데 number 값을 +1을 해주어도 "숫자 : 1" 에서 1이 바뀌지 않는다 왜그럴까? 상태 값이 변경되었다는 신호를 보내야 한다. 리액트는 아무 변수나 상태 값으로 생각하지않는다. 그래서 "이 변수를 상태 값으로 설정할게!" 라고 해주어야 한다. 그리고 값이 변하면 "상태 값이 변경되었어!" 라고 ..