일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- vuex
- Vue
- HOC
- ES6
- Wecode
- 쉬운설명
- input
- 리액트
- mapGetters
- sass
- MySQL
- Vue.js
- JavaScript
- 자바스크립트
- App.vue
- v-html
- TypeScript
- storybook
- nodejs
- jsx
- express
- scss
- 댓글달기
- Vue transition
- react
- webpack
- 자료구조
- CSS
- event
- State
- Today
- Total
목록코딩일기 (126)
익명의 개발노트
저장된 이미지를 불러오는 방법. 프론트에서 미리보기 버튼을 클릭 => 백엔드에서 저장된 이미지 주소보냄. 아래와 같이 명시해주면 public 폴더안에 있는 폴더를 url로 보낼 수가 있다. //app.js app.use(express.static('public')); 라우터에서 url을 붙여주고 이미지 이름을 같이 넣어서 send로 보내준다. //router.js router.get('/preview', async (req, res, next)=>{ const imgUrl = "http://localhost:3000/images/" result = imgUrl+"저장된 이미지명" //imgUrl+"kitty.png" res.send(result); } 받는 쪽(프론트)에서는 HTTP통신이므로 ,결과물의 ..
1. multipart/form-data의 의미. multi-part는 폼 데이터가 여러 부분으로 분할(버퍼 값)되어 서버로 전송되는 것을 의미한다. 2. express image upload 수정하기 multipart 데이터를 다룰 경우 RESTFul api에서 POST 방식으로 보내야한다. * POST방식은 Create 기능, PUT은 Create or Update기능을 구현할 수 있다. 따라서, multipart 타입을 수정하기위해서는 POST방식으로 데이터를 생성하기 전에 어떤 데이터를 변경할 것인지 먼저 확인을 해야한다. 이런식으로 먼저 수정할 대상을 찾은 후(originPopupImageInfo) 수정할 내용을 키값과 전달한다. 결과값을 받으면 fs 모듈시스템을 이용해서 로컬에 저장된 이미지를..
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' mysql.server start 로 해결할 수 있다.
프론트단 Vue 프레임워크인 Vuetify, 백엔드는 노드 js를 사용하여 파일 업로드 구현하기. 1. 프론트사용 라이브러리 : Vue-filepond 2. 백엔드 라이브러리 : multer 결론은 단순히 Vue-filepond와 multer 라이브러리 간의 호환이 안된다....(우회하는 방법은 있는 듯 하나..) 통상 Node.js에서 사용하는 이미지저장 라이브러리는 multer를 주로 사용한다. 사용하기가 편하다. 단순히 폴더 저장, 메모리저장, 디스크 저장 기능이 있어서 사용자 입맛에 맞게 사용가능하며, AWS S3를 위해서도 자주 사용하는 라이브러리이다. Vue-filepond는 드래그앤 드랍부터 커스터마이징 기능이 굉장히 많으며, 업로드하면 자동(multipart/form-data) 으로 서버로..
TypeError: Cannot assign to read only property 'exports' of object '#' 위와 같은 에러는 프론트단에서 사용하는 ECMA 방식과 노드에서 사용하는 Common js형식이 섞에서 컴이 혼란스러워서 나오는 에러이다. 따라서 프론트단은 import 000 from 000, export default 를 사용하며, (ECMA) 백단은 const 000 require('000'), module.export = 방식을 사용하면 해결된다.(Common JS) * Commonjs, ECMA 형식을 섞어서 사용금지.
npm install -g mocha 실행은 터미널에서 아래와 같이 test 코드 경로를 넣어주면 된다. mocha test/local/siteManager/admin/adminManagerController.test.js //예시 공식문서 : https://mochajs.org/#working-with-promises Mocha - the fun, simple, flexible JavaScript test framework Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially,..
1. polyfill의 정의 런타임에 기능을 주입하는 것. 런타임에 기능이 존재하는지 검사해서 없으면 넣어주고 있으면 넣어주지 않느다. 바벨을 사용하더라도 폴리필 설정은 반드시 해주어야 한다. 어디에사용?? 오래된 브라우져에 최신 ECMA 문법 사용하고 싶을 때 사용한다. 단점은 폴리필 사용시 해당 모듈의 모든 폴리필을 가져오게 되므로, 번들의 용량이 커지는 단점이 있다. (번들 크기에 민감하지 않는 프로젝트에서 사용이 용이하다) @babel/polyfill 패키지아닌 core-js로부터 직접 필요한 폴리필을 가져오면 번들 크기를 줄일 수 있다. 이 방법은 번들크기를 최소화 할 수 있는 방법임. 번들 크기가 민감한 프로젝트에 용이하다. @babel/preset-env는 적당한 번들크기를 유지시키면서 폴리..
예를 들어 회원가입하는데, 회원가입정보가 각기 다른 테이블에 저장된다면?? 비밀번호만 따로 저장된다고 치면, 로직을 어떻게 세워야하나? 기본정보 테이블 저장 후 비밀번호 테이블에 비밀번호를 기본정보테이블의 값을 가지고 FK로 저장할 것이다. 그냥 저장을 해버리면, 기본정보만 저장되고, 비밀번호는 저장되지 않는 경우가 발생할 수 있다. 이렇게 동시에 다른 테이블에 저장을 해야할 때는 트랜젝션을 이용해야한다. 트랜젝션의 중요한 4가지 속성이 있다. 원자성(atomicity): 트랜잭션은 모두 실행되거나 아예 실행되어서는 안된다. 성공적인 트랜잭션은 commit 하고 실패한 트랜잭션은 abort 한다. commit은 데이터베이스를 변경하여 영속적이게 하며, abort는 데이터베이스 변경을 undo 하거나 삭제..
mysql -u 유저명 -h 접속IP(DB IP) -p //ex) mysql -u username -h 127.0.0.1 -p
Sequelize는 자바스크립트 ORM이다. 간략하게 설명하면 백엔드에서 데이터베이스에 날리는 쿼리를 자바스크립트 객체와 함수로 처리한다. 일반적으로 쿼리 날려 사용하는 것보다는 생산성이 더 뛰어나다고 한다. 단점은 쿼리가 복잡해지면 ORM으로 표현하는데 한계가 있고, 성능이 raw query에 비해 느리다. 대부분의 ORM에서는 이런 경우를 대비하여 raw 쿼리를 실행할 수 있는 방법도 제공하고 있다. DDL, DML도 정의할 수 있다. 기본작동원리는 모델설정 => DB migration => DB반영 npm install --save sequelize Sequelize는 Promise 기반이며, 이것을 사용하기 위해서는 DB가 설치되어야 한다. mysql사용시 mysql 모듈을 설치해주어야 한다. n..