D유형 최종본제작 - D1 갤러리 이미지
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
D유형 최종본제작 - D1 갤러리 이미지 3개 사용하라고 나와있는데 저렇게 많이 나열하는게 맞나요? 그리고 완성본 화면줄이면 이미지 전부 갤러리 탭보더 밖으로 나와서 배열되는데.. css제대로 된게 맞을까요
- HTML/CSS
- jquery
- 웹-디자인
172만명의 커뮤니티!! 함께 토론해봐요.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
D유형 최종본제작 - D1 갤러리 이미지 3개 사용하라고 나와있는데 저렇게 많이 나열하는게 맞나요? 그리고 완성본 화면줄이면 이미지 전부 갤러리 탭보더 밖으로 나와서 배열되는데.. css제대로 된게 맞을까요
미해결
[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
섹션5 <공지> 코드 https://github.com/chulminkw/DLCV <여기에 있나요?? 찾아도 없어서요.
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
다른 강의에선 작동 속도때문에 전부 인텔리제이로 바꿔서 진행했었는데 강의 교안을 보면 스프링부트 3.2 이상부터는 gradle로 하라고 나와있어 궁금하여 질문드립니다.
해결됨
Azure Native로 나만의 GPT 만들기
조금씩이지만 열심히 따라서 구현을 해 보려고 하지만 모르는게 너무 많아 조금은 힘드네요 그래도 강의 내용이 스텝 바이 스텝으로 상세해 아주 큰 도움이 됩니다 저희 중요 업무는 고객 요구 사항들 (텍스트/ 이미지)이 기록되어 있는 문서를 참조로 현재 개발된 디자인이 모든 요구 사항들을 다 잘 지켜서 개발이 완료된 건지를 체크하는 일입니다 기존에 일일히 하나하나 체크를 하다 보니 시간도 너무 오래 걸리고 일부 경험 많은 엔지니어의 경우 기존 경험에 의존해 체크가 누락되는 경우도 발생이 되고 있습니다 이에 고객 요구 사항들을 AI (gpt-4o)에게 학습시키고 완료된 디자인 문서를 프로프팅 창에 입력해 자동으로 미지원 항목을 체크해 알려주는 기능을 만드는 것이 목표입니다 이를 위해 프롬프트 창에 디자인 문서 (텍스트/ 파워포인트/ PDF/ JPG 등) 멀티모달 프롬프팅이 되어야 디자이너 스스로 자기가 만든 디자인 파일의 셀프 체크가 가능하기에 gpt-4o를 선택해서 구현을 할려고 합니다 여기서 중요한건 비교를 해야 하는 고객 요구 사항을 어떻게 gpt-4o에게 학습시키는지에 대해 잘 몰라 난감해서 문의 드립니다 가장 효과적인 학습 방법에 대한 조언을 주실 수 있으실지요? 사내 전용 우리 회사만의 GPT라면 비교 자료도 나만의 자료가 되는게 필요해서 문의 드립니다 답변 부탁 드리겠습니다 감사합니다
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요, 해당 static 폴더에 index.html파일에 코드를 입력한후 서버 실행결과 whilelabel 에러가 뜹니다. 해결에 도움을 주시면 감사하겠습니다.. 콘솔 내용 :: Spring Boot :: (v3.3.3) 2024-08-26T17:27:55.146+09:00 INFO 4895 --- [ main] h.hello_spring.HelloSpringApplication : Starting HelloSpringApplication using Java 17.0.12 with PID 4895 (/Users/kipyo/Documents/스프링/hello-spring/out/production/classes started by kipyo in /Users/kipyo/Documents/스프링/hello-spring) 2024-08-26T17:27:55.148+09:00 INFO 4895 --- [ main] h.hello_spring.HelloSpringApplication : No active profile set, falling back to 1 default profile: "default" 2024-08-26T17:27:55.573+09:00 INFO 4895 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port 8080 (http) 2024-08-26T17:27:55.580+09:00 INFO 4895 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2024-08-26T17:27:55.580+09:00 INFO 4895 --- [ main] o.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/10.1.28] 2024-08-26T17:27:55.606+09:00 INFO 4895 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext 2024-08-26T17:27:55.607+09:00 INFO 4895 --- [ main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 433 ms 2024-08-26T17:27:55.743+09:00 WARN 4895 --- [ main] ion$DefaultTemplateResolverConfiguration : Cannot find template location: classpath:/templates/ (please add some templates, check your Thymeleaf configuration, or set spring.thymeleaf.check-template-location=false) 2024-08-26T17:27:55.768+09:00 INFO 4895 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port 8080 (http) with context path '/' 2024-08-26T17:27:55.772+09:00 INFO 4895 --- [ main] h.hello_spring.HelloSpringApplication : Started HelloSpringApplication in 0.793 seconds (process running for 0.952)
해결됨
실전! 스프링 데이터 JPA
"성능 최적화를 할텐대 어쨋든 이 데이터를 두 개를 가지고 있어야 돼요" 라는 부분이 있는데요 여기서 하나는 실제 엔티티 객체고 나머지 하나는 스냅샷으로 저장한 초기 상태의 엔티티 객체를 말하는건가요?
미해결
실전! 스프링 데이터 JPA
첫번째 JPQL Query("select m from Member m join m.team ") List<Member> findInnerJoin(); @Test public void test() { Team teamA = new Team("teamA"); Team teamB = new Team("teamB"); teamRepository.save(teamA); teamRepository.save(teamB); Member member1 = new Member(10, "member1", teamA); Member member2 = new Member(10, "member2", teamB); memberRepository.save(member1); memberRepository.save(member2); em.flush(); em.clear(); List<Member> members = memberRepository.findInnerJoin(); for (Member member : members) { System.out.println("member = " + member); System.out.println("member.getTeam().getClass() = " + member.getTeam().getClass()); System.out.println("member.getTeam().getName() = " + member.getTeam().getName()); } } 실행결과 Hibernate: select m1_0.member_id, m1_0.age, m1_0.team_id, m1_0.username from member m1_0 join team t1_0 on t1_0.team_id=m1_0.team_id member = Member(id=1, username=member1, age=10) member.getTeam().getClass() = class study.data_jpa.entity.Team$HibernateProxy$w0d2fXxq Hibernate: select t1_0.team_id, t1_0.name from team t1_0 where t1_0.team_id=? member.getTeam().getName() = teamA member = Member(id=2, username=member2, age=10) member.getTeam().getClass() = class study.data_jpa.entity.Team$HibernateProxy$w0d2fXxq Hibernate: select t1_0.team_id, t1_0.name from team t1_0 where t1_0.team_id=? member.getTeam().getName() = teamB 첫번째 JPQL에서는 전형적인 N + 1 문제가 발생함을 알 수 있습니다. 그래서 첫번째 JPQL에서의 select문에 t만 추가를 해봤습니다. 두번째 JPQL @Query("select m, t from Member m join m.team t") List<Member> findInnerJoin(); 실행결과 Hibernate: select m1_0.member_id, m1_0.age, m1_0.team_id, m1_0.username, t1_0.team_id, t1_0.name from member m1_0 join team t1_0 on t1_0.team_id=m1_0.team_id member = Member(id=1, username=member1, age=10) member.getTeam().getClass() = class study.data_jpa.entity.Team member.getTeam().getName() = teamA member = Member(id=2, username=member2, age=10) member.getTeam().getClass() = class study.data_jpa.entity.Team member.getTeam().getName() = teamB 위 실행 결과를 보고 페치 조인과 무슨 차이가 있을까 해서 페치 조인을 테스트 해봤습니다. 세번째 JPQL @Query("select m from Member m join fetch m.team t") List<Member> findMemberFetchJoinTeam(); @Test public void ManyToOneFetchJoin() { Team teamA = new Team("teamA"); Team teamB = new Team("teamB"); teamRepository.save(teamA); teamRepository.save(teamB); Member member1 = new Member(10, "member1", teamA); Member member2 = new Member(10, "member2", teamB); memberRepository.save(member1); memberRepository.save(member2); em.flush(); em.clear(); List<Member> members = memberRepository.findMemberFetchJoinTeam(); for (Member member : members) { System.out.println("member = " + member); System.out.println("member.getTeam().getClass() = " + member.getTeam().getClass()); System.out.println("member.getTeam().getName() = " + member.getTeam().getName()); } } 실행결과 Hibernate: select m1_0.member_id, m1_0.age, t1_0.team_id, t1_0.name, m1_0.username from member m1_0 join team t1_0 on t1_0.team_id=m1_0.team_id member = Member(id=1, username=member1, age=10) member.getTeam().getClass() = class study.data_jpa.entity.Team member.getTeam().getName() = teamA member = Member(id=2, username=member2, age=10) member.getTeam().getClass() = class study.data_jpa.entity.Team member.getTeam().getName() = teamB 두번째 JPQL과 세번째 JPQL의 차이를 보면 두번째 JPQL의 select문에서 m1 _0.tea m_id 도 조회하고 세번째 JPQL의 select문에서는 m1 _0.tea m_id 을 조회하지 않습니다. 두번째 JPQL과 세번째 JPQL이 정확히 어떤 차이가 있어 select문에서 조회하는 컬럼이 달라지는지 궁금합니다.
해결됨
2주만에 통과하는 알고리즘 코딩테스트 (2024년)
n = int(input()) hint = [list(map(int,input().split())) for _ in range(n)] answer = 0 #100 ~ 999 for a in range(1,10): # 100의 자리 for b in range(10): # 10의 자리 for c in range(10): # 1의 자리 if (a == b or b == c or c == a): continue cnt = 0 for arr in hint: number = list(map(int, str(arr[0]))) strike = arr[1] ball = arr[2] ball_count = 0 strike_count = 0 #스트라이크카운트 자리수,숫자 둘다 if number[0] == a: strike_count += 1 if number[1] == b: strike_count += 1 if number[2] == c: strike_count += 1 #볼카운트 자리수는 안맞고 숫자만 if a in number and number[0] != a: ball_count += 1 if b in number and number[1] != b: ball_count += 1 if c in number and number[2] != c: ball_count += 1 if ball == ball_count and strike == strike_count: cnt += 1 if cnt == n: answer += 1 print(answer)
미해결
반응형 웹사이트 포트폴리오(App Official Landing Website)
html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>starUp Mata : App Official Landing</title> <link rel="icon" href="images/logo_a.png"> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Slick Slider --> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <script src="js/slick/slick.js"></script> <!--Custom csss & js--> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <script src="custom.js"></script> </head> <body> <div class="container"> <!-- Header --> <header> <div class="header-inner"> <div class="logo"> <a href="#none"><img src="images/logo_pc.png"></a> </div> <div class="gub"> <a href="#none">아비브소개</a> <a href="#none">제품</a> <a href="#none">이벤트</a> <a href="#none">리뷰</a> <a href="#none">문의하기</a> <!-- <a href="#none"></a> <a href="#none"></a> <a href="#none"></a> --> </div> <div class="login"> <a href="#none">로그인</a> </div> </div> </header> <!-- welcome --> <section class="welcome"> <div class="slideshow"> <img src="images/slide-welcome-01.jpg"> <img src="images/slide-welcome-02.jpg"> <img src="images/slide-welcome-03.jpg"> </div> <div class="welcome-heading"> <span>창의적인 아이디어를 만드는 가장 빠른 방법</span> <h1> An idea solution of startup for your <em>3가지 타이핑 텍스트 자리</em> </h1> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> <div class="welcome-btns"> <a href="#none" class="btn start">CEO 시작하기</a> <a href="#none" class="btn guide">사용자 가이드</a> </div> </div> <div class="mouse"> <span class="wheele"></span> </div> </section> <!-- ceo-access --> <section class="ceo-access"></section> <!-- banner --> <section class="banner"></section> <!-- feature --> <section class="feature"></section> <!-- vision --> <section class="vision"></section> <!-- faq --> <section class="faq"></section> <!-- review --> <section class="review"></section> <!-- focus --> <section class="focus"></section> <!-- guide --> <section class="guide"></section> <!-- news --> <section class="news"></section> <!-- footer --> <footer></footer> </div> </body> </html> 1000자 이상 안올라 간다해서 댓글에 남길게요
해결됨
김영한의 실전 자바 - 고급 1편, 멀티스레드와 동시성
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문 전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 비공정 모드가 공정 모드가 빠른 이유가 뭔지 자세히 궁금합니다. 비공정 모드에서도 어느 정도 대기큐가 있다고 하셨는데 그 걸 제외하고 공정 모드에서는 대기큐를 사용하면 어떤 스레드가 다음 락을 가져야할 지 알기 때문에 좀 더 빠르지 않나? 라는 생각이 들어서요.. 그리고 비공정 모드에서는 반대로 대기큐를 사용하지 않았기 때문에 공정 모드보다 락 얻기 위한 경합이 일어나서 좀 더 느릴 수 있는거 아닌가..? 싶어서 여쭤봅니다.. 시스템 상황에서 어떻게 비공정 모드가 공정 모드보다 빠른지 이해가 가지 않네요..ㅠㅠ
미해결
토비의 스프링 6 - 이해와 원리
추가적인 리팩토링 해보기 PaymentService 에서 exRate 계산을 Payment 가 직접 하도록 할 수 있음 exRateProvider 를 Payment 안으로 넣어주면됨 시간계산은 Clock 을 Payment 안으로 넣어줘도 됨 추가 리팩토링을 진행하면 Payment 의 prepare 메서드의 내부 로직은 한 줄이면 끝남 강의 중 말씀 해주신 위의 설명을 토대로 PaymentService, Payment 클래스를 리팩토링하고 PaymentTest 클래스를 수정 해 보았습니다. PaymentService의 prepare 메서드 @Component public class PaymentService { private final ExRateProvider exRateProvider; private final Clock clock; public PaymentService(ExRateProvider exRateProvider, Clock clock) { this.exRateProvider = exRateProvider; this.clock = clock; } public Payment prepare(Long orderId, String currency, BigDecimal foreginCurrencyAmount) throws IOException { return Payment.createPrepared(orderId, currency, foreginCurrencyAmount, this.exRateProvider, this.clock); } } Payment의 createdPrepared 메서드 public static Payment createPrepared(Long orderId, String currency, BigDecimal foreginCurrencyAmount, ExRateProvider exRateProvider, Clock clock) throws IOException { BigDecimal exRate = exRateProvider.getExRate(currency); BigDecimal convertedAmount = foreginCurrencyAmount.multiply(exRate); LocalDateTime validUntil = LocalDateTime.now(clock).plusMinutes(30); return new Payment(orderId, currency, foreginCurrencyAmount, exRate, convertedAmount, validUntil); } PaymentTest class PaymentTest { @Test void createPrepared() throws IOException { Clock clock = Clock.fixed(Instant.now(), ZoneId.systemDefault()); ExRateProviderStub exRateProvider = new ExRateProviderStub(valueOf(1_000)); Payment payment = Payment.createPrepared( 1L, "USD", BigDecimal.TEN, exRateProvider, clock ); Assertions.assertThat(payment.getConvertedAmount()).isEqualByComparingTo(valueOf(10_000)); Assertions.assertThat(payment.getValidUntil()).isEqualTo(LocalDateTime.now(clock).plusMinutes(30)); } @Test void isValid() throws IOException { Clock clock = Clock.fixed(Instant.now(), ZoneId.systemDefault()); ExRateProviderStub exRateProvider = new ExRateProviderStub(valueOf(1_000)); Payment payment = Payment.createPrepared( 1L, "USD", BigDecimal.TEN, exRateProvider, clock ); Assertions.assertThat(payment.isValid(clock)).isTrue(); Assertions.assertThat( payment.isValid(Clock.offset(clock, Duration.of(30, ChronoUnit.MINUTES)))).isFalse(); } } 질문 제가 진행한 리팩토링이 올바르게 행하였는지 궁금합니다. Test를 진행할 때 exRateProvider 를 사용하기 위해서 기존에 작성하였던 ExRateProviderStub 오브젝트를 생성하여 테스트를 진행해 주는 것이 맞는지 궁금합니다. 처음에 ExRateProviderStub exRateProvider = null; 을 사용해 봤더니 java.lang.NullPointerException: Cannot invoke "tobyspring.hellospring.payment.ExRateProvider.getExRate(String)" because "exRateProvider" is null 이와 같은 에러가 발생하였습니다. 제가 ExRateProvider 객체가 null로 설정해서 발생한 에러인걸 이해 하고, ExRateProvider 를 구현한 객체가 필요하기 때문에 ExRateProviderStub 오브젝트를 생성하여 exRate 를 넣어 주었습니다. 3. ExRateProviderStub 오브젝트를 생성하여 exRate (적용환율)을 넣고 생성하는 이유는 실제 api가 아닌 일부 기능을 테스트하기 위해서 저희가 직접 적용환율을 적용해보고 외화금액과 곱해서 계산된게 맞는지 테스트하는 목적이다. 라고 제가 이해하였는데 올바르게 이해한 것인지 궁금합니다. PS. 제가 아직 배운 내용을 완전히 소화하지 못한 부분이 있을 수 있어, 질문에 대한 설명이 부족할 수 있습니다. 혹시 잘못된 부분이나 추가적인 조언이 있다면 피드백 부탁드립니다. 감사합니다.
미해결
스프링 시큐리티 OAuth2
안녕하세요!! 수원님의 시큐리티 강의를 듣고 있습니다!! 좋은 강의 해주셔서 감사합니다! 다름이 아니라, 제가 메일을 늦게 확인하여서 기존 수강생에게 제공되는 50%할인 쿠폰을 사용하지 못했는데, 혹시 다시 쿠폰 발급이 가능한지 여쭤봐도 되겠습니까?! 감사합니다.
미해결
실습으로 배우는 선착순 이벤트 시스템
쿠폰이 발급되고 바로 사용하려는 유저가 있다면 어떻게해야하나요? 실무에서 보통의 경우 어떻게 처리하는지 궁금한데요. 예를 들어서, 쿠폰이 생성되려면 시간이 다소 소요될 수 있다는 안내 문구와 같은 정책으로 안고가는지.. 아니면 다른 좋은 방법이 있는지 궁금합니다. 강의 내용 흐름 레디스를 통해서 싱글 스레드로 쿠폰 개수 확인 제한 범위 안이라면 클라이언트에게 쿠폰 발급 성공 응답 비동기로 처리량을 조절하면서 쿠폰 데이터를 저장 실제 유저가 아직 쿠폰 발급이 안되었는데, 쿠폰 사용 시도 이 경우 어떻게 대응하는지 궁금합니다.
미해결
김영한의 실전 자바 - 중급 1편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 혹시 중급1에서 완벽히 이해가 안됬다고 느끼면 중급1편을 다시 재수강하고 중급2로 넘어가는게 좋을까요? 아니면 우선 순차적으로 모두 수강후에 재수강하는것이 좋을까요?
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
수강생 참고자료 및 완성본 다운로드 => 다운로드 해도 소스 텍스트가 없습니다. ㅜㅜ 못 찾는건지 모르겠는데...찾지못해서 일일이 치고 있어요. 소스텍스트가 어디있는지 알려주세요.
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
[질문 내용] table에 설정을 해주고 했는데 다 잘되기는 하나 뒤에 에러인 sql Error가 뜨면서 mbr의 테이블이 없다고 하네요 뭐때문에 이런거죠?
미해결
[신규 개정판] 이것이 진짜 크롤링이다 - 실전편 (인공지능 수익화)
제가 뭘 건든건지 잘되던게 갑자기 SyntaxWarning: invalid escape sequence '\.' 에러가 출력됩니다. 셀레니움 css셀렉터에서 검색 카피해와서 붙였는데 그중에 \ 들어가면 에러를 내보네요.. 이유를 모르겠습니다.
미해결
Java 마이크로서비스(MSA) 프로젝트 실습
authentication-server는 어떤역활인가요? 강의 마지막에 볼때..클라이언트가 GateWay-server에 요청할경우 config-server 와 Eureka-server를 보내고 아이템서비스와 히스토리 서비스에 데이터 전달하는데 authentication-server는 아이템서비스로 봐야하는지 아니면 별도의 서버인지 궁금합니다. 14장 pdf파일에 두번째 그림보고 궁금해서 문의드립니다. 제가 느끼기엔 item-microservice와 유사한 기능이라 생각됩니다만.. 제가 이해하는게 맞을까요?
미해결
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
썸네일 이미지가 뜨지 않습니다! 그리고 css도 안먹힙니다. 더불어 if (!data) { return <DiaryContainer></DiaryContainer>; } 위의 코드가 없으면 화면이 웹드라우저에 뜨지 않습니다. import { DiaryContainer, ResultTitle, Divider, CardContainer, CardTitle, CardContent, ActionListItem, } from "./CommonStyles"; import { LoadingOutlined, CheckCircleTwoTone, HeartTwoTone, SmileTwoTone, MessageTwoTone, SoundTwoTone, } from "@ant-design/icons"; import { Image } from "antd"; import styled from "styled-components"; const ThumbnailImage = styled(Image)` max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px; display: block; `; const DiaryDisplay = ({ data, isLoading }) => { if (isLoading) { return ( <DiaryContainer> 불러오는중... <LoadingOutlined /> </DiaryContainer> ); } if (!data) { return <DiaryContainer></DiaryContainer>; } return ( <DiaryContainer> <ResultTitle>{data.title}</ResultTitle> <Divider /> <CardContainer> <CardTitle> <CheckCircleTwoTone twoToneColor="#FF9AA2" style={{ marginRight: "6px" }} /> 요약 </CardTitle> <CardContent>{data.summary}</CardContent> </CardContainer> <ThumbnailImage src={data.thumbnail} alt="Thumbnail" fallback="데이터:image/png;base64,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" /> <Divider /> <CardContainer> <CardTitle> <HeartTwoTone twoToneColor="#FFB7B2" style={{ marginRight: "6px" }} /> 감성일기장 </CardTitle> <CardContent>{data.emotional_content}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SmileTwoTone twoToneColor="#FFDAC1" style={{ marginRight: "6px" }} /> 내가 느낀 감정 </CardTitle> <CardContent>{data.emotional_result}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <MessageTwoTone twoToneColor={"#B5EAD7"} style={{ marginRight: "6px" }} /> 심리 분석 </CardTitle> <CardContent>{data.analysis}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SoundTwoTone twoToneColor="#C7CEEA" style={{ marginRight: "6px" }} /> GPT 조언 </CardTitle> <CardContent> {data.action_list.map((action, index) => ( <ActionListItem key={index}>{action}</ActionListItem> ))} </CardContent> </CardContainer> </DiaryContainer> ); }; export default DiaryDisplay; 코드는 이렇습니다. 썸네일은 원래 본 강의의 깃허브에서 내려받은 코드로도 안돼서 고친 것입니다. 원래코드도 이미지가 안떳습니다 ㅠㅠ 어떻게 문제를 해결할 수 있을까요?
해결됨
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] https://drive.google.com/drive/folders/1jHYkBAHDuUoSr5hjn0Kp5CzTAWLem3Zu?usp=drive_link 코드를 쭉 작성해봤는데 마지막에 submit할 때 whiteError페이지가 나옵니다. gpt에 해결책을 물어봤을 때 에러 로그를 보면, Thymeleaf 템플릿을 처리하는 동안 문제가 발생한 것을 알 수 있습니다. 특히, item.orderItems[0].item.name 라는 표현식에서 문제가 발생했습니다. 에러의 원인 에러 메시지 중에서 가장 중요한 부분은 다음과 같습니다: Caused by: org.springframework.expression.spel.SpelEvaluationException: EL1025E: The collection has '0' elements, index '0' is invalid 이 메시지는 item.orderItems[0] 에서 인덱스를 사용하여 컬렉션의 첫 번째 요소에 접근하려고 했지만, orderItems 컬렉션이 비어 있어서 인덱스 0 이 유효하지 않다는 것을 의미합니다. 즉, orderItems 컬렉션이 비어있거나 null일 때 이 표현식을 평가하려다가 오류가 발생한 것입니다. 해결 방법 컬렉션이 비어있을 경우에 대한 처리 : Thymeleaf 템플릿에서 컬렉션이 비어있는 경우를 대비하여 조건문을 추가할 수 있습니다. 예를 들어, orderItems 가 비어있지 않은 경우에만 접근하도록 할 수 있습니다. <div th:if="${item.orderItems.size() > 0}"> <span th:text="${item.orderItems[0].item.name}">Item Name</span> </div> 안전한 접근을 위한 기본값 제공 : orderItems 컬렉션이 비어있을 때 안전하게 처리하기 위해, th:text 속성에서 기본값을 제공할 수 있습니다. <span th:text="${item.orderItems.size() > 0 ? item.orderItems[0].item.name : 'No items'}">Item Name</span> 서버 측에서 데이터 처리 : 서버 코드에서 orderItems 가 비어있는 경우에 대해 적절히 처리하도록 할 수도 있습니다. 예를 들어, orderItems 가 비어있다면 기본값을 설정하거나, 비어있음을 표시하는 별도의 로직을 추가할 수 있습니다. 템플릿 구조 개선 : 템플릿 구조를 개선하여, orderItems 가 비어있을 때는 특정 HTML 요소를 렌더링하지 않도록 할 수 있습니다. 결론 에러의 원인은 item.orderItems[0].item.name 에서, orderItems 컬렉션이 비어있을 때 인덱스 0 에 접근하려고 했기 때문입니다. 이를 해결하려면 위의 방법 중 하나를 사용하여, orderItems 가 비어있는 경우를 안전하게 처리해야 합니다. 템플릿에서 Thymeleaf의 조건문이나 기본값 제공 기능을 사용하여 이 문제를 해결할 수 있습니다. 이런식으로 나왔고 h2데이터베이스의 order자체에 값이 잘 저장된 것은 확인했는데 무엇이 문제인지 잘 모르겠어서 질문드립니다