- 식당 메뉴판 만들기 (feat. CORS의 늪에 빠지다.) 회사 근처에는 '밥플러스'라는 한식뷔페가 있다. 정말 맛있다. 이 곳은 약 6개의 지점을 운영하는데 블로그에 메뉴판을 게시하기에 그 메뉴판을 한 곳에 모으는 페이지를 만들어보려고 했다..🥲 밥플러스 2호점(메타모르포점) 오늘의 메뉴 밥플러스 2호점(메타모르포점) 석식은 운영하지 않습니다. 메타모르포점 셀프도시락은 종료되었습니다. | ... blog.naver.com - axios를 활용한 스크랩핑 온전히 Web에서만 동작하도록 만들려고 했었다. 이에 JavaScript의 axios를 사용했다. 처음엔 매우 순조로웠다. 그러나.. // 지정된 ID를 가진 유저에 대한 요청 axios.get('http://naver.com') .then(func..

- 네이버 환율을 스크랩핑 해보자! 네이버 환율을 스크랩핑하여 환율계산기를 만들어보았다. Jsoup과 Gson을 활용했다. [Library] Jsoup으로 웹 페이지 크롤링(Crawling)하기 [parsing 라이브러리 : Jsoup] 1. parsing 라이브러리 : Jsoup - 다운로드 : https://mvnrepository.com/artifact/org.jsoup/jsoup/1.14.3 2. Jsoup으로 웹 페이지 크롤링하기[웹 페이지에 있는 썸네일 저장하기] - DB 테이블 생성 : TBL_MUSINSA_SAMPLE - HTMLPars yermi.tistory.com [Library] 자바(Java)로 제이슨(Json) 출력하기 [Json 라이브러리, Gson] 1. Json 라이브러리,..

- 이번에는 웹 페이지 오목이다(2) 1. 화점 찍어주기 바둑판에 화점이 없으니 너무 밋밋하여 위치 계산하여 찍어주었다. for(var i = 0 ; i < 3 ; i++) { for(var j = 0 ; j < 3 ; j++) { let dot = document.createElement('div'); dot.setAttribute('class', 'dot'); let margin_top = 58 + (i * 120); let margin_left = 58 + (j * 120); dot.setAttribute('style', `margin-top: ${margin_top}px; margin-left: ${margin_left}px;`); board.appendChild(dot); } } 2. 오목 로직..

- 이번에는 웹 페이지 오목이다(1) 이번에는 웹 페이지에서 할 수 있는 게임을 만들어보려고 한다. 바로 '오목'이다. 1. 오목판 만들기 오목판은 JavaScript로 만들었다. 아래는 오목판과 바둑돌이 놓일 위치에 대한 CSS이다. #table { position: absolute; background-color: blanchedalmond; width: 360px; height: 360px; border-collapse: collapse; border-spacing: 0; } #go { position: absolute; margin: 10px; width: 340px; height: 340px; border-collapse: collapse; } .square { border: thin solid..

- 예술의 정석, 일상에 예술 한 스푼 아는 지인에게 지도에 좌표를 표시한 웹 페이지를 만들어주었다. 네이버지도를 사용하였으며, 배포는 github로 진행하였다. - 네이버지도 적용 및 이벤트 [API] 웹 페이지에 네이버 지도 띄우고 마커 찍기 [네이버 Maps API 사용하기] - 웹 페이지에 네이버 지도 띄우고 마커 찍기 1. Naver Maps Application 등록 NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 2. 웹 yermi.tistory.com [API] 네이..