Isaac Kim Dev Blog

Web 구성에 대한 기초 지식 (HTML, CSS, Javascript) 오늘은 Naver의 과거 N드라이브, 현 MYBOX를 정리하려고 한다. 2017년에 처음 웹을 공부했던 자료들이 담겨 있었는데 공부했던 파일은 삭제하고 블로그 포트폴리오로 넣기 위해 작성한다. 내용은 조금씩 수정을 하면서 작성했다. 예를 들면 2017년 당시에는 VS CODE가 핫한 텍스트 에디터였나? 싶은데 지금은 핫한 텍스트 에디터이기 때문에 다른 에디터 내용을 빼고 VS CODE를 언급한다던지 등의 내용 수정은 있을 것이다. Web에 대한 기초 지식 사용자가 마주하는 웹은 보통 다음과 같은 기술로 구성되어 있다. 웹의 3요소 HTML, CSS, Javascript 1. HTML : Hyper Text Markup Languag..

네이버 블로그에 작성한 글 티스토리 블로그로 옮기기 부제 : 네이버 블로그 정리하기 # 블로그 시작 처음 시작한 블로그는 네이버였다. 처음에는 공부 목적으로 블로그를 시작했다. 블로그를 하던 중 수익을 내고 싶다는 목적이 생기면서 티스토리를 시작했고, 블로그가 포트폴리오가 된다면서 퀄리티를 생각하게 되었다. 어느덧 네이버 블로그에 글이 750개 이상 쌓였다. 티스토리 블로그 글은 350개 이상 되어서 1000개 이상의 글을 썼다. 그런데 지금 이 글을 쓰는 이유는 블로그를 포트폴리오라고 생각했을 때 내 생각이 잘 들어간 글을 써야 도움이 되고 힘이 되는 포트폴리오라고 생각해서다. 네이버에 글을 많이 쓰긴 했지만 포트폴리오로 내세우기에는 부끄러웠다. 그래서 네이버 블로그를 정리하려고 한다. 정리는 글을 수..

[Thymeleaf] list 반복 출력하기 이번 내용은 이전 글에 이어서 작성하는 것입니다. 이전 글 2023.03.01 - [Java & Spring/Thymeleaf] - [Thymeleaf] checkbox, th:checked 배열 혹은 리스트로 받은 데이터를 뷰 페이지에서 반복해서 출력하는 방법을 알아보겠습니다. 이전 글에서는 checkbox에서 선택한 값을 List에 담아서 View로 내보내는데요. th:each 타임리프 속성을 가지고 List의 값을 반복해서 출력할 수 있습니다. html에 Thymeleaf 속성을 아래와 같이 작성합니다. java의 확장 for문과 비슷한 형태로 사용됩니다. 두 번째 argument idx는 인덱스(index)에 관한 정보가 담겨 옵니다. 인덱스에 대한 상..

[Thymeleaf] checkbox, th:checked 타임리프에서 체크박스 데이터를 넘기는 방법에 대해 알아보겠습니다. 먼저 html 파일 상단에 타임리프 확장 링크 속성 추가해 주세요. th:checked 속성을 사용하여 체크박스에 체크 표시를 할 수 있습니다. th:checked의 값이 true 이면 html 파일에 checked 속성이 나타나고, false 이면 checked 속성이 없습니다. 다음으로 checkbox 데이터를 넘겨받고 처리하는 방법에 대해서 알아보겠습니다. html form에서 input name이 같은 checkbox의 값은 문자열 배열, 리스트로 값을 넘깁니다. Controller에서 Get, Post 요청을 처리하는 Method를 작성합니다. Post에서 볼 부분은 파라..

