◈ Yermi Project/Toy Project💎
[Toy Project] URL 단축기를 만들어보자!✂️ [서버 구축하기 싫어서 DB는 Google Sheets로 대체]
- URL 단축기를 만들어보자! 이번에는 URL 단축기를 만들어보았다. URL 단축기의 프로세스는 아래와 같다. URL 단축을 위해 해싱은 6자리로 정했다. (겹치는 값이 나올 정도로 사람들이 많이 사용해주면 좋겠다⭐) [JS] 긴 문자열을 6자리 해시로 변환하기 [간단한 해싱 알고리즘 만들기] - 긴 문자열을 6자리 해시로 변환하기 JavaScript에서 긴 문자열을 6자리 해시로 변환하는 방법 중 하나는 SHA-256 등의 안전한 해시 알고리즘을 사용하고 그 결과를 base64 또는 다른 방법으로 인코딩 yermi.tistory.com 서버 구축하기 싫어서 Google Sheet와 Google App Script를 활용했다. (배포는 당연히 github 웹배포~) 지금은 github의 도메인을 쓰고 ..
[Toy Project] 식당 메뉴판 만들기🍖 (feat. CORS의 늪에 빠지다.) [axios, iframe 등을 활용한 네이버 블로그 스크랩핑 시도]
- 식당 메뉴판 만들기 (feat. CORS의 늪에 빠지다.) 회사 근처에는 '밥플러스'라는 한식뷔페가 있다. 정말 맛있다. 이 곳은 약 6개의 지점을 운영하는데 블로그에 메뉴판을 게시하기에 그 메뉴판을 한 곳에 모으는 페이지를 만들어보려고 했다..🥲 밥플러스 2호점(메타모르포점) 오늘의 메뉴 밥플러스 2호점(메타모르포점) 석식은 운영하지 않습니다. 메타모르포점 셀프도시락은 종료되었습니다. | ... blog.naver.com - axios를 활용한 스크랩핑 온전히 Web에서만 동작하도록 만들려고 했었다. 이에 JavaScript의 axios를 사용했다. 처음엔 매우 순조로웠다. 그러나.. // 지정된 ID를 가진 유저에 대한 요청 axios.get('http://naver.com') .then(func..
[Toy Project] 네이버 환율을 스크랩핑 해보자!💱 [Java로 만든 환율계산기]
- 네이버 환율을 스크랩핑 해보자! 네이버 환율을 스크랩핑하여 환율계산기를 만들어보았다. 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 라이브러리,..
[Toy Project] 이번에는 웹 페이지 오목이다(2)🎲 [JavaScript로 오목 로직 구현하기]
- 이번에는 웹 페이지 오목이다(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. 오목 로직..
[Toy Project] 이번에는 웹 페이지 오목이다(1)🎲 [JavaScript와 CSS로 바둑판 만들기]
- 이번에는 웹 페이지 오목이다(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..