[Spring/Thymeleaf] 타임리프로 팝업창 띄워보기 (feat. div 수직 중앙 정렬) siso 프로젝트를 진행하기 위해 관리자는 웹으로 접근하도록 하기 위해 타임리프를 통해 html을 짜야 했다. 근데 1학년 때 html을 접해보고 그 뒤로 아예 접해보지 못해 너무 어려웠다.. 오늘은 타임 9hyuk9.tistory.com 오늘 해볼 것은 자바스크립트를 사용하여 부모 창에서 자식 창을 띄우고 자식 창 데이터를 부모 창으로 보내보자! 먼저 완성된 모습은 다음과 같다. 동사무소 찾기를 누르면 자식 창을 띄운 후 동사무소를 선택하면 이렇게 기입이 된다. 그러면 일단 어떻게 하는지 알아보자! [부모 창] 자식 창을 띄우는 JS 함수 window.onload = function(){ document...
siso 프로젝트를 진행하기 위해 관리자는 웹으로 접근하도록 하기 위해 타임리프를 통해 html을 짜야했다. 근데 1학년 때 html을 접해보고 그 뒤로 아예 접해보지 못해 너무 어려웠다.. 오늘은 타임리프에서 팝업창을 통해 동사무소 목록을 띄워볼 것이다. 생각보다 간단하다. html에서 처리해주면 된다. 동사무소 찾기 나는 타임리프를 쓰기 때문에 th:onclick을 통해 어디 주소로 갈 것인지 지정해주면 된다. 추가적으로 div class에서 가운데 정렬 align-items-center만 넣어주면 된다. 실행 결과 이렇게 팝업창이 뜨게 된다! 혹시 부모 창에서 자식 창을 띄워 데이터를 서로 주고받으려면 아래의 포스팅을 참고해주세요! [Thymeleaf/JS] 부모 창에서 자식 창을 띄우고, 자식 창..
[본 포스팅은 스프링 DB 1편 - 데이터 접근 핵심 원리 편을 기반으로 작성하였습니다.] 스프링 DB 1편 - 데이터 접근 핵심 원리 - 인프런 | 강의 백엔드 개발에 필요한 DB 데이터 접근 기술을 기초부터 이해하고, 완성할 수 있습니다. 스프링 DB 접근 기술의 원리와 구조를 이해하고, 더 깊이있는 백엔드 개발자로 성장할 수 있습니다., - 강의 www.inflearn.com 트랜잭션이란? 트랜잭션이란 더 이상 나눌 수 없는 가장 작은 하나의 단위를 의미한다. 상황 1: 원자성(Atomicity)) 만약 A 사용자가 B 사용자에게 5000원을 송금한다면? A 사용자 계좌 5000원 감소 B 사용자 계좌 5000원 증가 위처럼 2가지의 작업이 일어나게 되는데, 만약 2번에서 오류가 발생하였을 경우 트..
[본 포스팅은 스프링 DB 1편 - 데이터 접근 핵심 원리 편을 기반으로 작성하였습니다.] 스프링 DB 1편 - 데이터 접근 핵심 원리 - 인프런 | 강의 백엔드 개발에 필요한 DB 데이터 접근 기술을 기초부터 이해하고, 완성할 수 있습니다. 스프링 DB 접근 기술의 원리와 구조를 이해하고, 더 깊이있는 백엔드 개발자로 성장할 수 있습니다., - 강의 www.inflearn.com 데이터베이스 커넥션을 획득할 때는 복잡한 과정을 거치게 된다. 간단히 말해 TCP 구조다 보니 3 way handshake를 거쳐 DB의 ID/PW 인증과 내부에 DB 세션을 생성하고... 그 외에 많은 과정을 거친다. 이렇게 커넥션 풀을 사용하지 않고 하나의 커넥션만으로 DB에 접근하여 쿼리문을 전송하게 되면 사용자에게 느린..
[본 포스팅은 스프링 MVC 2편 백엔드 웹 개발 핵심 기술 편을 기반으로 작성하였습니다.] 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의 웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있 www.inflearn.com 인터셉터란? 웹과 관련된 공통 관심 사항을 효과적으로 해결할 수 있는 기술이다. 즉, 인터셉터의 뜻처럼 사용자로부터 서버에 들어온 요청 객체가 핸들러까지 가기 전에 개발자가 추가적인 작업을 할 수 있다. 이 포스팅에서는 로그인이 되어 있지 않은 사용자가 상품에 대한 요청을 할 때 로그인 페이지로 돌려보내는 작업을 해볼..
[본 포스팅은 스프링 MVC 2편 백엔드 웹 개발 핵심 기술 편을 기반으로 작성하였습니다.] 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의 웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있 www.inflearn.com 웹사이트에 로그인을 하게 되면 로그인이 유지된 상태로 서비스를 이용할 수 있어야 한다. 그리고 이용할 수 있게 해주는 것이 쿠키이다. 하지만 쿠키를 사용해서 로그인 Id를 전달하는 쿠키에는 보안 문제가 있다. 쿠키 값은 임의로 변경할 수 있다. 쿠키에 보관된 정보는 훔쳐갈 수 있다. 해커가 쿠키를 한번 훔쳐가면 평생 ..
[본 포스팅은 스프링 MVC 2편 백엔드 웹 개발 핵심 기술 편을 기반으로 작성하였습니다.] 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의 웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있 www.inflearn.com [Spring] Bean Validation이란? / 사용해보기 [본 포스팅은 스프링 MVC 2편 백엔드 웹 개발 핵심 기술 편을 기반으로 작성하였습니다.] 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의 웹 애플리케이션 개발에 필요한 모든 웹 기술 9hyuk9.tistory.com 이 게시글에서..
[본 포스팅은 스프링 MVC 2편 백엔드 웹 개발 핵심 기술 편을 기반으로 작성하였습니다.] 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의 웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있 www.inflearn.com 사용자에게 서비스를 제공할 때 검증은 굉장히 중요한 부분이다. 클라이언트에서 값에 대한 검증이 이루어져야 하고 서버에서도 마찬가지로 검증이 이루어져야 한다. (이유는 클라이언트에서 값을 조작하여 보낼 수 있기 때문이다.) 기존의 검증의 로직은 다음과 같다. //검증 로직 if (!StringUtils.hasText(i..
[본 포스팅은 스프링 MVC 1편 백엔드 웹 개발 핵심 기술 편을 기반으로 작성하였습니다.] 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의 웹 애플리케이션을 개발할 때 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. 스프링 MVC의 핵심 원리와 구조를 이해하고, 더 깊이있는 백엔드 개발자로 성장할 수 있습니다., - www.inflearn.com MVC 패턴을 알아보기 전에 왜 MVC가 나왔는지 알아보자. - MVC 패턴 이전 - 너무 많은 역할 기존의 서블릿이나 JSP로 비즈니스 로직과 뷰 렌더링까지 처리하게 되면 너무 많은 역할을 하게 되고 유지보수가 어려워진다. (하나의 기능을 수정하려면 여러 부분에서 수정이 필요함 심지어 코드도 너무 길어 가독성이 어려움) ..
[본 포스팅은 인프런 스프링 핵심 원리 - 기본 편을 기반으로 작성하였습니다.] 스프링 핵심 원리 - 기본편 - 인프런 | 강의 스프링 입문자가 예제를 만들어가면서 스프링의 핵심 원리를 이해하고, 스프링 기본기를 확실히 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 빈 스코프란? 지금까지 우리는 스프링 빈이 스프링 컨테이너의 시작과 함께 생성되어서 스프링 컨테이너가 종료될 때까지 유지된다고 학습했다. 이것은 스프링 빈이 기본적으로 싱글톤 스코프로 생성되기 때문이다. 스코프는 번역 그대로 빈이 존재할 수 있는 범위를 뜻한다. 빈 스코프 종류 싱글톤: 기본 스코프, 스프링 컨테이너의 시작과 종료까지 유지되는 가장 넓은 범위의 스코프이다. 프로토타입: 스프링 컨테이너는 프로..
