web study

타입스크립트를 사용한 리액트 프로젝트에서 다음과 같은 에러가 발생했다. 타입스크립트 설정 파일인 tsconfig.json에서 forceConsistentCasingInFileName 옵션을 false로 변경하면 문제가 해결된다. "forceConsistentCasingInFileNames": false, forceConsistentCasingInFileName은 파일명에 일관된 casing를 강제로 적용하는 옵션이다. 일부 개발자는 대소문자를 구분하지 않고 파일명을 사용하고, 또 다른 일부 개발자는 대소문자를 구분한 파일명을 사용하게 될 경우 규칙에 어긋난다고 표시해주는 것이다.

TypeScript와 Styled-components를 같이 사용하면서 아래와 같이 props 스타일을 지정해주었다. (styles.button.ts) export interface ButtonProps { size: string; } export const PrimaryButton = styled(StyledButton)` width: ${props => `${props.size === 'block' ? '100%' : 'auto'}`}; `; (Login.tsx) const Login = ({ size }: ButtonProps) => { // ... Login } 그런데 자꾸 부모 컴포넌트에서 에러가 발생했다. (App.tsx) Property 'size' is missing in type '{}'..

의존성 배열이란? useEffect hook에 입력하는 두 번째 매개변수를 말한다. 사용 방법 1. useEffect(() => {}) 컴포넌트가 렌더링 될 때마다 호출된다. 매우 비효율적이기 때문에 이 방식으로는 거의 사용되지 않는다. 2. useEffect(() => {}, []) 첫 번째 렌더링 후에만 호출된다. 사용 예제 API 호출을 첫 번째 렌더링 후에만 호출할 경우 // API 호출 useEffect(() => { fetch(movies) .then((res) => res.json()) .then((data) => setMovies(data.List)); }, []) 3. useEffect(() => {}, [value]) 첫 번째 렌더링 후에 호출된다. 이후에는 value가 변경될 때마다 ..

video 태그의 autoplay 속성은 OS 정책에 맞게 설정해야 적용할 수 있다. (New video Policies for iOS) 해결 아래 예시처럼 autoPlay를 사용할 때에는 muted와 playsInline 속성을 같이 적용해주어야 한다. muted : 음소거 playsInline : 인라인 모드로 재생되며, 재생 시 자동으로 전체 화면 모드로 바뀌지 않도록 한다.

Heroku에 배포할 수 있는 방법은 여러 가지인데, 그중에서도 Github와 연결해서 배포하는 방법에 대해 정리하고자 한다. 📎 Heroku Git으로 배포하는 방법 Heroku에 Github로 배포하기 1. package.json에 start와 heroku-postbuild를 세팅해준다. (package.json) "scripts": { "dev": "next dev", "build": "next build", "lint": "next lint", "start": "next start -p $PORT", "heroku-postbuild": "npm run build" }, 2. package.json에 자신이 설치한 node, npm 버전에 맞게 engine을 명시해준다. (package.json) ..

리액트가 언제 재렌더링이 되며, 불필요한 렌더링을 막고 성능을 최적화하기 위해서는 어떻게 해야할 지에 대해 알아보자. 목차 리액트 재렌더링 조건 렌더링 성능 최적화 방법 리액트 재렌더링 조건 1. state(상태) 변경이 있을 때 리액트는 state 변경이 감지되면 재렌더링 한다. 2. 새로운 props가 들어올 때 부모 컴포넌트로부터 새 props가 들어오면 자식 컴포넌트는 재렌더링 된다. 3. 기존 props가 업데이트 됐을 때 부모 컴포넌트로부터 받은 props가 변경되면 props 값을 받은 자식 컴포넌트도 재렌더링 된다. 4. 부모 컴포넌트가 재렌더링 될 때 부모 컴포넌트가 업데이트 되어 재렌더링 되면 자식 컴포넌트도 재렌더링 된다. 렌더링 성능 최적화 방법 과도한 재렌더링은 성능 저하의 원인이..

리액트 프로젝트를 구글 애널리틱스와 연동하여 방문자 추적 등 여러 데이터를 수집하고 활용해보자. 목차 웹사이트 분석이 필요한 이유 리액트와 구글 애널리틱스 연결하기 웹사이트 분석이 필요한 이유 방문자가 사는 지역에 대한 정보를 얻을 수 있다. 내 비즈니스에 더 관심이 있는 연령대를 이해할 수 있다. 방문자가 평균적으로 얼마나 많은 시간 동안 머무르는지 알 수 있다. 신규 사용자를 추적할 수 있다. 애플리케이션에 버그가 있는지 추적할 수 있다. 사용자의 관심에 따라 최적화 할 수 있다. 리액트와 구글 애널리틱스 연결하기 1. 계정 & 속성 생성 1-1. 구글 애널리틱스 페이지에서 계정을 생성한다. 1-2. 홈-관리로 들어가서 속성 만들기를 클릭한다. 1-3. 속성 이름, 보고 시간대, 통화를 설정하고 '고..

Slick Slider는 꽤나 잘 알려진 Carousel 라이브러리다. 리액트에서 사용하려면 리액트용 Slick Slider를 설치해야 한다. 설치부터 사용 방법까지 알아보자. React Slick Slider 사용하기 1. React 프로젝트 경로에서 npm으로 설치한다. react-slick : react slick 설치 slick-carousel : slick 기본 스타일 css 설치 npm install react-slick slick-carousel 타입스크립트 버전 타입스크립트의 경우 여러 옵션에 타입이 정해져 있어야 하기 때문에 타입스크립트용 react-slick도 설치해주어야 정상적으로 작동한다. npm install react-slick @types/react-slick slick-car..

리액트 설치부터 Client, Server 초기 세팅까지 과정에 대해 알아보자. React 설치와 Client + Server 세팅 프로젝트 폴더 생성 터미널에서 프로젝트 폴더 경로로 이동한다. cd my-app/ 리액트 프로젝트 개발 환경을 구축하기 위해 아래 명령어를 입력한다. npx create-react-app client 타입스크립트 버전 npx create-react-app --template typescript my-app 아래에 client 폴더가 생성되면서, 그 안에 리액트 패키지가 설치되었다. 프로젝트 폴더에 server 폴더를 생성한다. mkdir server 현재까지 폴더 구조 my-app ├── client │ ├── README.md │ ├── package-lock.json │..

React 컴포넌트 형식은 클래스형 컴포넌트와 함수형 컴포넌트로 나뉜다. 리액트 16.8 이전에는 함수형 컴포넌트는 간단한 동작에만 사용이 되었지만, 요즘은 클래스형 컴포넌트보다 함수형 컴포넌트를 많이 사용하는 추세이다. 이 둘의 차이점에 대해 자세히 알아보자. 목차 기본 형태 비교 Functional(함수형) 컴포넌트와 Hooks 기본 형태 Class (클래스형) 컴포넌트 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import React, { Component } from 'react' class Hello extends React.Component { constructor(props) { super(props); this.state = { name: props.name };..