익명의 개발노트

프론트단 Vue 프레임워크인 Vuetify, 백엔드는 노드 js를 사용하여 파일 업로드 구현하기. 1. 프론트사용 라이브러리 : Vue-filepond 2. 백엔드 라이브러리 : multer 결론은 단순히 Vue-filepond와 multer 라이브러리 간의 호환이 안된다....(우회하는 방법은 있는 듯 하나..) 통상 Node.js에서 사용하는 이미지저장 라이브러리는 multer를 주로 사용한다. 사용하기가 편하다. 단순히 폴더 저장, 메모리저장, 디스크 저장 기능이 있어서 사용자 입맛에 맞게 사용가능하며, AWS S3를 위해서도 자주 사용하는 라이브러리이다. Vue-filepond는 드래그앤 드랍부터 커스터마이징 기능이 굉장히 많으며, 업로드하면 자동(multipart/form-data) 으로 서버로..

원래는 2주차 커리큘럼인데.. 몇명은 진도를 뛰어넘은 바람에 1주차때 미니트위터를 만들었고, 3주차때 리액트로 기존에 만든 미니터를 다시 만들었다. 4주차에는 장고로 api를 구현하는 것이지만, 나는 프론트엔드 과정을 선택했 기에 따로 노드를 이용해서 로그인과 회원가입api를 만들었다. 1. 회원가입의 중요한 요소, 비밀번호 암호화 Node.JS의 암호화 모듈로는 여러가지가 있는데, 안전상 내장모듈은 crypto모듈을 이용했으며, pbkdf2버전의 업그레이드판인 pbkdf2Sync를 사용했다. 적용하기 전에 암호화에 대해서 살짝 알아보고 적용을 시켰다. 왜 사용하는지 모르고 사용하면 안되니깐. app.post('/signup', (req,res)=>{ console.log('signup post ok!'..

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client at ServerResponse.setHeader (_http_outgoing.js:470:11) The error "Error: Can't set headers after they are sent." means that you're already in the Body or Finished state, but some function tried to set a header or statusCode. When you see this error, try to look for anything that tries to send a header after some ..

CORS : 프론트엔드 주소와 백엔드주소가 다른 상태에서 프론트가 백엔드의 api를 호출하면 브라우져에서 보안때문에 차단하는 현상 1. 해결방법. 1) cors를 설치 후 미들웨어 설정을 해준다. npm install cors 2) app.js const cors = require('cors'); app.use(cors());

1. 금일 어제 만든 유튜브 클론에 대한 리뷰를 받았으며, 새로이 알게된 내용.(리액트) 1) 현업에서 디자인, 기획이 다 나온 경우 나온 내용을 토대로 작은 단위 컴포넌트를 만들고 조합하는 방식으로 진행 2) 일단 전부 만들고, 재사용 필요하면 컴포넌트로 빼서 만든다. 3) 컴포넌트로 페이지 조립할때, 확장성 고려해서 화면별 템플릿.js 로 조립 후 page 폴더 안에 있는 페이지 컴포넌트로 뿌려도 됨. * 페이지 늘어날때, 좋은 코드 보면서 정해야 한다. 4) 클래스 네임정하는 규칙은 사람마다 다르다. 회사의 스타일 참고. 5) 공통적으로 사용하는 css 관리는 통상 style 폴더 만들고, config.scss 만들고, 그 안에다가 모아 놓는다. 나중에 aws 이미지 올릴때 공통된 주소 같은거 해놓..

왼쪽과 같은 브라우져에서 email을 입력하고, 제출또는 ajaxsend 버튼을 누르면 서버와 ajax 방식으로 데이터 주고 받기. 노드에서 ajax 방식은 크게 3가지이다. email : ajaxsend 아래에서 설명 email안에 input값 (inputdata)를 ajax함수를 만들어서 전달하고자 한다. 사전에 노드 +Express로 4000포트를 이용하여 서버을 열었고, 라우터는 아래와 같다. document.querySelector('.ajaxsend').addEventListener('click', function(){ var inputdata = document.forms[0].elements[0].value; console.log(inputdata); sendAjax('http://loca..

1. express : npm 모듈중에 하나이며, Node Js 에서 서버 프로그래밍에 필요한 기능을 훨씬더 편하게 해주는 기능이 있다. 1) 일반적인 nodeJS 에서 서버 여는 방법. const http = require('http'); const hostName = '127.0.0.1';const port = 80; http.createServer((req, res) => { res.writeHead(200,{'Content-Type' : 'text/plain'}); res.end('Welcome');}).listen(port, hostName,()=>{ console.log(`Server running at http://${hostName}:${port}/`);}); 2) Express에서 서버를..

Node JS란 무엇인가? 자바스크립트로 만들어진 노드 JS는 크롬 V8 엔진으로 빌드 된 자바스크립트 런타임이다. 기본적으로 웹 브라우져에서 자바스크립트를 많이 썼지만, 노드 JS를 통해서 서버쪽에서도 자바스크립트로 프로그래밍이 가능해졌다. 그동안 웹에서만 실행가능했던 자바스크립트가 서버에서도 실행가는 하게 된 것. 서버를 알기 위해서는 먼저 인터넷의 동작방법에 대해 알 필요가 있다. 클라이언트 -----> 인터넷 -------> 서버 1) 기본적인 원리 => 클라이언트(사용자 , 갑)이 인터넷에 어떤 자료를 요청하면, 서버(주다, 을)는 원하는 정보를 찾아서 제공해준다. 2) 특징 인터넷은 지구라고 비유하면, 각각의 주소들은 나라, 집이 될 것이다. 주소는 HTTP를 이용해서 찾아갈 수가 있다. HT..