개발 블로그

예전에 이런 글을 썼었다 https://this-programmer.tistory.com/147 로또 시뮬레이터, 로또 확률 계산기를 만들어봤다. 로또 시뮬레이터, 로또 확률 계산기를 심심해서 만들어봤다. 사실 심심해서라기보단 좋은 꿈을 꿔서 10만원어치의 로또를 사봤는데 5등 하나 돼서 짜증나서 만들었다. 이곳에서 플레이할 수 있 this-programmer.tistory.com 말 그대로 좋은꿈을 꿔서 로또를 10만원어치 샀는데 5등짜리 하나돼서 만든 분노의 프로젝트이다. 갑자기 최근들어 저기에 추가해놨던 Disqus에 댓글이 달렸다는 메일을 자주 받아서 예전에 추가해놓은 구글 애널리틱스를 확인해보니 블로그 투데이는 가볍게 짓눌러버리는 트래픽이 생겼다. 띠용. 내가 몇개월동안 열심히 만든 e-scor..

보통 k8s config파일에서 여러 user, cluster, context를 저장시켜놓고 사용하고는 하는데 그 config파일을 만들 때 일일히 폼을 맞춰 정리해가면서 옮겨적는게 귀찮아서 만들었다. https://jujumilk3.github.io/k8s-config-merger/ k8s config merger Drag and Drop one or more files to here. jujumilk3.github.io 여기에서 실제 작동하는 사이트를 확인해볼 수 있으며 내가 직접 사용해본 결과 잘 작동한다. 사이트 내부에 깃허브 저장소로 향하는 링크도 있다. 민감한 접속데이터를 병합하는 거라 보안에 대해 걱정이 들 수 있어서 아예 Public repository를 이용한 GithubPages로 제작..

[React native] expo로 만들 때 안드로이드 가상화까지 돌려보기 (windows 10) 서문 짧은 직장생활 후에 퇴사하고, 담금질이 필요할 듯 하여 예전에 생각해둔 것들을 만드는 과정 중에 있다. 지금은 스마트폰 어플리케이션을 작업하고 있는데 예전에는 안드로이드 스튜디오로 끄적여봤지만 전 직장에서 쓰던 Vue와 비슷한 VDOM형태의 라이브러리인 React로 Native app 및 iOS와 안드로이드 앱까지 커버할 수 있는 React Native에 관심이 생겨 공부 중이다. 애초에 React를 조금 했었고, 전 회사에서 Vue를 본격적으로 다뤘기 때문에 다시 React를 공부한다는 마음으로 React Native를 하면 되겠다는 마음으로 작업 중이다. 남는게 시간이기도 하고. 아무튼 그 시작이..

작업하다가 웃긴 점을 발견해서 기록해두려 한다. 바로 "data-이름" 이런식으로 특정 element에 커스텀 데이터를 넣고 조회할 때 변경이 있으면 .data함수로 조회하는 건 변경을 감지하지 못하고 .attr("data-이름") 이런 식으로 조회해야지만 변경이 적용된 값을 조회할 수 있다. 코드샌드박스에 예제를 작성해놓았다. 이런식으로 진행해보면 이상하다는 점을 알 수 있다. 첫번째 방법data를 조회하는 버튼과 attr을 조회하는 버튼을 눌러보자. 아래와 같이 둘 다 3이 뜰 것이다. 그리고 data-index를 attr을 통해 1로 바꾸는 버튼을 눌러본 뒤에 다시 아래 두 개의 버튼을 눌러보자. 띠용이다. 특정 element를 .data로 조회하는 함수는 그대로 3을 출력하고 있고 attr로 조회..

