inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

flex-grow IE 질문드립니다.

미해결

CSS Flex와 Grid 제대로 익히기

안녕하세요 선생님. 강의에서 menu-item에 길이를 width 혹은 flex-grow를 넣을 수 있는데 인터넷 익스플로어 때문에 width를 사용하셨는데 caniuse에서 확인하면 IE 버전10이상부터는 flex-grow를 지원하는게 맞을까요? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>CSS Flex</title> <link rel="stylesheet" href="default.css" /> <!-- <link rel="stylesheet" href="ui.css" /> --> <style> .menu { display: flex; } .menu-item { width: 25%; /* flex-grow: 1; */ background: gold; } .menu-item:hover { width: 35%; /* flex-grow: 1.5; */ background: crimson; transition: all 0.5s ease-in-out; } .menu-link { display: block; /* 클릭하는 버튼 영역을 키우기 위해서 */ padding: 1em; font-size: 1.2rem; font-weight: bold; color: #555; text-decoration: none; text-align: center; } .menu-link:hover { color: #ffffff; } </style> </head> <body> <ul class="menu"> <li class="menu-item"> <a href="#" class="menu-link">Home</a> </li> <li class="menu-item"> <a href="#" class="menu-link">About</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Product</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Contact</a> </li> </ul> </body> </html>

  • html/css
  • flex
  • HTML/CSS
박종규 댓글 2 좋아요 0 조회수 655

getVideoFileCount 변수 선언하는 이유

미해결

나도코딩의 자바 기본편 - 풀코스 (20시간)

안녕하세요 선생님🙇‍♀️ 클래스_메소드 강의를 보다 궁금한 점이 생겨 질문 남깁니다. BlockBox 클래스에 두 메소드를 넣었고, 04_Method클래스에 두 메소드를 활용한 문장이 있었는데요. insertMemoryCard()는 그대로 사용했지만, getVideoFileCount()는 다시 변수로 선언한 이유가 무엇인가요? 감사합니다. void inserMemoryCard(int capacity) { System.out.println("메모리 카드가 삽입되었습니다."); System.out.println("용량은 " + capacity + "GB 입니다."); } void getVideoFileCount(int type) { if ( type == 1) { return 9; } else if ( type == 2) { return 1; } return 10; } b1.insertMemoryCard(256); int fileCount = b1.getVideoFileCount(1);

  • 객체지향
  • oop
  • java
고 예진 댓글 3 좋아요 0 조회수 677

csrf 토큰 시큐리티 6버전 변경사항

해결됨

스프링 시큐리티

안녕하세요 강의 잘 보고있습니다. csrf 토큰 값을 헤더에 넣어서 실습하는 부분 따라해봤는데 잘 안되서 코드를 뜯어봤습니다. 이번에 시큐리티 버전이 6으로 올라가면서 csrf 토큰을 인코딩해서 전달하고 이걸 디코딩하는 부분이 영상과 다른것같았습니다. 그래서 기본으로 제공하는 로그인 페이지에서 디버깅을 해보았는데 클라이언트에 전달한 csrf 토큰값이랑 실제 서버가 가지는 csrf 토큰값이 서로 달랐습니다. 이렇게되면 영상에서 보여주신 실습은 제대로 동작하지 않는게 맞나요? 해당 사진은 CsrfFilter에서 actualToken을 받아오기 위한XorCsrfTokenRequestAttributeHandler 클래스 내부에 존재하는 resolveCsrfTokenValue 함수의 소스코드입니다. 예제 따라하면 항상 마지막에 사이즈 비교하는 부분에서 걸렸습니다.

  • java
  • spring-boot
  • spring-security
  • Spring Security
  • spring-boot
김민종 댓글 2 좋아요 0 조회수 1320

search icon 오류

미해결

따라하며 배우는 HTML, CSS

선생님 저는 왜 서치 부분이 이렇게 되는 걸까요?

  • html/css
  • HTML/CSS
yh 댓글 1 좋아요 0 조회수 388

질문있습니다.

미해결

반응형 웹사이트 포트폴리오(App Official Landing Website)

선생님 강의에서 테마를 변경 후 작업중입니다. 슬릭슬라이드를 적용 하였는데 마지막 사진의 위치가 내려갔습니다. 사진을 변경하여 작업을 해봐도 같은 현상이 발생합니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>다울건축사무소</title> <!--jquery--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <!--Slick slider--> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" /> <!--Custom CSS & js --> <link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/resposive.css"> <script src="js/custom.js"></script> </head> <body> <div class="container"> <!--section : header --> <header> <div class="header-inner"> <div class="logo"> <a href="#none"> <img src="/images/logo.png"> </a> </div> <div class="gnb"> <a href="#none">ABOUT</a> <a href="#none">RPOJECTS</a> <a href="#none">NEWS</a> <a href="#none">CONTACT</a> </div> </div> </header> <!--section : home --> <section class="home"> <div class="home-inner"> <ul class="imgbox"> <li class="item-bg" style="background-image: url(/images/강원대농업생명과학대학개축설계제안공모\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">강원대 농업생명과학대학 개축 설계제안 공모</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울대학교문화관재건축공사현상설계.jpg)"> <div class="text-area"> <h3 class="eng">서울대학교 문화관 재건축공사 현상설계</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울출입국·외국인청\(설계공모안\).jpg)"> <div class="text-area"> <h3 class="eng">서울출입국·외국인청</h3> <p>(설계공모안)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/수성행복드림센터\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">수성행복드림센터</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화\ MTV\ 초중통합학교\(우수상\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 초중통합학교</h3> <p>(우수상)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화mtv지하주차장\ \(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 지하주차장</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/한수원새울본부복지관신축.jpg)"> <div class="text-area"> <h3 class="eng">한수원 새울본부 복지관 신축</h3> </div> </li> </ul> </div> </section> <section class="about"></section> <section class="award"></section> <footer></footer> </div> </body> </html> /*CSS*/ /* Web Font - Kanit */ @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700&display=swap'); /* Web Font - S-CoreDream */ @font-face { font-family: 'S-CoreDream-3Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: normal; font-style: normal; } /* Reset CSS */ * { box-sizing: border-box; } a { text-decoration: none; color: #333; } button, input { outline: none; } h1, h2, h3, h4, h5, h6 { margin-top: 0; font-weight: normal; line-height: 1.5em; } ul, li { padding: 0; list-style: none; } /* Default CSS */ body { font-family: 'Kanit'; line-height: 1.7em; margin: 0; background-color: #fff; color: #333; } /*section - header*/ .header-inner { width: 1300px; margin: auto; padding-top: 20px; padding-bottom: 10px; overflow: hidden; } .logo { float: left; } .gnb { margin-top: 10px; float: right; } .gnb a { font-size: 20px; margin-left: 80px; } /*section - home*/ ul.imgbox { overflow: hidden; margin: 0; } .item-bg { display: inline-block; top: 0; background-size: cover; background-position: center; height: 100vh; } /*Custom JS*/ $(document).ready(function(){ $('.imgbox').slick({ infinite: true, dots: true, speed : 3000, autoplay: true, autoplaySpeed: 5000, swipe: true, arrows: false, fade : true, zIndex:50, pauseOnFocus: false, pauseOnHover: false, }); });

  • html/css
  • jquery
  • 반응형-웹
  • HTML/CSS
  • 반응형-웹
황재중 댓글 2 좋아요 2 조회수 687

모임 만들기 페이지에서 시간을 설정할 때, 연월일 제외하고 시간만 입력하려면 어떻게 하면 되는지요?

미해결

스프링과 JPA 기반 웹 애플리케이션 개발

안녕하세요. 모임 만들기 페이지에서 시간을 설정할 때, 연월일 제외하고 시간만 입력하려면 어떻게 하면 되는지요? fragments.html 의 <div th:fragment="event-form (mode, action)"> 에서 <input id="endEnrollmentDateTime" type="datetime-local" 의 type 부분을 type="time" 으로 하고 Event 클래스에서 private LocalDateTime endEnrollmentDateTime; 을 private DateTime endEnrollmentDateTime; 로 변경하고 실행하면 html 상에서는 시간이 입력되나, DB 에는 insert 되어 있지 않습니다. 어떻게 하면 가능한지요? 자세한 설명 부탁드립니다. 그리고, 제공해 주신 소스를 다운로드해서 프로젝트를 실행한 후, 오른쪽 드롭다운 메뉴 중 스터디를 클릭해도 아무 동작이 일어나지 않습니다. 소스를 보면 <a class="dropdown-item" >스터디</a> 이렇게만 나와있고 th:href="@{}" 로 연결된 페이지가 없습니다. 이 부분 기능 구현은 안 해 놓으신 건지요? 프로필 페이지에서도 왼쪽 프로필 사진 밑에 있는 스터디 버튼을 누르면 Study 라고만 나오고 별다른 페이지가 나오지 않습니다. 이 부분도 기능 구현은 안 해 놓으신 건지요?

  • java
  • spring
  • spring-boot
  • jpa
  • JPA
  • spring-boot
  • thymeleaf
박종성 댓글 1 좋아요 0 조회수 480

Flex-grow가 적용되는 영역에 대해 질문드립니다.

미해결

CSS Flex와 Grid 제대로 익히기

혹시 Flex-direction: row이고, Flex-wrap이 Wrap으로 설정되어 있고, 아이템들은 width: 33.3333%의 크기를 가지며, Height들은 서로서로 다 다를때, Wrap되어 행이 2개가 생길때에 Flex-grow가 1로 Item들에 설정되어 있다면 모든 행의 높이가 가장 큰 높이에 맞춰지게 되는데요. https://blogpack.tistory.com/863 여기나 이 강의에서 학습한 대로 1행에서는 flex-grow의 이해가 쉽게 됬습니다. 그치만, 제가 언급한 지금 이 예처럼 2열이고 높이가 서로다른 3개의 아이템들일 경우에는 Flex-grow가 한 행의 영역에서 남은 여백을 참조하여 모든 높이를 최대까지 늘리는 것인가요? flex-grow 또는 flex-shrink가 적용되는 영역은 한 행이나 열에서 적용되나요? 각각의 Item들에 적용하는 속성이니 이해가 조금 어렵네요... 많은 조언 부탁드립니다.

  • flex
  • flex
  • HTML/CSS
chebread 댓글 1 좋아요 0 조회수 455

Postman 406, 404 에러

미해결

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

첫번째 PostMapping 으로 했을때 값 등록은 잘되는데 406 에러가 나옵니다. 두번째 update 할때는 값도 변경안되고 404 에러가 납니다..

  • spring
  • spring-boot
  • jpa
  • JPA
  • java
114tla 댓글 4 좋아요 0 조회수 1716

고아 객체 생성 조건

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

안녕하세요 영한님! 질문드립니다. 고아 객체는 부모 엔티티와 연관관계가 끊어진 자식 엔티티 라고 이해했습니다. 고아 객체가 생성되는 조건은 부모 엔티티 삭제 부모 엔티티가 삭제 되면 자식 엔티티를 고아객체로 판단 합니다. e.g) em.remove(parent); 부모 엔티티에 있는 자식 엔티티 컬렉션 제거 연관관계가 끊어진 자식 객체를 고아객체로 판단 합니다. e.g) parent.getChild().remove(0); 결과적으로 orphanRemoval = true 를 설정하면 자식 엔티티(고아 객체)는 부모 엔티티와 함께 삭제 되거나 자식 엔티티(고아 객체)만 삭제 된다. 맞게 이해하고 있는 것 일까요? 감사합니다.^^

  • java
  • jpa
  • JPA
