안녕하세요? 강의를 듣다가 코드 실행이 안되는 점 질문 드리려고 글을 남깁니다. 윈도우에서 가르쳐주신대로 파워쉘 창을 띄우고 코드를 실행하려고 했는데 잘 되지 않아 무엇이 잘못되었는지 궁금합니다. 첨부된 사진에서 어떤 점이 잘못되었는지 알려주시면 감사하겠습니다.

안녕하세요!! 언제나 고생많으십니다. 오랜만에 질문드립니다!!  서버 작동되는 흐름 파악하면 클라이언트를 까먹고 클라 공부하면 또 서버 까먹어서 상당히 어렵네요..ㅎ 오랜만에 다시 클라 작동방식 다시 복습하고 있는데 예전에 정확히 알아보지 않고 넘어갔던 흐름을 디버깅하면서 다시 보고 있습니다.. 지금까지 혼자 파악한 흐름을 잠시 정리해보면...(MyPlayer가 움직을 때 기준) 코드 흐름 상 처음에 방향키를 한 번 받아 Dir가 바뀌면 ① 그 턴의 Update문에서 UpdateController를 호출하면서 UpdateIdle을 호출하고 거기에서는 State만 Moving으로 바뀌고 return 해준 다음 ② 다음 턴의 Update문의 UpdateController에서 UpdateMoving으로 가게 되고 그 턴에서는 아직 destPos가 아직  바뀌지 않았으므로 MoveToNextPos로 바로 들어가게 되어 CellPos를 방향키 칸으로 바꾸어 준 다음 ③ 다음 턴의 Update의 UpdateController에서 UpdateMoving으로 가서 스르륵 동작을 시작하고  ④ 몇 번의 UpdateMoving 반복 끝에 목적지에 도착하면  그때는 Dir 가 None 이기 때문에 State를 Idle로 돌리고 return하는 것으로 파악하였습니다. 여기서 정말 이해하기 힘들었던건 UpdateMoving에 처음 진입할 때는 이미 기본 Update문이 (UpdateIdle 실행으로) 한 번 돌고 난 후인데도  MoveToNextPos로 넘어갔을 때 여전히 Dir가 Up을 유지하고 있어서  if (Dir == MoveDir.None) { State = CreatureState.Idle; CheckUpdatedFlag(); return; } 에서 CreatureState.Idle로 바뀌고 바로 return 하지 않은 점 입니다.. 너무 궁금해서 일일이 로그를 찍어 확인하니 아무리 키를 사아알짝 눌러도 키가 눌리는 로그는 2~3번이 찍히는 것으로 보아  2~3번의 Update 문이 돌 때까지는 MyPlayerController.cs의 UpdateController의 CreatureState.Moving 케이스에서 GetDirInput()을 호출하더라도 키 값이 입력되어 Dir이 Up을 유지하는 것을 파악하였습니다... (틀린 부분이 있다면 길어서 죄송하지만 지적 부탁드립니다..) Q. 라이브 코딩식으로 강의를 진행하시면서 이런 부분까지 어떻게 생각하면서 진행을 하시는건 지 궁금합니다...역시 많이 해봐야 감각이 생기는 걸까요??  (예를 들면 'MoveToNext는 두번째 Update에서 진입할테지만 KeyInput은 두세번은 연타로 눌리니 아직까진 Dir가 MoveDir.None이 아닐꺼야... if 에 (Dir == MoveDir.None) 를 써도 괜찮아!' 이런식의 생각을 하시는 걸까요..?) 또 한 가지 더 궁금한게 있는데요!! MyPlayer가 한 칸 움직일 떄 Dir, State, cellPos까지 세팅된 패킷이 한 번 가고 State가 Idle로 바뀔 떄 또 한 번 패킷이 보내져 두 번의 Broadcasting이  되는 것으로 파악됩니다.. Q 이때 타 클라이언트의 화면에 뜬 MyPlayer 게임오브젝트를 보았을 때 MyPlayer 클라이언트에서 처음 보낸 패킷에 의해 타 클라이언트의 MyPlayer 게임오브젝트에 붙은 CreatureController의 UpdateMoving으로 스르륵 움직이는 동작이 else문에 의해 반복되다가 if(dist < _speed * Time.deltaTime) 에 걸려 transform.position = destPos; 으로 설정되기도 전에  CreatureState.Idle을 담고 있는 다음 패킷이 전송되어 타 클라이언트의 MyPlayer 게임오브젝트의 움직이는 애니메이션이 도중에 뚝 끊기지 않으리라는 보장을 어떻게 하는걸까요..?  질문이 쓸데없이 길고 읽기도 귀찮으시겠지만 혼자 좀 잘못 된 방향으로 가고 있는게 아닌가라는 불안감이 커서 이렇게 라도 질문드립니다..! 한 번 읽어주시고 시간 나실 때 답변 부탁드립니다!!

netlify로 배포한 사이트에서 검색시 아래와 같은 오류가 발생하는데 해결방법이 있을까요?? Mixed Content: The page at 'https://suspicious-ride-04b74f.netlify.app/#/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.omdbapi.com/?apikey=7035c60c&s=frozen&type=movie&y=&page=1'. This request has been blocked; the content must be served over HTTPS.

max를 안쓰고 answer=''; 로 시작해도 상관없을까요?.. function solution(s){     let answer = '';     for( let x of s ){         if( x.length > answer.length ) answer = x;     }     return answer; } 보기 안좋은 코드인지 괜찮은 코드인지 구분이 안돼서 질문남깁니다! 감사합니다.

