Study (16) 썸네일형 리스트형 [Next.js 14] styled-component 사용 시 "className did not match" 에러 styled-component를 사용하는데 className did not match 에러가 발생했다. 에러 로그에도 나와 있듯이 서버에서 렌더링 된 className과 클라이언트에서 렌더링 된 className의 불일치로 인해 발생하는 에러였다.위 에러로 인해서 첫화면 렌더링시에는 css가 안먹히다가 코드 수정 후 저장해 재렌더링 했을 경우에만 먹히는 이슈가 발생했다.검색해보니 Next.js에서 styled-component를 사용하기 위해서 서버와 클라이언트의 스타일 일치를 보장하기 위한 추가 설정이 필요하다고 한다.1. next.config.js 설정 추가next.config.js 파일에 styledComponent 를 활성화해준다.const nextConfig = { compiler: { .. [모던 리액트 Deep Dive 스터디] 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈 웹사이트의 성능만큼이나 중요한 것 → 웹사이트의 보안프론트엔드에서 해야 할 일이 많아질수록 프론트엔드의 보안 위험성이 증대되고 있다.그렇다면, 프론트엔드 개발자가 신경 써야 할 다양한 보인 이슈는 무엇이 있을까?리액트에서 발생하는 크로스 사이트 스크립팅 (XSS)크로스 사이트 스크립팅(Cross-Site Scription, XSS)란 웹사이트 개발자가 아닌 제 3자가 웹사이트에 악성 스크립트를 삽입해 실행 할 수 있는 취약점을 의미한다.사용자가 글을 작성했습니다.예를 들어 사용자가 위처럼 게시글을 작성했다면, 위 글 방문 시 script도 실행되어 window.alert도 함께 실행된다.이렇게 script에 대한 별도의 조치가 없어 실행된다면 웹사이트 개발자가 할 수 있는 모든 작업을 함께 수행할 수 있.. [모던 리액트 Deep Dive 스터디] 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표 단순히 버그 없이 웹 서비스를 운영하는 것도 중요하지만 사용자가 쾌적하게 이용하는 것도 중요하다. 이러한 웹 서비스의 성능을 객관적으로 평가할 수 있는 지표인 핵심 웹 지표에 대해 알아보자.웹사이트의 성능사용자가 웹사이트 접속 시 공통적으로 기대하는 사항웹사이트를 방문한 목적을 손쉽게 달성하기방문 목적을 달성하는데 걸리는 시간 최소화 하기웹사이트에서 개인정보가 누출되는 등의 사고 없이 보안이 철저하기또한 웹사이트의 성능은 다음과 같은 요소에 영향을 미친다.사이트의 로딩 속도는 전자 상거래 전환율에 막대한 영향을 미친다.소비자의 70%는 페이지 속도가 사이트 방문에 영향을 미친다고 말했다.절반에 가까운 사람들은 빠른 로딩속도가 보장되어 있으면 애니메이션과 동영상은 필요없다고 밝혔다.이처럼 많은 사용자들은 .. [모던 리액트 Deep Dive 스터디] 리액트 17과 18의 변경사항 살펴보기 17,18 버전의 변경사항을 알아야 하는 이유?현재 리액트 16버전을 사용하는 사이트가 가장 많다.그러나 리액트가 제공하는 최신 기능을 모두 활용하려면 새로운 버전들도 조금씩 따라잡을 필요가 있다.또한 리액트에 의존적인 라이브러리를 사용한다면 peerDependencies를 통해 리액트에 의존하고 있으므로 버전 업을 위해 이 라이브러리가 지원하는 리액트 버전에 대해 꼼꼼히 살펴봐야 한다.리액트 17버전 살펴보기리액트 17버전은 16버전과 다르게 새로 추가된 기능은 없으며 기존에 사용하던 코드의 수정을 필요로 하는 변경 사항을 최소화 했다는 점이 가장 큰 특징이다.1. 리액트의 점진적인 업그레이드리액트 16에서 17로 업데이트는 더 이상 호환되지 않는 API가 있거나 작동방식이 달라질 수 있기 때문에 단행.. [모던 리액트 Deep Dive 스터디] 모던 리액트 개발 도구로 개발 및 배포환경 구축하기 create-react-app / create-next-app애플리케이션 구축에 필요한 대부분의 작업을 대신 해줘서 편리하지만 프로젝트 구조를 이해하고 공부하는데 도움이 되지 않음.create-react-app은 미래에 보일러 플레이트 CLI가 아닌 리액트 기반 프레임워크를 제안하는 런처 형태로 변경될 예정위와 같은 상황으로 인해, 리액트 프레임워크 구축하는 방법을 알아야 한다.create-next-app 없이 하나씩 구축하기1. package.json 만들고 필요한 라이브러리 설치하기npm init 을 사용하면 package.json을 만들 수 있다. 다음으로 Next.js 프로젝트를 실행하는 데 필요한 라이브러리 3가지를 설치한다.npm i react react-dom next 그 다음 devDepe.. [모던 리액트 Deep Dive 스터디] 좋은 리액트 코드 작성을 위한 환경 구축하기 코드 작성 만큼 중요한 것은 무엇일까 ?좋은 코드를 작성할 수 있는 환경을 구축하는 것좋은 코드를 작성하기 위한 사전 작업 ⇒ ESLint, 테스트 라이브러리8.1 ESLint를 활용한 정적 코드 분석정적 코드 분석?코드 자체만으로 잠재적 버그를 야기할 수 있는 문제를 찾아 사전에 수정하는 것을 의미가장 많이 사용되는 정적 코드 분석 도구 ⇒ ESLintESLint는 어떻게 코드를 분석할까?!https://tech.kakao.com/storage/2019-11-25__8.13.19-1024x300.png자바스크립트 코드를 문자열로 읽음자바스크립트 코드를 분석 할 수 있는 파서(parser)로 코드를 구조화ESLint에서 파서는 기본적으로 espree 사용2번에서 구조화한 트리를 AST(Abstract S.. [모던 리액트 Deep Dive 스터디] 크롬 개발자 도구를 활용한 애플리케이션 분석 7. 크롬 개발자 도구를 활용한 애플리케이션 분석7.1 크롬 개발자 도구란?크롬에서 제공하는 개발자용 도구메뉴 → 보기 → 개발자 도구 선택 or 마우스 우클릭 → 검사📍 제대로 디버깅을 원하면 시크릿 모드로 불리는 개인정보 보호 모드에서 여는것 권장→ 시크릿 모드 : 크롬에 설치되어 있는 각종 확장 프로그램을 실행 하지 않기 때문에 순수 웹페이지 관련 정보만 확인이 가능7.2 요소 탭웹페이지를 구성하는 HTML, CSS 등의 정보 확인 가능7.2.1 요소 화면원하는 태그 클릭 시 브라우저 페이지의 해당 요소가 강조되고 태그와 관련된 정보를 확인 가능단순히 현재 HTML을 보는 것만이 아닌 직접 코드를 수정하여 바뀐 사항을 빠르게 확인 가능개발 모드에서도 리액트 코드를 수정해 핫 리로딩을 거치지 않아도.. [모던 리액트 Deep Dive 스터디] 리액트 개발을 위해 꼭 알아야 할 자바스크립트 1장. 리액트 개발을 위해 꼭 알아야 할 자바스크립트- 자바스크립트의 동등비교- 함수- 클래스- 클로저- 이벤트 루프와 비동기 통신의 이해- 리액트에서 자주 사용하는 자바스크립트 문법- 선택이 아닌 필수, 타입스크립트자바스크립트의 동등비교리액트 컴포넌트 렌더링이 일어나는 이유는 props의 동등비교에 따른 결과 props의 동등 비교는 얕은 비교 기반자바스크립트 동등비교 종류Equal Operator ==Strict Equal Operator ===Object.is (리액트에서 사용)// Object.is는 참조가 다른 객체에 대한 비교 불가능Object.is({hello: 'world'}, {hello: 'world'}) // false// 리액트의 shallowEqual은 객체의 1depth까지는 비.. 이전 1 2 다음
