일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 이더리움
- 가상화
- 웹
- 백준
- k8s
- JavaScript
- TypeScript
- 파이썬
- 프론트엔드
- CSS
- HTML
- 알고리즘
- 블록체인
- node.js
- 타입스크립트
- kubernetes
- react
- AWS
- BFS
- next.js
- 컴퓨터공학
- 클라우드
- es6
- 백엔드
- 이슈
- 리액트
- 쿠버네티스
- 자바스크립트
- docker
- 솔리디티
- Today
- Total
목록🎨 프론트엔드/React.js (24)
즐겁게, 코드
함수 컴포넌트를 사용할 때 React.FC 라는 제네릭을 활용하면 children, displayName, defaultProps 등의 함수 컴포넌트가 갖는 기본 속성들에 대해 타입 지원을 받을 수 있습니다. import React from "react"; export const Child: React.FC = ({children}) => { return {children} } 아마 React.FC를 사용하는 가장 큰 이유도 chlidren을 갖는 컴포넌트의 타입을 지정하기 위해서일 텐데요, 하지만 React 18부터는 위 코드에서 Property 'children' does not exist on type... 이라는 오류가 출력됩니다. 그 이유는 children 프로퍼티가 React.FC에서 제외되었..
자바스크립트 단에서 화면 사이즈를 기반으로 모바일 여부를 검사하는 useIsMobile 훅을 제작하고 있었습니다. import { useEffect, useState } from "react"; const useIsMobile = () => { const [isMobile, setIsMobile] = useState(false); const [screenWidth, setScreenWidth] = useState(0); const handleScreenResize = () => { setScreenWidth(window.innerWidth); screenWidth > 768 ? setIsMobile(false) : setIsMobile(true); }; useEffect(() => { handleScre..
TL;DR 1. 리액트에서는 중복되는 상태 업데이트를 배칭으로 처리하고 있다. 2. 기존에는 비동기 프로세스 안에서 발생하는 중복된 상태 업데이트에는 배칭을 적용하지 않았지만, 버전 18부터는 항상 배칭을 적용한다. 2013년 처음 세상에 등장한 리액트는 현재 최고의 전성기를 누리고 있고, 이제는 버전 18의 출시를 눈앞에 두고 있습니다. 버전 17에서는 내부적인 최적화 및 안정화에 초점을 맞춰 별다른 변화를 체감하지 못했지만, 현재 베타로 출시된 리액트 버전 18에서는 몇 가지 눈에 띄는 변경사항이 있는데요, 오늘은 그 중 automatic-batching 이라는 새로 추가된 성질을 소개해보려 합니다. 시작하기 전에 시작하기 전, 리액트 버전 18의 설정방법을 간단히 소개하고자 합니다. 1. 최신 버전..
자식 요소를 감싸는 래퍼 컴포넌트를 작성할 때 자식 요소인 children 속성의 타입을 명시해야 하는 경우가 자주 있습니다. 그런데, ReactChild, ReactElement, ReactNode 등 비슷한 이름을 갖는 타입이 너무 많은 모습이네요! 오늘은 자주 사용되는 타입 설명과 함께 어떤 상황에서 각 타입을 사용할 수 있을지 간단히 알아보도록 하겠습니다. const App = () => { return ( {/* 과연 children 요소의 타입은 무엇일까요? */} Hello, world! ); }; type WrapperProp = { // children: React.ReactChild; // children: React.ReactElement; // children: JSX.Element..
지난 글에서는 리코일이 무엇인지와 리코일과 기존 상태관리 방법의 차이를 간단하게 소개했는데요, 이번 글에서는 실제로 동작하는 여러 앱에서 리코일을 사용해 상태를 관리해보겠습니다. 리코일 설치하기 CRA로 프로젝트를 구성했다고 가정하고, 리코일을 설치해 보겠습니다. // yarn yarn add recoil // npm npm i recoil 리덕스를 사용할 때는 redux, react-redux, 경우에 따라서는 redux-thunk, redux-saga까지 설치해야 했지만, 이제는 리코일만 설치하면 됩니다! 리코일 루트 컴포넌트 정의하기 리코일을 사용하기 이전, 리코일로 전역 상태를 관리할 범위를 컴포넌트로 감싸줍니다. Tip. 는 리덕스나 컨텍스트의 Provider와 같은 역할을 합니다. import..
오늘은 리코일에 대한 이야기를 간단하게 해보려 합니다. 리코일은 페이스북에서 만든 상태 관리 라이브러리로, 리덕스에 비해 코드가 간결하고 직관적인 로직을 구성할 수 있다는 장점이 있습니다. 실제로 페이스북 팀에서도 "리코일은 리액트처럼 작동하고 생각합니다." 라는 내용을 장점으로 내세웁니다. Context API와의 차이 컨텍스트는 리액트에 내장된 상태 관리용 API로, 별도의 라이브러리를 사용하지 않고도 상태를 관리할 수 있다는 장점이 있습니다. 다만 컨텍스트는 중첩 가능한 Provider 컴포넌트와 useContext() 훅을 활용해 provider - consumer 관계를 구현하는데, 이러면 여러 컨텍스트가 중첩될 경우 값을 재계산하는 과정에서 성능 하락이 있을 수도 있습니다. 한번 인증 정보, ..
어플리케이션에 로그인을 비롯한 인증이 필요한 이유는 무엇일까요? 당연하겠지만, 누구나 접근할 수 없는 정보를 보호하기 위해 사용자를 인증하는 작업이 필요하기 때문입니다. 인증을 구현하는 방법은 크게 서버 사이드 세션을 사용하는 방법과 JWT라는 인증 토큰을 사용하는 방법으로 나뉘는데요, 이번 글에서는 인증이 어떻게 이루어지는지에 대한 이론을 간략하게 소개하도록 하겠습니다. 세션 기반 인증 방식 세션 - 쿠키 방식이라고도 부르는 세션 기반 인증(편의상 "세션 인증 방식" 과 혼용하겠습니다.) 방식은 대략 다음과 같이 동작합니다. 인증 과정 클라이언트가 로그인을 시도합니다. 로그인에 성공하면, 서버는 해당 클라이언트를 식별하기 위한 세션값을 생성하고 응답에 실어 전송합니다. 클라이언트는 세션값을 수신하고 쿠..