본문 바로가기
반응형

분류 전체보기1065

[Spring Boot] : 타임리프 - 속성 값 설정 타임리프 태그 속성(Attribute) 타임리프는 주로 HTML 태그에 th: 속성을 지정하는 방식으로 동작하며 이 속성이 기존 속성을 대체하고 기존 속성이 없다면 새로 만들게 된다. 위와 같은 속성을 넣어줬다면 타임리프 렌더링 후에는 name이 userA로 바뀌게 된다. - th:attrappend = - th:attrprepend = - th:classappend = 위에서부터 속성 값의 뒤에 값을 추가하고, 앞에 추가하고, class 속성에 자연스럽게 추가한다. 공백이 있으면 같이 추가된다. 예를 들어 첫 라인의 경우 공백이 붙어서 text large 이렇게 된다. - checked o - checked x - checked=false checked 속성에 대해서도 다루었다. HTML에서는 chec.. 2022. 2. 4.
[Spring Boot] : 타임리프 - 연산 타임리프 연산은 자바랑 크게 다르지 않다고 한다. HTML 안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의해서 사용하면 된다. Elvis 연산자 ${data}?: '데이터가 없습니다.' = ${nullData}?: '데이터가 없습니다.' = No-Operation ${data}?: _ = 데이터가 없습니다. ${nullData}?: _ = 데이터가없습니다. 다른 부분은 자바랑 거의 다른 점이 없고 조금 다른 점이 있는 부분만 가져와 봤다. Elvis 연산자는 조건식 편의 버전으로 보면 된다. ${data}안에 데이터가 없으면 ‘데이터가없습니다.’ 부분을 출력하게 된다. 아래는 데이터가 null 값이니까 데이터가 없습니다가 출력되게 된다. No-Operation은 _ 이렇게 언더바를 말한다... 2022. 2. 4.
[Spring Boot] : 타임리프 - 리터럴, Literals 리터럴은 소스 코드상 고정된 값을 말하는 용어라고 한다. 강의 자료에 따르면 “Hello”는 문자 리터럴, 10, 20 등은 숫자 리터럴이라고 한다. 타임리프에는 문자, 숫자, 불린(true, false), null 리터럴이 있다. 주의해야 하는 점으로는 타임리프에서 리터럴은 ‘ (작은 따옴표)로 감싸주어야 하는데 어느 정도는 지원을 해 준다. A-Z , a-z , 0-9 , [] , . , - , _ 정도는 공백 없이, 중요하다. 공백이 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해 작은 따옴표를 생략해서 작성할 수 있다. “hello Spring” 이렇게 작성하면 공백이 존재하므로 2개의 토큰으로 인식한다. “’hello Spring’” 이렇게 작성해야 하나의 토큰으로 인식하게 된다. 'hell.. 2022. 2. 4.
[Spring Boot] : 타임리프 - URL 링크 타임리프에서 URL을 생성할 때 @{...} 문법을 사용한다. basic url hello queryparam path variable path variable + query parameter 위에서 부터 단순한 URL, 쿼리 파라미터, 경로 변수, 경로 변수 + 쿼리 파라미터이다. 아래로 내려 갈 수록 나눠서 하게 되는데 이렇게 되면 링크 부분과 데이터 부분이 나누어져서 나중에 유지 보수하기 수월하다고 한다. 상대경로, 절대경로, 프로토콜 기준을 표한 할 수도 있다고 한다. 📝 ← 참고하자 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술을 참고하여 공부하였습니다. 2022. 2. 4.
[Spring Boot] : 타임리프 - 유틸리티 객체와 Java8 날짜 타임리프는 문자, 숫자, 날짜, URI 등 편리하게 다루는 유틸리티 객체를 제공한다. 강의 자료에 따르면 아래와 같다. #message : 메시지, 국제화 처리 #uris : URI 이스케이프 지원 #dates : java.util.Date 서식 지원 #calendars : java.util.Calendar 서식 지원 #temporals : 자바8 날짜 서식 지원 #numbers : 숫자 서식 지원 #strings : 문자 관련 편의 기능 #objects : 객체 관련 기능 제공 #bools : boolean 관련 기능 제공 #arrays : 배열 관련 기능 제공 #lists , #sets , #maps : 컬렉션 관련 기능 제공 #ids : 아이디 처리 관련 기능 제공, 뒤에서 설명 📝 ←타임리프 유틸.. 2022. 2. 4.
[Spring Boot] : 타임리프가 제공하는 기본객체, 편의객체 ${#request} ${#response} ${#session} ${#servletContext} ${#locale} 타임리프는 위와 같은 기본 객체를 제공하는데 request는 HttpServletRequest 객체가 그대로 제공되어 데이터 조회를 위해서는 request.getParameter(”data”)처럼 접근해야 한다. 이것을 좀 더 편하게 하기 위해 편의 객체도 제공한다고 한다. @GetMapping("/basic-objects") public String basicObjects(HttpSession session) { session.setAttribute("sessionData", "Hello Session"); return "basic/basic-objects"; } @Component(.. 2022. 2. 4.
[Spring Boot] : 변수 - SpringEL 타임리프에서 변수를 사용할 때는 변수 표현식을 사용하는데 이 표현식에는 SpringEL이라는 스프링이 제공하는 표현식을 사용할 수 있다. 변수 표현식은 ${,,,}이런 것을 말 한다. @Data static class User { private String username; public int age; public User(String username, int age) { this.username = username; this.age = age; } } 클래스를 따로 만들어 username, age를 파라미터로 갖는 생성자를 하나 만들어 주고 @Data 어노테이션을 사용해 주었다. User userA = new User("UserA", 10); User userB = new User("UserB", 20.. 2022. 2. 4.
[Spring Boot] : 타임리프 - Escape, Unescape public String textBasic(Model model) { model.addAttribute("data", "Hello Spring !"); return "basic/text-basic"; } 컨트롤러에서 model에 데이터를 담아서 html에서 값을 띄워준다. th:text 사용 컨텐츠 안에서 직접 출력하기 = [[${data}]] 이렇게 두 가지 방법을 통해 데이터를 출력해 줄 수 있다. 두번째 방법을 보면 [[...]] 이런 형식의 문법을 사용했는데 이런 형식의 문법을 Escape(이스케이프)라고 한다. HTML 문서는 와 같은 특수 문자를 기반으로 정의되는데 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이런 문자가 있는 것을 주의해야 한다. public String te.. 2022. 2. 4.
[Spring Boot] : 타임리프, thymeleaf 소개 공식 사이트: https://www.thymeleaf.org/ 공식 메뉴얼 - 기본 기능: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 공식 메뉴얼 - 스프링 통합: https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html 타임리프는 메뉴얼이 기본적으로 잘 되어 있으나 순서대로 보기엔 어렵다. 타임리프의 특징 3가지이다. 서버 사이드 HTML 렌더링(SSR) 네츄럴 템플릿 스프링 통합 지원 서버 사이드 렌더링 (SSR) 기술을 하나 쯤은 배워야 하는데 타임리프가 좋다. (JSP도 있다.) 타임리프는 HTML을 최대한 유지한다. 때문에 웹 브라우저에서 파일을 직접 열어도 내용 확.. 2022. 2. 4.
[프로그래머스] : 정수 제곱근 판별 파이썬 풀이 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 문제 설명 n은 1이상, 50000000000000 이하인 양의 정수입니다. 제한 사항 nreturn 121144 3-1 입출력 예 입출력 예#1 121은 양의 정수 11의 제곱이므로, (11+1)를 제곱한 144를 리턴합니다. 입출력 예#2 3은 양의 정수의 제곱이 아니므로, -1을 리턴합니다. 입출력 예 def solution(n): a = (n**0.5) if a % 1 == 0: answer = (a+1)**2 else: answer = -1 return answer a = (.. 2022. 2. 4.
[JavaScript 30일 챌린지] : 8일차 8일차에서는 그림판을 만들었는데 붓의 크기가 지정한 값 만큼 커졌다. 작아지고 색상도 자동으로 변경이 쭉 되도록 만들었다. canvas 요소는 웹 페이지에서 무언가 그릴 때 사용된다. getContext() 메서드를 호출해서 랜더링 컨텍스트와 그리기 함수들을 사용할 수 있다. 아래 canvas 튜토리얼을 통해 기능을 확인할 수 있다. 캔버스 튜토리얼 - Web API | MDN 2022. 2. 4.
[TIL] : 100 🎉 일일 배움을 위한 Today I Learned ! TIL 100 번째 TIL !! SpringBoot 김영한님 강의 MVC1 편을 완강했다. 강의 시간에 비해서 오래 걸렸지만 얻어가는 것도 많았다. 나중에 필요한 부분을 다시 듣지 않을까 싶다. 2022.02.03 - [Framework/Spring Boot] - [Spring Boot] : 상품 상세 페이지 타임리프 적용 및 목록으로 가기 구현 2022.02.03 - [Framework/Spring Boot] - [Spring Boot] : 상품 등록 처리 @ModelAttribute 사용하기 2022.02.03 - [Framework/Spring Boot] - [Spring Boot] : 상품 수정 구현하기 2022.02.03 - [Framework/.. 2022. 2. 3.
[Spring Boot] : RedirectAttributes 사용하기 리다이렉트를 사용하여 상품이 정상적으로 저장이 되었는지 확인하는 문구가 출력이 되도록 설정할 수도 있다. 내가 팀 프로젝트를 했을 떄에는 이것을 리다이렉트 JSP를 만들어 맵핑 리턴을 JSP로 보내고 JSP에서 JavaScript를 통해 alert를 통해 결과를 안내했는데 이번에는 페이지 자체에 안내가 생기도록 코드를 짜보는 시간을 보냈다. @PostMapping("/add") public String addItemV6(Item item, RedirectAttributes redirectAttributes) { Item savedItem = itemRepository.save(item); redirectAttributes.addAttribute("itemId", savedItem.getId()); red.. 2022. 2. 3.
[Spring Boot] : Post, Redirect, Get 사용하기 지금까지 강의를 따라하면서 만든 상품 등록 처리 컨트롤러에 심각한 문제가 있었다고 한다. 상품 등록을 완료하고 웹 브라우저의 새로고침 버튼을 눌러보면 상품이 중복해서 등록이 된다. 새로고침을 계속 해 보니까 ID 수가 계속 오른다.. 이 문제를 해결하는 강의였다. [출처] : springmvc1 강의자료 218 페이지 이런 문제가 생긴 이유를 그림으로 설명해 주었다. 웹 브라우저에서 새로 고침은 마지막으로 서버에 전송한 데이터를 다시 전송하는데 상품 등록 폼에서 데이터를 입력하고 저장을 선택하면 Post/add+상품 데이터를 서버로 전송하는데 여기서 새로고침을 하면 다시 전송을 하게 되고 그렇게 중복이 계속 되어 데이터가 쌓이게 되는 것이다. [출처] : springmvc1 강의자료 219 페이지 이 문.. 2022. 2. 3.
[JavaScript 30일 챌린지] : 7일차 constpeople= [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name: 'Lux', year: 2015 } ]; constcomments= [ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, { text: 'You are the best', id: 2039842 }, { text: 'Ramen is my fav food ever', id: 123523 }, { text: 'Nice Nice Nice!', id: 542328 } ]; constpeople와 constcomments에 대한 코드를 제공한.. 2022. 2. 3.
[Spring Boot] : 상품 수정 구현하기 상품 수정 구현을 해본다. @GetMapping("/{itemId}/edit") public String editForm(@PathVariable Long itemId, Model model) { Item item = itemRepository.findById(itemId); model.addAttribute("item", item); return "basic/editForm"; } 먼저 컨트롤러에 해당 코드를 입력해 준다. 수정에 필요한 정보를 조회하고 수정용 폼 뷰를 호출하게 된다. 상품 ID 앞에서 설정했던 타임리프를 사용하기 위해 선언하는 부분과 CSS를 가져오기 위해 사용한 부분은 적지 않았다. 상품이 수정되고 수정한 내용을 담은 model의 값을 가져올 수 있도록 th:value를 통해 값을 .. 2022. 2. 3.
[Spring Boot] : 상품 등록 처리 @ModelAttribute 사용하기 상품 등록 폼에서 상품을 등록하고 등록한 상품을 목록에서 확인할 수 있게 만들어 보았다. @PostMapping("/add") public String addItemV1(@RequestParam String itemName, @RequestParam int price, @RequestParam Integer quantity, Model model) { Item item = new Item(); item.setItemName(itemName); item.setPrice(price); item.setQuantity(quantity); itemRepository.save(item); model.addAttribute("item", item); return "basic/item"; } 기존에는 @RequestP.. 2022. 2. 3.
[Spring Boot] : 상품 상세 페이지 타임리프 적용 및 목록으로 가기 구현 @GetMapping("/{itemId}") public String item(@PathVariable Long itemId, Model model) { Item item = itemRepository.findById(itemId); model.addAttribute("item", item); return "basic/item"; } @pathVariable로 요청 값을 받아서 조회하고 model에 담아두고 뷰 템플릿을 호출해 준다. 타임 리프를 사용하기 위해 html 코드에 위 코드를 추가해 주고 동적 웹 페이지를 위해 th:href 를 사용해서 경로를 잡아준다. 상품 ID 제품을 상세 조회 했을 때 등록한 정보에 맞게 나오게 하기 위해 각 표시 부분에 th:value를 추가해 주준다. 예를 들어 상품.. 2022. 2. 3.
[WebStorm] : 웹 스톰 라이브 서버(Live Server) 적용하기 스터디에서 동혁쌤이 JS 공부를 한다고 하니 Live Server라는 것을 알려주셔서 적용해 보기로 했다. 처음에는 VSC가 그냥 템플릿을 다운로드만 해서 사용하면 되서 간편하니 그것을 추천해 주셨는데 개인적으로 VSC를 사용해 보니 뭔가 잘 안 맞는.. 불편함이 있어서 WebStorm을 사용하기로 했다. Node.js Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 우선, Node.js에 들어가서 LTS 버전을 다운로드 해주었다. node -v 명령 프롬프트에서 명령어를 통해 정상적으로 다운이 되었는지 확인을 해본다. 정상적으로 다운이 되었다면 버전이 뜬다. 이제 npm을 설치해 주어야 .. 2022. 2. 3.
[질문 노트] : Model을 사용하는 이유에 대해서 강의를 보다 Model을 사용해야 하는 이유에 대해 질문하는 사람이 있어서 답변을 확인해 보고 유익해서 메모해 뒀었다. “애플리케이션 데이터를 뷰로 전달해야 하는 일이 많다.” → “개발자가 데이터를 뷰로 전달하는 기능을 구현해도 되지만 이런 부분을 내부적으로 하여 추상화시킨 것이 바로 Model이다.” → “핸들러의 파라미터에 Model을 추가하고 model에 데이터를 저장하면 반환되는 뷰에서 해당 데이터를 사용할 수 있게 된다.” 참고 : 인프런 김영한 MVC1편 강의 어느 게시글의 답글 중.. 2022. 2. 3.
[TIL] : 99 일일 배움을 위한 Today I Learned ! JavaScript 30일 챌린지 6일차를 완료했다. 2022.02.02 - [Project/JavaScript 30일 챌린지] - [JavaScript 30일 챌린지] : 6일차 완료 SpringBoot 김영한님 강의에서 mvc1탄을 마지막으로 간단한 프로젝트를 만들어 보는 것을 진행하고 있는 중이다. 2022.02.02 - [Framework/Spring Boot] - [Spring Boot] : 요구사항에 맞춰 상품 도메인을 개발하고 테스트 코드를 작성하기 2022.02.02 - [Framework/Spring Boot] - [Spring Boot] : thymelef, 타임리프 간단 사용법 질문 노트 오랜만에 질문 노트를 작성했다. 따로 궁금해서 .. 2022. 2. 2.
반응형

티스토리툴바