Front-End Study/모던 리액트 딥다이브 스터디19 모던 리액트 딥다이브 - 17회차 [마치며..] 15. 마치며배운 것들을 토대로 좋은 리액트 앱을 만들기 위해 뭘 염두에 둬야 할지 살펴보자15.1 리액트 프로젝트를 시작할 때 고려해야 할 사항✨ 지난 10년간 꾸준히 발전하고 변경되어온 리액트는 다양한 버전이 공존한다.15.1.1 유지 보수중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.02로 올리자향후를 위해 최소한 16.8.6 버전 이상으로는 맞추는 것이 좋다.클래스 형태의 컴포넌트를 굳이 함수형 컴포넌트로 마이그레이션 할 필요성은 없다.15.1.2 인터넷 익스플로러 11 지원을 목표한다면 각별히 더 주의를 기한다.익스플로러는 지옥이다.15.1.3 서버 사이드 렌더링 앱을 우선적으로 고려한다.웹 성능 지표를 고려해 좋은 결과를 얻기 위해서이다.서버를 준비할 상황이 여의치 않은 경우나.. 2024. 8. 7. 모던 리액트 딥다이브 - 17회차 [14-1 ~ 14-7] a# 웹 사이트 보안을 위한 리액트와 웹 페이지 보안 이슈리액트 기반 웹 앱에서 개발자가 신경써야 할 보안 이슈를 알아보자!SECTION14.1 리액트에서 발생하는 크로스 사이트 스크립팅(XSS)✨ 제 3자가 웹 사이트가 악성 스크립트를 삽입해 실행하는 것안녕? 난 해커야별도의 조치가 없다면 위의 스크립트 또한 함께 실행될 것이다.🫨 그 의미는 결국 개발자가 작성 가능한 모든 코드를 작성할 수 있다는 것이 된다.14.1.1 dangerouslySetInnerHTML prop📌 특정 브라우저 DOM의 innerHTML을 특정한 내용으로 교체하는 것해당 메서드는 __html 키를 가진 객체만 인수로 받는데, 이 인수 문자열을 그대로 DOM에 표시한다.주의할 점은 이 문자열에 제한이 없다는 것.14.2.2.. 2024. 8. 7. 모던 리액트 딥다이브 - 16회차 [13-1 ~ 13-5 웹페이지의 성능을 측정하는 다양한 방법웹 성능 지표를 확인하는 서로 다른 방법을 통해 성능을 객관적으로 파악해보자13.1 애플리케이션에서 확인하기13.1 create-react-app📌 reportWebVitals 함수를 통해 웹 성능을 측정해보자const reportWebVitals = (onPerfEntry) => { if (onPerfEntry && onPerfEntry instanceof Function) { import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); getFID(onPerfEntry); getFCP(onPerfEntry); .. 2024. 8. 7. 모던 리액트 딥다이브 - 16회차 [12-1 ~ 12-6] 12. 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표웹 페이지를 만들고, 서비스한다고 해서 웹 개발자의 일이 끝나는 것은 아니다.12.1 웹 사이트와 성능✨ 웹 사이트에 접속했을 때 공통적으로 기대하는 사항을 충족시킨다면 그것은 결국 좋은 코드라고 볼 수 있다.웹 사이트 기대 사항웹 사이트를 방문한 목적을 손쉽게 달성해당 목적을 달성하는 데까지 걸릴 시간의 감소개인 정보 노출 등의 사고가 없는 철저한 보안✅ 결국 웹 서비스의 성능과 요소는 반비례할 수 밖에 없으며 밸런스를 잘 조절하는 것이 매우 중요하다.하지만 평균적으로 개발자의 기기는 일반인보다 좋아 문제를 잘 느끼지 못하는 경우가 많다.또한 항상 서비스 출시를 목표로 성능 개선보단 서비스의 완성과 버그 수정에 더욱 몰두하기 때문에 이러한 작업을 .. 2024. 8. 7. 모던 리액트 딥다이브 - 15회차 [11-1 ~ 11-8] 11. Next.js 13과 리액트 18Next.js 13의 변화된 다양한 사항들을 확인해보자11.1 app 디렉토리의 등장✨ Next.js의 아쉬운 점으로 손꼽히던 레이아웃 문제의 해결기존 React 앱은 와 등을 통해 레이아웃을 관리 가능했지만, Next.js의 경우 12버전까진 공통 레이아웃을 유지하는 방법은 _app 파일이 유일했다.11.1.1 라우팅🔖 기존의 페이지 라우팅 방식에서 앱 라우팅 방식으로 변경되었고, 파일명으로 라우팅하는 것이 불가능해졌다.Next.js 13버전부터 디렉토리 내부의 파일명은 라우팅 명칭에 영향을 끼칠 수 없다.# 12pages/a/b.tsx or pages/a/b/index.tsx -> 동일# 13pages/a/b -> a/b로 변환, 파일명 무시폴더명으로 라우팅.. 2024. 8. 7. 모던 리액트 딥다이브 15회차 - [10-1, 10-2] 10. 리액트 17과 18의 변경 사항 살펴보기아직까지도 가장 인기있는건 리액트 16버전이지만, 17과 18을 몰라도 되는건 아니다.10.1 리액트 17버전 살펴보기✨ 16에서 17로의 변경은 변경사항을 최소화하여 호환성 측면에서 큰 문제없이 마무리되었다.10.1.1 리액트의 점진적인 업그레이드🔖 유의적 버전 기반 업데이트를 통한 리액트의 발전이는 새로운 주 버전이 업데이트될 때마다 기존에 사용하던 버전을 완전히 버려버리는 방식을 택해왔음을 의미하지만 리액트 17버전부턴 "점진적 업그레이드"가 가능해짐여기서 점진적 업그레이드란, 리액트의 다음 버전 기능을 사용하면서도 일부 기능은 그대로 유지하는 유도리있는 업그레이드를 의미대표적으로 facebook, airbnb, netflix 등이 이런 방식을 채택하.. 2024. 8. 7. 이전 1 2 3 4 다음
