728x90 JavaScript/React33 [React] 리액트 풀페이지fullpage.js 적용하기 풀페이지 기능으로 만들어진 웹사이트는 스크롤 하면 페이지 단위로 화면이 스크롤 된다. 설치 npm i react-full-page react-full-page는 기능을 적용시키는 화면은 모두 풀페이지 스크롤 기능이 적용되어야 한다. 사용 import React from 'react'; import { FullPage,Slide} from 'react-full-page'; export default class FullPageExample extends React.Component{ render(){ return( Inner slide Another slide ); } }); html css body { margin : 0; } .section-common { width : 100%; height : 100.. 2023. 5. 7. [React] 리액트 컴포넌트 라이브러리 Material-UI Meterial-UI Material-UI 홈페이지 : https://material-ui.com/ 설치 npm install @mui/material @emotion/react @emotion/styled Material-UI는 Github에서 가장 인기있는 React 오픈 소스 컴포넌트 라이브러리이다. 간단하고 가벼우며 Google의 Material Design 사양에 따라 제작되었다. @material-ui/style로 컴포넌트를 스타일링 할 수 있고 CSS-in-JS 솔루션은 빠르고 확장 가능하며 스타일링 된 컴포넌트와 동일한 이점을 제공한다. Material-UI는 다른 주요 스타일링 솔루션과도 상호 운용이 가능하므로 스타일링을 사용할 필요가 없다. 사용법 1. 사용하고자 하는 항목을 impor.. 2023. 5. 4. [React] 리액트로 만드는 슬라이드 SCSS $color-purple: #8B5CF6; $color-pink: #EC4899; $color-gray: #9CA3AF; $color-black: #1F2937; $card-size: 23rem; body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-image: linear-gradient(45deg, $color-purple, $color-pink); font-family: 'Montserrat', sans-serif; } * { box-sizing: border-box; } .carousel { position: relat.. 2023. 5. 2. [React] 무한 스크롤 Infinite Scroll 구현하기 infinite(=무한)를 구현하는 infinite.jsx와 그를 불러오는 infiniteLanding.jsx로 나뉜다. infinite.jsx import React, {useEffect, useState} from 'react' import Card from '../utils/card/card'; const Infinite = ({posts, fetching, fetchMoreData}) => { const [postInfo, setPostInfo] = useState([]); useEffect(() => { setPostInfo(posts); }, [posts]) const handleScroll = () => { const scrollHeight = document.documentElement.s.. 2023. 4. 25. [React] 리액트 프로젝트 시작할 때 초기화하기 VS Code사용. create-react-app 설치 및 사용 리액트 프로젝트를 만들때는, 페이스북에서 만든 리액트 프로젝트 생성 도구인 create-react-app 을 사용한다. 프로젝트에 필요한 기능만 딱 들어있다. 1. create-react-app 을 설치하려면 일단 글로벌 설치를 한다. yarn global add create-react-app yarn? 더보기 npm과 yarn은 자바스크립트 패키지 매니저이다. yarn이 npm보다 더 나은 점은 다음과 같이 요약할 수 있다. 1. 속도가 더 빠르다. (performance) 2. 보안성이 좋다. (security) npm은 이름 그대로 '노드 패키지 매니저'이다. 런타임 동안 노드 환경에서 쓰이는 다양한 패키지들을 관리한다. npm은 np.. 2023. 4. 24. [React] Framer-motion 애니메이션 라이브러리 Framer-motion은 Framer가 제공하는 리액트용 애니메이션 라이브러리다. 설치 $ npm i framer-motion 사용법 import { motion } from "framer-motion" motion.div 와 같이, HTML 태그 앞에 motion 키워드를 붙여준다. motion 키워드가 붙은 요소를 motion component 라고 한다. 초기 상태를 initial 속성에 객체 형태로 넣고, 애니메이션 할 상태를 animate 속성에 객체 형태로 넣는다. Transitions import "./styles.css"; import { motion } from "framer-motion"; export default function App() { return ( ); } Orchest.. 2023. 4. 21. [React] 리액트 장점과 특징 정리 리액트의 장점 Virtual DOM 사용으로 인해 속도가 빠름 페이스북이 리액트를 발표할 때 사용한 캐치프레이즈, 자바스크립트와 리액트의 간단한 개념만 알면 웹, 앱이 모두 개발 가능 리액트는 자바스크립트 친화적이며, 불변성 관리에 초점을 두고 있는 도구 이미 많은 회사들(넷플릭스, 에어비엔비 및 국내 다양한 업체)이 사용하고 있기 때문에 다양한 라이브러리가 존재하고, 질문과 답변이 활발하게 이루어짐 리액트의 특징 1. 컴포넌트(Component) 구조 리액트는 모든 것이 컴포넌트다. 컴포넌트는 레고 블록과 같이 작은 단위로 만들어서 그것들을 조립하듯이 개발할 수 있게 해주기 때문에 캡슐화, 확장성, 결합성, 재사용성 등과 같은 이점이 있다. 2. 단방향 데이터 흐름 리액트에서는 부모 컴포넌트와 자식 컴.. 2023. 4. 11. [React] 최상단으로 이동하는 버튼 만들기 (Custom Hook) 화면을 페이지 최상단으로 이동시키는 top button을 만들어보자 유저가 scroll을 했을 때 특정 UI가 노출되도록 하는 custom hook을 만들어서 구현해보고자 한다. Top Button view 만들기 스크롤 바 좌측에 위치시켜 유저에게 최상단으로 이동할 수 있는 button이 있음을 알리기 '위로 이동'이라는 의미를 담은 아이콘 부착 버튼을 좌측 하단에 고정시키기 버튼을 좌측 하단에 '고정'시키려면 position 속성을 정해줘야한다. 처음에는 position 속성을 absoulte를 사용하려 했으나 부모 영향을 받게되어서 내가 원하는 위치에 고정시키기 어려웠다. 그래서 스크롤 할 때 부모 위치와 상관없이 항상 그 자리에 고정시킬 수 있는 fixed 속성을 사용하고 botton과 right.. 2023. 4. 6. [React] 라이브러리 - 리액트 페이지마다 타이틀 변경하기 1. react-helmet SPA의 가장 큰 단점이 무엇일까? SEO? 우리는 고정된 타이틀만을 사용할 수 밖에 없다. 왜냐하면 싱글 페이지 내에서 컴포넌트들의 변화만 볼 수 있을 뿐이기 때문이다. react-helmet을 사용하면페이지마다 타이틀을 변경해 줄 수 있다. npm install react-helmet react-helmet을 프로젝트에 import한 후, 위와 같이 헬멧 안에 title 태그와 함께 자신이 적용하고 싶은 타이틀을 적용하면 된다. 2023. 4. 2. [React] 리액트로 댓글 기능 구현하기 JavaScript로 구현한 로그인, 댓글 기능을 React로 바꾸고자 한다. 댓글 기능을 구현하면서 React의 props, state 개념을 이해한다. 댓글을 구현하기 위해 사용한 state userName 같은 경우는 사용자 정보를 받아오지 않고 'hacker'라는 내용을 담아놓고 사용하고 있다. comment는 사용자가 입력하고 있는 댓글이다. 태그에서 onChange를 이용하여 comment 값을 계속 담을 것이다. feedComments는 댓글 리스트를 담으려고 만들었다. isValid는 댓글 게시 가능 여부, 유효성 검사를 위해 만들었다. 유효성 검사를 통과하고 '게시' 클릭 시 발생하는 함수 post 구현 전개 연산자를 통해서 feedComments에 담겨있던 댓글을 받아온다. 기존 댓글 .. 2023. 3. 24. 이전 1 2 3 4 다음 728x90