[Javascript/자바스크립트] 프론트단에서 클라이언트에 정보 저장하기 (localStorage와 sessionStorage) 백단에서 흔하게 쓰는 쿠키와 세션이 아닌 자바스크립트로 사용하는 방법이 있다. 바로 localStorage와 sessionStorage이다. 브라우저에서 지원하는 API 만큼 각 브라우저에 따라 사양이 조금씩 다른데 일단 지원여부는 전부 확인된다. [출처 : https://developer.mozilla.org/] localStorage와 sessionStorage 모두 호환성에 큰 문제는 없되 각 브라우저에 따라 용량차이를 보인다. [출처 : https://www.html5rocks.com/en/tutorials/offline/quota-research/] localStor..

HTML form에서 submit의 문구를 바꾸는 방법 생각보다 간단하다. value속성을 주고 거기에 원하는 문구를 입력하면 된다.

URL에서는 언더바(언더스코어: _)가 나을까 대쉬(-)가 나을까? 정답부터 말하자면 대쉬가 낫다. 왜냐. 구글 검색엔진이 언더바로 구분된 단어는 하나의 단어로 인식하고, 대쉬로 구분된 단어는 단어 자체로 구분하기 때문이다. 예를 들어 html로만 이뤄진 static webpage를 만들어 제공한다고 했을 때 html파일의 이름에 스페이스를 넣어 서비스한다고 하면 해당 url은 ' '(스페이스)대신에 '%20'가 채워질 것이다. 'my app'이라는 구분자를 가진 웹페이지를 제공한다고 했을 때 이름을 스페이스로 채워넣는다면 'my%20app'이라는 주소로 제공된다. 이렇게 url이나 uri의가독성이 떨어지는 상황을 타개하고자 스페이스 대신 대쉬(-)를 쓰기 시작하였고 그것이 고착화되었다. 그래서 검색엔진..

한국 영화 명대사 로렘 입숨을 만들어봤다. 일단 깃허브 주소는 https://github.com/jujumilk3/korean_movie_lipsum이고 작동은 https://jujumilk3.github.io/korean_movie_lipsum/여기에서 해볼 수 있다. 백엔드 작업할 때 가끔 퍼블리셔분이 익살스러운 문구나 사진을 더미로 넣어놓고는 하는데 그걸 보며 즐겁게 작업했던 기억이 있어 조금이나마 작업과정을 재미있게 했으면 하는 마음 +주옥 같은 한국 영화들의 명대사들을 모아보려는 목적으로 만들었다. 딱히 서버쪽 작업 필요 없이 static html단에서 모든 기능구현이 가능하여 깃허브페이지에서 html, css, js만을 이용하여 만들었다. UI는 최대한 직관적으로 만들었으며 누구든 유용하고 즐..

[JavaScript/자바스크립트] InternetExplore에서 Promise쓰기 자바스크립트 해석기는 브라우저에 귀속돼있다. 그러니까 같은 코드라고 하더라도 IE에서 쓰는 해석기와 Chrome에서 쓰는 해석기가 달라 다르게 실행될 여지가 있다는 말이다. 이것을 크로스 브라우징 이슈라고 하는데 다르게 실행될 여지는 고사하더라도 아예 특정 함수는 Chrome에선 되지만 IE에선 실행조차 되지 않는 경우가 왕왕 있다. 그 중 하나가 바로 비동기처리를 깔끔하게 해주는 Promise이다. 비동기처리는 요즘 웹서비스에 있어서 굉장히 흔하고 자주 일어나는 동작이기 때문에 가히 필수라고 할 수 있다. 그 비동기처리를 위한 코드를 깔끔하게 유지시켜주는 Promise객체를 IE에서는 사용하지 못한다. IE의 자바스크..

[JavaScript/자바스크립트] 1과 0, 혹은 '1'과 '0'을 boolean으로 전환하는 쉬운 방법 지금 여기에 쓰는 예제는 바로 개발자모드의 console창에서 입력해보며 실험해볼 수 있다. 물론 정수형인 0과 1은 별다른 작업 없이 true와 false의 역할을 수행할 수 있다. if(1) console.log("if passed");//if passed if(0) console.log("if passed");//undefined 이런식으로 말이다. 위 코드를 개발자모드 console창에 써보면 오른쪽의 주석과 같은 결과가 출력되는 것을 확인할 수 있다. 하지만 같은 역할을 수행할 수 있다 하더라도 굳이 0과 1이 아닌, boolean으로 표현해야할 때가 있다. 그럴 때 쓰기 좋은 방법이다. ..