2018/0316 아마존 ELB 기반 서비스 사용시 node.js에서 http 주소로 접근시 https로 변환 현재 일하고 있는 곳에서 아마존과 협업하여 시스템을 개발중에 있다.최근 개발중인 앱을 아마존 서버에 올렸는데, http로 접근했을때 https로 변환해주는 기능을 구현해야했다.아마존 관계자분께서 node.js 내의 코드를 수정하면 쉽게 해결된다고 하여 보내주신 링크 문서를 보았다.결론적으로 해결했는데 코드는 아래와 같다. app.get('*', function(req, res, next) {//http://docs.aws.amazon.com/ElasticLoadBalancing/latest/DeveloperGuide/TerminologyandKeyConcepts.html#x-forwarded-proto if (req.get('x-forwarded-proto') != "https") { res.set('x.. 2018. 3. 20. 로컬스토리지, 세션스토리지 그리고 쿠키 로컬스토리지, 세션스토리지 그리고 쿠키에 대해 자세히 알고 싶은 사람은 아래의 블로그를 추천한다. https://www.zerocho.com/category/HTML/post/5918515b1ed39f00182d3048 2018. 3. 14. select 안의 option 객체에서 attr 속성에 접근하기 select 안의 option에서 attr 속성을 가져오는 것은 쉬운일이 아니다.이와 관련된 질문을 찾아봤는데 아래의 답변에 잘 나와있었다. https://stackoverflow.com/questions/25430552/how-to-get-attribute-from-selected-option-of-select-in-jquery/25430562 결론은 아래와같이 써주면 된다.jquery 문이지만 다른 프론트엔드 구조에서도 써먹을수 있을거 같다. var status = $('#listbox-taskStatus option:selected').attr('status'); 2018. 3. 13. salvattore.js 반응형 오류 문제 salvattore.js는 내가 최근에 소개한 완벽한 masonry를 만들기 위해 소개했던 라이브러리이다.그런데 최근 티스토리 스킨을 개발중에 해당 라이브러리를 적용해 봤는데,브라우저 창이 리사이즈되어도 스타일이 적용 되지 않는 현상을 보였다.이 오류를 해결하려고 어제부터 오늘 이틀동안 시간이 날때마다 계속해서 공식홈페이지, 기타 페이지를 연실 들락거렸다.그런데도 해결책은 보이지 않았다.웃긴건 공식 홈페이지에 아래의 링크와 같이 해당 문제를 이슈로 올려놓았음에도 불구하고 누구하나 제대로 답하는 사람을 보지 못했다. https://github.com/rnmp/salvattore/issues/54 그렇다. 믿을놈 하나 없단 말이 여기서 나오는거 같다.결국 대조를 통해 오류를 찾아내는 방법밖에 없어서 잘 되는.. 2018. 3. 8. 완벽한 masonry 인터페이스를 구현하는 방법 masonry를 완벽히 구현하기란 쉬운일이 아니다. 지금까지는 masonry.js 라이브러리를 써서 masonry 인터페이스를 구현하였는데,페이지 반응형에 따라 박스들이 시간을 가지고 애니메이션이 적용되어 움직이는 것이 너무 보기싫었다. (개인적으로 불필요한 애니메이션을 싫어합니다.)그래서 나름 방법을 찾았다.윈도우 크기 반응에따라 그때그때 masonry 없애고 다시 적용시켜주는 방식을 채택한 것이다.하지만 해당 박스가 글이 길어져서 넘치는 경우 등에는 제대로 masonry 함수가 반응하지 않아서 박스가 겹치는 문제가 발생했으며,그 이외에도 반응형에 따라 masonry 함수가 민감하게 반응하지 못해 디자인이 깨지는 경우도 많았다.결론적으로 서비스에 있어서는 해당 라이브러리를 쓸 수 없다는 결론을 내렸고,.. 2018. 3. 7. PWA 알람 서버 저장 방식 PWA 알람을 구현하는 것까진 했어도 그것을 어떤식으로 서버에 저장하고,유저마다의 알람 체크를 어떻게 구분할것인가에 대한 고민이 많았다.PWA 알람을 구현한 사람들은 알겠지만,알람을 구독하겠다고 하면 JSON 형식의 데이터를 서버에 보내주게 된다.해당 JSON 데이터는 기기 기반으로 발생하는것 같다. (사실 100% 정확하게는 모르겠는데 실험결과 스마트폰에서 발생한 것과 웹에서 발생한 것과 JSON 내용이 달랐었다.)그리고 서버에서 해당 JSON 데이터를 webpush 모듈을 통해 서비스워커쪽으로 보내줄수 있게되고,최종적으로 PWA 알람을 뿌려주게 된다. 서버에 유저 저장없이 조금 허술하게 만든 페이지는 어떠한 사용자가 들어오느냐에 상관없이기기 단위로 구독을 받고 그냥 뿌려주는 형식이다.(그러니까 로그인.. 2018. 3. 7. countdown 구현 최근 countdown 기능을 구현해야 했는데,아래의 예제에 잘 구현되어 있어서 그대로 사용하였다.참고하실분은 참고하길 바랍니다. https://www.w3schools.com/howto/howto_js_countdown.asp 2018. 3. 2. 이전 1 2 다음