목록스터디/코딩애플 (34)
안녕하세요
요청 4가지 방식 GET 읽기 POST 쓰기 PUT 수정 DELETE 삭제 GET은 쉽게 말해 /manage 페이지를 GET 요청하면 manage.html 파일을 보내 화면에 그릴 수 있도록 하는 것 /manage 페이지를 GET 요청한다 => (https://site.com/manage)를 url 주소창에 입력하는 행위 Node.js 브라우저를 통하지 않고도 js를 컴퓨터로 실행할 수 있도록 했다. 특징: Non-Blocking-io을 통해 요청을 전부 다 받아 놓은 뒤, 처리가 끝나는 대로 결과를 보내준다 => 요청이 매우 많은 SNS 서비스(웹개발)에 매우 유용하다. 웹개발에서 API란? 웹서버와 고객간에 소통하는 방법 RESTful API는 WEB의 URL 을 이용해서 CRUD를 처리하기 위한 하..
리액트 프로젝트를 만들었으면 html로 컴파일 npm run build // 프로젝트를 html 파일로 만들기 서버 만들기 앞서 package.json만들고 express 설치 npm init -y // default로 설정된 package.json 생성. -y는 'yes'를 의미한다. npm install express // express 설치 epress 서버 만들기 const express = require("express"); const path = require("path"); const app = express(); app.listen(8080, function () { console.log("listening on 8080"); }); 리액트와 ajax 통신 환경 설정하기 npm instal..
useTransition(): 렌더링을 나중에 하도록 할 수 있습니다. 원래는 input에 타이핑을 하면, 에 다 넣고 렌더링을 합니다. 그런데 startTransition 함수의 콜백함수에 넣은 state 변경함수는 나중에 처리가 됩니다. let [inputValue, setInputValue] = useState(""); let [isPending, startTransition] = useTransition(); { startTransition(() => { setInputValue(e.target.value); }); }} /> input에 타이핑이 되고 나서 안의 내용을 처리하기 시작합니다. => 실행시점을 후순위로 바꿔 UX를 상향하도록 합니다. isPending은 startTransition ..
memo 자식 컴포넌트 재렌더링 막기 렌더링에 시간이 오래 걸리는 컴포넌트는 memo로 필요할 때만 재렌더링 하도록 하는 것이 좋다 const ChildTemp = memo(() => { return ChildTemp; }); 항상 재렌더링 하도록 하지 않고 자식 컴포넌트에 전달된 props가 변할 때만 재렌더링하도록 하도록 한다. 모든 곳에 memo를 붙이면 props가 변했는지 비교하는 연산을 수행해야 하므로 오히려 시간이 더 걸린다. => 꼭 필요한 곳에만 쓰고 대부분 쓸 일이 없긴 하다. useMemo 컴포넌트 안의 함수 1회만 실행 useEffect와의 차이 useEffect는 html렌더링 이후 실행, useMemo는 렌더링 중에 실행 dependency가 변경되었을 때만 함수를 실행하도록 하..