![]()
실습내용리액트 완료 프로젝트 빌드 및 배포 실습 실습과정리액트 빌드1. npm run build로 프로젝트 빌드 하기(build 디렉터리 생성됨) 2. npm install -g serve 설치 하기 3. serve -s build 실행하여 로컬에서 빌드 프로젝트 실행하기 아래 블로그 내용 참고https://velog.io/@nnoshel/react-%EB%B9%8C%EB%93%9C%ED%95%98%EA%B8%B0 npm run build 터미널에 위와 같은 명령어를 작성하" data-og-host="velog.io" data-og-source-url="https://velog.io/@nnoshel/react-%EB%B9%8C%EB%93%9C%ED%95%98%EA%B8%B0" data-og-url="ht..
실습내용리액트 개발자 도구인 React developer tools 설치 및 사용법실습 개발자 도구의 중요성개발을 진행함에 있어 개발자 도구는 필수적인 요소라 할 수 있다. 디버깅과 성능 최적화 측면에서, 개발자 도구는 이러한 작업을 효율적으로 수행할 수 있도록 다양한 기능을 지원한다.예를 들어, 컴포넌트 탐색, 상태 및 props 디버깅, 성능 프로파일러 등은 개발자 도구가 제공하는 주요 기능들이다. 실습과정설치 및 작업중 사용법은해당 툴이 있다는것만 기억하고 구글서치하여 진행. 설치 방법 및 사용법 아래 블로그 참고https://velog.io/@seesaw/React-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC-%ED%99%9C%EC%9A%A9%ED%95%98..
![]()
실습내용리액트의 핵심 부분을 감성일기장이라는 심플한 프로젝트 실습을 통하여 배우고 익힌다. 실습과정useState상태를 관리하는 훅 ex) DiaryEditor.js 컴포넌트 일부 date 현제 데이터setDate 업데이트될 데이터useState() = 기본값(현제 날짜 기본값으로 셋팅)getStringDate 함수 : 생성된 날짜를 특정 포맷으로 변환 해주는 공용 함수 input 태그가 change 될때 e.target.value 데이터 값으로 setDate 에 넣어 날짜 상태값 업데이트 date 는 업데이트 된 값이 들어오므로 value 값에 date 표시. *훅 이란 함수형 컴포넌트에서 상태(state) 및 생명주기(lifecycle) 기능등을 사용할 수 있게 해주는 기능 useRefDOM 요소나 ..
