Frontend/React14 useTransition * 여러 출처를 사용하였으며, 하단에 출처를 첨부합니다. Form 제출 -> API 요청 -> 응답 처리 -> UI 반영기존의 리액트에서는 대기상태 pending states, 오류 errors, 낙관적업데이트 optimistic updates, 연속요청 sequential requests 를 수동으로 처리하였다. 예를 들어서 이런 코드가 있다고 쳐보자. function UpdateName(){ const [name, setName] = useState(''); const [error, setError] = useState(null); const [isPending, setIsPending] = useState(false); const handleSubmit = async() .. 2024. 12. 3. 왜 리액트 배포하고 새로고침하면 404에러가 뜰까? 리액트는 SPA입니당. 우리는 이것저것 클릭하면 주소가 /something , /something/1 뭐 이런식으로 바뀌는걸 보지만 사실은 그냥 하나의 index.html파일에 js로 동적으로 브라우저가 휘리릭 바꿔주고 있을 뿐이에요. 사실 우리는 계속 같은 놈을 보고 있습니더..바로 루트에 있는 index.html 파일이요. 그리고 브라우저가 페이지에 들어가는 것은 해당 url에 index.html 파일을 내놔라! 하는 GET 요청을 보내는 것이에요. 그런데 말이죵 그럼 리액트로 빌드한 웹페이지에서 ~~~~~/testPage 에 들어가 있다고 쳐봅시당. 근데 새로고침했어요.그럼 우리는 어떤 url한테 index.html을 내놓으라고 GET 요청을 보내는 걸까요? 바로 ~~~~/testPage에요.근.. 2024. 10. 11. 코드 스플리팅 SPA 싱글 페이지 어플리케이션의 단점은 처음 페이지 로드 시 당장 보지 않을 요소들까지 전부 로드한다는 것이다.그렇기 때문에 처음 로드 이후에 작동이 하나의 어플리케이션처럼 부드럽게 작동하기 때문에 이 점은 이점으로 작용할 수 있지만,페이지 안에 너무 많은 요소들이 있을 경우에는 이를 한번에 로드하는 것을 막아야 한다. React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수 없고, React.suspense 컴포넌트의 하위에서 렌더링 되어야 한다. 1. Route level- 라우트마다 다른 컴포넌트로 관리를 하고 있을 경우에, 각 라우트를 import 함수를 통해 분리된 빌드 파일로 관리할 수 있다.- 유저가 다른 페이지로 넘어갈 때만 그 페이지를 비동기적으로 로딩할 수 있다.- 초기 렌더링 시간.. 2024. 10. 10. validateStatus - axios php로 api를 짰다. 코드 중에 대충 이런 코드가 있다. $preQuery = " SELECT email FROM reserved_user WHERE email = :email "; $stmt = $pdo->prepare($preQuery); $stmt->bindParam(':email', $email); $stmt->execute(); $result = $stmt->fetch(PDO::FETCH_ASSOC); if (!empty($result)) { // 이미 존재하는 이메일일 경우 http_response_code(409); // 중복된 데이터 (H.. 2024. 9. 18. 이전 1 2 다음