개발하는쿼카 댓글 1 좋아요 4 조회수 683

강의자료 레벨업 퀴즈

해결됨

[코드캠프] 시작은 프리캠프

강의자료에 있는 레벨업 퀴즈의 정답은 어디서 확인할 수 있나요??

  • html/css
  • javascript
  • HTML/CSS
예은 댓글 1 좋아요 0 조회수 332

강의자료는 어디서 받을 수 있나요?

미해결

중상급 퍼블리싱을 위한 CSS3의 모든 것

비주얼 스튜디오 코드(Visual Studio Code) 사용법 강의를 보고 있는데 자주사용하는 에밋 단축키라던지 vscode 설정법 관련 강의자료 pdf 를 올려주신다고 하시던데.. 그 자료는 어디서 받을 수 있나요?

  • html/css
  • HTML/CSS
황현빈 댓글 1 좋아요 1 조회수 376

postman invalid url 질문드립니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

1. 질문은 문제 상황을 최대한 표현해주세요. postman 에서 send 버튼을 누르면 아래와 같이 invalid URL 오류가 뜹니다. 어느 부분이 잘못된 걸까요?ㅠㅠ 2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠ 구글에 검색해봤는데 해결책이 딱히 나오지 않았어요 3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!

  • html/css
  • nodejs
  • express
  • node.js
  • react
  • tensorflow
  • react-native
  • 머신러닝
  • HTML/CSS
  • javascript
  • 머신러닝 배워볼래요?
