🖍️fs파일 시스템 사용
- 메뉴 배열로 만들어서 사용
- 라우팅 처리
- html템플릿을 파일로 분리
- fs파일 시스템 사용, html파일 내용읽기, 템플릿 적용
2-1에서 만들었던 메뉴를 배열로 만들어서 사용하고싶다
만약 잘못된 경로면 에러를 여러가지 방식으로 처리하려고 한다
[1] 사용자 요청 경로가 메뉴 배열데이터에 있는지 확인하기
앞서 클라이언트url을 출력해보면 경로를 바꿀때마다 /about, /service와 같이 슬래시가 같이 출력되는걸 볼 수 있다
하지만 우리는 배열에 ['main', 'about', 'service', product', 'contact'] 처럼 담아두었기 때문에 슬래시를 없애야 한다
L8 : 만약 pathname이 루트이면 파일이름에 main으로 할당
L11 : 루트가 아니라면 pathname의 /를 공백으로 대치 후 파일이름에 할당
- 슬래시 제거가 잘 되는지 확인하기 위한 txtfileName 변수 생성
파일이름 변수를 출력했을때 위의 clientPathname과 다르게 슬래시가 삭제된 것을 확인할 수 있음
[1-2] 메뉴 배열데이터에 존재하는지 확인하기
위의코드 L17을 보면 indexOf를 사용하여 '슬래시를 제거한 파일이름(요청이 온 경로)'이 배열 menu에 존재하는지 물어보고 그 답을 isMenu에 할당하고있다
indexOf에 관하여..
루트/ 접속시 : 배열의 0번째와 일치하므로 처음에는 0이 뜬다!
파일이름이 없을 시 -1이 출력된다
[2] 라우팅
1-2와같은 이유로 isMenu가 음수이면 잘못된 경로인 것이다
이를 처리하기 위해 두가지 방법을 소개하도록 하겠다
편의상 주석을 없앴습니다 둘이 같이쓰면 안됨
1. 메세지로 에러 처리하기
앞에서 했던것과 마찬가지로 res.write를 사용하여 메시지로 응답을 준다
2. 이미지로 에러 처리하기
L11 : 404이미지 파일은 읽어져, data에 저장된다
L14 : 에러를 처리해주고, content-type을 text/html이 아닌 image/jpeg로 설정
L15 : data를 화면에 출력
[3] 파일 동적으로 불러와 템플릿에 적용하여 화면에 출력
위의 코드 중 L18~32에서..
먼저 각 메뉴에 관한 .txt 파일을 만들었다
L20 : 이 파일들을 동적으로 불러와져, data에 저장된다
L24 : 카테고리 메뉴 배열을 일단 손수 문자열로 변환(뒤에서 수정할 예정)
L28 : title, menuList, data를 템플릿에게 타이틀과 함께 전달
템플릿 코드 ↓
head의 style은 무시하세요
[4] 모두 동적으로 수정
오류가 있다면 편하게 알려주세요
