1. 제목은 아래와 같은 순서로 작성해 주세요. (복사 붙여넣기로 써도 좋아요.)
예시) [2일차] Do it! 점프 투 파이썬 / 116~148p / 03. 프로그램의 구조를 쌓는다! 제어문
[차수] 도서명 / 페이지 / 소제목 (책의 챕터명 또는 나만의 방식으로 작성)
[5차]Do it! Node.js 프로그래밍/283페이지~334페이지/익스프레스 프로젝트를 모듈화하기
이제 아래 가이드를 따라 스터디 노트를 작성해 봅시다.
2.책 DB를 넣어주세요 (제목 쓰는 칸 아래 정보 첨부 > 책 DB 클릭)
헷갈리실 땐 '편집자P의 스터디 노트 쓰는 법'을 참고해 주세요. : https://cafe.naver.com/doitstudyroom/21995
정재곤
이지스퍼블리싱 2017.03.06
3. 나의 스터디 흔적을 사진으로 보여주세요. 책상(모니터)과 책이 함께 보인다면 최고!
예시) 지우쭈님의 된다! 7일 실무 엑셀을 공부한 흔적: https://vo.la/LBxH
4. 이번 스터디는 어떠셨나요? 특별히 좋았던 점이나 어려웠던 점을 공유해 주세요. 다음에 이 책을 공부할 스터디 룸의 독자분들을 위해 큰 조언이 됩니다. (200자 이내로 작성해 주시면 충분합니다!)
예시) 뚜기님의 Do it! 점프 투 파이썬 스터디 노트 : https://vo.la/WhN6
익스프레스 모듈화는 솔직히 어려운것은 없었습니다.
모듈화는 어느 코딩에도 많이 사용되기에 실습하는데 크게 어려움을 느끼진 않았습니다.
7장 후반에 semantic-ui를 사용하는 부분에서는 npm 모듈 설치에 에러가 있습니다.
구글링 해보니 버전 문제인듯한데 결국에는 클리어 하지 못해 아쉽네요..
모듈화는 하는 과정에서 모듈 설치에 에러가 생기는 아이러니가 참...
개정화 된 책이라고 하는데 모든 소스가 개정화 되지 않고 부분적으로만 개정 되고 소스가 너무 구버전이라 책 그대로 하면 에러가 많습니다. 결국에 구글링으로 해결했었는데 이번 7장에서는 그마저도 안됐네요...
구글에 의존해야 하는 개발자의 숙명 같습니다.
5. 열심히 실습한 코드를 저장해 첨부해 주시거나 자랑할 스크린샷이 있다면 올려주세요.
7 익스프레스 프로젝트를 모듈화 하기
7-1 모듈화 방법 자세히 살펴보기
모듈화를 하는 이유는 프로젝트 관리를 위하여 꼭 필요하다
코드를 한 파일 안에 모두 모아 두면 후에 관리가 힘들어지는 경우가 발생하고 수정이 힘들어기지 쉽다
그리고 코드를 재사용을 높히기 위해서는 모듈화가 필요하다.
모듈화를 하기 위해서는 js파일을 새로 만들고 exports 전역변수를 사용하면 된다.
모듈을 분리할 때 사용되는 전형적인 코드 패턴이 있는데 함수를 할당하는 경우, 인스턴스 객체를 할당하는 경우, 프로토타입 객체를 할당하는 경우로 나눌 수 있다.
07-2 사용자 정보 관련 기능을 모듈화하기
- 스키마는 컬렉션의 구조를 결정하는 것으로 데이터베이스와 분리해서 독립적으로 정의할 수 있음
- app.js 에서 mongoose 모듈에 설정한 정보를 똑같이 사용하려면 파라미터로 전달받아야 합니다.
이 때문에 createSchema라는 함수를 새로 만들고 mongoose객체를 파라미터로 전달받게 합니다.
- 클라이언트 요청이 들어왔을 때 라우팅하는 부분은 다음과 같이 세 가지가 있음
1) router.route('/process/login').post(function(...){...});
2) router.route('/process/adduser').post(function(...){...});
3) router.route('/process/listuser').post(function(...){...});
- app.post() 함수의 두 번째 파라미터로 전달되는 것이 함수이므로 이 함수를 별도의 모듈로 분리할 수 있음
1) 브라우저 요청 : /process/login
2) 임포트(app.js) : var user = require('./routers/user')
3) 라우터(app.js) : router.route('/process/login').post(user.login)
4) 로그인 함수(./routes/user.js) : exports.login= ...
07-3 설정파일 만들기
- 새로운 모듈을 추가했을 때 메인 파일을 수정하지 않고도 어떤 모듈이 추가되었는지 알 수 있음
- 설정파일을 만들고 메인 파일이 설정 파일을 불러오도록 하면 됨
- 왜냐면 새로운 모듈을 추가했을 때 설정 파일만 수정해도 메인 파일에서 변경된 내용을 알 수 있기 때문임
- 라우팅 함수를 새로 추가할 때
1) 라우팅 코드가 들어 있는 모듈 파일을 추가합니다.
2) 새로 만든 라우팅 모듈의 정보를 config.js 설정 파일 안에 추가합니한다
07-4 UI 라이브러리로 웹 문서 예쁘게 꾸미기
css와 js로 웹문서를 예쁘게 만들 수 있다.
npm으로 semantic-ui를 설치한다.
명령어 npm install semantic-ui --save
설치 후 설치된 모듈에 있는 semantic.min.css파일과 semantic.min.js 파일을
DefaultExample 프로젝트의 public 폴더로 복사한다.
현재시점 기준 npm으로 설치 시 오류가 발생하여 책 자료실에서 css와js 다운 후 적용하였음.
이후 html 파일에 css와 js 경로를 설정해준뒤
ex) <link href="./semantic.min.css" rel="stylesheet">
<script src="./jquery-2.1.4.min.js">
태그에 적절한 class 혹은 id를 명시해준다.
ex) <div class = "ui blue fluid card">
<input class="inputbox">
웹브라우저마다 margin과 padding값이 조금씩 다르다.
*기호를 넣으면 모든 태그에 css를 설정할 수 있다.
미디어 쿼리를 사용해서 단말의 크기를 구별한 후 css를 적용할 수 있다.
ex) @madia screen and (min-width:768px) and (max-width:979px){
#cardbox{
width:80%;
}
}
이외에 부트스트랩, easyui, 타이톤같은 ui라이브러리도 사용할수 있다.