TechScribe Notes

1.임시 서버 만들기(Node.js + Express) -node.js설치 -작업폴더 만들고 에디터로 오픈 -server.js 파일 만들고 아래 코드 작성 -터미널에 npm init -y입력 -터미널에 npm install express 입력 미리보기 하고싶으면 nodemon server.js 입력 nodemon없으면 node server.js 입력 2.리액트로 만든 html 전송하는 법 이런 구조로 폴더 생성 후 아래의 코드 작성 express.static -> 특정 폴더안의 파일들을 static파일로 고객들에게 잘 보내줄 수 있음 build안에 파일들도 잘 사용하근ㅇ해짐. localhost:8080으로 접속하면 리액트 프로젝트가 나옴. 3.리액트에서 라우팅을 담당하는 경우 서버에서도 라우팅 담당이 가..

보통 자바스크립트는 동기방식으로 코드를 적은 순서대로 코드가 실행됨. ajax,이벤트리스터,setTimeout 함수 같은 것을 사용할 때 비동기가 됨 ->처리시간이 오래걸림 -> 순차적 처리가 아닌 완료되면 실행 됨 리액트의 setState 함수 특징 function App(){ let [name, setName] = useState('kim') } 여기서 setName과 같은 변경 함수들은 비동기적으로 처리됨. 이 함수 실행이 오래걸리면 다른 코드부터 실행, ex)버튼 누르면 2개의 기능을 순차적으로 실행하고 싶을 때 function App(){ let [count, setCount] = useState(0); let [age, setAge] = useState(20); return ( 안녕하십니까 전..

1.Progressive Web App : 웹사이트를 안드로이드/ios 모바일 앱처럼 사용할 수 있게 만드는 구글의 웹기술 2.PWA의 장점-스마트폰, 태블릿 바탕화면에 웹사이트 설치 가능-오프라인에서도 동작이 가능함 : service-worker.js 라는 파일과 브라우저의 Cache storage-설치 유도 비용이 적다:구글플레이 스토어에 방문하여 앱을 다운받는 것 보다 간단한 팝업 띄운 후 설치 유도가 가능해서 마케팅 비용이 적다. 3.PWA만드는 방법-아무 사이트나 파일 2개만 사이트(HTTPS 사이트) 로컬경로에 있으면 브라우저가 PWA로 인식기본 프로젝트를 npm build/yarn build하면 manifest.json만 생성해주므로sevice-worker.js까지 자동 생성을 하려면 만들 ..

1.일관된 batching(필요없는 재랜더링 방지기능) - 리액트 18번전부터 추가됨 state변경함수를 연달아 3개 작성했을 때, 랜더링도 3번 되어야 하지만 마지막에 1회만 처리해줌. ajax요청, setTimeout안에 state변경함수가 있을 때는 batching이 일어나지 않았는데 18버전이후는 어디에서든 재랜더링은 마지막 1번만 됨. batching기능말고 state변경함수 마다 재랜더링 하고 싶으면 flushSync 함수 사용. 2.useTransition :랜더링이 아주 오래걸리는 컴포넌트의 성능개선 요런 함수에 useTransition을 써주면 useTransition()을 쓰면 그 자리에 [변수,함수]가 남는다. startTransition() 함수로 state 변경함수 같은걸 묶으면 ..

1. 크롬 확장 프로그램 : React Developer Tools https://chrome.google.com/webstore/ Chrome 웹 스토어 디스커버확장 프로그램테마 chromewebstore.google.com 여기서 설치하면 개발자 도구에서 컴포넌트 단위로 확인이 가능함. state,props도 조회가능하고 수정도 가능 2.Profiler 탭 -녹화버튼을 누르고 페이지 이동이나 버튼 조작한 후 녹화를 끝내면 방금 랜더링 된 모든 컴포넌트의 랜더링 시간을 측정해줌. 비정상적으로 느린 컴포넌트 등 지연의 원인이 되는 것을 찾아낼 수 있다. 3.Redux Developer Tools -이것도 크롬 웹스토에서 설치 가능함. Redux store에 있던 state를 전부 확인 가능하다 store..

1.React Query 설치 & 셋팅 -터미널에 아래 코드 입력 npm install react-query@3 -index.js에서 import 하기 import { QueryClient, QueryClientProvider } from '@transtack/react-query'; -변수 설정 const queryClient = new QueryClient(); -을 QueryClientProvider로 감싸기 2.React로 ajax요청하기 useQuery를 import한 후 import { useQuery } from 'react-query'; useQuery()로 ajax요청을 감싸기 let result = useQuery(['작명'],()=>{ return axios.get('https://c..