혼자 적어보는 노트

✅ 오늘의 학습 📌 React (7) - 사용자 정의 Hook 연습하기 UseResize/ useLocalStorage / useForm / useTimeout / useInterval / useDebounce Formik 이전의 useForm hook을 다시 복습하면서 Formik 이라는 form관련 라이브러리에 대해 알아보았다. 간단한 form을 구현할 때 사용하기 좋은 라이브러리이다. import { useFormik } from 'formik'; 한번 사용해보니 강의에서 구현한 useForm과 사용법이 거의 같았다. 하지만 강의에서 구현했을 땐 handlesubmit 이벤트를 발생시켜야 validate를 통한 유효성 검사를 했었는데, formik의 경우에는 handlechange가 발생해도 바로 ..

✅ 오늘의 학습 📌 React (6) - 컴포넌트 연습하기 Flux / Breadcrumb / Tab - 사용자 정의 Hook 연습하기 useScroll / useKey / useClickAway Flux 컴포넌트 12그리드 방식으로 culumn을 나누어서 레이아웃을 잡는 것을 도와주는 컴포넌트. col 컴포넌트에서 span과 offset값을 받아서 아래와 같이 style을 지정하여 12그리드를 구현할 수 있다. const StyledCol = styled.div` max-width: 100%; box-sizing: border-box; width: ${({ span }) => span && `${(span / 12) * 100}%`}; margin-left: ${({ offset }) => offset..

✅ 오늘의 학습 📌 React (5) - 컴포넌트 이해하기 Avatar / Slider / Progress - 컴포넌트 연습하기 Divider / Skeleton / Input / Select Avatar 컴포넌트 컴포넌트명 연결하여 사용하기 Avatar.Group 과 같은 형태로 컴포넌트를 사용하려면 베이스가 되는 Avatar컴포넌트에 따로 등록을 해주면 된다. import AvatarGroup from "./AvatarGroup"; const Avatar = ({ }) => {}; Avatar.Group = AvatarGroup; export default Avatar; children 컴포넌트 가공 React.isValidElement와 cloneElement 활용하여 children을 가공하여 반..

ctrl + shift + p 단축키를 사용 후 Open keyboard shortcuts (JSON) 으로 들어간다. * Default 아님 아래와 같이 작성. [ { "key": "ctrl+n", "command": "explorer.newFile", "when": "explorerViewletFocus" }, { "key": "ctrl+f", "command": "explorer.newFolder", "when": "explorerViewletFocus" } ] * explorer에 focus가 되어있을 때만 해당 단축키가 활성화 된다.

✅ 오늘의 학습 📌 React (4) - emoji 검색기 만들기 - Context API - Upload 컴포넌트 - Badge 컴포넌트 - Icon 컴포넌트 😊 emoji 검색기 만들기 검색기를 만들땐 보통 api를 사용하지만 필요할 때마다 서버에 요청해서 데이터를 가져오는 방식이 아닌 데이터를 미리 한 곳에 작성해두고 불러오는 방식을 사용했다. {emojis .filter((emoji) => emoji.title.indexOf(keyword) >= 0 || emoji.keywords.indexOf(keyword) >= 0) .slice(0, 10) .map((emoji) => ( ))} 키워드에 맞게 emojis를 걸러내고 특정 개수로 자른 형태로 보여지게 만들었다. Clipboard API를 통한..

✅ 오늘의 학습 📌 React (3) - 컴포넌트 연습하기 Image 컴포넌트 intersection observer를 사용하여 viewport에 이미지가 나타날 때 네트워크에 이미지 요청을 하는 방식을 강의에서 다루었다. image 컴포넌트의 기본 형태 export const Image = ({ lazy, threshold = 0.5, placeholder, src, block, width, height, alt, mode, ...props }) => { const [loaded, setLoaded] = useState(false); const imgRef = useRef(null); const imageStyle = { display: block ? "block" : "undefined", width..

Storybook이란 컴포넌트 단위의 개발을 도와주는 툴로서 하나의 컴포넌트가 어떻게 보여지고 어떻게 작동하는지 알 수 있게 해주는 도구 Storybook 공식문서 공식문서에 전부 나와있는 내용이기는 하지만 이번에 강의에서 잠깐 다루어 주셔서 정리를 해보았다. 설치 npx -p @storybook/cli sb init 설치를 완료하면 루트에 .storybook이라는 폴더가 생기고 src안에 stories라는 폴더가 생긴다. storybook: 설정 폴더 stories: 등록된 스토리들을 관리하는 폴더 실행 npm run storybook 명령어를 통해 storybook을 실행하면 브라우저가 나타나며 임시로 작성된 샘플 컴포넌트들이 표시된다. 컴포넌트 등록하기 1. 컴포넌트를 만들고 props를 통해 스타..

npm i 명령어를 통해 무언가를 설치할 때 발생했었던 에러이다. 의존성 트리에 충돌이 났다는 내용인데 대충 에러에 나타난 글을 읽어보니 버전을 맞춰야 하는 듯 했다. 찾아보니 이때 사용했던 craco는 공식적으로 CRA 4까지만 지원하고 있어서 CRA안의 react-script와 craco와 의존성 충돌이 난건가 싶었다. --force 명령어를 통해서 처리했다. 검색해보니 다양한데서 이러한 에러가 나는 것 같아서 몇 번 더 만나게 되면 포스팅을 좀 더 수정해야겠다. 참고로 중간에 npm i --force를 입력했을 때 아래와 같은 내용이 뜨고 진행이 멈추었었는데 idealTree: timing idealTree Completed in 3440ms 열려있는 터미널을 종료하고 다시 실행시키니 해결되었다. ..