SpringMVC - v1,v2 를 수행할때 코드를 오타없이 정확히 입력했는데도(혹시 몰라서 교재 복붙까지했습니다) 맨 아래 사진과 같은 에러가 뜹니다. 다른 FrontController - v1,v2,v3,v4,v5.... 들은 여전히 잘 작동하구요 제가 어떤걸 잘못했을까요?? 코드를 보면 클래스명이 회색으로 뜨긴하는데..... 왜 안되는지 이유를 모르겠습니다ㅠ +) 이게 정확한 오류 메시지인지는 모르겠으나 혹시 몰라서 이건가 싶어 남깁니다..! 2021-08-19 23:45:36.747 ERROR 14332 --- [nio-8080-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Circular view path [new-form]: would dispatch back to the current handler URL [/springmvc/v2/members/new-form] again. Check your ViewResolver setup! (Hint: This may be the result of an unspecified view, due to default view name generation.)] with root cause package hello.servlet.web.springmvc.v2;import hello.servlet.domain.member.Member;import hello.servlet.domain.member.MemberRepository;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.util.List;@Controller@RequestMapping("/springmvc/v2/members")public class SpringMemberControllerV2 { private MemberRepository memberRepository = MemberRepository.getInstance(); @RequestMapping("/new-form") public ModelAndView newForm() { return new ModelAndView("new-form"); } @RequestMapping("/save") public ModelAndView save(HttpServletRequest request, HttpServletResponse response) { String username = request.getParameter("username"); int age = Integer.parseInt(request.getParameter("age")); Member member = new Member(username, age); memberRepository.save(member); ModelAndView mav = new ModelAndView("save-result"); mav.addObject("member", member); return mav; } @RequestMapping //List public ModelAndView members() { List<Member> members = memberRepository.findAll(); ModelAndView mav = new ModelAndView("members"); mav.addObject("members", members); return mav; }}

사진 첨부합니다. 강의 항상 잘듣고 있어요!

/*모달 동작*/ 1번) $('.open-modal').click(function(){ $('.modal').show() }) 2번) $('.close-modal').click(function(){ $('.modal').hide() }) 모달 만들기에서  1번 과정을 적은후 복사해서 2번으로 수정할 때 실수로  $('.open-modal').click(function(){ $('.modal').show() })$('.close-modal').click(function(){ $('.modal').hide() })  이렇게 윗줄로 올려서 복사했더니 모달js 뿐 아니라 네비게이션이랑 탭메뉴 잘 실행되다가 같이 안되어 버리는 문제가 발생했습니다. 윗줄로 올린거 뿐인데 왜 이런 문제가 발생하나요? 오류는 찾아서 고쳐서 잘 실행되는데 왜 그런지 이유가 궁금합니다.

실습을 해보다가 em의 움직임에 궁금한 점이 생겨서 질문드립니다. 실습 부분을 제가 임의로 단순화 시켜서 조금 다른 점이 있을 수도 있습니다. 아래와 같은 두 가지 Entity가 있다고 가정합니다. 제가 성공하고 싶은 로직은 아래와 같은 로직입니다. 결론부터 말씀드리면 '성공하고 싶은 로직' 즉 mappedBy로 참조한 student entity에 접근해서 Id를 출력하기 위해서는 필수1, 필수2, 필수3이 모두 필요했습니다.  처음 저는 em.flush() (필수1)로 DB에 반영만 해주면, 필수2, 필수3 필요없이 곧바로 mappedBy로 필드를 사용해서 Student Entity를 호출할 수 있을 줄 알았습니다. DB에 반영하기만 하면 em이 알아서 전부 관리해 줄 줄 알았던 것입니다. 처음에는 필수1 만 사용해서 A로직으로 구현했었고 studentList에는 어떤 element도 들어있지 않은 empty 컬렉션이 반환되었습니다.  그런데 실험을 해보니 필수1과 필수2를 통해 DB에 영속성 컨텐스트 내용을 반영한 뒤 초기화까지 해줘야 했습니다. 그리고 그대로 newShcool_A를 사용하면 안 되었고 em.find()(필수3)로 다시 DB에서 가져온 newShcool_B를 사용해야 mappedby 필드로 Student Entity들을 참조할 수 있었습니다.  결론적으로는 하나의 트렌젝션에서 mappedBy 필드를 사용할 때는 주의해야 겠다는 교훈을 얻긴 했지만 두 가지 궁금증이 생겼습니다. <질문1> 제가 위에서 실험해본 대로 EntityManager가 동작하는 것이 맞는지요? 제가 실험을 엉뚱하게 했을 수도 있을 것 같아서요. <질문2> 제가 처음 생각한대로 DB에 영속성 컨텍스트를 반영해주기만 하면 <필수1만 사용> 되지 않는 이유가 무엇일까요? 굳이 영속성 컨텍스트를 초기화하고 em.find()로 다시 DB 데이터를 가지고 와야 하는 이유를 정확히 모르겠습니다. 프록시를 사용해야 하니까? 라고 막연하게 생각하고 있지만 정확한 원리가 궁금합니다.

나누기를 하면 소수점이 나오는데 int로 처리하나요? 

계속 이런 메세지가 뜨면서 진행이 되질 않습니다 형식도 파일로 바꾸고 그대로 했는데 왜 이러는걸까요?

function solution(budget, priceArr) { let count = 0; priceArr.sort((arr1, arr2) => (arr1[0] + arr1[1]) - (arr2[0] + arr2[1])); for (const index in priceArr) { if (budget - priceArr[index][0] + priceArr[index][1] > 0) { budget -= priceArr[index][0] + priceArr[index][1]; count++; } else if (budget - (priceArr[index][0] / 2) + priceArr[index][1] > 0) { count++; break; } else { break; } } return count; }

Hacker news 클론코딩 실습을 진행하면서 axios로 api 데이터를 받아와지지가 않습니다. https://github.com/tastejs/hacker-news-pwas/blob/master/docs/api.md 에 올라와 있는 api 주소들 https://api.hnpwa.com/v0/news/1.json https://api.hnpwa.com/v0/newest/1.json https://api.hnpwa.com/v0/ask/1.json 세 개 모두 데이터가 받아와지지 않으며, 브라우저에서 링크 타고 접속하는것도 되지가 않습니다. 몇일전에는 잘 실습하다가 갑자기 오늘부터 이러는데..... 실습 환경의 문제인가요?? 필요한 정보일지는 모르겠지만, 브라우저에서 링크를 접속했을 때에는 500 ERROR가 발생합니다. 안내 문구는 다음과 같습니다. Error: Server Error The server encountered an error and could not complete your request. Please try again in 30 seconds.

