FrontEnd/React (38) 썸네일형 리스트형 바벨, 웹팩의 역할에 대해(By GPT) 바벨(Babel)은 주로 최신 JavaScript 코드를 구형 브라우저나 환경에서도 호환되게 변환(트랜스파일링)해주는 도구입니다. 바벨의 주요 역할과 기능은 다음과 같습니다: 1. 최신 JavaScript 문법 지원바벨은 최신 ECMAScript 표준(예: ES6, ES7 등)에서 도입된 새로운 문법과 기능을 구형 JavaScript 환경에서도 사용할 수 있도록 변환합니다. 예를 들어, 화살표 함수, 클래스, 템플릿 리터럴, 비동기 함수 등의 최신 문법을 ES5 또는 그 이하 버전의 JavaScript로 변환합니다.2. 플러그인 시스템바벨은 플러그인 시스템을 통해 다양한 기능을 추가할 수 있습니다. 각 플러그인은 특정 문법 변환을 수행하며, 필요한 플러그인만 선택하여 사용함으로써 커스터마이즈가 가능합니.. 리액트에서 자주쓰는 if문 작성패턴 5개 선임연구원님이 나에게 리엑트에서는 태그를 대상으로 어떻게 조건문을 구성하는지 물어보셨다. 당시에는 알고있었지만 막상 그렇게 질문을 받으니 알고있는 것도 제대로 답하지 못하였다. 아래는 어떻게 리엑트에서 if문이 구현되는지를 보여주는 5가지 예이다. 실제로 나는 그렇게 React를 깊게 공부해 보지는 않아 앞에 3개 방법이 익숙하다. 리액트에서 자주쓰는 if문 작성패턴 5개 1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; }} 컴포넌트에서 JSX를 조건부로 보여주고 싶으면 그냥 이렇게 씁니다.우리가 자주 쓰던 자바스크립트 if문은return () 안의 .. react-cookie 사용하기 작품을 진행하던 중 사용자 정보를 다른 페이지에서 활용할 일들이 생겨 방법을 고민해봤다.우선 기존에는 Redux를 이용하여 사용자가 로그인을 완료하면 Redux에 저장한 후 그 데이터를 활용하려 했다.그러나, 이 방법의 심각한 문제점은 새로고침을 하면 Redux의 정보가 모두 날아간다는 것이었다.따라서 사용자 정보를 로컬 브라우저에 담아야 했고, 쿠키를 생성하여 사용하기로 했다쿠키를 다음과 같이 알고있다.웹 서버가 브라우저에게 보내어 저장했다가 서버의 부가적인 요청이 있을 때 다시 서버로 보내주는 문자열 정보웹페이지 방문 시 방문 기록 등 브라우저의 정보들이 저장된 텍스트 파일 하지만 쿠키에는 토큰에 관한 정보를 넣을 수도 있다. 즉 토큰을 쿠키처럼 사용할 수 있는 것이다. cookie를 설정 및 사용하.. forwardRef()란? forwrardRef()란? 우선 prop이 뭔지 알아야 한다. prop은 엘러먼트(태그)의 속성이다. 아래 글을 읽으면 그것을 알수 있다. 리엑트에서는 특수한 목적으로 사용되기 때문에 일반적인 용도로 사용할 수 없는 prop이 몇가지 있는데 ref, key라는 이름을 가진 prop이 이에 속한다. ref는 HTML엘러먼트 접근이라는 특수한 용도로 사용되기 때문에 일반적인 prop으로 사용할 수 없다. 이때 HTML엘러먼트(태그)가 아닌 리엑트 컴포넌트에서 특수한 이름의 prop인 ref prop을 사용할 수 있게 해주는 것이 forwardRef()라는 훅 함수이다!!즉, 특수한 용도의 prop(예를들면 ref, key)을 리엑트 컴포넌트에서 일반적인 용도의 prop으로 사용할 수 있게 해주는 것이 f.. 상태관리 라이브러리인 Zustand 에 대하여 주스탠드(zustand)는 독일어로 ‘상태’라는 뜻을 가졌고, 간결한 플럭스(Flux) 원칙을 바탕으로 작고 빠르게 확장 가능한 상태 관리 라이브러리다. 조타이(Jotai)를 만든 카토 다이시가 주스탠드도 만들어 관리하고 있다. 주스탠드는 특정 라이브러리에 종속되어 만들어진 도구는 아니므로 바닐라 자바스크립트에서도 사용이 가능하다.주스탠드는 발행/구독 모델(pub/sub)을 기반으로 이루어져 있다. 스토어의 상태 변경이 일어날 때 실행할 리스너 함수를 모아 두었다가(sub), 상태가 변경되었을 때 등록된 리스너에게 상태가 변경되었다고 알려준다(pub).그리고 스토어를 생성하는 함수 호출 시 클로저를 사용한다. 이로 인한 특징으로 상태를 변경, 조회, 구독하는 인터페이스를 통해서만 상태를 다루고, 실제 상.. 상태관리 라이브러리에 대해서 SWR, ZUSTAND등 상태관리라이브 러리에 대해 배우고 있다. 하지만 정작 상태관리라이브러리 자체가 왜 필요한지 모르는 현상이 발생했다. 이에 상태관리 라이브러리에 대해 알아보고자 한다. 상태관리가 필요한 이유?상태관리가 필요한 이유를 이해하기 위해선 우선 상태가 무엇인지 알아야한다상태란?상태(state)는 React에서 컴포넌트 내에 관리되는 변수, 즉 변하는 데이터들이다.React API setState()로 선언되는 그것 맞다.props drilling컴포넌트들은 서로 상태를 공유해야한다. 컴포넌트들은 props 형태로 상태를 공유한다.자식 컴포넌트간에는 상태 공유가 불가능하고, 부모 컴포넌트를 통해서만 상태를 공유할 수 있다. 이때 문제는, 컴포넌트 계층이 많아지면 props 하나를 전달하는데.. useParam에 대하여 usePrams이란? react-router-dom 에 있는 훅으로 URL의 동적 파라미터를 반환한다. 예를들면 아래와 같다. 여러개의 상품이 나열되어 있는 페이지에서 특정상품을 클릭하면 그 상품과 관련된 상세 페이지로 이동하게 구현한다고 해보자. 그렇게 이동된 페이지에서 useParam()을 사용하면 현재 주소의 동적 url만을 가져오는 것이다. 즉 아래 그림에서 params변수는 현재 주소의 동적url인 p1을 값으로 갖게 되는 것이다. SWR 실습: https://github.com/dhflekddy/React-and-ReactHookPractice/commit/1f12eb529ddf3fe278b0dd961c8c91c0321a46ad mutate를 이용한 Optimistic UI: https://steadily-worked.tistory.com/565 useSWR, mutate에 대하여: https://velog.io/@code-bebop/SWR-%EC%8B%AC%EC%B8%B5%ED%83%90%EA%B5%AC useSWRInfinite에 대하여: https://velog.io/@code-bebop/SWR-%EC%8B%AC%EC%B8%B5%ED%83%90%EA%B5%AC-useSWRInfinite https://moon-ga.github.io.. 이전 1 2 3 4 5 다음
