코딩10 multer로 이미지 업로드 기능 만들기 multer를 이용해 파일을 서버로 요청해서 저장할 수 있다. 우선 아래 명령어를 입력하여, multer를 설치하자. npm install multer 암호화된 module/imageUpload.js const multer = require("multer"); const upload = multer( {dest: "uploads/"} ); // 여기서 dest는 destination(목적지)의 줄임말 // 해당 위치에 이미지를 저장하겠다는 뜻 module.exports = upload; routes/index.js const upload = require("../module/imageUpload"); // imageUplaod.js 불러오기 router.post('/upload', upload.singl.. 2022. 1. 1. HTTP Method를 활용한 요청 및 응답 HTTP Method에는 여러가지가 있지만, 가장 많이 사용하는 것은 아래 네가지이다. get : 요청 받은 정보를 검색(read)하여 응답 post : 요청된 자원을 생성(create) put : 요청된 자원을 수정(update) delete : 요청된 자원을 삭제(delete) 라우팅 라우팅은 클라이언트의 요청에 맞게 분기처리해서 응답하도록 하는 것을 의미한다. routes/index.js var express = require('express'); var router = express.Router(); // post method let arr = []; router.post('/create', (req, res) => { const data = req.body.data // body의 raw jso.. 2022. 1. 1. NPM 패키지 설치와 Express, Nodemon NPM(Node package manager)은 이름에서 알 수 있듯이, Node.js 개발의 편의를 위해 다양한 모듈들을 모아둔 패키지이다. 대부분의 Node.js 백엔드 개발자들인 이 NPM 패키지를 설치해서 사용하고 있다. 설치 우선 NPM을 설치하기 위한 임의의 폴더 하나를 생성한다. 터미널 창에서 아래의 코드를 입력한다. npm init 설치가 끝나면 package.json이라는 파일이 생성된 것을 볼 수 있다. 설치 과정 중 터미널에서 name을 비롯한 몇 가지를 물어보는데 입력하지 않고 엔터를 쳐도 무방하다. package.json { "name": "npm-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts".. 2021. 12. 31. API 서버 만들기 Node.js를 활용하여 API 서버를 만드는 방법을 개략적으로 설명한다. http 모듈 const http = require("http"); Node.js에 내장된 HTTP 모듈을 호출하는 태그로, Node.js가 HTTP를 통해 데이터를 전송할 수 있게 만든다. http.createServer((req, resp) => { if (req.url === '/') { // 분기처리 resp.writeHead(200); resp.end("main url"); } else if (req.url === "/upload") { // 분기처리 resp.writeHead(200); resp.end("upload url"); } else if (req.url === "/delete") { resp.writeHead(.. 2021. 12. 31. Node.js Node.js는 네트워크 어플리케이션을 빌드하는데 서버 구축 등을 도와주는 JavaScript의 런타임 플랫폼이다. 프론트엔드의 대표적 언어인 JavaScript로 백엔드 개발을 할 수 있어서 많은 개발자들이 채택하고 있다고 한다. 이벤트 기반 처리 Node.js를 공부하기에 앞서, 이벤트 기반의 처리 순서에 대해 간단히 익혀본다. 여러 이벤트들이 실행될 순서대로 호출 Stack에 쌓여 있다. 필요하다면 Background로 이벤트가 이동한다. (예를 들어 setTime 함수) Background에서 작업이 완료되면, Task que로 이동한다. 호출 Stackd에 있던 이벤트들이 모두 완료되면, Event loop가 Task que 작업들을 호출 Stack으로 이동시킨다. 블로킹 I/O와 논블로킹 I/.. 2021. 12. 27. [JS] 최적화 사용자 경험을 향상시키기 위해 최적화는 필수적이다. Make it work, Make it right, Make it fast - Kent Beck - 성능 향상 실제 사용자가 렌더링된 페이지를 보기까지 간소화시킬 수 있는 모든 과정은 최대한 간소화시키는 것이 중요하다. 우선 초기 구동 시간을 간소화하기 위해 아래의 방법을 사용할 수 있다. 다운로드해야 할 파일의 갯수를 줄이고, 용량을 작게 한다. 예컨대 이미지 스프라이트, 이미지와 폰트의 최적화 등. CSS와 JS 파일은 최소화(minifier)하여 용량을 줄여 사용한다. 프레임워크는 꼭 필요한 것만 사용한다. 반응 시간 향상 사용자의 인터랙티브 경험을 극대화하기 위해선 사용자의 행동에 브라우저가 얼마나 빠르게 렌더링 반응을 보이게 할 지에 대한 개선.. 2021. 12. 21. [JS] 로또 번호 만들기 function randomNum(min, max) { return Math.floor(Math.random()*(max-min) + min) } function LottoMake() { let numArray = [] while (numArray.length a-b) return numArray } console.log(LottoMake()) Math.random() : 0 이상 1 미만의 소수를 무작위로 보여준다 Math.floor() : 버림. 정수 자리만 남기기 위한 방법. 변수.includes() : Array 변수에 파라미터가 포함되어 있는 지 여부를 불리언으로 보여준다. 변수.push() : Array 변수에 파라미터를 추가한다. 2021. 12. 4. [JS] 데이터 형, 연산, 조건문과 반복문 오늘은 멋쟁이사자처럼 프론트엔드스쿨에서 JavaScript의 기초를 배운 두 번째 시간이다. 데이터 형(Type) JS의 모든 값은 7개의 데이터 타입으로 나뉜다. 그 중 6개는 원시 타입(primitive type), 나머지 하나는 객체 타입(object type)으로 분류된다. 타입명 설명 number 숫자 string 문자열 boolean 참/거짓 undefined var로 선언된 변수에 할당되는 암묵적 값 null 값이 없음을 명시적으로 보여주기 위한 값 symbol - 한편 여러 이유로 값의 형 변형을 하게 되는 경우도 있다. parseInt로 string으로 된 숫자를 number로 된 숫자로 바꾼다. parseInt('123', 10) // 123 혹은 부정의 부정은 긍정인 점을 이용하여, .. 2021. 11. 30. [FE-1] 멋쟁이사자처럼 개발자 조은 님 특강 멋사에선 격주로 수요일마다 유명한 연사분들과 함께하는 특강 자리가 마련된다. 이번 수요일에는 (나는 몰랐지만) 유명한 프론트엔드 개발자이신 조은 님의 이야기를 들을 수 있게 되었다. 조은 님은 컴퓨터 관련 비전공자로 시작했지만, 뚜렷한 목표의식을 갖고 자발적으로 공부하면서 폭발적으로 성장하신 케이스였다. 그런 본인에 대한 자부심과 자신을 가진 모습을 보며 매우 존경스러움을 느꼈다. 개발자가 되려는 우리들이 가질 법한 질문들을 미리 준비해오셔서 일종의 자문자답 Q&A를 통해 조은 님의 개발자 스토리부터 인재 철학 등을 엿듣을 수 있었다. ⚡️ 개발자에게 필요한 역량은? 문제 인식(정의)과 문제 해결, 커뮤니케이션 역량, 비즈니스적 감각... ⚡️ '잘하는' 개발자임을 어필할 방법? GitHub의 꾸준함과 .. 2021. 11. 26. [HTML] HTML 마크업 한 눈에 보기 말이 필요없다. div 덕지덕지 하지 말고 웹 표준 잘 지켜서 마크업해보자. 2021. 11. 4. 이전 1 다음
