공부방

웹사이트를 안드로이드 / iOS 모바일 앱처럼 사용할 수 있게 만드는 웹개발 기술웹사이트를  PWA화 시키면 좋은 점스마트폰, 태블릿 바탕화면에 웹사이트를 설치 가능설치된 앱 누르면 상단 URL바가 제거된 크롬 브라우저가 뜬다.오프라인에서도 동작 가능service-worker.js  라는 파일과 브라우저의 Cache storage 덕분에 가능자바스크립트로 게임 만들 때 유용설치 유도 비용이 매우 적다앱설치를 유도하는 마케팅 비용이 적게 들어 좋을 수 있다.구글플레이 스토어 방문해서 앱 설치하고 다운받게 하는 건 항상 매우 높은 마케팅 비용이 든다.하지만 PWA라면 웹사이트 방문자들에게 간단한 팝업을 띄워서 설치 유도할 수 있으니 훨씬 적은 마케팅 비용이 든다.PWA 만드는 법사이트 파일 2개만 사이트 로..

리액트 18 버전 이후부터 렌더링 성능이 저하되는 컴포넌트에서 쓸 수 있는 혁신적인 기능이 추가됐다.useTransition, useDeferredValue로 오래 걸리는 부분을 감싸면 렌더링 시 버벅이지 않게 해준다.리액트 18버전부터 추가된 기능 1 : 일관된 batchingsetCount(1) setName(2) setValue(3) //여기서 1번만 재렌더링됨automatic batching 이라는 기능state 변경함수를 연달아서 3개 사용하면 재렌더링도 원래 3번 되어야 하지만 재렌더링을 마지막에 1회만 처리해주는 기능쓸데 없는 재렌더링 방지 기능이고 batching이라고 한다.fetch().then(() => { setCount(1) //재렌더링됨 setName(2) /..

리액트는 컴포넌트가 재렌더링되면 거기 안에 있는 자식 컴포넌트는 항상 함께 재렌더링된다.평소엔 별 문제가 없겠지만 자식 컴포넌트가 렌더링 시간이 1초나 걸리는 무거운 컴포넌트라면?부모 컴포넌트에 있는 버튼 누를 때 마다 1초 버벅이는 불상사가 발생한다.테스트용 자식 컴포넌트 하나 만들어보기function Child(){ console.log('재렌더링됨') return 자식임}function Cart(){ let [count, setCount] = useState(0) return ( { setCount(count+1) }}> + )}Cart 컴포넌트 안에 Child 컴포넌트를 만들었다.버튼을 누를 때 Cart 컴포넌트가 재렌더링되게 만들어놧는데 이 경우 컴포넌트도 재렌더링된다..

크롬 확장프로그램 : React Developer Tools크롬 웹스토어 들어가면 확장프로그램 설치 가능React Developer Tools 설치하면 Components 탭이 생기는데 개발중인 리액트 사이트를 컴포넌트로 미리 볼 수 있다.왼쪽에서 컴포넌트 구조 파악이 가능왼쪽 상단 아이콘 눌러서 컴포넌트 찍어보면 거기 있는 state, props 이런 게 조회 가능하고 수정도 가능Profiler 탭에서 성능평가 기능녹화버튼 누르고 페이지 이동이나 버튼 조작 등을 해보고 녹화를 끝내면 방금 렌더링된 모든 컴포넌트들의 렌더링 시간을 측정해준다.이상하게 느린 컴포넌트가 있다면 여기서 범인을 찾을 수 있다.를 1만개 만들거나 그러지 않는 이상 보통 걱정할 필요는 없고 대부분 서버에서 ajax 요청 결과가 늦게..

세팅설치npm install react-query@3===========================================================(index.js)import { QueryClient, QueryClientProvider } from "react-query" //1번const queryClient = new QueryClient() //2번const root = ReactDOM.createRoot(document.getElementById('root'));root.render( //3번 ); 사용 시import { QueryClient, QueryClientProvider, useQuery } from 'react..

LocalStorage새로고침하면 모든 state 데이터는 리셋된다.새로고침하면 브라우저는 html, css, js 파일들을 처음부터 다시 읽기 때문에개발자 도구에서 Application 탭 들어가면 LocalStorage를 볼 수 있다.사이트마다 5MB 정도의 문자 데이터를 저장 가능object 자료랑 비슷하게 key / value 형태로 저장유저가 브라우저 청소를 하지 않는 이상 영구적으로 남아있다.Session Storage도 있는데 이건 브라우저 끄면 삭제된다.LocalStorage 문법localStorage.setItem('데이터이름', '데이터');localStorage.getItem('데이터이름');localStorage.removeItem('데이터이름')차례로 추가, 읽기, 삭제 문법Loc..

주로 JSX 이용해서 html을 작성하고 있는데 if문을 써서 조건부로 html을 보여주고 싶을 때가 많다.삼항연산자 대신에 if문을 쓰고 싶을 때 어떻게 사용해야할까1. 컴포넌트 안에서 쓰는 if / elsefunction Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; }}컴포넌트에서 JSX를 조건부로 보여주고 싶다면 그냥 이렇게 쓰면 된다.우리가 자주 쓰던 자바스크립트 if문은 return() 안의 JSX 내에서는 사용 불가 if (어쩌구){저쩌구} 이게 안된다는 말따라서 보통 return + JSX 전체를 뱉는 if문을 작성해서 사용function Component() { if ( true ) { ..

장바구니 페이지 만들기 } />를 사용하여 페이지를 하나 만들어주기Cart.js 라는 다른 파일에 컴포넌트 만들기 컴포넌트를 element 안에 넣어서 /cart로 접속하면 컴포넌트를 보여주기장바구니 페이지에서 사용할 Table 레이아웃 # 상품명 수량 변경하기 1 안녕 안녕 안녕 이렇게 넣으면 표가 생성(React-bootstrap)Reduxprops 없이 state를 공유할 수 있게 도와주는 라이브러리redux를 설치하면 js 파일 하나에 state들을 보관할 수 있다이걸 모든 컴포넌트가 직접 꺼내쓸 수 있다.-> props 전송이 필요없어짐(컴포넌트가 많을수록 좋다)사이트가 커질 때 쓰..

그림처럼 App에 있던 state를 TabContent 컴포넌트에서 사용하고 싶어지면 App -> Detail -> TabContent 이렇게 props를 2번 전송해야된다.Context API 문법으로 props 없이 state 공유하기재고라는 state를 App 컴포넌트에 만들고 이걸 자식의 자식 컴포넌트에서 쓴다고 가정Context API 문법을 쓰면 props 전송없이 자식의 자식 컴포넌트에서 사용 가능(App.js)export let Context1 = React.createContext();function App(){ let [재고, 재고변경] = useState([10,11,12]); (생략)}1.  일단 createContext() 함수를 가져와서 context를 하나 만듬context..

애니메이션 만들려면?애니메이션 동작 전 스타일을 담을 className 만들기애니메이션 동작 후 스타일을 담을 className 만들기transition 속성도 추가원할 때 2번 탈부착1. 애니메이션 동작 전 / 2. 애니메이션 동작 후 className 만들기.start { opacity : 0}.end { opacity : 1;}css파일에서 추가애니메이션 동작 전엔 투명도가 0, 동작 후엔 투명도가 1이 되도록 설정3. transition 추가.start { opacity : 0}.end { opacity : 1; transition : opacity 0.5s;}transition은 '해당 속성이 변할 때 서서히 변경해주세요' 라는 뜻원하는 요소에 start 넣어두고  end를 탈부착할 ..