디자인은 노마드코더 css레이아웃마스터 강의에서 따왔습니다.

기획의도

코딩애플에서 js,mongodb를 배우고 내걸로 만들어보는 시간이 필요했다.
간단하게 쇼핑몰보다는 조금 덜 복잡한 사이트를 만들고싶었다.

이런거 만듦

• 메인페이지
• 카테고리 (클릭시 해당되는 카드 불러옴)
• 회원가입,로그인
• 글쓰기
• 검색기능
• 마이페이지
• 글수정

메인페이지

페이지 로드시 딜레이를주어서 차례대로 요소가 나타나게끔 해줬고, 각 요소에 마우스를 올리면 각 멤버들의 고유 색상이 나타나고, 제목과 내용을 보여주게끔 해줬다.
+ 반응형페이지

카테고리

맨 위에 위치해있는 민지,하니,해린,다니엘,혜인 메뉴들을 누르면 그 이름에 맞는 카드가 나타나게끔 해주었다.

회원가입, 로그인

회원가입과 로그인은 passport를 이용하였고, passprt의 세션에 자동으로 user정보가 담기는것을 이용하여(req.user) 상단 메뉴의 Login 버튼이 ABOUT 버튼으로 바뀌게해주었다.
ABOUT버튼을 클릭하면 숨겨져있는 박스가 나온다.

글쓰기

글쓰기페이지는 제목을 제외하고 빈칸이 있으면안된다.
제목은 추가할수 도 있고, 추가를 안해도 된다.
이미지 업로드는 multer를 사용했고 로컬환경에서 이미지가 저장되고 불러올 수 있게끔 설정해주었다.

검색기능

카테고리를 검색할 수 있게 해주었다.
검색어를 입력하고 엔터를 누르면 검색결과가 나타나고, 검색어와 일치하는 데이터가 없을 시, There is no entry for "검색어" 이런 문구를 띄워준다.

마이페이지

마이페이지에서는 자기가 작성한 글 전체를 불러온다.
여기서 클릭을 하면 글 수정 페이지로 이동하게된다.

글 수정

글과 이미지, 카테고리를 수정 할 수 있다.

기술 스택

• ejs
• nodejs,express
• mongodb,mongoose

회고

리액트가 많이 그리웠다..
javascript로 dom을 만지는게 재미있으면서도 제이쿼리를 안쓰면 코드가 길어져 지저분해질 수 밖에없다는 점이 아쉬웠다.(나는 ajax를 제외하고는 제이쿼리를 쓰지않았다.)
이번 연습을 통해서 fetch와axios, ajax 등등의 개념을 다시금 숙지할 수 있었다.
서버와의 통신을 ajax를 사용하기도했고, fetch를 사용하기도했다.
ajax는 제이쿼리가있어야 한다는 번거로움과 도중에 fetch도 promiose라는 개념을 새롭게 알게되어서 fetch만을 사용했다.

이미지 구현과 게시글 수정 구현 과정에서 고민을 좀 했다.
이미지 구현에는 multer로 사용자 컴퓨터에 이미지 저장되게끔 구현을 했다.
aws의 s3나 그외의 것을 사용하지 않았고 오직 로컬만 사용했기에 이미지의 이름만 서버에 저장하고 프론트에서 이미지를 불러올때는 ../public/image/${data[i].image} 이런식으로 이미지가 저장되어있는 폴더에 접근해서 불러와줬다.

게시글 수정에서는 input의 type=file은 file.value= ".."이런식으로 불러올 수 없었다.
그게 되면 보안에 취약해서 막아놨다고한다. 그래서 fetch로 data를 불러와서 이미지를 처리해줬다.

또 프론트에서 GET요청으로 데이터를 요청했는데 서버에서는 데이터를 잘 전송시켜줘도, console.log를 찍으면 html 페이지 전체 코드가 콘솔에찍혔다.
(하지만 ejs에서 <%=post.title%> 이런식으로는 잘 불러와짐..)
내가 필요한건 file의 data이기때문에 서버와의 데이터 통신이 원활히 이루어져야했다.
그래서 edit페이지에서 fetch를 사용해서 POST요청을하여 데이터를 받아오고, PUT으로 수정한페이지를 처리해냈다. 이게 맞는 방식인지는 모르겠지만..

앞으로는 어떤식으로?

이제 리액트,뷰,앵귤러 이 삼대장이 프론트엔드 시장을 어떻게 뒤흔들어놓은것인지 피부로 느꼈으니 다시 공부하고 또 공부한 내용들을 토대로 프로젝트를 할 예정이다.
우선 아직 마저 못끝낸 mongodb강의부터 끝내고..

코드: https://github.com/jungsikjeong/exercise-book/tree/master/web02