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를 실행..

첫번째 문제는 인터넷의 한 게시글을 통하여 게시판을 제작해보는도중 몇몇 요소에 노란색선이 생겨있었다. 내가 css를 넣었나싶어 찾아봐도 없었고, 개발자도구를 끄면 사라져서 난감하였다. 알고보니 리액트 개발자도구에서 Highlight updates when components render. 에 체크가 되있을 시 렌더링되는 요소를 하이라이트해주는것인데, 이 요소들이 헛된 렌더링을 계속하고있기때문에 노란색선이 나타나고 있는것으로 짐작하였다. 두번째 문제는 공부하던 게시물에선 입력까지 포스팅이 안되어있어서 직접 수정기능 구현하였는데, 수정을 누르니 ck에디터가 준비될 시 나오는 콘솔이 3번이나 뜨는것이다. 이 사태를 해결하기 위해서 우선 리렌더링이 일어나는 상황이 무엇인지 알아봐야했다. state 변경이 있을 ..