박재형 / IT 개발 공부

프론트 ( 리액트 ) 달력const [selectedDate, setSelectedDate] = useState(null); onClick={() => handleDateClick(day)}  // 날짜를 클릭했을 때 실행되는 함수  const handleDateClick = (date) => {    setSelectedDate(date); // 선택된 날짜 상태 업데이트    onDateSelect(date); // 부모 컴포넌트로 선택된 날짜 전달  };클릭이벤트로 일자 선택시 가져오는 이벤트 만듬  메인페이지 ( 달력 일자 선택 시 해당하는 데이터 조회 )Calendar onDateSelect={handleDateSelect} /> const handleDateSelect = (selectedDa..

1. 라이브러리 설치  2. App.jsimport React, { useRef, useState, useCallback, useEffect } from 'react';import Webcam from "react-webcam";function App() {  const webcamRef = useRef(null);  const [imgSrc, setImgSrc] = useState(null);  const [hasPermission, setHasPermission] = useState(null);  useEffect(() => {    navigator.mediaDevices.getUserMedia({ video: true })      .then(() => setHasPermission(true)) ..

https://replit.com/~ Sign UpBuild and deploy software collaboratively with the power of AI without spending a second on setup.replit.com집에서 코딩 해보고 싶은데 설치가 귀찮으면 여기서 하면됨  React 강의 정리 1. 컴포넌트 박스가 만들어짐 근데 박스를 여러개 만드려면 같은 코드를 여러번 써야하고 코드가 너무 길어짐  그래서 코드의 간결함을 위해 컴포넌트라는 걸 사용함 component로 Box.js를 만들고Box.js 안에 박스를 만듬export로 Box를 내보내고와꾸(화면)인 App.js에서 import해서 받아서 씀Box.js의 모든 내용이 에 담겨버림  2. props 컴포넌트에 다이..

1. 개요 - facebook 제공 - 프론트엔드 프레임워크 ( React, Vue, Angular )    => JS 기반- MVC 패턴에서 View를 담당- 가상 DOM 이용 ( 복사본 ) 해서 빠른 DOM 처리 가능- 개발방법 2가지  가. 함수형    - 현재 개발 방법    - 일반함수 가능       arrow 함수 가능    - 클래스 컴포넌트에서만 사용가능한 문법들이 있었음      버전업되면서 함수에서도 사용가능하도록 문법지원 (hooks 지원)   나. 클래스    - 과거에 주로 사용  2. React.js 종류 3가지 1) CSR ( Client Side Rendering )     - 웹브라우저에서 랜더링하는 방식   2) SSR ( Server Side Rendering )   ..