Sungtt

리액트로 아주 쉽게 게시판 만들기 - 3 [React, MySQL, express, axios] 이전 글에서 게시물 등록을 하여 데이터를 db에 보내주기까지 진행하였습니다. 이어서 db에 들어있는 데이터를 다시 가져와 프론트에 출력해보도록 하겠습니다. 먼저 server.js에 db 데이터를 뿌려주는 코드를 작성합니다. 24번째 줄코드에서 주의하실 점은 const sqlQuery = "SELECT * FROM 테이블이름;"; 이처럼 FROM 뒤에는 본인이 생성한 테이블의 이름을 넣어주셔야 합니다. 저는 이전에 board라 생성하였습니다. 그리고 http://localhost:8000/api/get 로 접속해볼까요? 아래처럼 db의 데이터들을 json형식으로 잘 get 해주고 있습니다. 이제 이 json을 ..

리액트로 아주 쉽게 게시판 만들기 - 2 [React, MySQL, express, axios] 이전 글에서는 프론트에서만 보이는 게시판을 입력하는 데까지 진행하였습니다. 다만 새로고침을 하게되면 사라지게 되죠. 이번엔 db중 하나인 MySQL과 연동하여 새 로고 침해도 게시물을 유지해보겠습니다. 먼저 MySQL을 설치해줍니다! 다운로드 링크 : https://dev.mysql.com/downloads/windows/installer/8.0.html . 위 링크를 들어가면 아래와 같은 창이 나옵니다. 빨간색으로 표시해놓은 용량 435.7M의 파일을 받고 설치해줍니다. 이 후 자세한 설치는 아래 블로그를 참고해주세요 https://m.blog.naver.com/bjh7007/221829548634 [MyS..

리액트로 아주 쉽게 게시판 만들기 - 1 [React, MySQL, express, axios] 아래 사진처럼 쌩초보자도 할 수 있는 간단한 게시판 구현을 소개해드리려고 합니다. 리액트와 MySQL을 사용하고, 엉성한 부분이 있지만 필요한 부분만 참고하시면 좋을 것 같습니다.. 기본적인 세팅은 되어있다는 가정하에 진행합니다. VSCODE, node.js 설치 VSCODE 터미널에서 npx create-react-app easyboard를 실행하여 easyboard라는 폴더에 리액트앱을 세팅하여줍니다. App.js에서 필요없는 코드들은 지우고, 기본적인 게시판 틀을 잡아줍니다. 게시판 작성에 필요한 구역과, 게시물을 출력해주는 구역으로 div를 나눠주었습니다. 그러고 나서 터미널에 npm start를 실행..