2018/0510 node.js를 이용한 이미지 파일 업로드 방법 (프론트엔드 중심으로) node.js를 이용하여 이미지 파일을 업로드 하려면 multer라는 라이브러리를 사용하면 된다.아래는 그에 관한 방법에 대한 링크이다. https://wayhome25.github.io/nodejs/2017/02/21/nodejs-15-file-upload/ 이에 대한 동영상 강좌도 아래의 링크에 있으니 참고하기 바란다. https://www.youtube.com/watch?v=2jwNNFbs4ic 여튼 여기까지 서버세팅이 끝났다면 프론트엔드 단에서 다음과 같은 문제를 생각하게 된다.예제를 보아하니 다들 form 태그에 액션을 걸어서 이미지 파일을 전송해줬는데,만약 form 태그를 안 쓰고 이미지 파일을 전송해야 된다면 어떻게 해야 하는가? 솔직히 나는 위의 질문에 답을 찾고자 웹서핑을 2시간 동안 하.. 2018. 5. 25. grid로 masonry 구현시 한계점 바로 이전 포스트에서 나는 완벽한 masonry를 구현하는 방법에 대해 포스트 하였다. 하지만 오늘 몇가지 실험을 해본결과 grid로도 완벽한 masonry를 구현하기에 한계가 존재한다는 사실을 알게 되었다.일단 아래는 내가 해당 스크립트를 jquery로 변한한것이다. function resizeGridItem(item) { var grid = $('#list-wrap'); var rowHeight = parseInt(grid.css('grid-auto-rows').replace('px', '')); var rowGap = parseInt(grid.css('grid-row-gap').replace('px', '')); var rowSpan = Math.ceil((item.children('.list-wr.. 2018. 5. 24. 완벽한 masonry 인터페이스를 구현하는 방법 2 marsonry를 사용하면 사용할수록 더 완벽한 marsonry에 도전하고 싶어지는것 같다.이전에 marsonry에 대해 정리하고 끝났었는데,그중에서 css의 gird 속성을 이용하여 marsonry 구현하는 방법도 링크를 달아놓았었다.그런데 오늘 gird 속성을 이용하여 완벽한 marsonry를 구현한 블로그를 찾게 되었다. 아래의 링크된 사이트에 그에대한 자세한 설명과 codepen 링크가 걸려있다. https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb 아래는 최종 완성된 링크다 나도 아래의 링크를 참조 및 수정하여 현재 개발하고 있는 사이트에 masonry를 구현할 수 있었다. https://codepe.. 2018. 5. 19. 두개의 object를 하나로 병합하기 아래의 링크에 이와 관련된 설명이 잘 나와있다. http://4urdev.tistory.com/22 2018. 5. 14. npm에 자신의 모듈을 올리는 방법 아래의 링크에 자세히 설명되어 있다. http://sanghaklee.tistory.com/34 (참고로 해당 명령어를 치기 이전에 npm에 가입되어 있어야 한다.) 삭제하는 방법은 아래의 링크를 참고하면 된다. https://coderwall.com/p/lzhsxw/npm-unpublish-republish-module 2018. 5. 11. vue.js에서 jquery를 사용하는 방법 아래의 링크에 설명이 잘 되어 있다. https://lovemewithoutall.github.io/it/install-bootstrap-for-vue/ 2018. 5. 11. input 박스 invalid 이벤트 최근에 form 내의 input 값들의 타당성 검증을 하던도중 디자인 문제에 직면하였다.html5에서는 타당하지 않은 값일 경우 자동으로 스크롤바를 하여서 해당 input 필드로 이동하는데,이 과정에서 내 사이트의 헤더가 position: fixed로 설정이 되어있어서 해당 input 필드를 덮어씌우는 현상이 발생하였다.작은 문제이지만 구글링 해본결과 이러한 문제로 실제 고민하던 사람이 있었다.아래는 그와 관련된 질문 링크이다. https://stackoverflow.com/questions/19814673/html5-input-required-scroll-to-input-with-fixed-navbar-on-submit?utm_medium=organic&utm_source=google_rich_qa&u.. 2018. 5. 10. css flex 속성에 관하여 아래의 두 링크에 flex 속성에 대한 자세한 설명이 있다. https://www.vobour.com/1-flexbox-%EC%9D%B4%ED%95%B4-%EB%8B%B9%EC%8B%A0%EC%9D%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-%EB%AA%A8%EB%93%A0-%EA%B2%83-understa http://gnoownow10.cafe24.com/assets/html/flexbox.html 2018. 5. 9. background-image 에서 해당 이미지가 없을때 대처방법 아래의 링크에 그 방법이 잘 나와있다. https://stackoverflow.com/questions/22287474/onerror-event-using-background-url?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa 2018. 5. 1. 이전 1 2 다음