wazac

useContext에서 useReducer를 통해 redux처럼 사용해 보도록 하겠습니다. 기능은 간단하게 admin이라는 state를 가지고 true일 때 false일 때 문구만 다르게 출력하도록 하였습니다. 예전에 useContext가 redux를 대체할 수 있을 만큼 편리하다고 하여 작은 프로젝트 하나를 redux를 사용하지 않고 useContex만 사용해서 만들어본 적이 있다. 먼저 context를 작성합니다. import { createContext, useReducer } from "react"; // reducer const initialState = { admin: false } const reducer = (state, action) => { switch(action.type) { cas..

오랜만에 html, css, javascript로 코딩을 해야 하다 보니, 영 기존처럼 하기에는 귀차니즘이 생겨버렸습니다. 😅 그동안은 딱히 관심 갖을 만한 일은 없었으나 귀찮은 건 너무 싫으니 없던 관심이 생기게 되면서 이번 기회에 입문해보려고 합니다. 공식문서를 보고 하나씩 따라하거나 강의를 보고 공부해도 좋지만, 전반적으로 한 번 짧게 겉핥기 식으로 작성해보고 강의를 들으면 이해하는데 좀 더 도움이 되지 않을까 싶습니다. 참조: https://sass-lang.com/ 1. 환경세팅 그럴 리 없겠지만 node가 없다면 설치 기존 버전(node-sass, libsass)는 폐지되었다고 하니 Dart Sass를 사용하라고 하네요. npm install -g sass // 만약 써보고 다시 삭제하고 싶다..

스크롤을 함에 따라 상태바가 스크롤 위치에 따라 변경되며 상태를 보여주는 스크롤 프로그레스 바를 만들어보았습니다. 생각보다 간단해서 공유해보고자 합니다. 우선 마크업을 합니다. 보통은 window 스크롤을 많이 사용하지만 저는 div에 스크롤을 주고 적용해 보려고 합니다. // index.html 0% { ...contents } // style.css html, body, .wrap { width: 100%; height: 100%; overflow: hidden; } .wrap { position: relative; overflow-y: auto; padding-top: 13px; } .barWrap { position: fixed; top: 0; left: 0; width: 100%; height:..

참조: https://ko.reactjs.org/docs/hooks-reference.html#useref useRef는 생각보다 유용합니다. SPA에서는 변화에 따른 렌더링으로 객체에 직접 접근하는 것은 위험합니다. 그렇기 때문에 React에서는 useRef hook을 지원합니다. useRef가 직접 객체에 접근하는 것을 가능하게 해주는 이유는 매번 렌더링을 할 때마다 동일한 객체를 제공한다고 공식문서에 나와있습니다. 반면, state와는 달리 실시간 변화를 감지하여 변화된 값을 리턴하지는 않습니다. 이게 가능하게 하려면 ref를 따로 setState해줘야 합니다. 1. useRef를 통한 timer만들기 참조 : https://dmitripavlutin.com/react-useref-guide/ 타이..

참조 : https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties IE에서는 지원하지 않습니다. 지원이 가능하도록 도와주는css-var-ponyfill이라는 라이브러리가 있긴한데, 아무리 설정해도 해결책을 못 찾았습니다. 좀 더 파보고 해결책이 나오면 추후 포스팅하도록 하겠습니다. element와 root에서 선언함으로써 스코프(scope)를 지정할 수 있습니다. element에서 지정된 변수는 해당 element가 부모가 아니면 적용이 되지 않습니다. :root { --box-size: 50px; } .box1 { --main-color: orange; } :root는 전역을 뜻하고. box1 은. box1을 포함한 하위 ele..

1. emotion keyframes 사용하기 참조사이트 https://www.npmjs.com/package/@emotion/react https://emotion.sh/docs/keyframes emotion/react 에서는 keyframes를 통하여 기존 CSS에서 사용하였던 애니메이션 keyframe을 그대로 사용할 수 있습니다. 먼저 설치를 합니다. yarn add @emotion/react 간단한 사용법 및 런타임에러가 난다면 여기를 참조하세요. 아주 심플한 floating 애니메이션을 만들어 보겠습니다. 먼저 keyframes를 불러옵니다. floating 애니메이션을 만들고, 스타일에 넣어줍니다. 간단한 세팅만으로 기존에 쓰던 CSS대로 사용할 수 있으니 아주 편합니다. 또한 따로 분리해..

react-draggable : https://www.npmjs.com/package/react-draggable react-draggable React draggable component www.npmjs.com 객체를 자유롭게 드래그하는 모션을 찾다가 직접 구현도 해보았지만 렌더하는 과정에서 buffer가 생기는것 같아 라이브러리를 찾아보았습니다. 아주 쉽고 간단한게 사용할 수 있는 라이브러리 입니다. 1. 설치 npm install react-draggable 2. 불러오기 및 적용 import Draggable from "react-draggable"; export default function App() { const [position, setPosition] = useState({ x: 0, ..

1. 에러 발생 원인 react-draggable을 쓸 일이 생겨서 사용하던 중, 동작은 제대로 작동했으나 콘솔에 에러가 떴다. 보다시피 findDOMNode 는 StrictMode에서 제거되었다는 내용이다. StricMode는 React16에서 추가된 모드로 생명주기에 예상치 못한 오류를 발생시키는 것을 방지하고자 한다고 한다. 참조 : https://ko.reactjs.org/docs/strict-mode.html Strict 모드 – React A JavaScript library for building user interfaces ko.reactjs.org react-draggable 같은 경우 직접 개체를 컨트롤하다 보니 발생하는 문제인 것 같다. 2. 해결책 2-1. StrictMode 해제 ..

리액트에서 타이핑 효과를 주고 싶어 알아 보았더니 react-typing-effect과 같은 여러 라이브러리가 있었는데, 저는 좀 더 인공지능 스피커가 말하는 느낌을 주고 싶기도 했고, 구현하기 어렵지 않을 것 같아서 만들어 보았습니다. 기능 1. 뿌릴 텍스트 준비 2. 뿌릴 텍스트 (state) 3. 텍스트 길이 체크 (state) import React, { useState, useEffect } from 'react' const TypingText = () => { const txt = "오늘은 뭐 먹지?"; const [Text, setText] = useState(''); const [Count, setCount] = useState(0); return ( { Text } ) } export d..

1. Select CSS Customizing Select 태그의 외형은 주로 각 브라우저에서 정의 합니다. 보다 시피 크롬(왼쪽), IE(오른쪽) 이 똑같이 보이면서도 미세 하게 다름니다. 공통적으로 둘 다 그리 예쁘게 생기진 않았습니다. 각 프로젝트 별로 스타일에 맞게 css를 통해 외형을 바꿀 수 있습니다. 사이즈나 폰트 컬러 등은 변경이 가능하지만, 일부 제한적으로 통제되기 때문에 (화살표 이미지 등) 약간의 편법(?)을 통하여 외형을 변경 할 수 있습니다. 1-1. Select 기본 화살표 없애기 fruits 🍊 apple orange grape melon /* IE */ select::-ms-expand { display: none; } .select { -o-appearance: none; ..