rhanziy

이미지 미리보기를 구현할때, 파일을 선택하면 img와 img 삭제 버튼 태그를 동적으로 생성했다. $('#img-preview').append(` x `) 그런데 저 id가 del인 버튼에 클릭이벤트를 달아 콘솔에 찍어도 아무 반응이 없는 것! 당연하다. html이 렌더링이 된 후 생성한 태그는 못찾지 응응ㅋ 그럼 document 자체에서 찾으면 된다. $(document).on('click', '#del', function(e){ e.currentTarget.parentElement.remove(); }); 따로 버튼에 data-id 속성을 지정하지않아도 이벤트리스너 e.currentTarget에 담겨있으니 선택한 element의 부모ele를 찾아 지우면 삭제 끗.

node.js로 프로젝트 생성중에 이미지를 업로드 하는 기능은 multer 미들웨어를 통해 구현했다. 이제 파일을 선택했을 때 preview를 만들어주고 싶었는데 서버단에서 계속 삽질함;; 걍 간단하게 자바스크립트의 FileReader() 객체로 화면단에서 구현가능했다. html 코드 + 제목 작가 카테고리 선택 국내도서 외국도서 등록 🔽 css코드 더보기 input[type="file"] { display: none; } .fileLabel { display:block; min-width: 150px; height:150px; margin-right: 5px; color: #8d8d8d; font-size:20px; text-align: center; line-height:150px; border: 1..

Multer는 파일 업로드를 위해 사용되는 Node.js의 미들웨어! multipart/form-data 형식으로 단일 및 다중 파일 업로드를 지원하기 때문에 가장 많이 사용된다. https://www.npmjs.com/package/multer https://github.com/expressjs/multer/blob/master/doc/README-ko.md (한국어) 설치/셋팅 - server.js // npm install multer // 이미지 업로드 라이브러리. let multer = require('multer'); 저장할 disk storage 설정 let ff var storage = multer.diskStorage({ destination : function(req, file, cb)..

첫번째 방법은 public 폴더 안에 이미지를 저장하고 로 불러오면 되는데, lazy loading, 사이즈 최적화, layout shift를 방지하기 위해 Image 컴포넌트를 import 해서 사용할 수도 있다 ! 그러기 위해선 이미지 경로를 무조건 import해와야 하는 조건이 있다. 사용은 태그 대신 로. src 경로를 일일이 import해 { } 안에 작성 단점 반복문 안에서 각각 다른 이미지를 불러와야하거나, 외부사이트에 있는 이미지를 넣을 때는 불편함. 외부이미지는 src="경로" 속성 외에 width={ }, height={ } 도 필요하고 그냥 이번거는 map으로 item 하나씩 불러오자. { item.map((e, i) => { return ( {e} ) }) }

Next.js 는 Vercel이 개발한 오픈소스 React프레임워크로 기본적으로 JSX문법을 사용한다. 서버사이드렌더링 위주의 풀스택 기반 프레임워크를 주력으로 성장하고있으며, React 만으로는 온전히 구현하지 못했던 API기능 및 서버컴포넌트를 통한 서버단 기능과 React 컴포넌트를 통한 클라이언트 기능을 통합 제공하는 프레임워크이다. 1. 프로젝트 시작하기 - 작업폴더 생성 후 터미널에 npx create-next-app@latest --experimental-app 입력 이것저것 제공되는 기능을 입맛에 맞게 방향키로 선택한다. 2. 프로젝트 실행하기 - 해당 작업폴더에서 터미널에 npm run dev 3. 프로젝트 구조 파일명 설명 page.js 메인페이지 layout.js page.js를 감싸..

프로그래머스 코테 lv.1 달리기 경주 풀이 중에 코드는 통과됐는데 시간초과로 안넘어간게 있어서 구글링하던 도중 새롭게 알게된 개념 정리 포스팅. 위 동영상 요약내용임ㅋ Map - key-value를 저장하는 추상자료형 ADT(Abstract data type) - 같은 key를 가지는 쌍은 1개만 존재(key 중복x) - associative array, dictionary라고 불리기도 함 ex) 전화번호-이름 저장, 인기투표 할 때의 데이터 저장구조 Hash table - 배열과 해시함수를 사용하며 map을 구현한 자료구조 - *일반적으로 상수시간으로 데이터에 접근하기 때문에 빠름 상수시간이란 bigO표기법에 의하면 O(N)으로 시간복잡도 성능이 가장 좋음 Hash function - 임의의 크기를 ..

https://rhghdrms.tistory.com/4 Eclipse 단축키 주석 Ctrl + Shift + / : 블록을 주석으로 처리 (/* */) Ctrl + Shift + \ : 블록 주석을 해제 Ctrl + / : 한줄 or 블록 주석 처리 / 해제 (//) 검색 Ctrl + F : 키워드 검색 (해당 소스에서만) Ctrl + H : 키워드 검색 (프 rhghdrms.tistory.com 주석 Ctrl + Shift + / : 블록을 주석으로 처리 (/* */) Ctrl + Shift + \ : 블록 주석을 해제 Ctrl + / : 한줄 or 블록 주석 처리 / 해제 (//) 검색 Ctrl + F : 키워드 검색 (해당 소스에서만) Ctrl + H : 키워드 검색 (프로젝트 전체에서) Ctrl ..

길고 복잡한 HTML 덩어리를 한줄로 축약하려면 Component화 시키면 된다. .vue파일을 새로 만들어서 HTML 작성하고 1. 만든 .vue파일 import하기 2. component에 등록하기 3. 가져다 쓰기 component 파일 작명할 때 주의점 🔽 더보기 컴포넌트.vue 작명은 2단어 이상으로 작명하자. 안그러면 에러발생ㅠ ex) MyDiscount 작명은 카멜형식 이게 귀찮으면 vue.config.js 파일 열어서 lintOnSave : false 하고 서버 재가동하거나 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // transpileDependencies: true, lintO..