리액트

[VanillaJS, React] 마우스 따라다니는 원 만들기(feat. requestAnimationFrame)

잘 만들어진 인터랙티브 웹들을 보며 저건 어떻게 만드는걸까 항상 궁금했었다. 인프런을 둘러보다가 몇 줄로 끝내는 인터랙티브 웹 개발 노하우라는 강의를 발견했고, 기초적인 것들을 만들어봐야겠다고 생각했다. 몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편] - 인프런 | 강의 짧은 시간에 실무에서 가장 많이 사용하는 인터랙티브 스킬을 알려드립니다., - 강의 소개 | 인프런 www.inflearn.com 가장 첫 실습인 마우스를 따라다니는 원 만들기를 해보려고 한다. VanillaJS로 구현해보기 HTML 먼저 box라는 클래스명을 가진 div를 하나 만들어준다. CSS .box { background-color: lightgray; border-radius: 50%; width: 80px; height..

[React] Storybook 사용해보기

프로젝트 세팅 https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/ Storybook Tutorials Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community. storybook.js.org 스토리북을 기존 프로젝트에 추가하려면 아래 커맨드를 터미널에 입력해주면 된다. npx storybook init 설치가 끝나면 자동으로 기본 세팅이 되어있는 것을 확인할 수 있다 아래..

React Infinite Carousel 만들기(TS)

저번에 과제를 진행하면서 캐러셀을 직접 구현해보았다. 생각보다 고려할 부분도 많았지만 재밌었다 :) 일단 좌, 우 버튼을 클릭해 양쪽으로 이동할 수 있고, 옆으로 넘기는 방식의 터치 이벤트로도 이동할 수 있도록 구현했다. React 무한 캐러셀 구현 Home/index.tsx import Carousel from 'components/Carousel' const CAROUSEL_IMAGES = [ 'https://img.freepik.com/free-photo/vivid-blurred-colorful-background_58702-2545.jpg', 'https://img.freepik.com/premium-vector/abstract-pastel-color-background-with-pink-purp..

[React] [nodejs] req.body 데이터 undefined 오류 해결(FormData undefined)

Node.js와 React를 통해 프로젝트를 하던 중 오류가 발생했다. React와 Node.js를 활용한 고객 관리 시스템 개발 - 구름EDU 리액트와 node.js를 이용해 웹 기반의 고객 관리 시스템을 개발해봅시다. edu.goorm.io 위 링크의 강의를 듣고나서 회원가입 페이지를 구현했는데, 같은 방식으로 로그인 기능을 구현하려니 오류가 발생했다. 기존의 오류가 발생한 코드는 아래와 같다. FormData에 userid, userpw를 추가해 post해 주는 방법을 썼다. 그러나 서버 쪽에서 정보를 받을 때 req.body 데이터가 계속 undefined로 나왔다. (ㅠㅠ)( body-parser도 썼는데 오류가 발생했었다. ) login = (e) => { e.preventDefault() c..

React의 LifeCycle

LifeCycle method는 React component의 생성부터 소멸까지 일련의 이벤트들이라고 할 수 있다. 리액트의 모든 이벤트는 lifecycle을 지난다. 1. Mounting 2. Updating 3. Unmounting 1. Mounting - 컴포넌트가 생성될 때, 다음과 같은 순서대로 호출된다. constructor() static getDerivedStateFromProps() render() componentDidMount() constructor() - React component의 constructor()는 컴포넌트가 마운트되기 전에 호출된다. 보통 개체를 this.state에 할당하여 로컬 상태를 초기화하거나, 인스턴스에 이벤트 처리기 메소드를 바인딩할 때 사용한다. 그리고 ..