Node.js로 싸이월드 만들기(3+4일차-마무으리)

최종 완성된 동작 과정

뭐.. 사실 쌉허접하고 photo는 하지도 않았지만 어차피 수정/생성/삭제를 node.js 를 사용해서 실행하는 것을 확인하는 것이 목적이었으니 이쯤으로 만족하기로... ^^

 

저번 과정에서 내가 고친 점은

1.메뉴를 변화시킬 때마다 메뉴의 색상도 까만색-> 흰색 or 흰색-> 까만색으로 바꾸게 하고 싶었다.

내가 사용한 방법은 

그 때 그 때 write(template.html) 그니까 template안에 내가 설정해놓은 css 값을 바꿔서 메뉴 색을 바꾸는 아주 간단한 방법으로 해결이 가능하였다.

home, photo, profile 의 메뉴 색깔을 각각 다르게 하기 위해 template 안에 태그 명을 html/ html1/ html2 로 각각 다르게 지정했다.

 

2.그 외에 node.js로 메뉴에 따른 화면 변환/ 수정/ 생성/ 삭제

자세한것은 아래 내가 올린 github 코드를 보면 알겠지만 대략적으로 설명해보자면

• 1.http.createServer로 서버를 구축한 뒤, 
• 2.urlObj라는 url객체를 만들어서 경로명같은 것들을 받을 수 있게 하고
• 3.이 경로명, 즉 pathName이 바뀔 때마다 그에 따른 서버 number와 우리가 앞서 만들었던 html 을 응답 객체 res을 이용해 설정해주고 그 경로에서 할 일이 다 끝나면 res.end();로 종료시켜준다. 

이 과정을 각각의 경로명마다 반복해주다 보면 사실 큰 틀은 똑같다.

그 안에 추가적으로 글 목록들이 필요한 profile 안에서는 urlObj 객체의 search에 경로명 뒤의 ?뒤에 나오는 query문이 등장하기 때문에 if(!urlObj.search)인 경우와 아닌 경우를 나눠서 코드를 짠다.

 

또한 fs.readdir()이나 fs.readFile()같은 모듈 함수들은 fs라는 모듈을 이용해 내가 지정한 폴더 내의 파일들을 읽어주고, 그것들을 list로 상수화하거나 해서 그 파일들을 활용할 수 있도록 돕는다.

이것들을 ${list} 같이 이용하면 가변적으로 화면을 변화시킬 수 있다. 

 

주의할 점!! 수정하거나 생성할 때 파일 이름이 한글파일이면 무한루프가 뜰 수 있기 때문에 encodeURIComonpent()해줘야한다는 것.

또한, writeHead 에 숫자가 몇이 오느냐에 따라 사용자에게 어떤 화면을 제공할 것인가가 달라진다.

예를 들어

200:성공

302:페이지 강제 이동

404:에러

같은 것들이 있음.

 

이게 거의 전부다. 나머지는 아래 코드를 참고해주길 바란다.. 허접하지만 그냥 간단히 끝!

다음 공부로 넘어가겠다...

 

dimplehh/cyworld (github.com)

dimplehh/cyworld