Programming/JavaScript(34)
-
주말간의 삽질과 결과물(AWS Lambda 내에서 HTTP로 JSON 데이터 불러오기)
하고 싶었던 것 온라인 게임인 스마이트(SMITE)의 홈페이지에 들어가보면, 아이템 리스트를 가져오는 API로 아이템을 불러오는 걸 알 수 있었다. 이 데이터를 특정 저장소에 저장한 뒤, 한글로 번역하고 싶었다. 문제는 시즌이 계속되는 중간에도 이 데이터는 미세하게 변경된다. 물론 모든 데이터가 그런 것은 아니다. 하지만 어찌됐건 귀찮은 문제였다. 그래서 생각해낸것이 AWS의 Lambda였다. 우선 데이터를 한글로 번역해놓은 뒤, 일부 수치는 일정 기간마다 API를 통해 업데이트하면 되지 않을까. 실제로 주말간 했던 것 Node.js나 Python을 제대로 써본적이 없었다. 물론 검색해서 더듬더듬 구현하는거야 큰 문제가 되진 않겠지만, 내 코드가 아니라 그저 복사 붙여넣기에 그치지 않을까싶었다. 그나마 ..
2019.02.18 -
Base64 인코딩 된 이미지 데이터를 웹 페이지 상에 표시하기
결과 요약부터 하고 진행하도록 하자. img 태그의 src에 data:image/jpeg;base64,를 앞에 붙인 뒤, base64 데이터를 첨부하면 인코딩 된 jpeg데이터를 웹 페이지에 표시할 수 있다. How to display raw image data with html and javascript, stackoverflow의 내용을 살펴보면, jsfiddle로 구현한 예제가 첨부되어있다. 예제가 크게 복잡하지 않으므로, 보면 쉽게 이해할 수 있다. 샘플 이미지 데이터의 준비 적당한 이미지가 없는 경우에는 PlaceIMG에서 샘플 이미지를 생성하여 다운로드 받도록 하자. 이후 ImageToBase64에 이미지를 업로드하게 되면, 이미지를 Base64로 압축한 데이터가 생성된다. 사이즈로 인해 Ba..
2019.02.07 -
Electron.js 문서 한글화 참여하기/Crowdin에 대하여
Electron에 대하여 HTML, Javascript, CSS를 사용해 크로스 플랫폼 데스크탑 애플리케이션을 만들기 위하여, Github에서 개발한 오픈소스 라이브러리입니다. 즉, HTML, Javascript, CSS를 사용할 수 있다면, 데스크탑용 어플리케이션을 만들 수 있습니다. :) 문서의 번역은 꽤 진행되어있지만, 몇몇 파일의 경우에는 번역이 진행되어있지 않은 경우가 있습니다. Translating electron to Korean 페이지에 접속하면, 현재 한국어로 번역 진행률을 확인할 수 있습니다. 번역에 참여하기 위해서는 Crowdin 아이디가 필요하며, 깃허브나 구글의 계정이 있다면 쉽게 생성할 수 있습니다. 번역에 참여한 내용은 https://crowdin.com/profile/(Cro..
2019.01.24 -
정규표현식 정리
코드 프로그래머스 정규표현식 의 내용을 정리한 글입니다. 다만 해당 강의는 파이썬을 사용하나, 아직 파이썬에 익숙하지 않으므로 글의 내용은 Javascript를 기준으로 작성됐습니다. 정규표현식(正規表現式/regular expression): 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. - 위키백과 정규표현식 간단하게 말하면 특정 규칙에 맞는 글자만 걸러내주는, 필터의 개념으로 생각해도 무방하다. 프론트엔드에서는 전화번호 형식, 이메일 형식, 비밀번호 체크 등에 사용할 수 있다. 정규표현식 생성법 문자로 표기해서 생성할수도 있고, 생성자로 만들수도 있다. /pattern/flags //리터럴 방식 new RegExp(pattern[, flags]) //생성자 방식 patter..
2019.01.14 -
Javascript에서 함수를 생성하는 방식/함수표현식, 함수선언식
F사의 기술면접에 다녀왔다. 면접을 마치고 면접에 대해 궁금한 것은 없는지 물어보셔서, ‘Javascript에 대해 자세한 질문을 하실 줄 알았는데, 그런 질문은 없으셔서 (다행입니다.)’라고 답했다. 괄호친 다행입니다는 입밖으로 못 낸 말이다. 한국말은 끝까지 들어야하는것뿐만 아니라, 끝까지 해야하는 것이었다. 면접관님께서 어떤걸 준비하고 왔는지 물어보시기에, 기존 함수와 ES6의 화살표 함수에 대해 준비한 내용을 말씀드렸다. 그리고나서 함수의 선언 방식은 몇 가지가 있고, 어떤 차이가 있는지 여쭤보셨다. 나도 내가 평소에 삽질을 잘 하는 줄은 알고 있었는데, 이번 기회에 내 묫자리도 잘 판다는 걸 깨달았다. 선언방식은 대답할 수 있었지만 차이점은 얘기할 수 없었다. (new 키워드를 이용해서 함수 객..
2019.01.11 -
유튜브 썸네일 만드는 웹앱을 만들어봤다 & 상용 사이트들의 정리
게임을 할 때면 유튜브 스트리밍을 켜고 영상을 남겨놓는데, 썸네일에 글자를 넣는건 영 귀찮은 일이었다. 뭣보다 포토샵이나 다른 편집툴도 없었다. 유튜브 스트리밍이 활성화된지도 꽤 됐으니, 이런류의 서비스가 있지 않을까. 그래서 찾아봤는데, 어째서인지 나오지 않는다. React에 좀 익숙해질 겸, 간단하게 만들어봤다. 검은곰의 유튜브 썸네일 만들기 파이어베이스 호스팅 페이지에 올려놨다. 현재는 이미지를 올리고, 타이틀과 서브타이틀을 추가하는 기능뿐이다. 시간날때 기능을 좀 추가해야 할 것 같아서, 깃허브 레포지터리를 생성하고 이슈를 추가해놨다. 만들고나니 뭔가 찜찜했다. 몇시간 안걸려서 간단히 만들 수 있는 페이지인데 아무도 만들지 않았다고? 그래서 영어로 검색을 해봤더니, 짜잔. 정말 여러가지 서비스가 ..
2019.01.10