1. 어셈블리어인 SASM에서 사칙연산을 진행할 때, "메모리"와 "메모리" 조합은 왜 불가능한 건가요...? 연산을 진행할 때, 연산을 할 값들의 메모리 크기와 결과값을 집어넣을 메모리의 크기를 모르기 때문에 그런건가요? 설령 안다고 해도 연산을 진행하려는 메모리 크기가 각자 다를 수도 있어서 아예 원천적으로 막은건가요? 2.     ;ex) 100 / 3은 ?     mov ax, 100     mov bl, 3     div bl     PRINT_DEC 1, al     NEWLINE     mov al, ah     PRINT_DEC 1, al 여기서 ah를 바로 출력할 수 없어서 al로 옮기셨었는데, 혹시 그 이유를 알 수 있을까요? 너무 궁금해서 질문을 올렸습니다.

람다식을 사용해서 작성하시는 것으로 봤습니다. btn.Clicked += (s, e) => //람다식 형태로 표현(s는 이벤트의 센더 e는 이벤트aurgs)              {                  this.BackgroundColor = Color.Chartreuse;              };             Content = new StackLayout             {                 Children =                 {                 btn                 }             }; 이런 코드인데 이벤트 추가할 때 기존에 쓰던 C#에서 winform등에 사용하는 이벤트 핸들러를 만들어서 추가한 후 xaml에서 만들어진 이벤트 함수를 만들어서 사용해도 똑같이 동작하나요? 예를 들어 btn.Click += btn_ck; private void btn_ck(s,e) {}; 와 같은 방식이여 다음으로 람다식 구문에 btn.Clicked += (s, e) => 에서 =>가 의미하는 바가 무엇인지요??

(사진)

