JAEJAE imojeomo

1. 리액트는 라이브러리인가 프레임워크인가2. 리액트를 사용하는 이유3. virtual DOM이란4. 리액트 렌더링5. 리액트 파이버 6. 리액트 파이버 트리7. 리액트 파이버, DOM 그리고 virtual DOM의 관계8. 렌더 단계와 커밋 단계1. 리액트는 라이브러리인가 프레임워크인가 ⭐️라이브러리특정 기능에 대한 API(도구/함수)를 모은 집합프레임워크Application 개발시 코드의 품질, 필수적인 코드, 알고리즘, 암호화, 데베 연동 같은 기능들을 어느 정도 구성이 되어있는 뼈대(구조)를 제공하도록 만들어진 것라이브러리 vs. 프레임워크라이브러리를 사용하는 애플리케이션 코드는 애플리케이션 흐름을 직접 제어함단지 동작하는 중에 필요한 기능이 있을 때 능동적으로 라이브러리를 사용할 뿐임프레임워크는..

https://github.com/leejaejae/S-S-F물품 대여 서비스 웹페이지 프로젝트이 포스팅에서는 React를 사용하여 구현한 물품 대여 서비스 웹페이지 프로젝트에 대해 소개하고, 설치 및 실행 방법, 주요 기능, 폴더 구조, 사용된 기술 등에 대해 설명하겠습니다.목차프로젝트 개요설치 및 실행기능폴더 구조사용된 기술라이센스프로젝트 개요이 프로젝트는 사용자가 다양한 물품을 대여할 수 있는 플랫폼을 제공하는 웹 애플리케이션입니다. 사용자는 물품을 검색하고, 선택하여 대여할 수 있으며, 관리자 페이지를 통해 물품을 추가, 수정, 삭제할 수 있습니다.설치 및 실행1. 클론 및 디렉토리 이동먼저, 프로젝트를 클론하고 해당 디렉토리로 이동합니다:git clone https://github.com/you..

✏️ PWA란 - 구글에서 밀고 있는 Progressive Web App이라는건데 이건 웹사이트를 안드로이드/iOS 모바일 앱처럼 사용할 수 있게 만드는 일종의 웹개발 기술이다. - 근데 iOS, Android 앱으로 발행하는게 아니라 웹사이트 자체를 스마트폰 홈화면에 설치한다. ✏️ 웹사이트를 PWA화 시키는게 뭐가 좋냐면 1. 스마트폰, 태블릿 바탕화면에 웹사이트 설치 가능. 2. 오프라인에서도 동작 가능. - service-worker.js 라는 파일과 브라우저의 Cache storage 덕분 3. 설치 유도 비용이 매우 적음. - 웹사이트 방문자들에게 간단한 팝업을 띄워서 설치유도할 수 있으니 훨씬 적은 마케팅 비용 ✏️ PWA 발행하는 법 - 그냥 아무 사이트나 파일 2개만 사이트 로컬 경로에 ..

✏️ memo()로 컴포넌트 불필요한 재렌더링 막기 - memo() 쓰려면 'react' 라이브러리로부터 import 해오면 된다. import {memo, useState} from 'react' // memo를 import let Child = memo( function(){ // 원하는 컴포넌트 정의 부분 감싸기 console.log('재렌더링됨') return 자식임 }) function Cart(){ let [count, setCount] = useState(0) return ( { setCount(count+1) }}> + ) } - 컴포넌트를 let 컴포넌트명 = function( ){ } 이런 식으로 만들어야 감쌀 수 있다. - 그럼 이제 Child로 전송되는 props가 변하거나 그런 경..

- props를 보냈는데 출력이 안된다거나, 이미지를 넣었느데 안보이는 버그같은 게 생긴다면 - 개발자 도구를 켜서 Elements 탭 살펴보면 되는데 여기선 내가 짠 코드를 실제 html css로 변환되어서 보여진다. - 그게 싫고 컴포넌트로 미리 보고 싶으면 리액트 개발자도구를 설치해서 켜보면 된다. ✏️ 크롬 확장프로그램: React Developer Tools https://chrome.google.com/webstore/ Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com - 크롬 웹스토어 들어가면 확장프로그램 설치가 가능하다. - 여기서 React developer Tools 설치하면 Compoents 탭이 생기..