개발자 성장일기

레이아웃 => 화면에 요소를 배치하는 일 헤드-푸터 레이아웃 => 상단 헤드에 사이트를 안내하는 네비게이션을 넣고 하단 푸터에 사이트 정보를 넣는 기본적인 배치 => 헤드와 푸터 사이에 핵심 내용인 콘텐트를 배치함 /hi 페이지에 헤더-푸터 레이아웃 적용하기 부트스트랩 홈페이지(https://getbootstrap.kr/) 접속하기 V5.0.2 선택 후 스타터 템플릿 복사 > greetings.mustache 파일 내용 지운 후 붙여넣기 greetings.mustache 페이지의 본문 영역을 3개의 레이아웃으로 나눠기(header 부분/ content 부분 / footer 부분) 부트스트랩 홈페이지(https://getbootstrap.kr/) 에 'navbar' 입력 후 뜨는것 선택 후 코드 복사 복사..

MVC의 실행흐름 => 컨트롤러가 클라이언트의 요청을 받고, 뷰가 최종 페이지를 만들고, 모델이 최종 페이지에 쓰일 데이터를 뷰에 전달 localhost:8080/hi 의 실행과정 이 파일이 컨트롤러임을 선언 클라이언트로부터 "/hi"라는 요청을 받음 "/hi"라는 요청을 받음과 동시에 niceToMeetYou()메서드를 수행 뷰 템플릿 페이지에서 사용할 변수를 등록하기 위해 모델 객체를 매개변수로 가져옴 모델에서 사용할 변수를 등록 변수값에 따라 서로 다른 뷰 템플릿 페이지가 출력 메서드 수행 결과로 greetings.mustache 파일을 변환 서버가 templates 디렉터리에 있는 해당 뷰 템플릿 페이지를 찾아 웹 브라우저로 전송 위와 같은 방법으로 " localhost:8080/bye" 작성(2..

MVC 패턴을 활용해 뷰 템플릿 만드는 순서 1. Mustache 파일 만들기 2. Controller 만들고 실행하기 3. 모델 추가하기 1. Mustache 파일 만들기 src>main>resources>templates(우클릭)>New>File 후 "파일명.mustache"로 파일 만들기 Install Handlebars/Mustache plugin을 클릭해 머스테치 플러그인을 설치하기 doc를 친 후 tab키 누를 시 기본 HTML코드가 작성됨 본문()에 원하는 글 적기() 2. Controller 만들고 실행하기(Mustache에서 만든 템플릿을 보이게 하기 위함) src>main>java>프로젝트(com.example.firstproject)(우클릭)>New>package 후 패키지 만들기 패..

뷰 템플릿 => ppt템플릿과 비슷함 / 웹 사이트에서 변수의 값에 따라 일정부분만 값이 달라지는 화면이 있을 경우 프론트엔드로는 각 변수에 해당하는 값을 모두 설정해주어야 하지만 뷰 템플릿을 이용하면 변수의 값만 바꿔가며 사용가능 MVC 패턴 M(Model) : 데이터를 관리하는 역할 V(View) : 웹 페이지를 보여주는 화면 C(Controller) : 클라이언트의 요청에 따라 서버에서 이를 처리하는 역할 이렇듯 웹 화면을 보여주기 위해 역할을 나누어 관리하는 기법