172만명의 커뮤니티!! 함께 토론해봐요.
미해결
실전! Querydsl
SQL의 ON절과 QueryDsl의 ON절 간에 차이가 있어보여 질문드립니다. SQL의 ON절에서는 테이블과 테이블 간에 어떤 컬럼을 기준으로 조인될 것인가를 명시하는 기능을 하는데 비해, QueryDsl에서는 join메서드가 그 기능을 포함하고 on메서드가 마치 sql의 where절의 역할을 하는 것(그렇기 때문에 QueryDsl에서는 SQL과 달리 on 메서드와 where 메서드를 함께 사용할 수 없음)으로 보이는데 맞을까요?
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? ( 예 /아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? ( 예 /아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? ( 예 /아니오) [질문 내용] @Repository public class MemberRepository { @PersistenceContext private EntityManager em; .... } 위 코드에서 질문이 하나 있는데요, EntityManagerFactory가 스프링 빈으로 디폴트로 등록이 되고 위 em에다가 entitymanager를 만들어서 주입을 해 주는 것인지, 아니면 EntityManager가 스프링 빈으로 아예 등록이 되고 저 위에다가 주입이 되는 것인지(아닐 것 같기는 합니다!)궁금합니다
미해결
나도코딩의 자바 기본편 - 풀코스 (20시간)
안녕하세요 게터 세터를 다 작성하고 런타임을 돌려보니 밑의 사진처럼 113,117행에 ; 가 없고 117에는 식의 개시가 올바르지 않다고 확인이 됩니다.. 써주신 코드랑 비교해도 틀린게 없는것으로 보이는데 뭐가 잘못된것일까요?
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 네 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 네 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 네 [질문 내용] 1. 회원 서비스를 테스트할 때, DI를 하는 이유를 저는 아래처럼 이해했는데 이것이 맞는 이해인지 궁금합니다. MemberService() 를 실행하는 순간 MemoryMemberRepository 가 new로 생성되고, 그 다음줄에서 MemoryMemberRepository 를 새롭개 new로 생성한다. 현재의 코드에서는 Store 가 static 하게 선언되었으므로 그런 문제가 발생하지 않겠지만, 그렇지 않다면 MemberService 와 MemoryMemberRepository 가 서로 다른 레포지토리 인스턴스를 가지게된다. 위 내용이 맞다면, 모듈 테스트를 하지 않는다는 가정하에 해당 부분 뒤에 나오는 스프링 통합 테스트를 할 때는 이미 스프링 컨테이너에 레포지토리가 등록되어 있으므로 생성자를 활용한 의존성 주입이 필요없는 것이 맞나요? 아래 그림은 최종적으로 제가 구조를 이해한 것을 구조화 한 것인데 혹시 틀린 부분이 있는지 궁금합니다.
미해결
웹 애니메이션의 새로운 표준, Web Animations API
안녕하세요. 강의 정말 재밌게 보았습니다 :) 강의를 듣고 Vue2에 적용하려 하니 해당 에러가 발생합니다. js를 import해서 사용하는 것 만으로는 제약이 있는 것인가요..? 😥 😥
미해결
웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
안녕하세요? 강사님. 공부 중에 혹시 css로 메뉴 만드는 거 말고 jquery로 메뉴 만드는 것도 가르쳐주시면 안될까요? 물론 css가 쉽고 간편하지만 jquery도 알고 싶어 문의글 남깁니다. 확인부탁드립니다. 감사합니다:)
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 강의 잘 듣고 있습니다! 이번 과제 코드 피드백 부탁드립니다! 고맙습니다. <화면> <html> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>SignUp</title> <link rel="stylesheet" href="./final.css"> <script defer src="./final.js"></script> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <span id="header__title">코드캠프 회원가입</span> </div> <div class="wrapper__body"> <div class="wrapper__text"> <input type="text" id="email" placeholder="이메일을 입력해 주세요."> <span class="errorMsg email">이메일이 올바르지 않습니다.</span> <input type="text" id="name" placeholder="이름을 입력해 주세요."> <span class="errorMsg name">이름이 올바르지 않습니다.</span> <input type="text" id="pw1" placeholder="비밀번호를 입력해 주세요."> <span class="errorMsg pw1">비밀번호를 입력해주세요.</span> <input type="text" id="pw2" placeholder="비밀번호를 다시 입력해 주세요."> <span class="errorMsg pw2">비밀번호를 입력해주세요.</span> </div> <div class="wrapper__phone" oninput="phone()"> <input type="text" id="num1" maxlength="3"> - <input type="text" id="num2" maxlength="4"> - <input type="text" id="num3" maxlength="4"> </div> <div class="wrapper__certification"> <div class="cert__number"> <span id="certNum">000000</span> <button class="chkBtn" disabled="true">인증번호 전송</button> </div> <div class="cert__time"> <span id="certTimer">3:00</span> <button class="chkBtn" disabled="true">인증완료</button> </div> </div> <div class="wrapper__select"> <div class="select__locale"> <select id="locale"> <option selected disabled>지역을 선택하세요</option> <option value="서울">서울</option> <option value="경기">경기</option> <option value="인천">인천</option> </select> <span class="errorMsg locale">지역을 선택해주세요.</span> </div> <div class="select__gender"> <label for="woman"> <input type="radio" name="gender" id="woman"> 여성 </label> <label for="man"> <input type="radio" name="gender" id="man"> 남성 </label> </div> <span class="errorMsg gender">성별을 선택해주세요.</span> </div> </div> <div class="divideLine"></div> <div class="wrapper__check"> <!-- <button class="submit" disabled="true">가입하기</button> --> <button class="submit">가입하기</button> </div> </div> </body> </html> <css> *{ box-sizing: border-box; margin: 0; } html, body{ width: 540px; } .chkBtn{ width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; color: #0068FF; background-color: #FFF; cursor: pointer; } .chkBtn.active { width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; background-color: #0068FF; color: #FFF; cursor: pointer; } .errorMsg{ width: 100%; color: red; font-size: 10px; display: flex; flex-direction: column; align-items: center; visibility: hidden; } .wrapper{ width: 100%; height: 100%; padding: 60px 80px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25); } .wrapper__header{ width: 100%; font-size: 32px; font-weight: 700; color: #0068FF; padding-bottom: 60px; } .wrapper__body{ width: 100%; } .wrapper__text > input{ width: 100%; height: 60px; margin-top: 20px; font-size: 16px; font-weight: 400; border: 1px solid #D2D2D2; border-radius: 7px; padding: 18px; } .wrapper__phone{ width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .wrapper__phone > input{ width: 100px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; } .wrapper__certification { width: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } #certNum, #certTimer{ color: #0068FF; font-size: 18px; padding-right: 20px; } .cert__time{ padding: 20px 0; } .wrapper__select{ width: 100%; display: flex; flex-direction: column; align-items: center; } .select__locale{ width: 100%; display: flex; flex-direction: column; justify-content: center; } #locale{ width: 100%; height: 60px; border: 1px solid #D2D2D2; border-radius: 7px; color: #797979; font-size: 16px; font-weight: 400; padding: 18px; } .select__gender{ width: 140px; display: flex; justify-content: space-between; padding-top: 30px; } .divideLine{ width: 100%; border: 1px solid #E6E6E6; margin: 20px 0; } .wrapper__check{ width: 100%; display: flex; justify-content: center; } .submit { width: 100%; height: 60px; font-size: 18px; font-weight: 400; color: #0068FF; background-color: #FFF; border: 1px solid #0068FF; border-radius: 7px; } <js> const submit = document.querySelector('.submit'); // 가입하기 const numberChk = document.querySelector('.cert__number .chkBtn'); // 인증번호 전송 const timeChk = document.querySelector('.cert__time .chkBtn'); // 인증완료 let time = 180; // 180초, 인증 시간 let isStarted = false; // email const emailChk = () => { let email = document.getElementById('email').value; if(email.includes('@') === true){ let isEmail = email.split('@')[1].includes('.'); if(isEmail === false){ document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.querySelector('.errorMsg.email').value = ''; return false; } else { document.querySelector('.errorMsg.email').style.visibility = 'hidden'; return true; } } else { document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.getElementById('email').value = ''; return false; } } // name const nameChk = () => { let name = document.getElementById('name').value; if(name.length === 0){ document.querySelector('.errorMsg.name').style.visibility = 'visible'; return false; } else { document.querySelector('.errorMsg.name').style.visibility = 'hidden'; return true; } } // pw const pwChk = () => { let pw1 = document.getElementById('pw1').value; let pw2 = document.getElementById('pw2').value; if(pw1 && pw2){ if(pw1 === pw2){ document.querySelector('.errorMsg.pw1').style.visibility = 'hidden'; document.querySelector('.errorMsg.pw2').style.visibility = 'hidden'; return true; } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; document.querySelector('.errorMsg.pw1').innerHTML = '비밀번호가 일치하지 않습니다.' document.querySelector('.errorMsg.pw2').innerHTML = '비밀번호가 일치하지 않습니다.' return false; } } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; return false; } } // phone const phone = () => { let num1 = document.getElementById('num1').value; let num2 = document.getElementById('num2').value; let num3 = document.getElementById('num3').value; if(num1.length === 3) { document.getElementById('num2').focus(); if(num2.length === 4) { document.getElementById('num3').focus(); } } if(num1.length === 3 && num2.length === 4 && num3.length === 4){ numberChk.classList.add('active'); certification(); } } const certification = () => { // 인증번호 numberChk.disabled = false; numberChk.addEventListener('click', e => { let randomNumber = String(Math.trunc(Math.random() * 1000000)).padStart(6, '0') document.getElementById('certNum').innerText = randomNumber; // 타이머 if(isStarted === false){ isStarted = true; timeChk.disabled = false; let timer = setInterval(() => { if(time >= 0){ let min = Math.trunc(time / 60); let sec = String(time % 60).padStart(2,'0'); document.getElementById('certTimer').innerText = `${min}:${sec}`; time--; } else { clearTime(timer); } }, 100) timeChk.addEventListener('click', e => { if(time >= 0){ alert('인증이 완료 되었습니다.'); clearTime(timer); submit.disabled = false; } }) } }) } const clearTime = (timer) => { timeChk.classList.remove('active'); numberChk.classList.remove('active'); document.getElementById('certNum').innerText = '000000'; document.getElementById('certTimer').innerText = '0:00'; timeChk.disabled = true; numberChk.disabled = true; isStarted = false; clearInterval(timer); } const checkValidation = () => { emailChk(); nameChk(); pwChk(); if(emailChk() && nameChk() && pwChk()) { return true; } else { return false; } } // 검증 submit.addEventListener('click', e => { checkValidation(); if(checkValidation()){ alert('코드캠프 가입을 축하합니다.'); } });
미해결
김영한의 자바 입문 - 코드로 시작하는 자바 첫걸음
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 더 큰 숫자 찾기문제에 int max = (a > b) ? a : b;가 아닌 String status = (a > b) ? "10" : "20";는 틀린 답인가요? 이유도 궁금합니다
미해결
김영한의 실전 자바 - 중급 1편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 익명 클래스는 이름이 없는 지역 클래스라고 하셨는데 익명 클래스를 메소드 파라미터로 넘기는 부분에서 사용하기 때문에 지역 클래스라고 하는건가요??
해결됨
자바 ORM 표준 JPA 프로그래밍 - 기본편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 여기에 질문 내용을 남겨주세요. 사진에서 4. flush, 5. commit은 무엇을 의미하는 것인지 궁금합니다.
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
안녕하세요 강의 잘 듣고 있습니다. 다름이 아니라 프로젝트를 업그레이드 하는 과정에서 오류가 생겨 질문 드립니다. package ShopProject.myShopProject.Domain; import ShopProject.myShopProject.Domain.Item.Item; import ShopProject.myShopProject.Domain.Order.Order; import jakarta.persistence.*; import jakarta.validation.constraints.NotEmpty; import jakarta.validation.constraints.NotNull; import lombok.Data; import lombok.Getter; import lombok.Setter; import java.util.ArrayList; import java.util.List; @Entity @Getter @Setter public class Member { @Id @GeneratedValue @Column(name = "member_id") private Long id; private String name; @Embedded private Address address; @OneToMany(mappedBy = "member",cascade = CascadeType.REMOVE) private List<Order> orders = new ArrayList<>(); private String loginId; private String password; @OneToMany(mappedBy = "member") private List<LikedItem> likedItems = new ArrayList<>(); } package ShopProject.myShopProject.Domain; import ShopProject.myShopProject.Domain.Item.Item; import jakarta.persistence.*; import lombok.Getter; import lombok.Setter; @Entity @Getter @Setter public class LikedItem { @Id @GeneratedValue @Column(name = "likedItem_id") private Long id; @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "member_id") private Member member; @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "item_id") private Item item; } 보시는 것처럼 멤버와 좋아요 상품은 Lazy 관계에 있습니다. OneToMany는 기본이 Lazy이므로 명시하지 않았습니다. 따라서 좋아요 상품은 직접 조회될 때만 DB에서 조회되고, 다른 경우는 프록시 형태로 존재합니다. //아이템 상세 정보 @GetMapping("item") public String itemDetail(@RequestParam("itemId") Long itemId, @SessionAttribute(name = "loginMember") Member loginMember, Model model) { log.info("item 호출"); Item item = itemService.findOne(itemId); log.info(loginMember.getLoginId() + " " + loginMember.getName()); // 좋아요 여부 추가 model.addAttribute("isLiked", memberService.isliked(loginMember, item)); //이 부분입니다!! model.addAttribute("item", item); model.addAttribute("member", loginMember); if (item.getCategory().equals("Book")) { return "items/item/book"; } if (item.getCategory().equals("Album")) { return "items/item/album"; } if (item.getCategory().equals("Movie")) { return "items/item/movie"; } return "items/item"; } 위 컨트롤러를 호출하면, isliked라는 매소드를 실행하게 됩니다. 좋아요 여부를 확인하는 메소드입니다. //좋아요 아이템이 아니면 false 반환 @Transactional public Boolean isliked(Member member, Item item) { log.info("좋아요 확인 메서드 실행"); // log.info("멤버 정보" + member.getName() + " " + member.getLoginId()); for (LikedItem likeditem: member.getLikedItems()) { //여기에서 lazyinitializationError 발생 if (likeditem.getItem().getName().equals(item.getName())) { log.info("좋아요인 경우"); return true; } } log.info("좋아요 아닌 경우"); return false; } 그런데 여기에서 맴버의 좋아요 목록을 불러오면 lazyinitialization 에러가 발생합니다... 정말 많이 원인도 구글링해보았는데, 영속성 컨텍스트가 종료 된 후 접근할 때 발생하는 것을 알았습니다. 영속성 컨텍스트의 생명주기는 트렌잭션과 거의 동일하다고 알고 있습니다. 만약 위 메소드에 트렌젝션 어노테이션이 없다면 member.getLikedItems() 의 결과를 초기화해주지 않으면 오류가 발생할 것입니다. 따라서 트렌젝션 어노테이션을 넣으므로서, member.getLikedItems()를 가져오고, 직접 DB에서 불러오는 과정을 한 트랜젝션 안에서 수행하도록 했습니다. 그런데 이 메서드에서 계속 LazyinitializatoinError가 발생합니다. 이 부분의 원인을 전혀 못 찾겠습니다.. 해결책으로는 DTO를 사용하거나, fetch Join을 사용해서 멤버와 같이 조인하여 한번에 가져옴으로 해결할 수있을 거라 생각합니다. 하지만 해결책은 알았지만, 위 코드의 무슨 오류가 있는지 정말 궁금합니다. 따라서 이 코드의 오류를 알고 싶습니다. 또한 저의 이해에 오류가 있다면 그 부분도 알려주시면 감사하겠습니다.
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
애초에 없는 파일이라 뜨는데 뭐가 잘못된건가요??
미해결
PZM기반 실무중심 백엔드 부트캠프(프리트레이닝)
그런거 같아요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자바스크립트 함수가 조금 어려운데 함수는 그냥 관련된 코드들을 작성할 때 사용하나요? 예를 들어 input으로 어떠한걸 한다면 input 함수를 만들어서 이 함수안에는 input과 관련된 코드들을 작성한다고 보면되는건가요?
미해결
실전! 스프링 데이터 JPA
<순수 JPA 기반 리포지토리 만들기>에서 단건 조회 시 Optional로 반환하는데, repository layer에서 orElseThrow를 던지는 방법은 별로인가요?
해결됨
김영한의 실전 자바 - 중급 1편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 궁금중이 생겨서 질문을 남깁니다. Period클래스를 이용해서 지정 범위 의 시간을 구한 것을, 다시 LocaDate로 값을 바꾸고 싶을때, 아래의 코드처럼 코딩을 하였는데요, LocalDate startDate = LocalDate.of(2024, 1, 1); LocalDate endDate = LocalDate.of(2024, 11, 21); Period period = period.between(startDate, endDate); LocalDate localDate = LocalDate.of(period.getYears(),period.getMonths(),period.getDays()); 이런 코드 스타일이라고 할까요? 이렇게 코드 짜는게 맞나요? (TestBetween클래스 코드를 좀 수정 한 것입니다.) 답변 부탁 드립니다. (추가) - 코드 변경 + 내용 수정 글을 다시 보니 글이 너무 이상하네요. 좀 죄송합니다. 저가 너무 서포터즈님 들의 도움만 바라는 것인가? 라는 생각도 좀 드는데.. 이것도 지적해주시면 감사하겠습니다.
미해결
Next + React Query로 SNS 서비스 만들기
modal이 없는 상황의 오류를 해결하기위해 제로초님이 default.tsx라는 파일을 소개해줬는데요, 그냥 layout.tsx에서 애초에 Probs를 정의할때 type Probs= modal?:reactNode로 하면 안될까요?
미해결
웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)
초반에 제이쿼리 소스를 넣을때 둘 중 하나만 언더바가 생겨요 ㅠㅠ
미해결
카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)
'홈페이지 헤더만들기'에서 header__nav-box와 header__list-box를 사용해 div로 한번 묶고 ul, li를 적용하는데, 오른쪽 icon은 왜 div없이 ul, li로 바로 하는지 궁금합니다. <header> <nav> <ul> <li> <p> <ul> <li> 이 구조인데, nav 태그 없이 ul, li로만으로도 가능할거 같아서요.
해결됨
처음 만난 리액트(React)
안녕하세요 강의 감사히 잘 듣고 있습니다. 다름이 아니라 chapter06에서 코드는 같은데 Notification의 componentDidUpdate() 한번씩 더 호출되는데 이유를 모르겠습니다. import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16, }, messageText: { color: "black", fontSize: 16, }, }; class Notification extends React.Component { constructor(props) { super(props); this.state = {}; } componentDidMount() { console.log(`${this.props.id} componentDidMount() called.`); } componentDidUpdate() { console.log(`${this.props.id} componentDidUpdate() called.`); } componentWillUnmount() { console.log(`${this.props.id} componentWillUnmount() called.`); } render() { return ( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ); } } export default Notification; import React from "react"; import Notification from "./Notification"; const reservedNotifications = [ { id: 1, message: "안녕하세요, 오늘 일정을 알려드립니다.", }, { id: 2, message: "점심식사 시간입니다.", }, { id: 3, message: "이제 곧 미팅이 시작됩니다.", }, ]; var timer; class NotificationList extends React.Component { constructor(props) { super(props); this.state = { notifications: [], }; } componentDidMount() { const { notifications } = this.state; timer = setInterval(() => { if (notifications.length < reservedNotifications.length) { const index = notifications.length; notifications.push(reservedNotifications[index]); this.setState({ notifications: notifications, }); } else { this.setState({ notifications: [], }); clearInterval(timer); } }, 1000); } componentDidUpdate() { console.log(` parent componentDidUpdate() called.`); } componentWillUnmount() { if (timer) { clearInterval(timer); } } render() { return ( <div> {this.state.notifications.map((notification) => { return ( <Notification key={notification.id} id={notification.id} message={notification.message} /> ); })} </div> ); } } export default NotificationList; 추가로 NotificationList의 componentDidUpdate()가 계속 호출되는데 이유가 있을까요?
