익명의 개발노트

1. 네비게이션 가드 정의 : 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법을 말한다. 어디다 사용? 고객 인증정보 없으면, 페이지 접근 못하게 하는 식으로 사용 2. 종류 1) 전역가드 : beforeEach() 전역가드는 라우터의 인스턴스를 참조하는 객체로 설정할 수 있으며, 모든 네이게이션의 생성된 순서에 따라 호출한다. const router = new VueRouter({ }) router.beforeEach((to, from, next) => { }) router.beforeEach를 호출하면 모든 라우팅이 대기상태가 된다. 해당 url 로 라우팅하기 위해서는 next()를 호출해줘야한다. next 호출전까지는 대기 상태에서 머물기 때문에 화면전환이 이루어지지 않음. 참..

1. 대상하나만 조회하기 select * from table where id='202'; models.table명.findOne({where:{id:202}}) 2. 삽입하기 insert into table(컬럼명) values (넣고자하는 값); models.table명.create(넣고자하는값) 3. 삭제하기 delete from table명 where id ='202'; models.table명.destroy({where: {id: '202'}}) 4. 수정하기 update table명 set 컬럼명 = 변경될 값 where id='202'; //where 절은 조건넣어주면됨 models.table명.update(변화시킬값,{where: {id: '202'}}) 5. 전체 다 조회하기 select ..

보여줄 공간을 정해놓고, data()의 변수인 uploadImageFile을 바인딩 시킨다. 선택한 파일과 파일내용이 존재하면 그 파일을 읽어서 this.uploadImageFile 변수에 할당한다. onFileSelected(event){ var input = event.target; if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = (e) => { this.uploadImageFile = e.target.result; } reader.readAsDataURL(input.files[0]); } },

저장된 이미지를 불러오는 방법. 프론트에서 미리보기 버튼을 클릭 => 백엔드에서 저장된 이미지 주소보냄. 아래와 같이 명시해주면 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는 적당한 번들크기를 유지시키면서 폴리..