728x90 반응형 분류 전체보기282 todo-app 2023년 3월 8일 React App을 컨테이너를 이용해서 배포하는 실습에 사용할 소스 코드입니다. 2023. 3. 8. 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. 윈도우에 도커 데스크탑 설치 Install Docker Desktop on Windows Docker Desktop은 컨테이너화된 애플리케이션 및 마이크로서비스를 구축하고 공유할 수 있는 Mac, Linux, Windows 환경용 원클릭 설치 애플리케이션으로, 설치된 머신에서 컨테이너, 애플리케이션, 이미지를 관리할 수 있는 간단한 GUI를 제공합니다. 여기에서는 윈도우 환경에 Docker Desktop을 설치하고 간단한 컨테이너 어플리케이션을 실행하는 방법을 설명합니다. 우분투 환경에 도커를 설치하는 방법은 https://myanjini.tistory.com/entry/01-%EB%8F%84%EC%BB%A4-%EC%84%A4%EC%B9%98 를 참고하세요. 01 설치 파일 다운로드 https://docs.docker.com/des.. 2023. 2. 24. 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. 이전 1 ··· 4 5 6 7 8 9 10 ··· 71 다음 728x90 반응형
