Frontend (37) 썸네일형 리스트형 [Next.js] CSS Module React에서 했던 것처럼 index.tsx에 관한 CSS 파일을 index.css로 만들어서 import './index.css'로 import 하면 다음과 같은 에러가 발생한다.Global CSS cannot be imported from files other than your App.(전역 CSS는 App 파일 이외의 파일에서는 import할 수 없습니다.) 이는 Next.js가 _app.tsx의 App 컴포넌트가 아닌 다른 파일에서 CSS 파일을 그대로 불러오는 걸 제한하고 있기 때문이다.이렇게 제한하는 이유는 다른 페이지에 작성된 CSS 클래스명과 충돌을 일으킬 수 있기 때문이다. 예를 들어, 아래와 같은 CSS 파일이 있다고 하자.index.css.h1 { color: red;}test.cs.. [Next.js] 프리페칭(Pre-fetching) 프리페칭은 Pre(사전에, 미리)-Fetching(불러온다) 즉, 사용자가 현재 보고 있는 페이지에서 링크로 연결된 모든 페이지를 사전에 불러오는 기능이다. 페이지 이동을 빠른 속도로 지체없이 처리하기 위해 만들어진 기능이다. 그런데..! Next.js의 사전렌더링 방식에 대해 알고 있다면 의문이 들 수 있다. Next.js는 서버가 브라우저에 사전 렌더링된 HTML 페이지를 응답한 후, 후속으로 모든 JS 파일을 번들 파일로 전달한다. 이 때문에 초기 접속 요청이 종료된 이후의 페이지 이동은 서버에 별도의 요청 없이 브라우저 측에서 직접 JavaScript 코드를 실행시켜 컴포넌트를 교체하는 방식(CSR)으로 이루어진다. CSR을 사용하는데 왜 Pre-Fetching이 필요할까?Next.js는 모든.. [Next.js] 사전렌더링 React의 CSR사전렌더링을 알아보기에 앞서, React의 CSR(Client Side Rendering) 방식을 되짚어보자. 이 방식은 초기 요청 시 서버로부터 받은 JS Bundle 안에 이 서비스에서 접근 가능한 모든 컴포넌트 코드가 존재한다. 그래서 페이지 이동이 있더라도 서버에게 새로운 페이지를 요청하지 않고 브라우저가 자체적으로 앱을 실행해서 컴포넌트를 갈아끼우기 때문에 초기 접속 이후의 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있다. 하지만 초기 요청 시 서버로부터 모든 코드가 들어있는 JS Bundle을 받고 JS를 실행하고 컨텐츠를 렌더링하기까지 오랜 시간이 소요되므로 초기 접속 시간(FCP, First Contentful Paint)가 느리다. Next.js의 사전렌더링Next... [React] useState 사용법과 동작원리 useState란?state는 컴포넌트가 가지고 있는 속성값이다. 이 속성값이 변하면 react는 자동으로 UI를 업데이트 시킨다. 다음 예제에서 name은 state가 아니고 단순 변수이기 때문에 버튼을 클릭해도 화면에 표시되는 이름이 바뀌지 않는다.export default function Hello() { let name = "Mike"; function changeName() { name = name === "Mike" ? "Jane" : "Mike"; } return ( state {name} Change );} state로 만들기 위하여 react hook 중 하나인 useState를 사용한다.https://legacy.reactjs.o.. [React] Typescript 컴포넌트 타입 종류 1. React.FC함수형 컴포넌트를 정의할 때 사용하는 타입이다. FunctionComponent의 줄임말이다. ❓ React 18 버전 이전까지 FC 사용을 지양했던 이유와 이제 다시 사용할 수 있는 이유는 무엇일까? React.FC는 함수 컴포넌트의 props 타입을 간결하게 표현하기 위해 만들어졌다. 이를 통해 타입스크립트를 사용하는 프로젝트에서 함수 컴포넌트의 props를 명시적으로 지정할 수 있었다. 뿐만 아니라 props에 기본적으로 children이 포함하여, 컴포넌트에서 자식 요소를 손쉽게 다룰 수 있기를 의도했다.import { FC } from 'react';interface Props { name: string}const Foo: FC = ({ name }) => { .. [React] Redux 상태 관리 라이브러리 Redux를 사용해야 하는 이유기존에는 props로 상태관리를 했다. (다음 게시물 참고)https://winterflower.tistory.com/460 [React] props를 통해 컴포넌트에 값 전달하기props는 properties의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다. 예를 들어, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 age라는 값을 전달해주려면 다음과 같이 코winterflower.tistory.com props로 상태 관리를 할 경우 자식 컴포넌트 간 다이렉트 데이터 전달은 불가능하고, 부모 컴포넌트를 통해 주고받아야 해서 자식이 많아질 경우 상태 관리가 매우 복잡해진다. redux를 쓰면 상태값을 컴포넌트에 종속시키지 않고, 컴포넌.. [React] fetch()로 API 호출 (GET, POST, PUT, DELETE) fetch() 사용 방법fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); - 첫 번째 인자로 API의 url, 두 번째 인자로 옵션 객체를 받고 옵션(options) 객체에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해줄 수 있다. 응답 객체(response) 객체로부터는 HTTP 요청 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 읽어올 수 있다. - Promise 타입의 객체를 반환한다. API 호출이 성공했을 경.. [React] useEffect를 사용하여 mount/unmount/update시 작업 설정하기 useEffect란?컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 한다.컴포넌트가 mount/unmount/update 됐을 때 특정 작업을 처리할 수 있다. useEffect의 첫 번째 인자는 함수(effect), 두 번째 인자는 배열(deps)이 들어간다.useEffect(effect, deps);컴포넌트가 mount 될 때렌더링 결과가 DOM에 반영된 직후에 함수가 호출된다.import { useEffect, useState } from "react";export default function DayList() { const [days, setDays] = useState([]); useEffect(() => { console.log("change"); }); return .. 이전 1 2 3 4 5 다음 목록 더보기
