728x90 반응형 개발/리액트9 게시판 서비스를 실행하는 docker-compose.yaml 파일 제작 MySQL, SpringBoot, React 컨테이너를 각각 실행하고 연동하는 docker-compose.yaml 파일을 제작합니다. MySQL은 최초 컨테이너 실행 시 초기 데이터가 설정되도록 만들어진 이미지를 사용해 컨테이너를 실행하고, React는 깃 허브에 등록된 소스 코드를 가져와 Dockerfile을 빌드해 컨테이너를 실행합니다. 각 이미지 작성 방법은 아래 문서를 참고하세요. https://myanjini.tistory.com/entry/MySQL-%EC%BB%A8%ED%85%8C%EC%9D%B4%EB%84%88-%EC%83%9D%EC%84%B1-%EC%8B%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EC%8A%A4%ED%82%A.. 2023. 3. 16. map 함수를 이용한 객체 배열에 새로운 속성 추가 서버로 부터 받아 온 객체 배열 형식의 데이터에 새로운 속성을 추가해서 사용하는 예시입니다. 데이터 파일 정의 먼저 서버에서 제공하는 데이터를 파일로 만듧니다. 실제 환경에서는 별도의 REST API를 통해서 제공되나 여기에서는 편의를 위해 정적 리소스를 저장하는 public 디렉터리에 JSON 파일을 추가해서 구현합니다. 해당 파일은 http://localhost:3000/images.json 형식으로 요청해 사용할 수 있습니다. [ { "fileSizeBytes": 1479118, "url": "https://random.dog/831a74df-8de4-4150-a70f-12bd984f4bb4.JPG" }, { "fileSizeBytes": 75613, "url": "https://random.dog.. 2023. 2. 27. useContext Hook 다음 그림과 같이 부모 컴포넌트의 값 변경을 자식 컴포넌트로 전달해서 반영하는 경우, 부모 컴포넌트의 상태 변수를 자식 컴포넌트의 props 변수로 설정해서 전달합니다. import { useState } from "react"; import './App.css'; const GrandParent = () => { const [grandParentSay, setGrandParentSay] = useState(''); return ( GrandParent GrandParent say setGrandParentSay(e.target.value)} /> ); }; const Parent = ({grandParentSay}) => { return ( Parent ); }; const Child = ({grand.. 2023. 2. 22. BrowserRouter를 이용한 웹 기반 애플리케이션 라우팅 구현 react-router-dom 패키지에서 제공하는 BrowserRouter를 이용해서 웹 기반 애플리케이션에서의 라우팅을 구현해 보겠습니다. [참고] https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom #1 앱 생성 C:\react> npx create-react-app menu #2 react-router-dom 설치 C:\react\menu> npm install react-router-dom #3 Home.js 생성 import React from 'react'; const Home = () => { return ( Home.js ); } export default Home; #4 Contact.js .. 2020. 5. 22. 이전 1 2 3 다음 728x90 반응형
