이누의 개발성장기

form {% extends "layout/base.html" %} {% block content -%} 제품명 가격 설명 작성하기 {% endblock %} 위와 같은 html 코드가 있다고 하자. 이 때 form 태그는 버튼을 눌렀을 때 특정 요청을 보낼 수 있도록 해준다. 위 코드에서는 form의 method를 'post'로 설정했으므로, POST 요청이 수행된다. action은 해당 요청의 대상을 결정하는데, 해당 부분이 비어있을 경우 현재 주소를 대상으로 한다. 물론 해당 주소의 POST 요청에 대한 설정이 코드 상에 존재해야 정상적으로 작업이 수행된다. cf. base.html에는 코드의 기반으로 부트스크랩이 적용되어 있다. body-parser const bodyParser = require..

http const http = require('http') 가장 기초적인 웹 모듈. http 웹 서버와 관련된 기능을 수행한다. Server 객체 const server = http.createServer() http 모듈의 핵심이 되는 객체 createServer 메소드를 통해 생성가능 const port = process.env.PORT server.listen(port, () => { console.log(`Server running at port ${port}`) }) server.close() listen(port, callback함수) : port를 기준으로 서버실행 후 callback함수 실행하는 메소드 close() : 서버를 종료하는 메소드 cf. process.env.PORT는 내 컴..

Event Emitter const EventEmitter = require('events'); class ChatManager extends EventEmitter {} const chatManager = new ChatManager(); chatManager.on("join", () => { console.log("new user joined"); }) chatManager.emit("join"); node.js의 'events' 내장 모듈을 불러와 활용한다. 해당 객체를 extends하여 새로운 클래스를 만든다. 해당 클래스로 만들어진 객체는 on과 emit을 통해 기본적인 Event 소통이 가능해진다. on으로 특정 이름(join)의 이벤트를 생성한다. 이는 emit을 통해 이벤트를 발생시킬 수 ..

미들웨어 미들웨어의 원래 뜻은 '클라이언트와 서버 간의 통신을 담당하는 시스템 소프트웨어 또는 컴퓨터와 컴퓨터의 연결을 담당하는 시스템 소프트웨어'이지만, 적용되는 서비스마다 그 의미가 달라진다. Node.js express에서 미들웨어는 '최종 요청 핸들러 이전의 Express 라우팅 계층에 의해 호출되는 함수로써, 따라서 원시 요청과 의도된 최종 라우트 사이의 미들웨어에 위치함'으로 정의된다. 아래와 같이 라우팅시 처리되는 함수도 모두 미들웨어 함수이다. 라우팅을 작성하는데 어떤 URL은 꼭 로그인을 요구하고 싶다고 하자. 로그인이 안되어있으면 로그인 페이지로 강제 이동한다. 특정 URL로 들어가기 전에 로그인을 체크한다. 미들웨어는 이러한 일련의 과정을 좀 더 쉽게해주는 것이라고 할 수 있다. 즉,..

view engine view engine이란 DB의 내용 등을 자연스럽게 HTML에 보여줄 수 있도록 하는 엔진이다. html 내부에서 해당 엔진을 활용해 반복문, 조건문 등을 사용할 수 있다. 다양한 패키지가 존재하는데 우리는 그 중 Nunjucks를 사용할 것이다. npm install nunjucks 명령어를 통해 패키지를 설치한다. npm install nunjucks nunjucks nunjucks.configure('template', { autoescape: true, express: app }); // template를 인식하고 사용하겠다 // autoescape는 보안상 true // express : app는 사용할 주체 nunjucks.configure를 통해 적용할 html 페이지..

Routing 새로운 주소가 추가될 때마다 하나의 파일에서 계속 코드를 추가해준다면 코드가 굉장히 복잡하고 관리가 어려워질 것이다. 따라서 Router라는 모듈을 이용해 특정 주소 패턴별로 파일을 따로 만들도록 한다. 우리는 /admin과 /admin/products 주소에 대한 요청을 만들것이고, admin으로 통하는 URI를 관리하는 파일을 따로 만들어 볼 것이다. 프로젝트 폴더 최상위에 routes 폴더를 만든다. 그리고 admin.js 파일을 생성해 해당 파일에 관련 정보를 작성한다. const express = require('express') const router = express.Router() // express 패키지의 Router를 가져온다. router.get('/', (req, r..

nodemon node (js파일명).js로 서버를 실행하면 소스가 변경될때마다 서버를 내렸다 다시 올려야한다. 하지만 이는 매우 귀찮고 불편하다. nodemon이라는 패키지를 설치하면 소스가 변경될때마다 서버를 내렸다 올리지 않아도 바로바로 적용될 수 있는 nodemon 명령어를 사용할 수 있다. npm install -g nodemon 을 통해 설치한다. npm install -g nodemon 설치가 완료되었다면 nodemon (js파일명).js 명령어를 사용해 서버를 열 수 있다. nodemon을 통해 서버를 올린다면 서버를 내렸다 올리지 않아도 바로바로 소스코드 수정사항이 적용된다. 가끔 html파일이 제대로 실시간 적용이 안되는 경우가 있다. 그 경우에는 nodemon -e js,html (j..

Express란 nodejs로 웹서버를 구축하는 방법은 다양하다. http 패키지를 사용해 구성할 수도 있고, 그 외에도 다양한 웹 프레임워크 패키지가 존재한다. node.js에서 사용하는 웹 프레임워크 패키지 중 하나이다. 왜 Express를 사용해야하는가 다양한 웹 프레임워크가 존재하지만, 제일 대중적이다. 따라서 프로젝트 진행시 인원 보충에도 좋고, 레퍼런스가 풍부해 참고자료도 많다. Express 사용해보기 npm install express 명령어를 통해 express 패키지를 설치할 수 있다. 설치 후 다음과 같은 코드를 작성하여 기본적인 기능을 테스트한다. 각 코드의 의미는 주석으로 설명했다. 기본적으로 request와 response에 대한 이해가 필요하다. const express = r..

Node.js란? 웹브라우저에서 쓰이는 자바스크립트를 서버에 사용가능하도록 한 것 V8(크롬에 탑재된 자바스크립트 엔진)의 적용으로 프론트엔드쪽에서만 주로 사용되던 자바스크립트를 서버에서 사용할 수 있게 되었다. Node.js 설치 https://nodejs.org/ko/download/ 해당 링크에서 설치파일을 다운받아 설치 후 cmd혹은 커맨드창에서 node -v, npm -v를 쳐서 버전을 확인한다. NPM Nodejs Package Manager의 약자로, 다른 사람이 제작한 모듈을 받아와 활용하는 것이다. 다양한 모듈이 존재하며, 처음엔 npm init으로 패키지에 대해 초기화를 한 후에 작업을 진행한다. 이러한 과정으로 package.json 이라는 패키지 관리 파일이 생성된다. 그리고 이제 ..

이미지 사용하기 사용자로부터 이미지를 받고 이를 처리하기 위해선 별도의 처리가 필요하다. settings.py settings.py에 이미지의 경로를 설정하는 코드를 추가한다. 우리는 이미지를 루트디렉토리의 media 폴더에 넣어줄 것이다. MEDIA_ROOT = os.path.join(BASE_DIR, 'media') MEDIA_URL = '/media/' MEDIA_ROOT : 이미지가 저장될 경로 MEDIA_URL : 이미지가 사용될 때 표현될 URL models.py 우리가 사용할 model class에 이미지 필드를 추가해준다. image = models.ImageField(upload_to='appname', null=True) 이렇게하면 사용자가 모델에 입력한 이미지파일은 'appname/이..