comtech.log: 2월 2017

그냥 홈페이지를 제작하자니 너무 막막해서 airbnb와 유사한 홈페이지를 제작해보기로 했습니다.

1. 우선 airbnb 상단에 있는 navbar(로그인, 회원가입...등이 있는 바(?))를 제작하겠습니다.
http://getbootstrap.com/components/ (부트스트랩)에 있는 navbar를 사용하겠습니다.

위 사진은 부트스트랩에서 임의의 navbar의 코드를 캡쳐한 사진입니다. 여기서 copy를 눌러줍니다.

2. http://html2jade.org/ 에 들어가서 html을 jade로 변환해줍니다.

3. 그다음 visual code를 켠 다음 views에 새로운 폴더를 만들어줍니다. 그 폴더 안에
topnav.jade파일을 만들어 준 다음에 붙여넣기를 해줍니다.

(저는 자주 사용하는 navbar가 있으므로 제껄 사용하겠습니다.)

nav#mainNav.navbar.navbar-custom.navbar-fixed-top
// Brand and toggle get grouped for better mobile display
.navbar-header.page-scroll
button.navbar-toggle(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
span.sr-only Toggle navigation
| Menu
i.fa.fa-bars
a.navbar-brand.page-scroll(href='/') MyongGoPa
#bs-example-navbar-collapse-1.collapse.navbar-collapse
ul.nav.navbar-nav.navbar-right
li.hidden
a(href='#page-top')

ul.nav.navbar-nav.navbar-right
if (!currentUser)
li
a.page-scroll(href='#', data-toggle='modal', data-target='#myLoginModal') Signin
li
a.page-scroll(href='#', data-toggle='modal', data-target='#mySignUpModal') Signup
else
li
a.page-scroll(href='/more') Rank
li
a.page-scroll(href='/users/#{currentUser._id}') Profile
li
a.page-scroll(href='/signout') Signout

4. 위의 코드를 사용하기 위해서는 bower_components에 있는 css와 script를 사용해야만 한다. 그러므로 그 아이들을 사용하겠다는 표시를 해줘야 한다. layout.jade로 이동해서 아래의 코드를 추가해준다.

link(rel='stylesheet', href='/bower_components/bootstrap/dist/css/bootstrap-theme.css')
link(rel='stylesheet', href='/bower_components/bootstrap/dist/css/bootstrap.css')
link(rel='stylesheet', href='/bower_components/font-awesome/css/font-awesome.min.css')
link(rel='stylesheet', href='/bower_components/toastr/toastr.min.css')
script(type='text/javascript', src='/bower_components/jquery/dist/jquery.js')
script(type='text/javascript', src='/bower_components/bootstrap/dist/js/bootstrap.js')
script(type='text/javascript', src='/bower_components/toastr/toastr.min.js')

5. layout.jade에서 body밑에 block을 만들어 각각의 공간을 나눠준뒤 사용할 jade파일을 include해준다.

6. app.jade에서 bower_components를 사용하겠다고 알려줘야한다. 아래의 코드를 app.js에 복사 넣여넣기 해준다.

// bower 설정
app.use(express.static(path.join(__dirname, 'public')));
app.use('/bower_components', express.static(path.join(__dirname, '/bower_components')));

(알려주지 않으면 부트스트랩이 실행되지 않아 아래와 같은 이상한 화면을 볼 수 있다.)

7. 여기까지 제대로 됬다면 아래와 같은 화면을 볼 수 있다.

8. 이제 navbar를 조금씩 수정해야한다. 우선 MyongGoPa를 홈페이지의 이름 AIRBNB로 바꿔준다. signin과 signup도 한국어로 고친다. 여기서 코드에 등장하는 currentUser란 나중에 사용자가 로그인되어 있는지 아닌지에 따라 navbar에 보여줄 메뉴를 다르게 하기위한 변수이다. 일단 차후에 로그인기능을 만들때 건드리기로 한다.

위 사진과 같은 화면이 나와야 한다.

1. 웹페이지를 서비스할 때 저장공간이 필요하다. 이를 데이터베이스로 해결할 수 있다.
그럼 데이터 베이스란? 한 조직의 여러 응용 스스템들이 공용하기 위해 통합, 저장한 운영 데이터의 집합.
여기서 사용할 DBMS는 mongoDB를 무료로 500MB까지 무료로 제공하는
https://mlab.com/ 을 사용할 것으므로 해당 웹페이지에 접속해 회원가입을 해준다.