본문 바로가기
반응형

분류 전체보기1065

[Spring Boot] : 타임리프 체크 박스 단일(1) 타임리프 체크 박스 단일(1) HTML에서 이런 식으로 보통 체크 박스를 사용한다. 체크 박스를 체크하게 되면 open=on으로 들어오고 스프링에서 on을 true타입으로 변환해준다. 이때 스프링 타입 컨버터가 작동하여 이렇게 되는 것인데 이것은 다른 강의에서 다룬다고 한다. 문제는 체크 박스를 체크하지 않았을 때 발생한다. 체크 박스를 체크하지 않고 폼을 전송하게 되면 open이라는 필드 자체가 서버로 전송되지 않는다. 즉, 아무런 값이 들어오지 않아 이게 어떻게 된 것인지 알 수가 없는 것이다. 값 또한 찍어보면 null 값이 나타나는데 이 경우 문제가 생길 확률이 있다. 이걸 해결하는 방법도 강의에서 알려주었다. 체크 해제를 인식하기 위해 히든 필드를 넣어주는 것이다. 이렇게 되면 체크 박스를 체크.. 2022. 2. 8.
[Spring Boot] : 타임리프 입력 폼 처리하기 th:object와 th:field 사용 타임리프 입력 폼 처리 폼 코드를 타임리프의 추가 기능을 통해 효율적으로 개선할 수 있다. 강의에서 몇 가지 주요 코드를 사용했는데 아래와 같다. th:object 커맨드 객체를 지정한다. *{...}} 선택 변수식으로 th:object에서 선택한 객체에 접근한다. 아래 예시에서 보면 이해가 편하다. th:field HTML 태그의 id, name, value 속성을 자동 처리해준다. model.addAttribute("item", new Item()); 먼저 컨트롤러에서 객체를 넘겨준다. 폼 태그에 th:object 속성을 사용해 model에서 전달한 객체의 이름을 넣어주고 사용하게 된다. 이렇게 줄여 쓸 수 있다. id를 지우면 상관이 없는 빨간 줄이 뜨기 때문에 강사님이 남겨둔 것 같다. 원래는”$.. 2022. 2. 8.
[Spring Boot] : 타임리프 스프링 통합 메뉴얼 및 스프링에서 사용하기 타임리프 스프링 통합 타임리프의 2가지 메뉴얼이다. 📝 ← 기본 메뉴얼 📝 ← 스프링 통합 메뉴얼 타임리프는 스프링 없이도 동작하고 스프링과 통합을 위해 편의 기능을 더 제공하기도 한다. 강의 자료에 따르면 스프링 통합으로 추가되는 기능들은 SpringEL 문법, 스프링 빈 호출 지원, 폼 관리를 위한 추가 속성, 폼 컴포넌트 기능 등 여러 가지를 지원한다. 📝, 📝 ← 타임리프 템플릿 엔진을 스프링 빈에 등록하고, 타임리프용 뷰 리졸버를 스프링 빈으로 등록하는 방법이다. 다른 방법으로는 아래와 같다. implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' build.gradle에 위 코드를 넣으면 스프링 부트가 자동으로 설정해 준.. 2022. 2. 8.
[Git] : Git Hub 잔디가 안 심어지는 현상 검정색 배경은 내가 로그인한 계정으로 본 나의 깃 허브 흰색 배경은 로그인하지 않은 채로 본 나의 깃 허브 나는 하루 공부한 코드를 보통 깃 허브에 올리는데 오늘 얼마나 올렸나 확인을 해보니 가득 찍혀 있었다. 이렇게 내 계정으로 로그인한 상태에서는 잘 찍히는데 다른 사람이 접속해서 볼 때에는 좀 달랐다. 시크릿 모드로 접속해서 확인해 보니.. ??.. 이렇게 듬성듬성 무언가가 빠져있는 것을 확인할 수 있다. 난 분명 다 찍었고 커밋 메시지도 확인할 수 있는데 뭐가 문제인가 했더니 private로 설정한 저장소에 올린 코드는 저렇게 보이지 않는 것이였다. 그래도 뭔가 눈에 보이면 좋을 것 같아서 찾아보니 보이게 하는 방법이 있었다. 잔디가 보이는 창에서 위 사진 처럼 설정해 주면 된다. 설정을 완료하면 .. 2022. 2. 8.
[TIL] : 104 일일 배움을 위한 Today I Learned ! Spring Boot 스프링 부트 김영한님 강의를 들으면서 코딩하고 복습하면서 노션에 기록하고 해당 내용을 블로그에 복붙으로 옮겼다. 2022.02.07 - [Framework/Spring Boot] - [Spring Boot] : 타임리프 반복문 사용 2022.02.07 - [Framework/Spring Boot] - [Spring Boot] : 타임리프 if, unless, switch문 사용 2022.02.07 - [Framework/Spring Boot] - [Spring Boot] : 주석 2022.02.07 - [Framework/Spring Boot] - [Spring Boot] : block 2022.02.07 - [Framework/Sp.. 2022. 2. 7.
[Spring Boot] : 타임리프 템플릿 레이아웃(2) 타임리프 - 템플릿 레이아웃(2) 앞에서 사용한 레이아웃을 메인 페이지 컨텐츠 메인 페이지 포함 내용 title과 section을 layout에 담아 layoutFile.htm로 전달해 주면 위에 짠 레이아웃 코드에 적용되어 대체된 상태로 출력되게 된다. 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술을 참고하여 공부하였습니다. 2022. 2. 7.
[Spring Boot] : 타임리프 템플릿 레이아웃(1) 타임리프 - 템플릿 레이아웃(1) 이번에는 코드 조각을 레이아웃에 넘겨 사용하는 방법에 대해 공부한다. 강의 자료에서 예를 잘 들어 주었는데 layoutMain.html이다. 여기에서 넘겨주는 것이다. template/layout/base :: common_header(~{::title},~{::link}) 이 라인이 핵심인데 common_header를 불러주면서 옆에 title와 link를 담아 전달한다. 그러면 base.html에서 받고 렌더링하고 추가되는 부분도 맞추어 값을 전달하게 된다. 이렇게 되면 메인 타이틀이 전달한 부분으로 교체되고 공통 부분은 유지되며 추가 부분에 전달한 들이 포함되는 것을 확인할 수 있다. 즉, 레이아웃 개념을 두고 그 레이아웃에 필요한 코드 조각을 전달해 완성한다고 보.. 2022. 2. 7.
[Spring Boot] : 타임리프 템플릿 조각 사용 타임리프 - 템플릿 조각 웹 페이지 개발 시 여러 페이지에서 공통으로 겹치는 부분이 있다. 예를 들면 상단, 하단 등 이런 부분을 코드 복사로 사용하면 오류가 날 수도 있고 비효율적인데 이런 것을 해결하기 위해 타임리프에서 템플릿 조각과 레이아웃 기능을 지원한다. 그 중 템플릿 조각을 먼저 공부해 본다. 먼저 footer.html에 위 코드를 작성해 주었다. th:fragment 를 통해 사용할 수 있다. 이름을 먼저 copy로 정해주었다. 부분 포함 insert 부분 포함 replace 부분 포함 단순 표현식 fragmentMain.html에는 위 코드를 작성해 주었다. ~{template/fragment/footer :: copy} 이 코드를 보면 template/fragment/footer.html.. 2022. 2. 7.
[Spring Boot] : 타임리프 JavaScript inline 사용 타임리프 - JavaScript 인라인 타임리프에서 편리하게 JavaScript를 사용할 수 있는 인라인 기능을 제공한다. 위 코드처럼 사용하면 JS안에서도 each사용도 가능하다. 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술을 참고하여 공부하였습니다. 2022. 2. 7.
[Spring Boot] : 타임리프 block 사용 타임리프 - block 타임리프는 속성으로 보통 제공되지 태그로 작동하지는 않는데 타임리프에서 제공하는 태그가 있다. 바로 block 태그인데 이 태그는 each를 통해 반복할 때 div 두 개를 반복해야 하는 상황에 사용할 수 있다. 사용자 이름1 사용자 나이1 요약 보면 div 두개가 있지만 each를 div에 주지 않고 th에 주어 반복한다. 결과도 출력해 보면 두 div가 반복되는 것을 확인할 수 있다. block 태그는 렌더링 시 제거가 된다. 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술을 참고하여 공부하였습니다. 2022. 2. 7.
[Spring Boot] : 타임리프 주석 종류 및 사용 방법 타임리프 - 주석 타임리프의 주석 종류에 대해 공부했다. 주석 쓰는 방법이 생각보다 다양했다. HTML 주석이다. 흔히 사용하던 방식이다. html data 타임리프 주석인데 위에는 단일 라인 아래는 여러 라인을 주석처리할 때 사용한다. 특이한 점으로는 아예 렌더링 자체를 하지 않아서 소스보기를 눌러도 표시되지 않는 특성이 있다. 이것도 타임리프 주석인데 프로토타입 주석이라고 불린다. 주석 형태를 보면 양 끝에는 HTML 주석이 들어가있고, 그 앞에 /*/가 있는 형식이다. HTML에서는 주석으로 나타나고 타임리프에서는 실행이 되는 특이한 주석인데 잘 안 쓰인다고 한다. 보통 가운데 있는 주석 사용법을 많이 사용한다고 한다. 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술을 참고하여 공부하였습니다. 2022. 2. 7.
[Spring Boot] : 타임리프 if, unless, switch문 사용 타임리프 - if, unless, switch 조건식과 조건식의 반대인 unless에 대해 공부하고 switch도 같이 알아봤다. 1 username 0 if는 Java에서 많이 사용하던 것과 똑같다. 참일 경우에 True 값을 갖지만 unless는 if문의 반대 개념으로 이해하면 좋다. 거짓일 경우 True 값을 갖게 된다. 하지만 Java와 다른 점도 있다. 타임리프는 해당 조건이 false인 경우엔 태그 자체를 렌더링 하지 않는다. 위에 태그가 거짓일 경우에 태그 자체가 사라지게 된다. 1 username 10살 20살 기타 switch도 Java에서 사용했던 부분과 같다. 마지막에 *값이 들어갔는데 *는 만족하는 조건이 없을 떄 사용하는 디폴트 값이다. 스프링 MVC 2편 - 백엔드 웹 개발 활용.. 2022. 2. 7.
[Spring Boot] : 타임리프 반복문 사용 타임리프 - 반복 반복을 사용하기 위해 each를 사용한다. private void addUsers (Model model) { List list = new ArrayList(); list.add(new User("UserA", 10)); list.add(new User("UserB", 20)); list.add(new User("UserC", 30)); model.addAttribute("users", list); } List에 유저들을 담아두고 html로 넘겨준다. username username 0 th:each 라인을 보면 ${users}의 값을 꺼내어 user 변수에 담아 태그를 반복 실행하게 된다. list 뿐만 아니라 배열이나 Map도 사용이 가능한다. Map은 Map.Entry에 담긴다고 .. 2022. 2. 7.
[코딩&리뷰] : 스터디 5회차 스터디 5회차 생각해 보니 스터디를 진행하고 적는 스터디 일지를 쓰는 것을 깜빡해서 뒤늦게 적는다.. 스터디 5회차는 설이 껴있어서 금요일로 시간을 바꿔 진행했다. | 2월 2일 수 -> 2월 2일 금 | 스터디 날 한 쌤은 회사일이 바쁘셔서 아쉽게 참여를 못 하셨고 다른 쌤들과 마저 스터디를 진행했다. 설이라 그런지 공부한 내용이 다들 평소와 같지는 않았지만 오랜만에 쉬다 와서 그런지 표정들이 밝아 보였다. 각자 공부한 내용을 노션에 기록해 서로 공유해 발표하고 하루 목표를 세워 달성하기 위해 노력했다. 나는 궁금했던 내용 중 프로젝트 폴더 구조를 어떻게 하는 게 좋을지에 대해 알게 된 점을 공유하면 좋을 것 같아서 해당 내용을 간단하게 설명해 주었다. 2022.02.02 - [노트/질문 노트] - [.. 2022. 2. 7.
[JavaScript 30일 챌린지] : 11일차 const player = document.querySelector('.player'); const video = player.querySelector('.viewer'); const progress = player.querySelector('progress'); const progressBar = player.querySelector('.progress__filled'); const toggle = player.querySelector('.toggle'); const skipButtons = player.querySelectorAll('[data-skip]'); const ranges = player.querySelectorAll('.player__slider'); function togglePlay(.. 2022. 2. 7.
[프로그래머스] : 정수 내림차순으로 배치하기 파이썬 풀이 정수 내림차순으로 배치하기 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 문제 설명 n은 1이상 8000000000 이하인 자연수입니다. 제한 조건 nreturn 118372873211 입출력 예 def solution(n): aList = list(str(n)) aList.sort(reverse = True) answer = int("".join(aList)) return answer 우선 n의 값이 정수로 주어지기 때문에 문자값으로 바꿔서 aList에 담아준다. aLIst에서 sort를 통해 내림차순 정렬을 해준다. answer에 담아 리턴을 해야 하므로.. 2022. 2. 7.
[TIL] : 103 일일 배움을 위한 Today I Learned ! JavaScript 30일 챌린지 JS 30일 챌린지 오늘도 달성했다. 2022.02.06 - [Project/JavaScript 30일 챌린지] - [JavaScript 30일 챌린지] : 10일차 2022. 2. 6.
[JavaScript 30일 챌린지] : 10일차 체크 박스를 만들어서 체크가 되면 선이 그어지도록 만들었다. 이런식으로 작동하게 된다. 2022. 2. 6.
[TIL] : 102 일일 배움을 위한 Today I Learned ! JavaScript 30일 챌린지 오늘 9일차를 마저 진행했다. 요즘 잠이 잘 안 와서 늦게 자다보니.. 일 가는 날은 피곤해서 공부를 길게 못 하겠다. 오늘은 짧게 하고 휴식 타임을 가지고 일요일 잘 보내고 월요일부터 다시 달릴 준비를 한다. 2022.02.05 - [Project/JavaScript 30일 챌린지] - [JavaScript 30일 챌린지] : 9일차 2022. 2. 5.
[JavaScript 30일 챌린지] : 9일차 // Regular console.log('hello'); // Interpolated console.log('Hello I am a %s string!', '💩') // Styled console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow:10px 10px 0 blue') // warning! console.warn('OH Nooo'); // Error :| console.error('shit!'); // Info console.info('Crocodiles eat 3~4 people per year'); // Testing const p = document.querySelector('p'); console.a.. 2022. 2. 5.
[TIL] : 101 일일 배움을 위한 Today I Learned ! JavaScript 30일 챌린지 오늘도 JS 30일 챌린지를 완료했다. 2022.02.04 - [Project/JavaScript 30일 챌린지] - [JavaScript 30일 챌린지] : 8일차 Spring Boot 타임리프에 관해서 공부를 했다. 2022.02.04 - [Framework/Spring Boot] - [Spring Boot] : 타임리프, thymeleaf 소개 2022.02.04 - [Framework/Spring Boot] - [Spring Boot] : 타임리프 - Escape, Unescape 2022.02.04 - [Framework/Spring Boot] - [Spring Boot] : 변수 - SpringEL 2022.0.. 2022. 2. 4.
반응형

티스토리툴바