개발새발 로그

게시글을 클릭해서 들어가면 아래와 같이 구성되는 것이다 이 그림과 같이 컴포넌트를 나눠준다. PostArea 1. PostArea.js에서는 서버에 postNum을 이용해 클릭한 게시글 데이터를 요청한다. 2. PostArea는 받은 데이터를 Detail과 RepleArea에 props해준다. 3. spinner도 PostArea에서 보여주게된다. -> 로딩 화면 Detail 1. props로 받은 데이터를 출력해준다. RepleArea 1. RepleUpload 컴포넌트와 RepleList 컴포넌트를 하위 컴포넌트로 만들어준다. 2.RepleUpload는 input태그와 button태그를 생성해 간단한 댓글 등록 페이지로 만든다. 3.RepleUpload에서 등록 버튼을 클릭하면 서버에 댓글 등록 요청..

이제 게시글 상세페이지에서 수정하기 버튼을 누르면 게시글 수정페이지로 가서 게시글을 수정할 수 있는 기능을 추가해보자 이때 수정할 때는 기존의 게시글내용을 온전히 수정페이지에 가져와야한다. 먼저 순서를 그려보았다. 1. 수정버튼을 누르면 게시글 수정 페이지로 이동 2. 게시글 수정페이지에는 기존 내용이 보여져야함(서버에 기존내용 요청) 3. 수정내용 작성 후 다시 서버에 수정API 요청 4. 수정내용 DB에 저장 5.수정완료후 해당 게시글 페이지로 이동 1. 수정버튼을 누르면 게시글 수정 페이지로 이동 -LInk로 수정페이지에 이동한다 -이때 수정페이지도 App.js에 Route에 추가해줘야한다. 2. 게시글 수정페이지에는 기존 내용이 보여져야함(서버에 기존내용 요청) postNum을 이용해서 해당 게시..

게시글들을 서버에 저장하고 만약 그 게시글들을 삭제하거나 수정 그리고 상세페이지로의 전환을 위해 게시글마다 특정한 아이디가 있어야한다. 그러면 우리는 게시글 마다 고유한 아이디를 부여해주어야한다, 고유한 아이디는 간단하게 숫자를 넣을 것이다, 먼저 순서를 그려보았다. 작동순서 1.고유한 번호를 만들기위한 counter DB생성을 위해 Counter 모델을 만들어줌 2. Counter모델을 생성하면 Counter DB가 생성됨 3. Counter DB에 수동으로 데이터를 만들어줌 4. 서버로 가서 만든 모델을 쓸수 있게 넣어줌 5. 이전에 만들었던 upload의 submit API를 수정해야됨(게시글마다 고유한 번호도 같이 저장되기위해) 6. 게시글을 생성하기 전에 Counter에 counter라는 이름의..

이제 DB에 저장된 데이터를 클라이언트에서 요청해 불러와보자 우리가 원하는 순서를 그려보았다, 작동순서 클라이언트에서 axios요청을한다. 서버에서는 해당하는 API를 만들고 DB에서 데이터를 몽구스의 find로 찾아서 postList라는 이름으로 저장한다. 다시 클라이언트에서 데이터를 받아 배열에 저장한다. 해당 배열을 map을 이용해 뿌려준다. 1.클라이언트에서 axios요청을한다. -클라이언트에서 useEffect를 이용해서 해당 컴포넌트가 렌더링되면 axios 요청을한다. 2. 서버에서는 해당하는 API를 만들고 DB에서 데이터를 몽구스의 find로 찾아서 postList라는 이름으로 저장한다. 3. 다시 클라이언트에서 데이터를 받아 배열에 저장한다. 4. 해당 배열을 map을 이용해 뿌려준다. ..