사가와 리듀서 순서가 저는 사가가 더 먼저 콘솔에 찍히는데 이상 없이 동작하면 괜찮은거 맞나요??

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. import com.example.catalogservice.service.CatalogService; ....public class CatalogController { Environment env; CatalogService catalogService;... CatalogController는 생성자로 의존성을 주입받습니다(단, 여기서 import한 CatalogService는 impl이 아닌 인터페이스 자체입니다). 여기서 CatalogService는 @Component 같이 스프링에 알리는 객체로 설정하지 않은 인터페이스 입니다. @Servicepublic class CatalogServiceImpl implements CatalogService{ 한편 Impl에 @Service 어노테이션이 붙어있고, 또 implements로 CatalogService를 받아오기 때문에, 스프링에서는 CatalogServiceImpl을 알아서 CatalogService로 인식해서 넣어주는건가요?  그냥 단순하게 생각하면, 컨트롤러에서 CatalogServiceImpl 객체가 주입되어야 된다고 생각되는데(Service 붙은 Bean이 CatalogServiceImpl이기때문에), 스프링에서 어느정도 선까지 알아서 해주는지 감이 안 잡히네요ㅠ 스프링이 서비스로 인식하는 대상은 반드시 Bean객체 어노테이션(@Service, @Component 등)이 붙은 클래스에 의해 상속되는 인터페이스여야 하는건가요? 기존에 다른 언어로 개발하다가 마땅한 마이크로서비스 강의가 없어서 듣고 있는데 스프링 기반 지식이 조금 딸려서 질문 드립니다ㅠ(앞선 로드맵으로 스프링이 어떻게 돌아가는지 대강만 알고있어요ㅠ)

안녕하세요? 쌤~ 마지막 질문좀 드릴께용~ ^^; 999px에서 풋터부분 하단에 한국어 footer_lang 부분이 클릭하면 보여지는데 그것떄문에 클릭 안해도 풋터하단이 길게 남아 있아요..보통 이렇게 하단을 길게 냅두는지 아니면 누르기전에는 하단이 짧게 잇어야할거 같은데요. 사라지게 숨겨놔도 잘안되서요. 하단 랭귀지 선택은 어떻게 만들어야 하나요? 그리고 한국어 클릭하면 오른쪽으로 한국어 글자가 밀리고 select_lang_list 안에 폰트사이즈가 작게 안먹히는데 왜 그럴까요? ㅜㅜ 감사합니다~수고하세용!! 아래 코드입니다.^^ <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>설화수, 아시아의 지혜가 담긴 홀리스틱 뷰티 | 설화수 한국</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui"> <!-- favicon --> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"> <!-- style --> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="wrap"> <!-- header --> <header class="header"> <div class="header_wrap"> <!-- moblie nav --> <a href="#" class="mob_nav_btn"> <i></i> </a> <!-- mob_nav --> <div class="mob_nav"> <div class="bg"></div> <!-- mob_nav_wrap --> <div class="mob_nav_wrap"> <h2 class="sidenav-h"> <a href="#"></a> <img src="./img/logo_sulwhasoo_m.png" alt=""> </h2> <ul class="m_nav_list"> <li> <a href="#">브랜드스토리 <i class="icon_nav"></i> </a> </li> <li> <a href="#" class="m_nav_tit">제품 <i class="icon_nav"></i> </a> <dl><!-- 섭메뉴 --> <dt class="blind">제품</dt> <dd><a href="#">신제품</a></dd> <dd><a href="#">베스트셀러</a></dd> <dd><a href="#">스킨케어</a></dd> <dd><a href="#">메이크업</a></dd> <dd><a href="#">진설</a></dd> <dd><a href="#">명작 컬렉션</a></dd> <dd><a href="#">남성</a></dd> <dd><a href="#">라이프스타일</a></dd> </dl> </li> <li> <a href="#" class="m_nav_tit">설화수 라운지 <i class="icon_nav"></i> </a> <dl><!-- 섭메뉴 --> <dt class="blind">설화수라운지</dt> <dd><a href="#">설화수 스타일</a></dd> <dd><a href="#">뷰티리추얼</a></dd> <dd><a href="#">아카이브</a></dd> <dd><a href="#">설화문화전</a></dd> <dd><a href="#">매거진</a></dd> <dd><a href="#">소식</a></dd> </dl> </li> <li> <a href="#"class="m_nav_tit">소개 <i class="icon_nav"></i> </a> <dl><!-- 섭메뉴 --> <dt class="blind">소개</dt> <dd><a href="#">소개</a></dd> <dd><a href="#">스파프로그램</a></dd> <dd><a href="#">예약</a></dd> <dd><a href="#">매장찾기</a></dd> </dl> </li> <li> <a href="#"class="m_nav_tit">플래그십 스토어</a> <dl><!-- 섭메뉴 --> <dt class="blind">플래그십 스토어</dt> <dd><a href="#">소개</a></dd> <dd><a href="#">리미티드에디션</a></dd> <dd><a href="#">스페셜 서비스</a></dd> <dd><a href="#">예약</a></dd> <dd><a href="#">소식</a></dd> </dl> </li> </ul> <!--mob_btm--> <div class="m_nav_btm"> <div class="m_nav_cp"> <p> <a href="#">회사소개</a> <a href="#">서비스이용약관</a> <a href="#">UGC이용약관</a> <a href="#">개인정보처리방침 </a> <a href="#">영상정보처리방침</a> <a href="#">사이트맵</a> <a href="#">로그인</a> <a href="#">회원가입</a> </p> <div class="m_nav_cs"> 고객서비스센터(수신자요금부담) 080-023-5454<br> 월~금: AM 09:00~PM 06:00 </div> <div class="m_copy"> © AMOREPACIFIC CORPORATION. All rights reserved. </div> <a href="#"><img src="img/wa.png" alt="wa"></a> </div> </div> </div> </div> <!-- select_language --> <div class="select_language"> <a href="#" class="t_lang"> 한국/한국어 <i class="icon-angle-up"></i> <i class="icon-angle-down"></i> </a> <ul class="select_lang_list"> <li> <a href="#">한국/한국어</a> </li> <li> <a href="#">International/English</a> </li> <li> <a href="#">中国大陆/中文</a> </li> <li> <a href="#">中國香港/繁體中文</a> </li> <li> <a href="#">Hong Kong(China)/English</a> </li> <li> <a href="#">Singapore/English</a> </li> <li> <a href="#">Malaysia/English</a> </li> <li> <a href="#">Việt Nam/Tiếng Việt</a> </li> <li> <a href="#">Indonesia/Bahasa Indonesia</a> </li> <li> <a href="#">ประเทศไทย/ไทย</a> </li> <li> <a href="#">USA/English</a> </li> <li> <a href="#">FRANCE/FRANCAIS</a> </li> </ul> </div> <h1 class="logo"> <a href="#"><img src="img/logo_sulwhasoo.png" alt="logo"> </a> </h1> <div class="header_link"> <a href="#">매장찾기</a> <a href="#">구매하기</a> <a href="#" class="h_open_search"><i class="icon-search"></i> </a> <div class="search_container "> <form action="sarch.jsp"> <div class="search_wrap"> <label for="q" class=blind></label> <input type="search" id="q" class="text"> <button class="submit"> <i class="icon-search"></i> </button> </div> <a href="#" class="sch_close"> <img src="img/bu_x.png" alt="검색창닫기"> </a> </form> </div> </div> </div> <!-- gnb --> <div class="gnb "> <div class="header_wrap"> <ul class="gnb_menu"> <li class="nav_d1"> <a href="#" class="nav_d1_a">브랜드스토리</a> </li> <li class="nav_d1 d1_Over "> <a href="#" class="nav_d1_a">제품</a> <ul> <li class="nav_d2_box"> <a href="#" class="nav_d2_a"> 신제품 </a> <a href="#" class="nav_d2_a">베스트셀러</a> <a href="#" class="nav_d2_a">스킨케어 </a> <a href="#" class="nav_d2_a">메이크업</a> <a href="#" class="nav_d2_a">진설명작</a> <a href="#" class="nav_d2_a">명작컬렉션 </a> <a href="#" class="nav_d2_a">남성</a> <a href="#" class="nav_d2_a"> 라이프스타일</a> <a href="#" class="nav_d2_a"> 전제품 구성 </a> <a href="#" class="nav_d2_a"> 신제품 </a> </li> </ul> </li> <li class="nav_d1 d1_Over"> <a href="#" class="nav_d1_a"> 설화수 라운지 </a> <ul> <li class="nav_d2_box"> <a href="#" class="nav_d2_a">설화수 스타일</a> <a href="#" class="nav_d2_a">뷰티리추얼</a> <a href="#" class="nav_d2_a">설화문화전</a> <a href="#" class="nav_d2_a">매거진</a> <a href="#" class="nav_d2_a">소식</a> </li> </ul> </li> <li class="nav_d1 d1_Over"> <a href="#" class="nav_d1_a"> 스파 </a> <ul> <li class="nav_d2_box"> <a href="#" class="nav_d2_a">소개</a> <a href="#" class="nav_d2_a">스파프로그램 </a> <a href="#" class="nav_d2_a">예약찾기</a> <a href="#" class="nav_d2_a">매장찾기</a> </li> </ul> </li> <li class="nav_d1 d1_Over"> <a href="#" class="nav_d1_a"> 플래그십 스토어 </a> <ul> <li class="nav_d2_box"> <a href="#" class="nav_d2_a">소개</a> <a href="#" class="nav_d2_a">리미티드 컬렉션</a> <a href="#" class="nav_d2_a">스페셜서비스</a> <a href="#" class="nav_d2_a">예약</a> <a href="#" class="nav_d2_a">소식</a> </li> </ul> </li> </ul> </div> </div><!-- gnb end --> </header><!-- header end --> <!-- sub_menu --> <div class="sub_menu"> <ul> <li></li><!--비워둔다--> </ul> </div><!-- sub_menu end --> <div id="main"> <!-- visual --> <div class="visual"> <button class="right visu_arrow">right</button> <button class="left visu_arrow">left</button> <ul class="visu_btm_wrap"> <li class="visu_btm_list"><a href="#">btn01</a></li> <li class="visu_btm_list"><a href="#">btn02</a></li> <li class="visu_btm_list"><a href="#">btn03</a></li> <li class="controls_wrap"> <button class="start control">start</button> <button class="stop control">stop</button> </li> </ul> <!-- visual_wrap --> <ul class="visual_wrap"> <li class="visu_slide"> <div class="visu_veil"></div> <div class="visu_txt_wrap"> <div class="visu_txt_cont"> <div class="visu_tit"> 자음생에센스 </div> <div class="visu_txt_sub01"> Concentrated Ginseng Renewing Serum </div> <p class="visu_txt_sub02"> 진세노믹스™가 선사하는 <br> 3중 마이크로타켓팅으로 <br> 쉽게 무너지지 않는 탄탄한 피부 </p> <div class="visu_btn_wrap"> <a href="#" class="btn_view">자세히보기</a> <a href="#" class="btn_view">구매하러가기</a> </div> </div> </div> </li> <li class="visu_slide"> <div class="visu_veil"></div> <div class="visu_txt_wrap" > <div class="visu_txt_cont"> <div class="visu_tit"> 자음생앰플 </div> <div class="visu_txt_sub01"> Concentrated Ginseng Rescue Ampoule </div> <p class="visu_txt_sub02"> 단 한 번 사용으로도 외부자극으로 시달린<br> 피부를 개선해주는 레스큐 앰플 </p> <div class="visu_btn_wrap"> <a href="#" class="btn_view">자세히보기</a> </div> </div> </div> </li> <li class="visu_slide"> <div class="visu_veil" ></div> <div class="visu_txt_wrap" > <div class="visu_txt_cont"> <div class="visu_tit"> 윤조에센스 <br> 2020 뉴이어 컬렉션 </div> <div class="visu_txt_sub01"> BEAUTY FROM YOUR CULTURE </div> <p class="visu_txt_sub02"> 온 세상에 복을 전하는 <br> 마술같은 여정 <br> 쉽게 무너지지 않는 탄탄한 피부 </p> <div class="visu_btn_wrap"> <a href="#" class="btn_view">자세히보기</a> </div> </div> </div> </li> </ul> </div><!-- visual_wrap end --> <!-- content --> <div class="content"> <div class="recommend"> <h2 class="cont_title">설화수 선물추천</h2> <!-- recomm_tab--> <div class="recomm_tab"> <a href="#" class="btn_tab on">TRENDING</a> <a href="#" class="btn_tab">BEST</a> <a href="#" class="btn_tab">NEW</a> </div> <!-- recomm_list_wrap --> <div class="recomm_list_wrap"> <!-- recomm_list1 --> <ul class="recomm_list Act"> <li> <div class="recomm_img"> <img src="./img/recom_01.jpg" alt="01"> </div> <div class="recomm_name"> 윤조에센스 뉴이어 리미티드 </div> <div class="buy_view_layer"> <a href="#">자세히보기</a> </div> </li> <li> <div class="recomm_img"> <img src="./img/recom_02.jpg" alt="01"> </div> <div class="recomm_name"> 전설명작크림 </div> <div class="buy_view_layer"> <a href="#">자세히보기</a> </div> </li> <li> <div class="recomm_img"> <img src="./img/recom_03.jpg" alt="01"> </div> <div class="recomm_name"> 자음생 2종 기획 </div> <div class="buy_view_layer"> <a href="#">자세히보기</a> </div> </li> <li> <div class="recomm_img"> <img src="./img/recom_04.jpg" alt="01"> </div> <div class="recomm_name"> 진설 2종기획 </div> <div class="buy_view_layer"> <a href="#">자세히보기</a> </div> </li> </ul> <!-- recomm_list2 --> <ul class="recomm_list"> <li> <div class="recomm_img"> <img src="./img/recom_05.jpg" alt="01"> </div> <div class="recomm_name"> 자음생크림 </div> <div class="buy_view_layer"> <a href="#">자세히보기</a> </div> </li> <li> <div class="recomm_img"> <img src="./img/recom_09.jpg" alt="01"> </div> <div class="recomm_name"> 자음생에센스 </div> <div class="buy_view_layer"> <a href="#">자세히보기</a> </div> </li> <li> <div class="recomm_img"> <img src="./img/recom_07.jpg" alt="01"> </div> <div class="recomm_name"> 자음생유액 </div> <div class="buy_view_layer"> <a href="#">자세히보기</a> </div> </li> <li> <div class="recomm_img"> <img src="./img/recom_08.jpg" alt="01"> </div> <div class="recomm_name"> 자음생크림 </div> <div class="buy_view_layer"> <a href="#">자세히보기</a> </div> </li> </ul> <!-- recomm_list3 --> <ul class="recomm_list"> <li> <div class="recomm_img"> <img src="./img/recom_09.jpg" alt="01"> </div> <div class="recomm_name"> 윤조에센스 세포라 리미티드 </div> <div class="buy_view_layer"> <a href="#">자세히보기</a> </div> </li> <li> <div class="recomm_img"> <img src="./img/recom_10.jpg" alt="01"> </div> <div class="recomm_name"> 옥용팩 </div> <div class="buy_view_layer"> <a href="#">자세히보기</a> </div> </li> <li> <div class="recomm_img"> <img src="./img/recom_11.jpg" alt="01"> </div> <div class="recomm_name"> 여윤팩 </div> <div class="buy_view_layer"> <a href="#">자세히보기</a> </div> </li> <li> <div class="recomm_img"> <img src="./img/recom_12.jpg" alt="01"> </div> <div class="recomm_name"> 퍼팩팅 파운데이션 클로우 </div> <div class="buy_view_layer"> <a href="#">자세히보기</a> </div> </li> </ul> </div> </div> <!-- lounge --> <!-- 767px cont02 --> <div class="cont02"> <div class="lounge lou01"><!-- lou01 --> <div class="lounge_cont"> <div class="lounge_img"> <a href="#"> <img src="../img/lou_01.jpg" alt="liu01"> </a> </div> <div class="lounge_txt_wrap"> <h3>SHADE picker</h3> <p class="sub_tit">나에게 맞는 컬러가 궁금하다면?</p> <p class="desc">사용 중인 페이스 메이크업 제품 정보를 통 같은 컬러의 설화수 제품을 찾아드립니다.</p> <div class="btn_wrap"> <a href="#" class="btn_view">자세히보기</a> </div> </div> </div> </div> <div class="lounge lou02"><!-- lou02 --> <div class="lounge_cont"> <div class="lounge_img"> <a href="#"> <img src="./img/lou02.jpg" alt="liu01"> </a> </div> <div class="lounge_txt_wrap"> <h3>뷰티리추얼</h3> <p class="sub_tit">윤조 & 자음생<br> 탄력 시너지 듀오 <p class="desc">설화수 대표 윤조에센스 자음생에센스가 선사하는<br> 감동의 탄력 시너지로 올 여름 탄탄한 피부를 느껴보세요 느껴보세요</p> <div class="btn_wrap"> <a href="#" class="btn_view">자세히보기</a> </div> </div> </div> </div> </div> <!-- flagship store&spa --> <div class="flagship"> <h2 class="cont_title"> 설화수 플래그십 스토어 & 스파 </h2> <div class="flag_wrap"> <ul class="flag_slider"> <li class="fl_01">slider</li> <li class="fl_02">slider</li> <li class="fl_03">slider</li> <li class="fl_04">slider</li> </ul> <ul class="flag_btm_wrap"> <li class="Act"><a href="#">0</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="flag_txt_wrap"> <p> 등불이 어둠을 밝혀 길을 안내하 듯, <br> 아시아의 지혜를 담아 아름다움을 비추는<br> 설화수 플래그십 스토어와 스파를 <br> 방문해보세요. </p> <a href="#" class="btn_view"> 자세히보기 </a> </div> <a href="#" class="flagside left">left</a> <a href="#" class="flagside right">right</a> </div> </div> </div><!-- content end--> </div> <footer class="footer"> <div class="footer_wrap"> <div class="foot_link"> <div class="link_left"> <div class="foot_item_wrap"> <a href="#" class="footer_item">회사소개</a> <a href="#" class="footer_item">서비스이용약관</a> <a href="#" class="footer_item">UGC이용약관</a> <a href="#" class="footer_item">개인정보처리방침</a> <a href="#" class="footer_item">영상정보처리방침</a> <a href="#" class="footer_item">사이트맵</a> </div> <div class="foot_item_wrap"> <a href="#" class="footer_item">로그인</a> <a href="#" class="footer_item">회원가입</a> <span class="footer_item">고객상담팀(수신자요금부담):080-023-5454 </span> <span class="footer_item">[상담시간] 월~금:AM 09:00~PM 06:00 </span> </div> </div> <div class="link_right"> <a href="#" class="link_item"> <img src="img/wa.png" alt="wa"> </a> <a href="#" class="link_item"> <i class="icon-facebook"></i> </a> <a href="#" class="link_item"> <i class="icon-instagram"></i> </a> <a href="#" class="link_item"> <i class="icon-youtube-play"></i> </a> </div> </div> <div class="footer_legal"> ©AMOREPACIFIC CORPORATION. All rights reserved. </div> <!-- 999px --> <div class="footer_mob"> <a href="#" class="link_loc">매장찾기 <i class="icon-location"></i> </a> <div class="footer_lang"> <a href="#" class="link-lang">한국어 <i class="icon-angle-up"></i> <i class="icon-angle-down"></i> </a> <ul class="select_lang_list"> <li> <a href="#">한국/한국어</a> </li> <li> <a href="#">International/English</a> </li> <li> <a href="#">中国大陆/中文</a> </li> <li> <a href="#">中國香港/繁體中文</a> </li> <li> <a href="#">Hong Kong(China)/English</a> </li> <li> <a href="#">Singapore/English</a> </li> <li> <a href="#">Malaysia/English</a> </li> <li> <a href="#">Việt Nam/Tiếng Việt</a> </li> <li> <a href="#">Indonesia/Bahasa Indonesia</a> </li> <li> <a href="#">ประเทศไทย/ไทย</a> </li> <li> <a href="#">USA/English</a> </li> <li> <a href="#">FRANCE/FRANCAIS</a> </li> </ul> </div> </div> </div> </div> </footer> </div> <!-- script --> <script src="js/lib/jquery-3.1.1.min.js"></script> <script src="js/nav.js"></script> <script src="js/visu.js"></script> <script src="js/content.js"></script> <script src="js/flag.js"></script> </body> </html> media.css @charset "utf-8"; @media screen and (max-width:1439px){ body { overflow-x:hidden; } .content{ width:auto; } .recommend{ margin-top:8.3333vw; } .recomm_tab{ margin-bottom:1.736vw; } .recomm_list_wrap{ height:auto; } .recomm_img img{ width:auto; height:20.139vw; } .lounge{ margin-top: 4.8611vw; padding: 0 6.25vw; height: 40.9722vw; } .lounge_img{ width:40.9722vw; } .lounge_img img{ width:100%; } .lounge_txt_wrap{ width:calc(100% - 49.8611vw) } .lounge_txt_wrap .sub_tit { margin: 2.7777vw 0 0; font-size: 3.19444vw; line-height: 4.5138vw; } .lounge_txt_wrap .desc { margin: 1.111vw 0 0; font-size: 1.3888vw; line-height: 2.2222vw; } .lounge_txt_wrap .btn_view { margin-top: 3.75vw; height: 2.638vw; padding: 0 3.0555vw; font-size: 1.0416vw; line-height: 2.6388vw; } .flagship { margin: 8.333vw 0 7.778vw; } .flag_txt_wrap{ left: 49vw; width: 25.777vw; } .flag_txt_wrap p { font-size: 1.25vw; line-height: 2.0833vw; } .flag_txt_wrap .btn_view { margin-top: 3.75vw; height: 2.63888vw; padding: 0 3.0555vw; font-size: 1.0416vw; line-height: 2.6388vw; } .flag_txt_wrap{ margin-top: 2.0833vw; } .flagside{ width: 3.1250vw; height: 5.481vw; top: calc(50% - 2.7083vw); } } @media screen and (max-width:999px){ .select_language { display: none; } .header_link>a:not(.h_open_search){ display: none; } .gnb{ display: none; } .header_wrap{ justify-content: center; height: 60px; } .header_link{ width: auto; padding-top: 0; } .header_link> a.h_open_search{ /*우선순위에 밀려서 앱소이 안먹힌다. 검사에 들가서 똑같이 더 길게 써준다 */ position: absolute; right: 10px; top: 10px; margin: 0; padding: 0; font-size: 24px; } .mob_nav_btn{ display: block; position: absolute; left: 20px; top: 18px; width: 20px; height: 20px; } .mob_nav_btn i{ position: relative; display: inline-block; width: 100%; height: 2px; background-color: #767676; } .mob_nav_btn i:after{ content: ""; position: absolute; display: block; top: -5px; left: 0; width: 100%; height: 2px; background-color: #767676; } .mob_nav_btn i:before{ content: ""; position: absolute; display: block; top: 5px; left: 0; width: 100%; height: 2px; background-color: #767676; } h1.logo img{ width: 140px; } /* nav */ .mob_nav{ display: block; position: fixed; left: -264px; top: 0; width: 264px; height: 100%; background-color: #363636; transition: 0.5s; } .mob_nav.move{ left: 0; } .mob_nav .bg{ position: fixed; top: 0; left: 264px; width: calc(100% - 264px); height: 100%; background-color: rgba(0,0,0,0.308); display: none; } .mob_nav_wrap{} .sidenav-h{ text-align: center; padding: 13px 0 12px; } .sidenav-h img{ width: 100px; } ul.m_nav_list{ border-top: 1px solid #494949; } ul.m_nav_list li> a{ display: block; position: relative; font-size: 15px; padding: 12px 0 12px 15px; border-bottom: 1px solid #494949; color: #d5d5d5; font-weight: 700; } ul.m_nav_list li> a.m_nav_tit.On{ background-color: #1d1d1d; } ul.m_nav_list .icon_nav{ position: absolute; right: 15px; top: calc(50% - 7px); width: 14px; height: 14px; display: block; } ul.m_nav_list .icon_nav:before{ content: ""; display: block; position: absolute; left: 0; top: calc(50% - 1px); width: 100%; height: 2px; background-color: #555; } ul.m_nav_list .icon_nav:after{ content: ""; display: block; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background-color: #555; transform: rotate(90deg); transition: 0.3s; } a.m_nav_tit.On .icon_nav:after{ transform: rotate(0); } .m_nav_list li>dl{ display: none; } .m_nav_list li>dl>dd{ border-bottom: 1px solid #414141; line-height: 1.6; font-weight: 700; } .m_nav_list li>dl>dd>a{ display: block; padding: 12px 0 12px 30px; font-size: 14px; } .m_nav_btm{ padding: 50px 0 12px 10px; font-size: 12px; color: #767676; line-height: 1.8; }/* | m_nav_cp안에 p 안에 첫번쨰 a 다음에 오는 모든 a들 */ .m_nav_cp p a { display: inline-block; color: #767676; line-height: 1.1; } .m_nav_cp p a +a { border-left: 1px solid #4f4f4f; padding-left: 7px; /* a앞에 |을 밀어야하는데, a기준으로 padding-left밀어야 글자랑 |가 분리되고 왼쪽공간과 |는 margin-left로 민다 */ margin-left: 3px ; } /* search */ #main.on{ filter: blur(10px); } .search_container.show { width: 100%; transition: none; position: fixed; top: 0; right: 0; padding: 10px; background-color: #fff; } .search_wrap input.text{ height: 40px; padding: 0 12px; } .search_wrap .submit{ top: 3px; right: -5px; } /* visual */ .visual_wrap{ height: 38.134vw; } .visu_tit { font-size: 2.917vw; line-height: 3.750vw; letter-spacing: -0.139vw; } .visu_txt_sub01 { font-size: 1.25vw; } .visu_txt_sub02 { margin: 3.194vw 0 0; font-size: 1.389vw; } .visu_txt_cont{ width:80%; } .visu_btn_wrap{ margin:2.083vw 0 0; } .visu_btn_wrap .btn_view{ width:9.167vw; height:2.639vw; font-size:1.042vw; line-height: 2.639vw; margin-left:0.694vw; } .visu_arrow{ width: 2.093vw; height: 4.028vw; margin-top: -2.014vw; background-size: contain; } .visu_arrow.left{ left:1.3889vw; } .visu_arrow.right{ right:1.3889vw; } .visu_btm_wrap { bottom: 1.667vw; } .visu_btm_wrap li{ padding: 0 0.347vw; } .visu_btm_wrap li a{ width: 0.694vw; width: 0.694vw; border-radius: 0.347vw; } /* recommend */ .recomm_tab { width: 52.917vw; } .buy_view_layer>a{ width:9.167vw; height:2.639vw; font-size:1.042vw; line-height: 2.639vw; padding: 0; } .flagside{ top: 50%; transform: translateY(-50%); background-size: 95%; } .flagside.right{ right: -5px; } .flag_txt_wrap { left: 55vw; width: 25.777vw; } /* footer */ .footer{ margin: 80px 0 0px; } .link_left { display: none; } .link_right .link_item:first-child{ display: none; } .foot_link { justify-content: center; } .footer_legal{ display: none; } .footer { border-top: none; margin: 0; } .footer_wrap{ padding: 0; } .link_right .link_item i{ font-size: 1.8em; line-height: 48px; } .footer_mob{ display: block; text-align: center; padding: 15px 0; } .footer_mob a, .footer_lang{ display: inline-block; width: 150px; text-align: center; position: relative; } .footer_mob> a:first-child:after{ content: ""; position: absolute; width: 1px; height: 12px; background-color: #d5d5d5; top: 30%; right: 0; } .footer_lang.show ul.select_lang_list{ visibility: visible; top: 30px; padding: 0 60px 0 20px; } .footer_lang.show .icon-angle-up{ opacity: 1; position: absolute; left: 95px; } .footer_lang.show .icon-angle-down{ opacity: 0; } .footer_mob a{ font-size: 2.2vw; } }/*end*/ /* 767px */ @media screen and (max-width:767px){ .header_wrap{ height: 50px; } .mob_nav_btn{ top: 12px; } .header_link>a.h_open_search{ top: 5px; } h1.logo img{ width: 112px; } .visual_wrap{ height: 135vw; } .visu_slide:nth-child(1){ background-image:url(../img/visu_mo_01.jpg); } .visu_slide:nth-child(2){ background-image:url(../img/visu_mo_02.jpg); } .visu_slide:nth-child(3){ background-image:url(../img/visu_mo_03.jpg); } .visu_veil{/*애니메이션은 비저빌리티로하면 더 나음*/ visibility: hidden; } .visu_txt_wrap{ top: auto; bottom: 0; width: 100%; height: 28.125vw; } .visu_txt_cont{ width: 100%; align-items:center; } .visu_txt_sub02{ display: none; } .visu_btn_wrap{ display: none; } .visu_slide:nth-child(1) .visu_txt_wrap{ background: rgba(237,185,46,.3); } .visu_slide:nth-child(2) .visu_txt_wrap{ background-color: rgba(164,105,53,.3); } .visu_slide:nth-child(3) .visu_txt_wrap{ background-color: rgba(140,171,217,.5); } .visu_tit{ font-size: 6.25vw; line-height: 7.188vw; letter-spacing: -0.1em; } .visu_txt_sub01{ font-size: 3.438vw; margin:1.250vw; letter-spacing: -0.1em; } ul.visu_btm_wrap{ bottom: -8vw; } li.visu_btm_list a{ width: 2.5vw; height: 2.5vw; background-color: #e7e7e7; border-right: 1.250vw; } .start.control{ background-image: url(../img/btn-play-mo.png); } .stop.control{ background-image: url(../img/btn-stop-mo.png); } .visu_arrow{ width: 20px; top: auto; bottom: -8.438vw; background-position: center top; padding: 0; } /* recommend */ .recommend{ margin-top: 21.875vw; } h2.cont_title{ font-size: 5vw; } .recomm_tab{ width: auto; height: 8.625vw; margin: 0 4.688vw; } .recomm_tab a.btn_tab{ font-size: 14px; line-height: 8.625vw; } ul.recomm_list.Act{ margin-top: 4.688vw; flex-wrap: wrap; /*공간부족하면 아래로 떨어뜨림*/ } ul.recomm_list li{ width: 50%; height: 68.438vw; padding: 0 1.25vw; cursor: pointer; } ul.recomm_list li:hover .buy_view_layer{ opacity: 0; } .recomm_img{ display: flex; height: 50vw; justify-content: center; align-items: center; border: 1px solid #eee; } ul.recomm_list li .recomm_img img{ width: auto; height: 30.139vw; } ul.recomm_list li .recomm_name{ padding: 1.875vw 0; font-size: 3.75vw; } /* lounge */ .cont02{ margin-top: 6.125px; background-color: #fafafa; padding: 22.9375vw 0; } .lounge_cont{ flex-flow: wrap; } .lounge_img{ width: auto; margin: 4.375vw 0; padding: 0 8.75vw; } .lounge{ height: auto; position: relative; padding: 0; } .lounge_txt_wrap{ width: 100%; padding: 0 8.75vw; } .lounge_txt_wrap h3{ position: absolute; top: -50px; width: 100%; font-size: 4.375vw; } .lounge_txt_wrap desc{ margin: 6.25vw 0 0; font-size: 4.0625vw; line-height: 6.5625vw; } .lounge_txt_wrap .btn_view{ height: 9.0625vw; padding: 0 9.375vw; font-size: 3.125vw; line-height: 9.0625vw; } .lou02 .lounge_img{ order:0; } .lou02 { margin-top: 31vw;; } /* flagship */ .flag_wrap{ height: auto; padding: 0 8.72vw 10.3125vw; background-image: url(../img/flag-bg-txt-mo.jpg); background-position: 0 100%; background-size: contain; } .flag_slider{ height: 82.5vw; } .flag_slider li.fl_01{ background-image: url(../img/flag-bg-mo-01.jpg); } .flag_slider li.fl_02{ background-image: url(../img/flag-bg-mo-02.jpg); } .flag_slider li.fl_03{ background-image: url(../img/flag-bg-mo-03.jpg); } .flag_slider li.fl_04{ background-image: url(../img/flag-bg-mo-04.jpg); } .flag_txt_wrap{ position: static; left: auto; width: 100%; } .flag_txt_wrap p{ font-size: 3.75vw; line-height: 6.5625vw; margin: 6.25vw 0 0; } .flag_txt_wrap .btn_view{ height: 9.0625vw; padding: 0 9.375vw; font-size: 3.125vw; line-height: 9.0625vw; } .flag_btm_wrap{ margin-top: 0; position: absolute; top: 74.375vw; left: 0; width: 100%; text-align: center; } .flagside{ width: 20px; height: 20px; top: 74.375vw; margin-top: 0; background-size: contain; } .flagside.left{ left: 12vw; } .flagside.right{ right: 10vw; } }/*end*/ content.js $(function(){ //footer const footer_l =$('.footer_lang') footer_l.click(footer_lang) function footer_lang(e){ e.preventDefault() $(this).toggleClass('show') } })

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(http://bit.ly/3fX6ygx)을 먼저 확인해주세요. 3. 질문 잘하기 메뉴얼(http://bit.ly/2UfeqCG)을 먼저 읽어주세요. 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예[질문 내용] 여기에 질문 내용을 남겨주세요. 회원 수정 api 강의에서 update 매서드가 id 만 반환하게 하고 바로 뒤에 findOne으로 다시 Member 조회를 하는데요. 보통 저런 경우 트랜잭션을 나눠서 update 는 마스터 디비에서 실행하고 findOne은 슬레이브 디비에서 실행하게 될 텐데 저렇게 바로 이어서 써버리면 master 에서 slave 로 동기화되기 전에 slave에 리드 쿼리가 날라가서 업데이트 이전 데이터가 나올 수 있을 것 같은데, 이러면 문제가 되지 않을까요? 그래서 그냥 update 에서 반환할 때 entity 객체 그대로 반환하는 게 좋을 것 같아서 질문드립니다.

어떤 UML 다이어그램을 주로 사용하시는지 궁금합니다. 배운 내용을 참고해서 채팅 서버 포폴을 조금씩 만들고 있습니다. 사이즈가 커지니까 점점 뭐가 뭔지 제가 만든건데도 구조를 잡기가 힘드네요. 더불어수업 내용을 복습할 때도 다이어그램으로 구조를 잡아가면서 들어야할 것 같은 생각도 드는군요..