Others/NODE.JS (21) 썸네일형 리스트형 웹애플리케이션 제작 (목차 및 글쓰기) 진짜 현대적인 웹애플리케이션을 만들어보자. 이전 게시글은 이번 포스팅을 위한 부품을 모았던 것이라고 생각해도 좋다.이제 그것들을 결합해서 제대로 만들어보자! 웹애플리케이션이 가지고 있는 전형적인 기능즉, 사용자로부터 어떠한 정보를 입력받아서 그것을 서버에 저장하고 사용자가 필요한 정보를 요청하면 그것을 제공하는 전형적인 웹애플리케이션을 만드는 포스팅이다. 학습을 시작하기에 앞서, 어떤것을 만들지 살펴보자. 1. 링크(목차)를 클릭하면 해당 내용을 보여준다.2. form을 통해 정보를 서버로 전송되면(제출), 그 정보를 받아서 1번 링크에 추가(서버로 부터 정보 받기)하기. 현대적인 웹 애플리케이션들은실제로 사용자가 등록한 정보들을 데이터베이스라고 하는 곳에 저장한다. 여기서는 데이터베이스가 아닌 파일에 .. MySQL 소개 및 Nodejs에서의 기본 사용법 MYSQL 소개 - 3대 관계형 데이터베이스 시스템- 성장배경웹이 출현 : 그 웹애플리케이션은 대부분 작은 기업, 개인 등 다양한 사이즈의 주체들이 웹에 참여해서 수많은 웹애플리케이션 나옴.기존에 DB(오라클 등)는 굉장히 부담스러웠을 수 있다. 그런 시대적 분위기에 맞물려서 무료이고 오픈소스이고 성능도 괜찮은 MYSQL이라는 데이터베이스가 그 시대적 요구사항을 반영하게 된 것.그리고 아파치, MYSQL, PHP 삼인방이 같이 묶여서 굉장히 많은 웹애플리케이션이 만들어진다. (=APM)- CompanyMYSQL AB라는 회사에서 만듦.이후 썬이라고 하는 자바를 개발한 회사에게 인수됨.이후 썬이라는 곳이 오라클에게 인수된.MYSQL을 최초로 만든 사람이 오라클의 정책이 맘에 안들어하면서 Maria DB 만.. 파일 업로드 파일업로드? 사용자가 선택한 파일을 업로드 하면 그 파일을 웹애플리케이션이 받아서 적당한 디렉토리에 놓는 방법이다.사용자가 애플리케이션에 전달하는 데이터는 크게 글(이전글까지 이 부분을 해결함)과 여러가지 정보가 담긴 파일(이미지 등)라고 할 수 있다. 파일을 선택한 폼에서 파일을 선택 한 후, 제출하면 웹애플리케이션의 특정 디렉토리로 그 파일이 위치하며 사용자에게 업로드한 파일의 이름을 보여주는 것을 만들어보자. 아쉽게도 express는 사용자가 업로드 한 파일을 어딘가에 저장하는 기능을 제공하고 있지 않기 때문에 그 기능을 실행할 수 있는 모듈을 설치해야 한다. 그 모듈은 multer. 이는 express를 이용해서 사용자가 전송한 파일을 어딘가에 전송하는데 잘 튜닝되어 있는 여러 모듈 중에 하나이다.. Express] POST 방식을 이용한 정보의 전달 / nodejs 자동재시작 팁! 서버와 웹 브라우저가 상호작용하는 방법 1. GET 방식2. POST 방식 GET VS POST GET- 웹브라우저에서 웹서버로 어떤 정보를 요청할 때, 이전글까지는 get 방식을 사용했다. 그리고 기본이 GET.- 웹애플리케이션에서 어떠한 정보를 얻어내기 위해서 웹애플리케이션에 주소를 통해 접속하고, 접속한 사용자의 요청에 따른 정보를 응답해준다.- 경우에 따라 쿼리스트링을 통해 어떤 정보를 웹애플리케이션의 요청에 의해서 가져왔다.- 서버에 있는 정보를 가져오는 것 1. form - html에서 form을 보면 url을 생성해주는 작은 프로그램이라고 생각하면 쉽다.- 사용자가 작성해주면, form 태그를 통해서 적당한 URL을 자동으로 생성해서 서버로.. Express] URL을 이용한 정보의 전달 (GET) 쿼리스트링이란? 1. 애플리케이션으로 들어오는 입력(IN)에 의해 다른 출력(OUT)을 하는 매커니즘을 좀 더 정교하게 다루는 법 언제나 똑같이 작동하는 애플리케이션도 애플리케이션이지만, 애플리케이션이 어떠한 사용자의 입력(조작)이 있을 때 그 조작에 의해서 적당한 다른 결과를 보여주는 것이 기능성이 좋은, 의미 있는 애플리케이션이라고 할 수 있다. 2. 물음표 뒤에 나타내는 정보 보통 애플리케이션은 사용자의 어떠한 입력의 영향을 받고 있을까요? 주소!http://a.com/login 에 따라 다른 결과를 사용자에게 보여주고 있다.사용자가 a.com/login으로 들어오면 login에 해당되는 라우터가 그 라우터와 연결되어 있는 익명함수(콘트롤러)를 호출해서 적당한 결과를 보여주었다. http://a.c.. Express] 템플릿 엔진 (Jade) 템플릿엔진은 독립적으로 주제가 떨어질만큼 규모가 있으며, Nodejs-express의 맥락에서 뿐만 아니라 다른 곳에서도 중요한 맥락이 된다. 1. 템플릿 엔진의 문법에 따라 만든 문서 작성하기. (index.jade) Left-Line 7 : - 는 스크립트를 작성할 때, jade와 약속한 것.Left-Line 9 : time이라고 되어있는 부분이 앞에 있는 특수한 기호(=)와 결합해서 우측 이미지의 Line13을 의미.템플릿코드 바깥쪽에서 템플릿코드를 실행할 때, time이라는 변수를 만들어서 주입시켜 준 것이다. 템플릿코드 안에서 변수를 쓸 수 있다는 것을 의미함. 템플릿엔진 사용하기 1.템플릿엔진을 설치하기 : jade라는 모듈을 설치하라는 뜻 템플린 엔진이라고 하는 것은 어떤 특정한 상품을 의미.. Express-웹페이지를 표현하는 방법 웹페이지를 사용자에게 서비스 하는 방법1. 정적인 파일 전달하는 방법 (이전 게시글 복습)2. 동적인 파일을 전달하는 방법 (다음 게시글 템플릿 예습) 정적으로 한다? 한번만들어진 것은 언제나 똑같은 모습의 html을 만들려고 하는 것.public이라는 디렉토리에 html 파일을 놓는다.app.use(express,static('public'); 로 인해 public 디렉토리 안에서 그 html 파일을 찾게 된다. Line 10 : 정적인 파일은 수정된 내용을 바로 적용시킬 수 있다. (node app.js를 하지 않아도 된다는 뜻.)하지만 요청이 들어올 때마다 노드가 알아서 잡아서 던져준다. 그래서 정적인 페이지를 서비스하는 것이 코드를 짜는데 편리하다고 할 수 있다. Line 14 : app.get(.. Express] 정적파일을 서비스하는 법 정적파일을 어떻게 사용자에게 제공할 수 있는가?정적파일?- 동적이지 않은 것- 프로그래밍적으로 만들어진 웹페이지는 동적이라고 표현함.- 그렇지 않고 사람이 만든 것을 언제나 똑같이 보이면 그것은 정적이라고 한다. express 홈페이지 메뉴얼에서 정적으로 파일을 작성하고 싶을 때를 참고해보자. app.use(express.static('public')); middleware를 알고 있어야 위 코드를 모두 해석할 수 있다.모른다면 패턴화해서 익히면 되니 걱정하지 말자. app.js 코드에 추가해보자. Line 4 : 정적인 파일이 위치할 디렉토리를 지정하는 기능.그 디렉토리명을 static() 안에 명시한다.= public이라는 디렉토리를 정적인 파일이 위치하는 디렉토리로 하겠다.(동작 전, public이.. 이전 1 2 3 다음