[Thymeleaf] th:block 타임리프 임시 태그 이전 글들에서 봐왔듯이 타임리프의 다양한 표현식을 사용하려면 html 태그를 써야 했습니다. 타임리프의 th:block이라는 속성, 태그를 사용하여 html 태그를 대체해 타임리프(thymeleaf) 속성들을 사용할 수 있게 됩니다. 그리고 이 th:block은 html 태그는 아니기 때문에 태그로 html 태그로 랜더링 되지는 않아서 th:if 등과 함께 사용해 조건에 따라 영역 자체를 보이거나 보이지 않거나 할 수 있습니다. 타임리프 th:block 을 사용해 보겠습니다. Controller에서는 페이지로 account 가 '회원'인 데이터만 전송하였습니다. 그다음으로 볼 것은 html 코드입니다. th-block.html 코드는 다음과 같습니..

[Thymeleaf] 다양한 th: 표현과 #strings 유틸리티 사용할 Thymeleaf 표현식과 strings 유틸리티는 다음과 같다. Thymeleaf 표현식 th:if th:text th:unless th:text thymeleaf Strings 유틸리티 #strings.equals #strings.isEmpty #strings.contains 먼저 Controller 를 보면 msg 값만 던져준다. msg 값은 'Hello world' 인 것을 알 수 있다. 그리고 다음 html 코드를 본다. string-util.html 파일의 코드이다. 첫 번째 th:if 는 참인 경우 태그의 내용을 출력한다. #strings.equals 함수는 두 개의 argument의 값이 같은지를 비교 후 boole..

[Spring Boot | Thymeleaf] 데이터 여러 개 전송받기 (@RequestParam, dto, @ModelAttribute) 이전 글 2023.02.13 - [Java & Spring/Spring Boot] - [Spring Boot | Thymeleaf] Form 데이터 전송받기 2023.02.10 - [Java & Spring/Spring Boot] - [Spring Boot | Thymeleaf] @PathVariable url 경로의 값을 변수로 받기 2023.02.08 - [Java & Spring/Spring Boot] - [Spring Boot | Thymeleaf] 타임리프 th:utext="" 2023.02.08 - [Java & Spring/Spring Boot] - [S..

[Spring Boot | Thymeleaf] Form 데이터 전송받기 웹 페이지에서 서버로 데이터를 전송하고, 서버는 전송받은 데이터를 가공하여 저장하거나 처리하는 등의 작업을 수행합니다. 이번 글에서는 html 페이지의 Form 태그를 사용해서 서버로 데이터를 전송하고, 데이터를 전송받은 서버는 다시 html 페이지로 데이터를 내보내는 작업을 해보면서 클라이언트와 서버 간의 동작을 살펴보겠습니다. Index 1. Controller get, post 두 개의 메서드 구현 2. html form tag 1. Controller get, post 두 개의 메서드 구현 Controller에서는 get, post 두 개의 방식의 메서드를 구현합니다. @RequestMapping 어노테이션의 속성으로 valu..

[Spring Boot | Thymeleaf] @PathVariable url 경로의 값을 변수로 받기 이전 글 2023.02.08 - [Java & Spring/Spring Boot] - [Spring Boot | Thymeleaf] 타임리프 th:utext="" 2023.02.08 - [Java & Spring/Spring Boot] - [Spring Boot | Thymeleaf] Model, ModelAndView와 타임리프(Thymeleaf) 2023.02.06 - [Java & Spring/Spring Boot] - [Spring Boot | Thymeleaf] 타임리프 사용방법 및 시작하기 url 구조를 보면 다음과 같이 https://lifere.tistory.com/123 경로에 값이 표..

[Spring Boot | Thymeleaf] 타임리프 th:utext="" 이전 글 2023.02.06 - [Java & Spring/Spring Boot] - [Spring Boot | Thymeleaf] 타임리프 사용방법 및 시작하기 2023.02.08 - [Java & Spring/Spring Boot] - [Spring Boot | Thymeleaf] Model, ModelAndView와 타임리프(Thymeleaf) 서버에서 html태그를 사용한 문자열을 전달 받을 수도 있습니다. 이전에 사용했던 th:text로 html태그가 담긴 데이터를 표현하면 어떻게 될까요? 빠르게 결과부터 보겠습니다. th.text로 표현했을 때의 결과 Controller와 html파일을 생성하여 세팅해줍니다. Exam..