172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! Header.jsx 파일에서 이 오류가 사라지지 않아서 질문 드립니다! 어떻게 해결해야 하나요...?
미해결
[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
저의 경우 client sql 버전이 안맞다고 나옵니다 workbench는 8.0 Mysql 9.0 Configurator로 설치했습니다 stackoveflow에서 찾아보니 ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'; Where root as your user localhost as your URL and password as your password Then run this query to refresh privileges: flush privileges; Try connecting using node after you do so. If that doesn't work, try it without @'localhost' part. 이런 답변이 있는데 어떻게 적용하는지 알 수 있을까요?
미해결
토비의 스프링 6 - 이해와 원리
리포지토리 계층에서 모든 데이터 액세스 기술에서 발생하는 예외는 DataAccessException으로 랩핑되어서 던져진다고 말씀하셨는데 받는 쪽인 서비스 계층에서는 DataAccessException의 서브클래스 타입의 예외를 받게 될거 같은데요. 서비스 계층에서 받게 되는 예외가 예를 들어 DuplicateKeyException이라서 처리를 하게 된다면 서비스 계층은 특정 리포지토리의 예외에 종속적이게 될거 같습니다. 그래서 컨트롤러 단으로 예외를 넘겨 ExceptionHandler로 처리해주는 것이 좋은 방법일까?에 대해서 질문 드리고 싶습니다. 근데 만약 서비스 계층에서 처리한다면, // @Service 안에 있는 있는 일부 코드 (회원가입 로직) public boolean saveCustJoinInfo(UserDto userDto) { String pwd1 = userDto.getPwd().split(",")[0]; String password = passwordEncoder.encode(pwd1); userDto.setPwd(password); try { userDao.insertUser(userDto); return true; } catch (DataAccessException e) { return false; } } 이렇게 처리해도 문제가 없는가에 대해 궁금합니다. 예외 처리에 대한 여러 블로그들을 읽어봤는데 다수의 사람들이 사용자 정의 예외클래스를 정의해서 던지도록 한 이유도 궁금합니다. 만약 이 방법이 좋지 않다면 어떤 계층에서 처리하면 특정 계층이 기술에 종속적이지 않게 예외를 처리할 수 있는지 조언해 주시면 감사하겠습니다. 토비님의 스프링 강의를 일주일 만에 완강했는데 너무 좋은 강의라 부트 강의도 구매하였습니다ㅎㅎ 아키텍처에 대한 강의도 고려하시고 있다고 하셨는데 기다리고 있겠습니다!!
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
다른 강의에선 작동 속도때문에 전부 인텔리제이로 바꿔서 진행했었는데 강의 교안을 보면 스프링부트 3.2 이상부터는 gradle로 하라고 나와있어 궁금하여 질문드립니다.
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 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)
해결됨
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
app.use('/', express.static(path.join(__dirname, 'public'))); 다른 코드들에서는 이런 식으로 경로를 지정하면 경로와 똑같은 요청만 처리를 하거나 모든 요청에 대해 처리하고 싶으면 그냥 경로를 생략하였는데 express.static은 왜 localhost:3000/ 에 대한 요청만 받아들이는 것이 아니라, 모든 요청에 대해 해당 파일이 있는지 확인하게 되는지 궁금합니다. 예시) localhost:3000/about -> public 폴더 안에 about 파일이 있는지 찾음 localhost:3000/hello.css -> public 폴더 안에 hello.css 파일이 있는지 찾음 express.static은 특별한 미들웨어 인가요?
해결됨
실전! 스프링 데이터 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문에서 조회하는 컬럼이 달라지는지 궁금합니다.
미해결
프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
1) "webpack": "^5.94.0", "webpack-cli": "^5.1.4" node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path ./dist 다른 질문글에 open index.html 을 했는지 모르겠지만 저는 잘 안되더라구요 차이점은 ./dist/main.js 에서 ./dist 입니다. main.js를 /dist/main.js/main.js 이렇게 만들어버리더라구요 그래서 요상한 에러들 때문에 해맸었습니다. 2) 제가 봤던 에러는 크롬 디버깅창에 main.js를 그대로 로딩하지않고 마치html처럼 <!DOCTYPE html> 이 첫줄에 추가된 체로 로딩이 되어서 unexpected token "<" 와 같은에러를 봤습니다. 혹시 왜 js를 html로 랩핑? 해서 읽어온 이유를 아시나요?
해결됨
김영한의 실전 자바 - 고급 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%할인 쿠폰을 사용하지 못했는데, 혹시 다시 쿠폰 발급이 가능한지 여쭤봐도 되겠습니까?! 감사합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
투두를 수정, 삭제하는 강의를 보면서 버튼을 클릭할 때, 제가 누른 버튼이 어떤 버튼인지 알 수 없기 때문에 이벤트 객체를 이용해야 한다고 생각했습니다. 내가 클릭한 버튼의 아이디를 수정, 삭제하는 함수의 인수로 전달해야 한다고 생각해서 아래와 같은 코드로 작성해야한다고 생각했습니다. const onChageCheckBox = (e) => { onUpdate(e.target.id); }; const deleteHandler = (e) => { onDelete(e.target.id); }; 하지만 강의에서는 아래 코드처럼 알려주셔서요! const onChageCheckBox = () => { onUpdate(id); }; const deleteHandler = () => { onDelete(id); }; 이벤트 객체를 사용하지 않고 id만으로 함수가 실행되는 점이 이해가 가지 않아 질문 드립니다. 더불어 이벤트 객체를 사용해서 코드를 작성하는 방법도 있는지 질문 드립니다. 항상 좋은 강의해주셔서 감사합니다!
미해결
실습으로 배우는 선착순 이벤트 시스템
쿠폰이 발급되고 바로 사용하려는 유저가 있다면 어떻게해야하나요? 실무에서 보통의 경우 어떻게 처리하는지 궁금한데요. 예를 들어서, 쿠폰이 생성되려면 시간이 다소 소요될 수 있다는 안내 문구와 같은 정책으로 안고가는지.. 아니면 다른 좋은 방법이 있는지 궁금합니다. 강의 내용 흐름 레디스를 통해서 싱글 스레드로 쿠폰 개수 확인 제한 범위 안이라면 클라이언트에게 쿠폰 발급 성공 응답 비동기로 처리량을 조절하면서 쿠폰 데이터를 저장 실제 유저가 아직 쿠폰 발급이 안되었는데, 쿠폰 사용 시도 이 경우 어떻게 대응하는지 궁금합니다.
미해결
김영한의 실전 자바 - 중급 1편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 혹시 중급1에서 완벽히 이해가 안됬다고 느끼면 중급1편을 다시 재수강하고 중급2로 넘어가는게 좋을까요? 아니면 우선 순차적으로 모두 수강후에 재수강하는것이 좋을까요?
미해결
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
import { Test } from '@nestjs/testing'; import { UsersService } from '../users.service'; import { IContext } from 'src/commons/interfaces/context'; import { Request, Response } from 'express'; // 주로 DB 작업할 때 가짜DB 만들 때 사용함 class MockUsersService { mydb = []; create({ email, password, name, age }): string { this.mydb.push({ email, password, name, age }); const token = 'token'; return token; } } describe('UsersResolver', () => { let usersService: UsersService; beforeEach(async () => { const usersModule = await Test.createTestingModule({ providers: [ UsersService, { provide: UsersService, useClass: MockUsersService, }, ], }).compile(); usersService = usersModule.get<UsersService>(UsersService); }); describe('fetchUser', () => { it('유저 정보 찾기', () => { const mockRequest: Request & { user?: { id: string } } = { user: { id: '12345' }, } as Request & { user: { id: string } }; const mockResponse: Response = {} as Response; const mockContext: IContext = { req: mockRequest, res: mockResponse, }; expect(mockContext.req.user).toStrictEqual({ id: '12345' }); }); }); describe('createUser', () => { it('유저 등록하기', async () => { const mockToken = 'token'; const mockUser = { email: 'aaa@aaa.com', password: '1234', name: '정중식', age: 12, }; const result = await usersService.create({ ...mockUser }); // 반환 값이 mockToken과 일치하는지 확인 expect(result).toBe(mockToken); }); }); }); 강의에서는 app.controller.spec랑 똑같이하시면됩니다~ 하고 넘어가셔서 챗지피티랑 손잡고 짜봣는데요.. 어떤가요? 맞게했나요?.. 개념도 생소하고 코드짜는게 넘 어렵네요.. 챗지피티 이자식은 목업클래스 안만들어주고 지름길 같은 jest.fn()같은 메서드로 목업함수 만들어주고.... 선생님 답변기다리겠씁니다!
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
[질문 내용] table에 설정을 해주고 했는데 다 잘되기는 하나 뒤에 에러인 sql Error가 뜨면서 mbr의 테이블이 없다고 하네요 뭐때문에 이런거죠?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
container 중앙으로 이동시킬때 .container { background: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px; } 라고 하셨는데 가운데 정렬하게 될때 , margin: 0 auto; 하는것과 어떤차이가 있을까요 ??
미해결
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; 코드는 이렇습니다. 썸네일은 원래 본 강의의 깃허브에서 내려받은 코드로도 안돼서 고친 것입니다. 원래코드도 이미지가 안떳습니다 ㅠㅠ 어떻게 문제를 해결할 수 있을까요?
