전체 글101 코드잇 스프린트를 마치며 길다면 길고 짧다면 짧았을 6개월 간의 공부가 끝났다! (사실 이제 시작이다.)뭔가 시원섭섭하기도 하고 난 학교를 다니다가 휴학하고 참여했던 터라 다시 복학도 해야하니 조금 슬프다..그래도 처음 휴학을 결심하고 혼자서 공부를 시작하던 때에 비하면 정말 많이 발전하고 성장했다는 것을 체감하는 걸 보니 그래도 허투로 하진 않았나보다... 하는 중이다. 이대로는 안되겠다는 생각에 휴학을 결심했고, 프론트엔드 공부를 시작하면서 이걸 제대로 해보고 싶다는 마음을 먹고 임했던 만큼, 앞으로의 내 인생에서 좋든 나쁘든 어떠한 전환점이 되었을 것 같다. 상징적이니만큼 그래도 6개월간의 회고를 한번 작성해보고자 한다. (사실 마지막 프로젝트 회고도 안썼고, 트러블 슈팅도 못한 상태지만 전체 회고라도...)나에 대해서위에.. 2024. 9. 1. 모던 리액트 딥다이브 - 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. 이전 1 2 3 4 ··· 17 다음
