728x90 300x250 SMALL 티스토리챌린지19 React Developer Tools 설치 React Developer Tools은 React 애플리케이션을 디버깅하고 최적화하는 데 도움이 되는 브라우저 확장도구 이다.Chrom과 Firfox에서 사용할 수 있고, React 컴포넌트의 구조와 상태를 확인하거나, 상태 변화와 렌더링 성능등을 분석할 수 있는 기능을 제공한다. 설치방법1. 검색창에 React Developer Tools를 검색 2. 해당하는 브라우저 링크 클릭 3. 웹스토어 확장 프로그램으로 넘어가는데 Add to Chrome를 눌러 추가 한다. 설치를 하면 개발자 도구 오른쪽 끝에 Components와 Profiler 탭이 나타나고 이를 통해 각 컴포넌트의 구조와 상태를 확인할 수 있다. 2024. 11. 19. GitHub에서 소스 파일 로컬에 복사하기 1. GibHub에서 Code를 눌러 HTTPS 주소를 복사한다. 2. 터미널 열기나는 Visual Studio Code에서 작업하기 때문에 Terminel > New Terminal를 클릭해 터미널을 열어준다. 3. GitHub 저장소 클론 (다운로드)하기GitHub프로젝트를 다운로드 하려면 Git이 설치 되어있어야 한다. 설치가 안되어있다면공식사이트에서 git 설치한 후 진행한다.https://git-scm.com/ Git git-scm.com 3. 로컬에 복사할 폴더를 만들고 해당 폴더로 이동 4. GitHub 저장소 클론하기git clone https://github.com/ChristianHohlfeld/ollama-local-docker.git 완료하면 clone 폴더에 ollama-l.. 2024. 11. 18. 클래스 컴포넌트 기본문법 클래스 컴포넌트를 정의할 때는 Componet를 상속 받아야 하며, render 메서드 내에 JSX를 반환하여 UI를 구성한다.class 클래스명 extends Component { constructor(props) { super(props); this.state = {}; // 상태를 초기화 } render() { return ( {/* JSX를 넣는다. */} ); }} 2024. 11. 17. 리액트에서 함수형과 클래스형 컴포넌트 두 가지 방식이 존재하는 이유 리액트에서 함수형과 클래스형 컴포넌트 두 가지 방식이 존재하는 이유는 각각의 방식이 개발의 필요와 발전에 따라 다른 장점과 사용성을 제공하기 때문이다. 1. 초기 리액트 : 클래스형 컴포넌트의 등장리액트가 처음 등장했을 때, 컴포넌트의 상태 관리와 생명주기 메서드 등을 사용하려면 클래스형 컴포넌트를 사용해야 했다. 당시 함수형 컴포넌트는 단순히 UI를 반환하는 역할만 할 수 있었다.그래서 클래스형 컴포넌트가 리액트에서 기본으로 많이 사용되었고, 상태 관리와 복잡한 로직이 필요한 컴포넌트는 클래스로 작성되었다. class MyComponent extends React.Component { constructor(props) { super(props); this.state = {.. 2024. 11. 16. 이전 1 2 3 4 5 다음 728x90 반응형 LIST