![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/u10Bq/btrrumxqWro/CP4KjKKJVVDiIuDTaqa3p1/img.png)
추가적으로 댓글 기능을 만들어보았다. 추가로 DB에 댓글을 관리하는 테이블을 생성한 이후 해당 게시글에 관련된 댓글만 불러와 테이블 형식으로 보여주도록 구현하였다. 이전에 게시글 상세 조회에서 표 형태로 댓글을 보여주기 위해 다음과 같이 추가하였다. 서버로 부터 받아온 값들을 배열 형태로 다시 나타내기 위해 컴포넌트를 새로 생성하고 map함수를 이용하여 props로 댓글과 ID 값을 전달해주었다. 댓글들을 모두 받아와 담는 comments를 생성하기 위해 useState를 사용하였고 fetch를 이용하여 받아온 값으로 설정해주었다. 이때 useEffect()의 두번째 인자로 빈 배열을 주어 처음 렌더링 될 때 한번 실행되지만 따로 값을 주지 않는다면 메모리 누수가 걸릴 수 있으므로 주의하자. //Can'..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cFDwbp/btrroWMi8pJ/RFkP4BXJP0UpYyhSqk2kGk/img.png)
게시글 상세 페이지에는 뒤로가기 버튼과 삭제 버튼이 있다. 삭제 버튼은 해당 게시글을 작성한 사람만이 게시글을 삭제할 수 있도록 기능을 구현하였다. 작성일의 경우에도 DB에서 post 요청일 때 now()로 처리하였는데 정상적으로 결과값이 보이는 것을 확인할 수 있다. 게시글 삭제 기능은 sesstionStorage.getItem("key")값과 이전에 게시글 조회에서 Board 컴포넌트가 props로 전달한 props.writer 값이 같은지 확인한 후에 같으면 fetch이용하여 DELETE 메소드를 싣어서 보냈다. 이전에 게시글 조회때와 같이 url에 값을 같이보냈다. 이것을 server.js에서 처리할 수 있도록 구현하면된다. sql문에 해당 title 값을 req.parms.title을 통해 대입..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/c1jSeU/btrruzPgsJi/yVO7Km1ZsmefSGn0kKVNXK/img.png)
어쩌면 게시글 조회가 복잡하다면 복잡할 수도 있다. 전에 ID/PW 찾기 처럼 값을 가져오는 것은 어렵지 않다. 하지만 게시글을 받아와 어떠한 방식으로 보여주고 어떤 구조를 취해야 할지 고민이였다. 또한 게시판에 게시글이 포함된 행을 클릭하였을때 게시글 상세정보가 보여지게끔 만드려면 어떤 로직이 필요할까 생각해보았다. 다시 생각해보니 방법은 어렵지 않았다. 단지 컴포넌트를 나누고 props를 이용하면 간단했다. map()함수를 써본적이 있다면 이해가 잘 될 것이다. map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용하는데 이 함수를 사용하면 게시글들을 순서대로 화면에 나타낼 수 있다. return문 안의 구조는 다음과 같다. 표 형식으로 첫번째 행에는 #, 제목..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/vzcM3/btrrxXoNjdr/Uj4YKEK2P5QE7uwkL16Ynk/img.png)
게시글 작성의 경우 간단하게 제목과 내용만 입력받도록 설정하였다. 작성일은 후에 DB에서 현재 시간을 가져와서 설정하기 위해 현재는 disabled 를 주어 변경이 불가능하게 만들었다. 리턴문에 첫번째로 Main 컴포넌트를 불러와 사용하였기 때문에 메인에서 본 틀을 그대로 확인할 수 있고 밑에만 추가된 것을 알 수 있다. mainGo() 함수는 history를 사용하여 '/'으로 갈 수 있도록 선언하였고 중요한 부분은 작성 버튼을 눌렀을때 실행되는 writeboard() 함수를 살펴보도록 하자. 이 함수의 경우 리액트의 axios를 사용하여 post요청을 하였다. 회원가입때 설명한 부분과 똑같다. userDate에 데이터를 담아 post 요청을 하였고 정상적으로 진행되면 메인('/)으로 이동할 수 있도록..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dOpzXw/btrrr5ATTyO/xtaky9ZgWDZ99TkAgbkoyk/img.png)
'연습용 웹사이트' 헤더(고정)로 설정한 부분이다. 로그인 상태이면 해당 사용자에 ID값과 로그아웃버튼을 만들었다. 반대로 로그아웃 상태이면 비로그인이라고 설정하였고 로그인버튼을 만들었다. 리액트 훅인 useEffect를 사용하였다. 두번째 인자로 빈 배열을 넣어 처음 렌더링되었을때 실행되게 구현하였다. sessionStorage.getItem("키")를 입력하면 세션에 저장된 키값을 불러올 수 있는데 이전에 로그인하면서 sessionStorage.setItem 설정하였을때 입력하였던 키 값으로 불러올 수 있다. 이 값이 null 값이면 비로그인으로 설정하고 그렇지 않은 경우 로그인 상태로 구현하였다. 이렇게 구현할 경우 로그아웃할때는 확실하게 세션에 저장된 값을 삭제해야한다. 현재 로그아웃 버튼 일 경..