Sungtt

개요 리액트의 여러가지 훅을 경험해보고있지만, 작동을 시키면서도 아직 몇가지 이해가 안가던 훅들이 있었다. 그중에 하나가 useReducer인데 그에 대해 개념을 잡아두자. 자기전에 핸드폰으로 글을 보는데, 갑자기 머릿속에 코드가 진행되는게 슥슥 그려져서 잊지않길 바라며 작성한다. 리덕스에서도 쓰이는 개념이기때문에 리덕스에 입문하기전에 미리 알아두면 좋을것같다! Reducer란? - 리듀서는 이전 상태와 동작을 받아 새 상태를 리턴한다. - 반드시 순수 함수여야 한다. 예를 들면 데이터베이스 호출이나, HTTP 호출 등 외부의 데이터 구조를 변형하는 호출은 허용되지 않는다. - 리듀서는 항상 현재 상태를 '읽기 전용'으로 다룬다. 기존 상태를 변경하지는 않지만 새 상태를 리턴할 수 있다. 리듀서를 이루는..

과정 AWS EC2에서 인스턴스를 생성하고, PuTTY를 통해 리눅스와 연결합니다. 그 후 nvm, node, yarn, npm , nginx 등 필요한 모듈을 설치 인스턴스 내부에 create-react-app을 생성하고 nginx로 구동합니다. 1. AWS 계정생성 1-1 Amazon Machine Image (AMI) 선택 첫 번째에 보이는 프리티어용 AMI (두 번째와의 차이는 Kernel Version)을 선택했다. 1-2 인스턴스 유형 선택 AMI의 스펙을 설정하는 단계다. 프리티어로 사용이 가능한 스펙을 선택하였다. 보안 그룹 설정을 위해 다음:인스턴스 세부 정보 구성을 클릭한다. 1-3 인스턴스 세부 정보 구성 인스턴스의 개수와 네트워크 등의 옵션을 설정하는 단계다. 따로 변경하는 것 없이..

리액트로 아주 쉽게 게시판 만들기 - 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를 실행..