다혜 댓글 1 좋아요 0 조회수 1034

문자열 병합(String concatenation)에 관한 간단한 질문

해결됨

나도코딩의 자바 기본편 - 풀코스 (20시간)

안녕하세요 선생님, 다름이 아니라 제가 지난 String[], String, charAt, length와 관련된 질문 이후로 문자열(String)을 계속 공부하면서 막히는 것이 조금 있어 이렇게 질문을 남깁니다. 아래 코드에서 제가 간단하게 System.out.println(); 명령문으로 아래 문장들을 출력해봤습니다: 결과 (1)에서는 "Hello, "와 "World!" 2개의 단어가 합쳐져서 문장 Hello, World!가 출력이 되고, 결과 (2)에서는 Route 12가 아닌, Route 66으로, 결과 (3)에서는 25 years old 이라고 출력이 되는데, 이렇게 되는 이유가 System.out.println(); 명령문의 괄호 안에 쓰여진 문장들이 기본적으로 String으로 간주하여 결과를 출력하고, 만일 숫자가 먼저 온다면 int로 인지해서 결과를 먼저 받은 다음, + 기호를 통해 문자열을 출력해서 그런 건가요? 혹여나 시간이 되신다면, 선생님으로부터 답변을 받았으면 좋겠습니다! 지난 번 QNA가 너무 좋아서 아직도 기억에 남네요..ㅎ 미리 감사합니다 :)

  • 객체지향
  • java
  • oop
  • string
  • 문자열
