분류 전체보기 (108) 썸네일형 리스트형 Local2Global route, siteName 같은 로컬 변수들을 view에서도 사용할 수 있게 만들자. app.js에 app.use(localsMiddleware)를 추가하고, middleware.js 파일 생성 로컬 변수들을 아래처럼 res.local에 포함시키면 전역변수로써 사용 가능 이제 routes.join이나 routes.login 같은 로컬 변수를 어느 파일에서든 사용할 수 있게 됨 아래처럼 #{}을 사용하면 변수로 적용 가능. siteName 위치에 "Nine O Clock"이 표시됨. pageTitle은 페이지마다 달라야 하기 때문에 controller에서 직접 지정한다. 실수해서 github의 commit이랑 사진이랑 좀 다름 commit이 잘못된 거임ㅠ Partials 프로그래밍은 Devide and Conqeust main에서 header와 footer를 분리해보자. header에는 책 아이콘과 Join, Log in 버튼 footer에는 책 아이콘과 카피 로고, 연도, 프로젝트 이름 Font Awesome 사이트에서 무료로 아이콘을 가져올 수 있다. 위와 같이 홈페이지에서 제공하는 코드 한 줄을 head 부분에 넣는다. Visual Studio Code Extensions Prettier - 코드 이쁘게 정리 Material Theme - 전체 테마 Darker High Contrast :imojisense: - ctrl + i 누르면 아이콘 다 나옴 Polacode - 이미지로 코드 스냅샷 가능 bracket Pair Colorizer - 괄호 짝 맞춰줌 Visual Studio Code 유용한 단축키 Shift + Alt + 방향키를 자주 씀 https://dayjms.tistory.com/entry/%EB%B9%84%EC%A3%BC%EC%96%BC-%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4-%EC%BD%94%EB%93%9C%EC%9D%98-11%EA%B0%80%EC%A7%80-%EC%9C%A0%EC%9A%A9%ED%95%9C-%EA%B8%B0%EB%8A%A5-1-%EB%A9%80%ED%8B%B0%EC%BB%A4%EC%84%9C-%EC%97%90%EB%94%94%ED%8C%85MultiCursor-Editing 비주얼 스튜디오 코드의 11가지 유용한 기능 비주얼 스튜디오 코드의 11가지 유용한 기능 대화형 실습(Interactive Editor Playground)에 있는 내용.. Pug Pug는 view engine으로, HTML 파일들을 쉽게 만들 수 있게 도와준다. .html 파일에서는 [Hello]라고 써야하는 것을 .pug 파일에서는 [p Hello] 라고 쓰면 됨 .pug파일은 자동으로 .html으로 변환되어 서버에 반영된다. npm install pug express의 view engine을 pug로 바꾼다. - app.js에 app.set("view engine", "pug"); 추가 앞으로 pug 파일들을 /views에 저장한다. Pug를 이용하면 반복 작업을 줄일 수 있다. 모든 페이지는 header, footer, HTML head 태그, css link를 필요로 한다. /views/layout 안에 main.pug를 만들고, 공통적인 양식을 여기에 저장 다른 pug .. 개발 환경 window OS, visual studio code, github nomad code 강의 들으면서 내 나름대로 어플을 만들어 보는 중 Router 쪼개기 MVC 패턴 Model(데이터, DB) View(데이터의 생김새, template) Controller(데이터를 찾는 함수) routers 폴더를 만들어서 userRouter.js, globalRouter.js를 넣는다. globalRouter는 /, /search, /login, /join 등을 처리한다. userRouter는 /users, /userDetail, /editProfile 등을 처리한다. URL들을 쉽게 사용하고 변경할 수 있도록 routes에 URL들을 한번에 저장한다. Router 우선 index.js를 app.js로 이름 변경 application 관련 코드들은 app.js에 담는다. app.js는 express를 실행해서 app상수로 만들고, middleware들을 추가 init.js 생성, app.js에서 app을 import하고 app.listen을 여기에 둔다. 서버를 개설할 때 init.js를 찾도록 package.json에서 index.js -> init.js 앞으로 많은 URL을 처리해야 하는데, 사용과 변경을 용이하게 만들기 위해 router를 사용. router.js 생성, userRouter에 하위 URL을 두고 userRouter을 export. /user를 포함하는 URL으로 접속하는 경우 app.js에서 userRouter를 호출. import { user.. 이전 1 ··· 9 10 11 12 13 14 다음
