172만명의 커뮤니티!! 함께 토론해봐요.
미해결
퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
HTML 교재 19 페이지 http://placehold.it 열리지 않아요, 없어진것 같음 다른 사이트 알려주세요 그리고 13페이지 한글입숨 사이트 열리지 않아요, 일시적인지 는 몰라도 찾아보니 http://guny.kr/stuff/klorem/ 여기 지원되네요
해결됨
ChatGPT API 입문 강의 - 30분 만에 다국어 번역기 웹 풀스택 개발하기
안녕하세요, 강의 실습을 python으로 진행하셨는데 만약 웹 사이트 백엔드 개발을 java spring boot를 사용한다면 gpt api를 강의처럼 사용할 수 있을까요?
미해결
SVG 마스터
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> <style> .svg-circleText {font-size: 1.5rem; font-weight: bold; fill: red;} .svg-circleText tspan {display: inline-block; margin-right: 30px;} </style> <defs> <circle id="text-circle" cx="250" cy="250" r="240" stroke="blue" fill="transparent" /> </defs> <text x="20" y="20" class="svg-circleText"> <textPath href="#text-circle"> <tspan>My Work</tspan><tspan>My Work</tspan><tspan>My Work</tspan> <tspan>My Work</tspan><tspan>My Work</tspan><tspan>My Work</tspan> <tspan>My Work</tspan><tspan>My Work</tspan><tspan>My Work</tspan> </textPath> </text> </svg> 위처럼 circle로 하고싶은데 나오지 않습니다. 각각 따로 하면 circle도 잘 보이고 글자도 잘 보입니다. 하지만 id와 textPath를 사용하여 연결하면 보이지 않습니다ㅠ
미해결
Tailwind CSS로 만드는 멋진 웹 UI 스타일링
(사진)
미해결
백엔드 개발자 성능 개선 초석 다지기
실습도중 Script 클릭시 해당 오류가 납니다. 컴퓨터 스펙은 m1 입니다.. 2024-03-25 14:53:51,833 ERROR FileEntryRepository.java:192 : Error while fetching files from SVN for admin 다른 버전으로 설치해도 동일한 이슈가 나서 혹시 해결하셨던 내용이 있을지 문의드립니다.
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] Java HotSpot(TM) 64-Bit Server VM warning: Sharing is only supported for boot loader classes because bootstrap classpath has been appended 이 오류는 무엇인가요?
해결됨
[코드캠프] 시작은 프리캠프
vscode 다운받았는데 언어를 한국어로 바꾸고 싶은데 설정 어디서 해야되나요 ?
미해결
입문자를 위한, HTML&CSS 웹 개발 입문
계속 이런 식으로 떠요 어떤 게 문제일까요? 초기화도 해봤는데 똑같이 저런식으로만 뜹니다 코드는 기본으로만 짜서 코드문제는 아닌 것 같습니다
미해결
10주완성 C++ 코딩테스트 | 알고리즘 코딩테스트
선생님, 강의 잘 듣고 있습니다! 다름이 아니라 혹시 기저조건에 if (price >= answer) { return; } 해당 조건을 추가해주지 않으신 이유가 있을까요? 해당 조건 없이도 시간복잡도 관련해서 영향이 적기 때문일까요..? 감사합니다! 아래는 저의 답안입니다! public class Main { static int n, answer = Integer.MAX_VALUE; static int[][] arr; static boolean[][] visited; static Map<Point, Integer> map = new HashMap<>(); static int[] dy = {-1, 0, 1, 0}; static int[] dx = {0, 1, 0, -1}; public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); n = Integer.parseInt(br.readLine()); arr = new int[n][n]; visited = new boolean[n][n]; for (int i = 0; i < n; i++) { String[] s = br.readLine().split(" "); for (int j = 0; j < n; j++) { int price = Integer.parseInt(s[j]); arr[i][j] = price; map.put(new Point(i, j), price); } } go(0, 0); System.out.println(answer); } private static void go(int count, int price) { if (count == 3) { answer = Math.min(price, answer); return; } for (int i = 1; i < n - 1; i++) { for (int j = 1; j < n - 1; j++) { Point point = new Point(i, j); if (check(point)) { go(count + 1, price + flower(point)); wither(point); } } } } private static void wither(Point point) { visited[point.x][point.y] = false; for (int i = 0; i < 4; i++) { int ny = point.x + dy[i]; int nx = point.y + dx[i]; visited[ny][nx] = false; } } private static int flower(Point point) { visited[point.x][point.y] = true; int temp = arr[point.x][point.y]; for (int i = 0; i < 4; i++) { int ny = point.x + dy[i]; int nx = point.y + dx[i]; visited[ny][nx] = true; temp += arr[ny][nx]; } return temp; } private static boolean check(Point point) { for (int i = 0; i < 4; i++) { int ny = point.x + dy[i]; int nx = point.y + dx[i]; if (ny < 0 || nx < 0 || ny >= n || nx >= n || visited[ny][nx]) { return false; } } return true; } } 감사합니다!!
미해결
스프링과 JPA 기반 웹 애플리케이션 개발
안녕하세요 이부분에서 event.removeEnrollment(enrollment); 이 메서드를 타고 들어가면 이 메서드가 실행되는데 이때 106라인 ->enrollment.setEvent(null); 이 코드는 꼭 필요 한건가요 ?? 첫번째 사진 보시면 어차피 enrollmentRepository.delete(enrollment); 이걸 실행 하는데 왜 있는건지 이해가 잘 안갑니다 ! =================두번째 질문=========== 이 부분에서 취소를 하면 대기하던사람이 자동 확정 하는 로직인데 대기 하던 사람들 중 제일 먼저 신청을 해놓은 사람들을 정렬해서 true 처리 해야하는데 이건 안되있는거 아닌가요 !!?
해결됨
백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편
안녕하세요 foo님 강의에서 질문이 있습니다. css를 적용하는 방법과 선택자 챕터에서 가상 클래스인 a:hover는 왜 style 탭에서 적용된 속성이 안보이는지 궁급하니다!
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
제 문제 해결 접근이 맞는것인지 질문드립니다! 테스트할 때마다 회원, 상품을 새로 등록해야하는 것이 번거로워서, 기본편에서 배운 초기화 콜백을 이용해 우선 Item을 초기화해보려고 했습니다. // ItemService.java @PostConstruct @Transactional public void initData() { Book book1 = new Book(); book1.setName("book1"); book1.setPrice(1000); book1.setStockQuantity(10); book1.setAuthor("Steven"); book1.setIsbn("10000"); itemRepository.save(book1); } 위와 같이 ItemService에 초기화 메서드를 추가했는데 계속 해서 에러가 났습니다. 검색해보니 아무래도 초기화 콜백과 트랜젝션 처리를 initData()하나로 동시에 처리하려다보니 발생한 문제 같았습니다. 초기화 콜백을 확실히 완료하고나서 트랜젝션 처리를 해야 트랜젝션이 정상적으로 작동하는 것 아닌가 싶습니다. 단순히 코드상으로 이를 보장할 방법이 떠오르지 않았습니다. 이 때 떠오른게 DB2편의 @EventListener(ApplicationReadyEvent.class)인데, ApplicationReadyEvent가 스프링 컨테이너 초기화를 완전히 마치고 발생하는 이벤트라고 알고 있습니다. 이렇게 하니 초기화가 잘 됐습니다. 이처럼 선언적 트랜젝션을 적용하는 상황에서 초기화를 하기 위해서는 @EventListener(ApplicationReadyEvent.class)를 적용하는 것이 맞는 접근법일까요? @EventListener(ApplicationReadyEvent.class) @Transactional public void initData() { Book book1 = new Book(); book1.setName("book1"); book1.setPrice(1000); book1.setStockQuantity(10); book1.setAuthor("Steven"); book1.setIsbn("10000"); itemRepository.save(book1); } 정상 작동한 최종 코드입니다.
해결됨
HTML5 CSS3 기초 & 반응형 웹 템플릿 만들기!
index.html파일에서 style태그로 작성하면 돌고래 사진이 잘 나오는데 style.css에서 작성하면 백그라운드 컬러만 적용되고 사진이 표시되지 않습니다. 왜 이런가요??
해결됨
실전! Querydsl
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 동적쿼리 - builder 사용편 강의를 들으며 return query .select(new QMemberTeamDto( member.id.as("memberId"), member.username, member.age, member.team.id.as("teamId"), team.name.as("teamName"))) .from(member) .leftJoin(member.team, team) .where(builder) .fetch(); 이 쿼리를 따라 치고 생각해보았습니다. 원래 jpa라면 member객체를 조회해와서 member.getTeam()이나 팀 객체에 액세스 할때 지연로딩이 일어난다고 학습하였습니다. 위 쿼리에서 fetch 조인을 사용하지 않았는데 어떻게 쿼리가 한방에 조회가 됐나 갑자기 의문이 들었습니다. 제가 도출해낸 결과는 반환값이 dto이고 team 객체와 join해서 필요한 값만(team 포함) select 하기때문에 teamId, teamName까지 한방쿼리로 조회가 되는건가요?
미해결
처음 만난 리액트(React)
안녕하세요, 덕분에 재밌게 리액트 공부하고있는 직장인입니다. 섹션13 카드 컴포넌트 실습에서 소플님 코드에서는 Inline styling 으로 backgroundColor: backgroundColor || 'white' 라고 적어주셨는데 제가 css.module 스타일파일을 만들어서 style sheet에서 import 해서 쓰고싶으면 prop으로 받은 background 를 style sheet 에 어떻게 넘겨줄수있는지 궁금합니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/D image/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner slide-items"> <a href="#none" class="slide-item"><img src="images/D image/slide-d-01.jpg" alt=""></a> <a href="#none" class="slide-item"><img src="images/D image/slide-d-02.jpg" alt=""></a> <a href="#none" class="slide-item"><img src="images/D image/slide-d-03.jpg" alt=""></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/D image/banner-01.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-02.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-03.png" alt="banner-01"></a> </div> </div> <div class="items"> <div class="shortcut"> <a href="#none"><img src="images/D image/shortcut-01.png" alt="shortcut -1"></a> <div class="shortcut-content"> <h3>fkldmsklmclkmdclmd</h3> <p> fdjdoijfijiowejfdnfndsjfndsncncnfdkljfodsjlkcnkndksjhbfkjdshfkdjsnklcmdslkcjndksjhckdsbcjhdsbfihnuwhfeiuhfnjkdnkfjbdsdkjskldjiojeoidjklcndslkchndsicjhdosicjewmfewfewfwedk <br> <b>202039202</b> </p> </div> <a href="#none"><img src="images/D image/shortcut-02.png" alt="shortcut-02"></a> </div> <div class="news-gallery"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">안녕하세요 <b>2020</b></a> <a href="#none">안녕하세요 <b>2020</b></a> <a href="#none">안녕하세요 <b>2020</b></a> <a href="#none">안녕하세요 <b>2020</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/D image/gallery-01.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-02.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-03.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-04.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-05.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-06.png" alt=""><span>안녕</span></a> <a href="#none"><img src="images/D image/gallery-07.png" alt=""><span>안녕</span></a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/D image/footer-logo.png" alt="footer-logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> </div> <div class="copyright"> dfjdsfijdiofjodsfodsmnckljdsicjdiosfjodsnflkndkfjgdsfdsfds </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>안녕ㅎ라새요 여러분</h2> <p> dfjdsfijdiofjodsfodsmnckljdsicjdiosfjodsnflkndkfjgdsfdsfds </p> <a href="#none" class="close-modal">X 닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> 슬라이드에 object-fit도 안먹고 숏컷, 탭 부분도 창에 따라 줄어들어야 하는데 짤리는데 뭐가 문제일까요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> <li> <a href="#none">menu-01</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> <a href="#none">sub-menu1</a> </div> </li> </ul> </div> <div class="spot-menu"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"> <a href="#none"><img src="images/D image/banner-01.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-02.png" alt="banner-01"></a> <a href="#none"><img src="images/D image/banner-03.png" alt="banner-01"></a> </div> </div> <div class="items"> <div class="shortcut"> <a href="#none"><img src="images/D image/shortcut-01.png" alt="shortcut -1"></a> <div class="shortcut-content"> <h3>fkldmsklmclkmdclmd</h3> <p> fdjdoijfijiowejfdnfndsjfndsncncnfdkljfodsjlkcnkndksjhbfkjdshfkdjsnklcmdslkcjndksjhckdsbcjhdsbfihnuwhfeiuhfnjkdnkfjbds <br> <b>202039202</b> </p> </div> <a href="#none"><img src="images/D image/shortcut-02.png" alt="shortcut-02"></a> </div> <div class="news-gallery"></div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/D image/footer-logo.png" alt="footer-logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> <span>|</span> <a href="#none">djfjdsfjfs</a> </div> <div class="copyright"> dfjdsfijdiofjodsfodsmnckljdsicjdiosfjodsnflkndkfjgdsfdsfds </div> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; background-color: #fff; color: #000; } a { text-decoration: none; color: #000; } .main-content { display: flex; } .main-content > div { border: 1px solid #000; } .left { width: 200px; } .right { flex: 1; } /* header */ header {} header > div { border: 1px solid #000; } .header-logo { height: 100px; } .navi { height: 400px; } .spot-menu { height: 50px; } /* slide */ .slide { position: relative; } .slide > div { border: 1px solid #000; } .slide-image { height: 400px; } .slide-banner { width: 150px; height: 300px; position: absolute; top: 0; right: 10px; } .slide-banner a {} .slide-banner a img { width: 150px; display: block; } /* shortcut */ .shortcut { height: 200px; display: flex; align-items: center; margin: 0 30px; gap: 50px; } /* news - gallery */ .news-gallery { border: 1px solid #000; height: 250px; } /* footer */ footer { display: flex; } footer > div { height: 120px; box-sizing: border-box; } .footer-logo { width: 200px; padding-top: 15px; box-sizing: border-box; } .footer-content { flex: 1; } .footer-content div { height: 60px; } .footer-link { padding-top: 20px; box-sizing: border-box; } .footer-link a, .footer-link span { color: royalblue; } .footer-link a:hover { text-decoration: underline; } .copyright { padding: 10px 0px; box-sizing: border-box; } 뭐가 문젠질 도저히 모르겠습니다..
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
MVC2편에서 배웠던 것 같지만 헷갈리는 부분이 있어 질문드립니다. // ItemController /** * 상품 수정 */ @PostMapping("/items/{itemId}/edit") public String updateItem(@ModelAttribute("form") BookForm form) { // updateItemForm.html <form th:object="${form}" method="post"> th:object="${form}" 에서 괄호 안에 form을 참조하여 컨트롤러의 @ModelAttritube("form")을 했을 때 요청 파라미터를 바인딩해서 BookForm 객체에 넘겨준다고 이해했는데, @ModelAttritube("form1") 이런식으로 바꿔도 정상적으로 작동했습니다. 혹시 제가 놓친 부분이 있을까요?
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
test 접속하면 연결이되고 db도 생깁니다. 하지만 tcp로 연결이 안됩니다. db파일 삭제 여러번 해봤습니다. 자바 17,. 스프링 부트 3,x , h2 2.2.224 버전입니다. 이유가 뭘까요?
해결됨
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
15개 장소db가 있는데 5개만 조회 됩니다. 코드가 잘못된 부분이 있을까요? 아무리 찾아도 잘 모르겠습니다;; function getContent(data) { // 유튜브 섬네일 id 가져오기 console.log(data); let replaceUrl = data.videoUrl; let finUrl = ""; replaceUrl = replaceUrl.replace("https://youtu.be/", ""); replaceUrl = replaceUrl.replace("https://youtube.com/embed", ""); replaceUrl = replaceUrl.replace("https://youtube.com/watch?v=", ""); finUrl = replaceUrl.split("&")[0]; // 인포윈도우 가공하기 return ` <div class="infowindow"> <div class="infowindow-img-container"> <img src="https://img.youtube.com/vi/${finUrl}/mqdefault.jpg" class="infowindow-img" /> </div> <div class="infowindow-body"> <h5 class="infowindow-title">${data.title}</h5> <p class="infowindow-address">${data.address}</p> <a href="${data.videoUrl}" class="infowindow-btn" target="_blank">영상이동</a> </div> </div> `; } // HTML 코드로 바꾸는 함수 function getContent(data) { let videoId = ""; let replaceUrl = data.videoUrl; replaceUrl = replaceUrl.replace("https://youtu.be/", ""); replaceUrl = replaceUrl.replace("https://www.youtube.com/embed/", ""); replaceUrl = replaceUrl.replace("https://www.youtube.com/watch?v=", ""); videoId = replaceUrl.split("&")[0]; const result = `<div class="infowindow"> <div class="infowindow-img-container"> <img src="https://img.youtube.com/vi/${videoId}/mqdefault.jpg" class="infowindow-img" alt="..."> </div> <div class="infowindow-body"> <h5 class="infowindow-title">${data.title}</h5> <p class="infowindow-text">${data.address}</p> <a href="https://youtu.be/${videoId}" target="_blank" class="infowindow-btn">영상이동</a> </div> </div>`; return result; } async function setMap(dataSet) { markerArray = []; infowindowArray = []; for (var i = 0; i < dataSet.length; i ++) { // 마커를 생성합니다 let coords = await getCoordsByAddress(dataSet[i].address) var marker = new kakao.maps.Marker({ map: map, // 마커를 표시할 지도 position: coords, // 마커를 표시할 위치 }); markerArray.push(marker); // 마커에 표시할 인포윈도우를 생성합니다 var infowindow = new kakao.maps.InfoWindow({ content: getContent(dataSet[i]), // 인포윈도우에 표시할 내용 }); infowindowArray.push(infowindow); // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다 // 이벤트 리스너로는 클로저를 만들어 등록합니다 // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다 kakao.maps.event.addListener( marker, "click", makeOverListener(map, marker, infowindow, coords)); kakao.maps.event.addListener( map, "click", makeOutListener(infowindow)); } } // 인포윈도우를 표시하는 클로저를 만드는 함수입니다W // 1. 클릭시 다른 인포윈도우 닫기 // 2. 클릭한 곳으로 지도 중심 옮기기 function makeOverListener(map, marker, infowindow, coords) { return function() { // 1. 클릭시 다른 인포윈도우 닫기 closeInfoWindow(); infowindow.open(map, marker); // 2. 클릭한 곳으로 지도 중심 옮기기 map.panTo(coords) }; } let infowindowArray = []; function closeInfoWindow(){ for (let infowindow of infowindowArray) { infowindow.close(); } } // 인포윈도우를 닫는 클로저를 만드는 함수입니다 function makeOutListener(infowindow) { return function() { infowindow.close(); }; } /* ********************************************** 5. 카테고리 분류 */ // 카테고리 const categoryMap = { korea: "한식", china: "중식", japan: "일식", america: "양식", wheat: "분식", meat: "구이", sushi: "회/초밥", etc: "기타", }; const categoryList = document.querySelector(".category-list"); categoryList.addEventListener("click", categoryHandler); async function categoryHandler(event) { const categoryId = event.target.id; const category = categoryMap[categoryId]; try { // 데이터 분류 let categorizedDataSet = await getDataSet(category); // 기존 마커 삭제 closeMarker(); // 기존 인포윈도우 닫기 closeInfoWindow(); setMap(categorizedDataSet) } catch (error) { console.error(error); } } let markerArray = []; function closeMarker() { for (marker of markerArray) { marker.setMap(null) } } async function setting() { try { const dataSet = await getDataSet(); setMap(dataSet); } catch (error) { console.error(error); } } setting();
