Frontend31 useEffect와 setState의 배치 처리 사실 저번에도 올린 글이었는데, 다시 올린다. 리액트는 state가 바뀔 때마다 가상돔 비교를 통해서 화면을 다시 그린다. 그렇다면 setState 될 때마다 화면이 다시 그려진다는 것인가? 그렇다. 그렇다면 setState가 많이 호출될 때마다 비효율적으로 동작할 수 있다는 건가? 그렇다. 하지만 꼭 필요한 setState는 당연히 써야겠지만, 대부분 아닌 경우가 많다. 첫번째, 이벤트에 발생할 때 원하는 동작을 수행하게 하고 싶은 경우때문에 예를 들어서 스크롤을 할때마다 어떠한 동작을 하고 싶다고 하면 그냥 이벤트 리스너를 추가하는 것이 아니라, 꼭 '디바운싱' 처리를 해야한다. 디바운싱이란, N초 안에 1000번의 같은 이벤트가 발생하면, 해당 이벤트 리스너에 묶인 동작을 1000번 실행하는 .. 2024. 12. 3. 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. 왜 BrowserRouter는 새로고침하면 404 에러가 뜰까 우리가 페이지에 방문한다는 것은 해당 페이지의 url에다가 index.html 혹은 렌더링할 무언가를 달라고 GET 요청을 보내는 것을 뜻합니다. 근데, 해당 URL에 해당하는 곳에 원하는 것이 없다면 Not Found 404 에러가 뜨는 것이죠. 리액트로 개발을 하면 보통 처음에 BrowserRouter를 많이 씁니다. 개발할때는 새로고침해도 괜찮지만, 배포한 이후에는 새로고침하면 404에러가 뜨게 되요. 왤까요? 리액트 개발서버 ( create-react-app의 개발서버 ) 는 모든 경로에 대한 요청을 자동으로 index.html로 리다이렉트 해줍니다. 즉, 브라우저에서 어떤 경로로 접근하든 개발 서버는 항상 리액트 어플리케이션의 진입점인 index.html 을 제공해주죠. 그러니까 no.. 2024. 11. 17. HashRouter의 #는 어떤 역할을 하는가 HashRouter의 #는 어떤 역할을 할까요. 1. 해시기반 라우팅 클라이언트 사이드 라우팅HashRouter는 URL의 해시 # 부분을 사용하여 클라이언트 측 라우팅을 구현합니다. URL 구조일반적으로 URL은 http://example.com/#/home과 같은 형태를 갖습니다. 서버 요청 회피해시 프래그먼트 ( #이후의 부분을 말합니다 ) 는 http 요청시 서버로 전달되지 않습니다. 따라서 페이지를 새로고침해도 서버측에서 404오류가 발생하지 않습니다. 이 부분이 중요하니 좀 더 자세하게 살펴볼게요. 해시 프레그먼트 #는 어떻게 서버 요청을 회피하고 404 오류를 방지하는가! 일단 해시 프래그먼트는 브라우저에서만 사용해요. 브라우저는 이 부분을 사용해서 페이지 내의 특정 위치로 스크롤하거나,.. 2024. 11. 17. 해시 라우터 그리고 package의 homepage 필드 배포를 하게 되면 서버에다가 1개만 배포할 일은 개인 개발자로서 거의 없습니다. 한 개의 서버를 빌리면 우리는 거기에다가 이것저것 다 넣고 싶어지죠. 지출을 많이 하고 싶지 않아서 그렇습니다. 이 때, 해시 라우터, package.json의 homepage 필드를 한번 쯤은 보게 됩니다. 리액트는 결국 SPA이기 때문에 어디에서 이 싱글 페이지를 돌게 할건지 꼭 명시해줘야해요. 살펴볼까요? 1. pack.json의 homepage 필드 설정에 대해서 보겠습니다. homepage 필드는 어플리케이션이 배포될 기본 경로를 지정합니다. 그리고, 빌드 시에 생성되는 정적파일 (static)들이 올바른 경로를 가리키도록 합니다. homepage를 설정하면 빌드된 파일들이 해당 경로들을 기준으로 assets를.. 2024. 11. 17. 왜 리액트 배포하고 새로고침하면 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. 아이폰에서의 100vh는 뷰포트의 높이가 아니다?! 웹앱을 개발해서 테스트 배포를 했다. 근데 응?! 푸터가 안보이는 것이다. 보통 처음에 프레임만 잡고 그 안의 것들을 컴포넌트화해서 나눠서 개발한다. 그런데 맨 상위 프레임에 나는 분명히 100vw와 100vh 를 주었기 때문에 모든 요소가 화면에 보여야 하는데 푸터가 안보이는 것이다! 무엇이 원인인지 가설을 세우면서 고민해보았다. 1. 다른 요소에 가려졌다. 2. 100vh가 내가 아는 100vh가 설마 아닌가 ( 아니었으면 좋겠다 ) 1은 충분히 그럴 수 있다. 왜냐하면 푸터를 fixed로 뷰포트 기준 맨 하단에 잡아놨었는데, 이것이 메인 화면의 zindex에 밀려서 가려졌을 수도 있다. 는 무슨.. 그럴 수 없다... 난 메인 화면에 zindex를 주지도 않았고, 여기에 출처 불명의 라이브.. 2024. 10. 8. @import vs link CSS 적용 방법- 인라인- 내부 스타일링- 외부 스타일링- @import- link 1. 문서에 default.css 적용하는 방법 2. default.css 파일 내에 header.css를 @import @charset "utf-8";@import "header.css"; /* 문자 형식 */@import url("header.css"); /* url 형식 */ link가 더 효율적이다.@import는 직렬로딩link는 병렬로딩 출처: CSS 적용을 위한 또 다른 방법, @import :: About Web (tistory.com) 2024. 9. 23. 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 3 4 다음