댓글 1 좋아요 0 조회수 420

상품 여러개 주문

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

안녕하세요, 아래 강의 시간대에 상품 주문 여러개 하기 위해서 상품을 추가, 삭제하고 하는 부분 UI 구성 코드(validation 부분까지도여)로 남겨주실수 있을까요? 강의 챕터: 상품주문 시간: 7분 58초

  • jpa
  • 웹앱
  • spring
  • spring-boot
  • java
냠냠이 댓글 1 좋아요 0 조회수 543

마커 클러스터링 도입

미해결

Next.js 시작하기(feat. 지도 서비스 개발)

안녕하세요, 강의 보면서 많은 도움 받았습니다. 제가 추가로 마커클러스터링을 도입하려고 하는데 네이버에서 제공하는 깃헙 예제 코드를 봐도 도무지 이해가 안가서요.. 혹시 어떤식으로 풀어나가면 될지 궁금합니다... ㅠㅠ

  • next.js
  • ssg
  • ssr
  • vercel
  • csr
  • ssg
  • vercel
  • ssr
  • Next.js
  • cluste
  • seo
윌럄 댓글 2 좋아요 2 조회수 2957

회원가입 양식 과제

해결됨

[코드캠프] 시작은 프리캠프

안녕하세요 과제를 해봤는데 예쁘게 잘 되긴 하였습니다. 혹시 여기서 더 고쳐야 되는 부분이 있을까요? <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="02-signup.css" /> </head> <body> <div class="container"> <div class="member-container"> <div class="header"> <div>회원 가입을 위해</div> <div>정보를 입력해주세요</div> </div> <div class="user-info"> <div id="email">* 이메일</div> <div>* 이름</div> <div>* 비밀번호</div> <div>* 비밀번호 확인</div> </div> <div class="gender"> <input type="radio" name="gender" /> <label for="women">여성</label> <input type="radio" name="gender" /> <label for="men">남성</label> </div> <div class="agree-check"> <input type="checkbox" /> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> <div class="btn"> <button>가입하기</button> </div> </div> </div> </body> </html> * { box-sizing: border-box; font-family: "Noto Sans CJK KR"; font-style: normal; } body { display: flex; flex-direction: row; justify-content: center; } .container { display: flex; flex-direction: column; align-items: center; width: 670px; height: 960px; margin-top: 60px; margin-bottom: 60px; background: #ffffff; border: 1px solid #aacdff; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); border-radius: 20px; } .member-container { display: flex; flex-direction: column; align-items: center; width: 470px; height: 818px; margin-top: 72px; margin-bottom: 70px; } .header { width: 466px; height: 94px; font-weight: 700; font-size: 32px; line-height: 47px; color: #0068ff; } .user-info div { font-weight: 400; font-size: 16px; line-height: 24px; color: #797979; border-bottom: 1px solid #cfcfcf; width: 466px; height: 80px; margin-top: 21px; } .user-info #email { border-bottom: 1px solid #0068ff; } .gender { display: flex; align-items: center; justify-content: space-between; width: 140px; height: 23.94px; margin-top: 50px; } .gender input { width: 20px; height: 19.95px; background: #ebebeb; border: 1px solid #d2d2d2; } .gender label { font-weight: 400; font-size: 16px; line-height: 24px; } .agree-check { width: 454px; height: 21.06px; margin-top: 52.05px; font-weight: 400; font-size: 14px; line-height: 21px; color: #000000; } .btn { display: flex; flex-direction: column; margin-top: 60px; width: 470px; height: 106px; border-top: 1px solid #e6e6e6; } button { margin-top: 30px; width: 470px; height: 75px; font-weight: 400; font-size: 18px; line-height: 27px; text-align: center; color: #0068ff; background: #ffffff; border: 1px solid #0068ff; border-radius: 10px; } 잘 듣고 있습니다. 제가 들어본 강의 중에서 최고로 안 헷갈리게 가르쳐주셔서 좋습니다.

  • html/css
  • javascript
  • HTML/CSS
xudegloss 댓글 1 좋아요 1 조회수 2963

슬릭슬라이더가 왜 안되는지 모르겠습니다

미해결

반응형 웹사이트 포트폴리오(App Official Landing Website)

현재 선생님 강의에서 테마를 변경해서 작업하고 있습니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>다울건축사무소</title> <!--jquery--> <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script> <!--Slick slider--> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <!--Custom CSS & js --> <link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/resposive.css"> <script src="js/custom.js"></script> </head> <body> <div class="container"> <!--section : header --> <header> <div class="header-inner"> <div class="logo"> <a href="#none"> <img src="/images/logo.png"> </a> </div> <div class="gnb"> <a href="#none">ABOUT</a> <a href="#none">RPOJECTS</a> <a href="#none">NEWS</a> <a href="#none">CONTACT</a> </div> </div> </header> <!--section : home --> <section class="home"> <div class="home-inner"> <ul class="imgbox"> <li class="item-bg" style="background-image: url(/images/강원대농업생명과학대학개축설계제안공모\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">강원대 농업생명과학대학 개축 설계제안 공모</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울대학교문화관재건축공사현상설계.jpg)"> <div class="text-area"> <h3 class="eng">서울대학교 문화관 재건축공사 현상설계</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울출입국·외국인청\(설계공모안\).jpg)"> <div class="text-area"> <h3 class="eng">서울출입국·외국인청</h3> <p>(설계공모안)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/수성행복드림센터\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">수성행복드림센터</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화\ MTV\ 초중통합학교\(우수상\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 초중통합학교</h3> <p>(우수상)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화mtv지하주차장\ \(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 지하주차장</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/양주아트센터건립공사.jpg)"> <div class="text-area"> <h3 class="eng">강원대 농업생명과학대학 개축 설계제안 공모</h3> </div> </li> </ul> </div> </section> <section class="about"></section> <section class="award"></section> <footer></footer> </div> </body> </html> /* Slick Slider : home */ $('.imgbox').slick({ rtl: true });

  • html/css
  • jquery
  • 반응형-웹
  • HTML/CSS
  • 반응형-웹
황재중 댓글 1 좋아요 1 조회수 655

모달과 light box차이점

미해결

최고의 프론트엔드 CSS Frameworks, UIkit

모달과 light box차이점은 light box가 슬라이드가 된다는것뿐이죠??

  • html/css
  • 포트폴리오
  • 포트폴리오
  • HTML/CSS
비타민걸 댓글 1 좋아요 1 조회수 513

Ajax 인증시 AuthenticationManager 등록 문의

해결됨

스프링 시큐리티 OAuth2

Spring Authorization 1.0 을 사용하여 FormLogin 이 아닌 Ajax로 로그인을 하려고 합니다. Spring Security 강의를 참조하여 AbstractAuthenticationProcessingFilter를 상속하여 CustomUserDetailsService, CustomAuthenticationProvider, CustomAuthenticationProcessingFilter, CustomAuthenticationToken 구현체를 만들었습니다. CustomAuthenticationProcessingFilter는 AbstractAuthenticationProcessingFilter 상속하여 개발하였는데 Filter를 등록 하려면 강의에서 내용처럼 AuthenticationManager를 등록 해줘여 하는데 강의는 WebSecurityConfigurerAdapter 상속하여 설정 하는것으로 설명되어 있는데 Spring Securitty 6.0 에서는 삭제되었습니다. Spring Security 의 강의를 보면 @Override protected void configure(AuthenticationManagerBuilder auth) throws Exception { auth.authenticationProvider(ajaxAuthenticationProvider()); } configure(AuthenticationManagerBuilder auth)를 구현하고 @Bean public AjaxLoginProcessingFilter ajaxLoginProcessingFilter() throws Exception { AjaxLoginProcessingFilter filter = new AjaxLoginProcessingFilter(); filter.setAuthenticationManager(authenticationManagerBean()); return filter; } 질문)AjaxLoginProcessingFilter Bean 에서 설정하는데 SecurityFilterChain 를 등록하는 방식에서는 어떻게 등록해야 할지 문의 합니다. 제가 구현한 소스 일부 Authorization Server 설정을 다른 클래스에서 설정하였고 디버깅을 해보니 Authorization Server 용 FilterChain 과 로그인 처리용 FilterChain 이 따로 등록되어 로그인 프로세스는 Spring Security FilterChain Class 에서 진행하였습니다 @Configuration는 Spring Security 6에서는 @EnableWebSecurity에 포함되지 않아 추가 하였습니다. @EnableWebSecurity @RequiredArgsConstructor @Configuration public class DefaultSecurityConfig { private final PasswordEncoder passwordEncoder; private final CustomAuthenticationProvider customAuthenticationProvider; // @Bean public CustomAuthenticationProcessingFilter customAuthenticationProcessingFilter() throws Exception { CustomAuthenticationProcessingFilter filter = new CustomAuthenticationProcessingFilter(); return filter; } // @formatter:off @Bean SecurityFilterChain defaultSecurityFilterChain(HttpSecurity http) throws Exception { http .authorizeHttpRequests(authorizeRequests ->authorizeRequests .requestMatchers(CorsUtils::isPreFlightRequest).permitAll() .requestMatchers("/login/**").permitAll() .requestMatchers("/api/registered-client/**").permitAll() .anyRequest().authenticated() ) .csrf(csrf -> csrf .ignoringRequestMatchers(new AntPathRequestMatcher("/api/registered-client/**")) ) .formLogin().disable(); http.authenticationProvider(customAuthenticationProvider); http.addFilterBefore(customAuthenticationProcessingFilter(), UsernamePasswordAuthenticationFilter.class); return http.build(); } // @formatter:on } AuthenticationManager를 등록하지 않아 예와가 발생함 Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'customAuthenticationProcessingFilter' defined in class path resource [com/naon/oidc/security/config/DefaultSecurityConfig.class]: authenticationManager must be specified 그리고 @Bean으로 만들어 등록하면 순환참조가 됩니다.

  • java
  • spring-boot
  • oauth
  • spring
신석균 댓글 1 좋아요 1 조회수 3318

폼 객체 사용 질문

해결됨

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

폼 객체를 이렇게 이해한 것이 맞는지 !! @GetMapping("/members/new") public String createForm(Model model) { model.addAttribute("memberForm",new MemberForm()); return "members/createMemberForm"; } GET 요청시 비어있는 MemberForm 객체를 모델에 담아서 뷰(템플릿)에 전달 @PostMapping("/members/new") public String create(@Valid MemberForm form , BindingResult result) { 클라이언트가 폼에 작성한 필드들을 Submit 할때 POST 요청되어 템플릿에서 각 필드의 값들을 컨트롤러에서 넘겨준 모델의 form 객체에 set 한다 Address address = new Address(form.getCity(), form.getStreet(), form.getZipcode()); Member member = new Member(); member.setName(form.getName()); member.setAddress(address); memberService.join(member); form 객체는 이제 값이 설정되었으니 Member 객체를 생성하고 이 member 의 필드들을 form 객체에서 가져와서 set 하고 join(회원가입)을 완료한다 . 강의에서 말하는 폼 객체 vs 엔티티 직접 사용 지금은 서비스가 작아서 폼 객체를 사용하는 것이 더 번거러운 일인듯 한데 더 복잡해지면 엔티티를 유지보수하기 어려워지기 떄문에 엔티티는 화면을 위한 로직은 없어야 한다. 항상 친절한 답변 주셔서 감사합니다 !

  • 웹앱
  • 웹앱
  • JPA
  • spring-boot
  • jpa
  • java
  • spring
두용 댓글 1 좋아요 3 조회수 556

인기 태그

인프런 TOP Writers

주간 인기글