17)Nodejs_간이 SNS 서비스 만들기_(1) npm init, 각 필요 모듈설치, 미들웨어 설정, 각페이지 만들고, UI 만드는거 까지.. 템플릿 엔진도 만듦

실제 웹 서비스 제작에 들어가기 전..

 

지금까지 했던걸 스킬들을 가지고

실제 SNS 웹 서비스를 만들거

• 로그인
• 사진 업로드
• 글 작성
• 해시태그 검색
• 팔로잉

등을 구현 해 볼거

프런트엔드쪽인 UI는 포기하고..

기능적인 측면에서만 구현 할거

 

했던거 또 반복이긴함. .

---

npm init ~ 기본 필요 셋팅까지..

	페키지명, 버전, 설명, 진입파일명, 만든이, 특허 까지 작성해서 생성 후 script 속성 수정
	sequelize와 MySQL 연결해주는거 설치 npx sequelize init 해줘서 config, migrations, models, seeders 폴더까지 만든다. (npx를 쓰는 이유는 전역 설치를 피하기 위해 한다 했음) (전역설치 : npm i -g)
	수동으로 만들어줄게 있다 - views : 템플릿 파일이 들어감 - public : 정적 파일이 들어감 - routers : 라우터 파일이 들어감 - passport : 전략적인 파일들이들어 - controllers : 라우터 관련 파일들이 들어감. 클라이언트 요청에 대응하는 모델에 안내하며 작업이 끝난 후 다시 응답하는 역활을 함. - .env : express server 코드가 들어감. (고정된 구조는 아니며 서버가 커지며 구현하는 기능등이 늘어갈수록 폴더들이 좀 복잡해진다)
	기본적으로 필요한 패키지들을 설치 해 준다

기본 준비 끝.

---

서버 진입 파일 생성.

app.js
	설치 했던 모듈 등 각각 변수에 담아 쓰기 편하게 해 놓고..
	,env 구성들 불러오고 pageRouter 불러오고 (routers 폴더 안에 page.js 만들기)
	express 저거 8000번 포트에 연결(?) 해주고 아마 맞을 거임. .ㅋ
	설치한 미들웨어들 전부 설정 해주고
	page 라우터 저거 기본 페이지가 될 건데.. 아직 안만들었지만 주소 정도는 지정 해주고
	없는 페이지 진입시 뜨는 404 Not Found 미들웨어도 만들어 주고
	서버 내부에서 문제 생길시 뜨는 에러 처리 미들웨어도 만들어 주고
	포트 연결과 성공 메시지도 띄워주면~ 끝!

---

.env
	비밀 번호등 중요 한것들 여기에 들어갈거.. 법전 업글 해도 여긴 노출이 안되서 보안이 되지

아직도 저거 이해가 안됨... cookiesecret 자리에 그럼 비밀 번호가 들어간단거지???

 

---

템플릿 엔진 만들기

먼저는 컨트롤러부터 만든다

이 컨트롤러는 route에서 해당하는 동작이 수행 될때만 동작하는것으로

제목에서부터 알수 있듯 page관련 컨트롤러이며, page 관련 라우터이

controllers/page.js
	renderProfile() : 내 정보를 열람할때만 움직인다
	renderJoin() : 회원 가입할때만 움직인다
	renderMain() : 메인 화면 진입때만 움직인다.

이제 라우터도 만들어보자

router/page.js
	express 불러오고 방금 만든 컨트롤러들도 불러온다
	자 이제 컨트롤러에 있는것과 연결 해준다 주소 GET /profile 에 진입 했을땐 renderProfile 주소 GET /join 에 진입 했을 땐 renderJoin 기본 주소 GET / 에 진입 했을 땐 renderMain 이 돌아 간다.
	모듈 익스포트 할 때 저 라우터들 연결..

---

view 할 웹 페이지와

꾸며줄 CSS 페이지 만들기

5개의 html 페이지를 만들고

 

 

 

 

CSS 페이지를 만든다

 

(별로 중요하지 않음. .)

nunjucks를 사용했고

이런 식으로..

 

음... nunjucks 사용법 공부 해야겠네..ㅠ

시간 없어 저거 못하고 넘어 갔는데.....

모르믄 빠른 빌드업을 못하는구만

---

메인화면

회원가입 화

서버 돌리는것 까지 오타없이 잘 왔다면 성공..

html은 레이아웃만 어떻게 구성 먼저 어디에 뭘 배치 시킬건가

잘 정리 하면 되고

css는 이제 구상된 레이아웃에 스케치와 도색등 해서 이쁘게 만들면 되는거고

JS로 기능적인거 구현 해야되고( 뭐 새창이 뜬다던지 팝업창이나 모달창 등등..)

동적으로 화면 그릴줄 알아야 하고....

와.. 할게 많구만