본문 바로가기

Programing/React

(6)
[React] Document Site! 1. Create React App (한글) https://ko.reactjs.org/docs/create-a-new-react-app.html (영어) https://create-react-app.dev/docs/getting-started/ 2. Redux (한글) https://deminoth.github.io/redux/ (영어) https://redux.js.org/ 3. React-Redux (영어) https://react-redux.js.org/ 4. Redux Toolkit (영어) https://redux-toolkit.js.org/
[React] 공적 마스크 프로그램 만들기 이제는 한풀 꺽인! 하지만 안심할 수 없는 마스크 대란! 정부에서 열어준 Rest Api Server 와 React 로 만들었던 "공적 마스크 프로그램" 을 소개해보겠습니다. (너무 건방진것 같아서 앞으로 반말은 생략하기 위해서 수정 ㅠㅠ...) 소스 코드를 블로그 내에서 보여주지 않은 이유는 소스 코드가 복잡하거나 어려운 것은 없지만 제가 설명을 하면서 잘못된 정보를 전달할 수 있다는 생각에 깃허브 레파지토리 주소로 대체하였습니다. 또한 이번 개발은 정부에서 제공해주는 서버를 사용할 수 있었던 개발로 GitHub Pages 를 이용하여 실제로 프로그램을 확인할 수 있도록 하였습니다^^ 이점이 개발하면서 가장 좋았던 점이었습니다! 그리고 필터의 기능으로 거리 뿐만아니라 공적마스크 판매점 분류 및 재고에 ..
[React] Create React App 알아둘 것. 1. Create React App 프로젝트 생성 및 실행 npx create-react-app project-name cd project-name yarn start(or npm start) 2. Reactstrap 설치 npm install --save bootstrap npm install --save reactstrap react react-dom 3. React-router-dom 설치 npm install --save react-router-dom npm install react-router-dom --save 4. Redux & React-Redux 설치 npm install --save redux npm install --save react-redux 5. Redux Thunk 설치 npm..
[React + SpringBoot] To-do List 만들기 - (3) [React + SpringBoot] To-do List 만들기 - (1) [React + SpringBoot] To-do List 만들기 - (2) [React + SpringBoot] To-do List 만들기 - (3) 리액트로 만든 Front-end 와 Spring Boot 로 만든 Rest Api Server 를 연결해 보는 작업을 시작하겠다. 1. 화면 파일 수정 1) package.json 파일 수정 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있도록 프록시 서버(Proxy Server) 를 설정해준다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 3..
[React + SpringBoot] To-do List 만들기 - (2) [React + SpringBoot] To-do List 만들기 - (1) [React + SpringBoot] To-do List 만들기 - (2) [React + SpringBoot] To-do List 만들기 - (3) 리액트로 만든 Front-end 에 Spring Boot 를 이용하여 Rest Api Server 를 만들어 볼 것이다. 우선 Rest Api Server(Back-end) 에서는 '오늘 할 일(To-do)' 목록 출력 및 To-do 추가, 수정, 삭제의 기능만 제어하도록 구성한다. 기회가 된다면 사용자 및 그룹을 등록하여 그룹간의 To-do 를 공유할 수 있도록 수정하도록 하겠다. 1. Spring Initializr 를 이용하여 Project 생성하기 프로젝트 생성은 통합 개발 ..
[React + SpringBoot] To-do List 만들기 - (1)(수정) [React + SpringBoot] To-do List 만들기 - (1) [React + SpringBoot] To-do List 만들기 - (2) [React + SpringBoot] To-do List 만들기 - (3) 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 React! 일반적으로 Spring 과 React 이용하여 싱글 페이지 웹 애플리케이션을 개발하는 경우 크게 2가지 방법이 있다. 첫 번째는 하나의 스프링 프로젝트를 구성하고 해당 프로젝트 안에 Front-End 영역을 설정하는 것이다. 이렇게 하나의 Repository, IDE를 이용해서 개발을 진행하고 maven 등의 플러그인을 통해 빌드하기 때문에 한명의 개발자가 Full-Stack 으로 빠르게 개발할 때 편리하다...