JH 개발 블로그

// 룰렛 도전 버튼을 누르면 돌아가는 애니메이션 css 시작 {/* 값 영역 */} {prizeData.map((item, i) => { // data map return ( {} {} ); })} {/* 선 영역 */} {[...Array(8)].map((n, index) => { return ( ); })} // 상단에 있는 룰렛 핀 아이콘 도전 import { makeStyles } from "@material-ui/core/styles"; import { StylePropType } from "./Types"; export const useStyles = (props: StylePropType) => { return makeStyles(() => ({ // css 클래스 네임들 wrap: { w..

리액트(React) Lottie 애니메이션 적용 Lottie는 After Effects 애니메이션을 실시간으로 렌더링하는 iOS, Android 및 React Native 라이브러리입니다. 평소, gif, css 애니메이션을 사용한 결과물보다 더욱더 만족스러운 퀄리티를 만들어 낼 수 있다는 장점을 가지고 있습니다. 또 다른 장점으로는 디자이너가 원하는 완성된 결과물을 바로 적용하기 때문에, 개발자가 애니메이션에 구현에 대한 시간과 노력을 절약할 수 있습니다. 애니메이션에 대한 모든 정보가 JSON 파일로 저장되기 때문에 특별한 프로그램 설치가 필요없습니다. 사용 방법 json 파일을 따로 저장해준 후, 다른 파일에서 import LoaderJson from "./파일명.json"; 을 해줍니다. impo..

SVG 반응형으로 만드는 방법 화면의 크기가 달라져도 svg 요소의 크기는 고정되어 반응형에 취약한 모습을 보인다. 그러나, viewBox 속성을 이용하면 화면에 크기에 따라 svg 요소의 크기가 자동으로 조절된다. viewBox 속성의 값은 다음과 같다. viewBox=" " min-x 와 min-y 는 svg 가 그려지는 영역의 시작점, 왼쪽 상단의 꼭짓점으로, width와 height는 각각 영역 의 가로, 세로 길이로 볼 수 있다. before 가로, 세로가 375, 224 로 고정이 된다. after 가로, 세로의 비율이 375, 224 로 고정하되, 반응형 웹에 따라 크기는 유동적으로 변한다.

package-lock.json 과 yarn.lock 파일의 정체는 뭘까 => 패키지 잠금을 위한 파일들 패키지를 프로젝트에 설치하거나 갱신 또는 삭제하는데 사용되는 도구를 패키지 매니저라고 하는데요. 현재 자바스크립트 커뮤니티는 npm과 yarn, 이렇게 두가지 도구로 양분이 되어 있는 상황입니다. 기본적으로 이 두가지 도구 모두 앞으로 설명드릴 패키지 잠금 기능을 지원하고 있는데요. npm은 package-lock.json 파일을, yarn은 yarn.lock 파일을 패키지 잠금 파일로 사용합니다. 즉, 패키지 잠금 파일은 자신이 개발을 하는 프로젝트에서 어떤 패키지 매니저를 사용하느냐에 따라 달라지게 됩니다. 패키지 관리 메커니즘 패키지 잠금을 이해하려면 먼저 패키지 매니저가 프로젝트가 의존하는 패..

material ui v4 에서는 keyframes 에 props 를 넘겨주면 애니메이션이 작동하지 않게 된다. 나는 꼭 넘겨주어야 할 일이 생겼기 때문에 정말 한참동안 찾은 방법이다. 나와 같이 헤매는 분들을 위해 공유한다. const defaultProps: StylePropType = { selectedItem, rotate, nbTurn: 9, }; const classes = useStyles(defaultProps)(); 위와 같이 useStyle 인자에 props 를 넘겨준다. 그리고 뒤에 ( ) 를 붙여서 useStyle 의 결괏값(= makeStyle)을 바로 classes 변수에 넘겨주자. import { makeStyles } from "@material-ui/core/styles";..

React 16.6 버전에서는 코드를 불러오는 동안 “기다릴 수 있고”, 기다리는 동안 로딩 상태(스피너와 같은 것)를 선언적으로 지정할 수 있도록 컴포넌트가 추가되었습니다. const ProfilePage = React.lazy(() => import('./ProfilePage')); // 지연 로딩 // 프로필을 불러오는 동안 스피너를 표시합니다 데이터를 가져오기 위한 Suspense는 를 사용하여 선언적으로 데이터를 비롯한 무엇이든 “기다릴” 수 있도록 해주는 새로운 기능입니다. 이 페이지에서는 사용 사례 가운데 데이터 로딩에 초점을 두지만, 이 기능은 이미지, 스크립트, 그 밖의 비동기 작업을 기다리는 데에도 사용될 수 있습니다. Suspense를 사용하면 컴포넌트가 렌더링되기 전까지 기다릴 수 ..

Apollo Client 는 GraphQL을 사용하여 로컬 및 원격 데이터를 모두 관리할 수 있는 JavaScript 용 포괄적인 상태 관리 라이브러리입니다. 이를 사용하여 UI를 자동으로 업데이트하면서 애플리케이션 데이터를 가져오고, 캐시하고, 수정합니다. Apollo Client는 최신 개발 방식과 일치하는 경제적이고 예측 가능하며 선언적인 방식으로 코드를 구성할 수 있도록 도와줍니다. 핵심 @apollo/client 라이브러리는 React와의 내장 통합을 제공하며 더 큰 Apollo 커뮤니티는 다른 인기 있는 보기 계층에 대한 통합을 유지 관리 합니다. Apollo Client 는 useQuery, useLazyQuery 를 제공한다. src/apolloClient.t..

Context API props 드릴링을 막아준다. (= import 해와서 props 내려줄 필요가 없다) 최대한 상위에서 다 관리해주는 것이 좋다. (리덕스와 다른 점은 리덕스는 promise 를 제공하지 않는다. 그래서 리덕스 사가를 써야 한다. 또한 리덕스는 모든걸 상위에서 관리하지만 Context API 는 위에서 관리하되, 너무 불필요하게 위까지 가지 않도록 한다고 한 것 같다.) 이전 게시물의 정리를 참고하면 해당 context 파일에서는 provider 를 반환한다. 이 provider 를 최상위 app.tsx 에 감싸주면 그 아래 컴포넌트에서는 provider 의 value 에 접근할 수 있게 된다. // 해당 context 파일 interface ContextType { state: S..

reducer 이전에는 주요 상태 업데이트(useState 등)를 컴포넌트 내부에서 했다면, 이번에는 컴포넌트와 상태 업데이트 로직을 분리시킬 수 있는 방법이 있는데 이 함수가 바로 useReducer 이다. 이 훅 함수를 통해서 상태 업데이트를 바깥에 작성할 수도 있고 심지어 다른 파일에 작성 후 불러와서 사용할 수도 있다. useReducer Hook 함수를 사용해보기전에 우선 reducer 가 무엇인지 알아보겠다. reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다. function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } reducer 에..

리액트에서 데이터 흐름을 컨트롤 하는 방법(state 관리하는 법)은 여러가지가 있다. state 와 props 를 사용해서 컴포넌트 간에 전달 React Context 사용 mobx 사용 redux를 사용 등등등... 이중에서 우리는 Context 에 대해서 알아보자. Context context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있다. context를 이용하면, 트리 단계마다 명시적으로 ..