전체 글61 [모던 리액트 Deep Dive] 13장. 웹페이지의 성능을 측정하는 다양한 방법 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [13장] 웹페이지의 성능을 측정하는 다양한 방법13.1 애플리케이션에서 확인하기✨create-react-app// src/reportWebVitals.jsexport function reportWebVitals(onPerfEntry) { if (onPer.. 2024. 7. 29. [모던 리액트 Deep Dive] 12장. 모든 웹 개발자가 관심을 가져야 할 핵심 지표 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com[12장] 모든 웹 개발자가 관심을 가져야 할 핵심 지표12.1 웹사이트와 성능웹사이트를 방문한 목적을 손쉽게 달성할 수 있어야 함목적을 달성하는 데 걸리는 시간이 짧아야 함웹사이트에서 개인정보가 누출되는 등의 사고 없이 보안이 철저해야 함12.2 핵심 웹 지.. 2024. 7. 28. 스크롤시 투명한 배경에서 배경색 넣기(feat. 화살표 클릭 시 맨 위로 이동하기) 스크롤시 투명한 배경에서 배경색 넣기bg에 이미지를 넣어놔서 처음 헤더를 transparent로 설정해줬다.메인 화면의 내용이 많아질수록 스크롤이 생길텐데 스크롤 하면 헤더에 배경색을 설정해줘서 내용이 겹쳐지는 현상을 방지해야 했다.✨ 스크롤시 투명한 배경 → 색 넣기const scrollStyle = { base: 'bg-transparent text-black', scroll: 'bg-black text-white',}export default function Header() { const [scrollPosition, setScrollPosition] = useState(0) useEffect(() => { const handleScroll = () => { setScrollP.. 2024. 7. 27. [모던 리액트 Deep Dive] 11장. Next.js 13과 리액트 18 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [11장] Next.js 13과 리액트 18Next는 SSR 구조에 많은 변화가 있는 리액트 18을 채택함기존 Next의 큰 약점이었던 레이아웃 지원을 본격적으로 지원하기 시작했고, 바벨을 대체할 러스트 기반 SWC를 뒤이어 웹팩을 대체할 Turbopack까.. 2024. 7. 27. [모던 리액트 Deep Dive] 10장. 리액트 17과 18의 변경 사항 살펴보기 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [10장] 리액트 17과 18의 변경 사항 살펴보기10.1 리액트 17 버전 살펴보기기존에 사용하던 코드의 수정을 필요로 하는 변경 사항을 최소화 함. (호환성 깨짐 X)16 → 17버전으로의 버전 업은 큰 부담없이 순조롭게 할 수 있다.✨리액트의 점진적인.. 2024. 7. 26. [모던 리액트 Deep Dive] 9장. 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [9장] 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기9.1 Next.js로 리액트 개발 환경 구축하기프론트엔드 개발자가 직접 만든 애플리케이션을 온전히 이해하려면 package.json부터 시작해서 하나씩 필요한 파일을 직접 설정해봐야 한다. ✨cr.. 2024. 7. 24. [모던 리액트 Deep Dive] 8장. 좋은 리액트 코드 작성을 위한 환경 구축하기 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [8장] 좋은 리액트 코드 작성을 위한 환경 구축하기8.1 ESLint를 활용한 정적 코드 분석버그나 예상치 못한 작동을 방지하기 위해선? 정적 코드 분석을 하자!!정적 코드 분석: 코드의 실행과는 별개로 코드 그 자체만으로도 코드 스멜(잠재적으로 버그를 야.. 2024. 7. 23. [모던 리액트 Deep Dive] 7장. 크롬 개발자 도구를 활용한 애플리케이션 분석 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com[7장] 크롬 개발자 도구를 활용한 애플리케이션 분석7.1 크롬 개발자 도구란?크롬에서 제공하는 개발자용 도구로, 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있는 개발도구 (도구 → 개발자 도구 / F12)크롬 개발자 도구에서 웹사이트를 제대로 디버깅하고.. 2024. 7. 22. 서버 상태 💞 클라이언트 상태 React Query는 주로 서버 상태를 효율적으로 관리하기 위해 설계되었다. 이전에는 서버 상태를 클라이언트 상태와 함께 관리하면서 발생하는 복잡성을 줄이는 것이 어려웠다.-> 코드의 양이 늘어나고, 데이터 동기화와 캐싱 문제 등으로 어려움을 겪었다.React Query는 이러한 문제를 해결해 주며, 서버 상태를 효과적으로 관리하고, 비동기 데이터 페칭, 캐싱, 자동 리패칭 등의 기능을 통해 개발자가 좀 더 쉽게 서버 상태를 다룰 수 있도록 한다.[🔥React 뽀개기] - React Query 왜 씀? React Query 왜 씀?리액트 쿼리를 배우기 전에는 그냥 무한스크롤 구현하는데 쓰이는 애인줄 알았다.근데 찍먹해봤더니 뭐지?? 서버 상태 불러오고, 캐싱하고, 지속적인 업데이트가 가능..?Reac.. 2024. 7. 20. 이전 1 2 3 4 5 6 7 다음 반응형
