Web dev/React
-
React / pagination 구현하기Web dev/React 2022. 5. 6. 13:37
리엑트로 퍼블리싱중 페이지네이션을 구현해보았다. 페이지네이션을 만들기전 api를 만들고 axios로 데이터를 불러와 아이템을 만들어주었다. 그부분은 생략하고 작성.. 1. pagination.jsx를 생성한다. 2. list페이지에서 pagination에 props로 아이템갯수를 전달해준다. 1. pagination.jsx list페이지에서 한페이지당 뿌릴 아이템수,총아이템수, 현재페이지를 prop으로 넘겨준다. 그럼 총아이템수/페이지당 뿌릴 아템수로 페이지네이션 숫자를 생성 import React from "react"; import styled from "@emotion/styled"; const PageList = styled.div` display: flex; justify-content: cen..
-
React / aside 기능구현시 page이동 scrollstop 이슈Web dev/React 2022. 4. 29. 17:27
react로 퍼블리싱중 사이드바를 만들고 있었다. aside를 오픈하면 딤드와 함께 뒤에 scroll을 막으려고 body에 클래스를 하나 만들고 overfolw:hidden과 height:100%를 주었다. 문제는 사이드바 링크를 통해 다른페이지로 이동하면 body에 클래스가 그대로 있는것이다. useEffcet로 화면 렌더링이 한번되면 클래스를 없애주도록 하였다. 근데 나는 상품리스트 페이지였는데 같은 페이지에서 다른 카테고리로 가니 이슈가 발생하여 파라미터가 바뀌면 없어지도록 하였다. useParmas로 파라미터를 체크한 후 바뀌면 사이드바를 닫는 함수를 실행시켰다. import React, { useEffect} from 'react' import { Link, useParams } from 're..
-
React / react-helmet 으로 동적으로 meta 태그 바꾸어주기Web dev/React 2022. 4. 29. 11:10
React에서 react-helmet을 이용하여 meta태그를 동적으로 바꾸어 줄 수 있다. og태그를 바꾸어주니 카톡같은걸로 링크를 보낼때 내용을 바꿀 수 있다 React CSR이라서 SEO최적화를 해야하는데 react-helmet만으로는 해결이 안되는것같다. react-snap도 많이쓰던데 업데이트된지 오래되었다고 어떤 한 블로그를 보고 따라할 예정이다. 오늘은 일단 react-helmet 사용방법부터 알아보자. 1. npm설치 2. SEO HOOK 만들기 3. app.js에 HelmetProvider로 감싸기 4. page별로 props 로 내용 전달받기 1. helmet install npm i react-helmet-async 2. SEO HOOK 만들기 src/SEO.js 위치는 src폴더 밑..
-
React / react-router-dom <Link /> 페이지 이동시 스크롤 상단위치 이슈 해결방법Web dev/React 2022. 4. 28. 23:32
리엑트로 포트폴리오 퍼블리싱중이다. 이전에는 몰랐는데 페이지가 하나둘 많아지면서 페이지이동할때 스크롤이 상단이 아닌 중간에 위치하는 이슈가 발견되었다. 리엑트는 SPA이기 때문에 로 이동할 때 이런이슈가 발견된다. 해결법은 간단하다 app.js에서 BrowserRouter 밑에 설정해주면 된다. 브라우저라우터밑에 직접 쓸수도 있지만 깔끔하게 하려고 따로 빼주었다. scrollToTop.jsx import { useEffect } from "react"; import { useLocation } from "react-router-dom"; export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { ..
-
React / useState, useEffect 로 background parallax 구현하기Web dev/React 2022. 4. 28. 23:18
리엑트로 퍼블리싱중이다. scrollmagic을 써볼까하다가 그냥 배너하나 만드는것이라 직접 구현하는법에 대해 공부해봤다. useState와 useEffect 를 사용해서 구현하였다. 1. useState로 scroll 좌표를 받아오고 useEffect로 스크롤 될때마다 이벤트를 준다. 2. 좌표를 opacity 에 적용한다. import React,{useEffect, useState} from 'react' import css from '../../assets/css/main/main.module.css' export default function MainCica() { const [position, setPosition] = useState(0); const windowWidth = window.i..
-
React / scroll stop 하면 나오는 배너 만들기Web dev/React 2022. 4. 16. 15:02
리엑트로 포트폴리오를 만들오 있다. socar 프로모션페이지를 기획하여 만드는중이다. 쏘카 홈페이지도 그렇듯 앱 다운로드로 유도를 한다. 나도 앱다운로드를 유도하는 배너를 만들어 보았다. 움직이면사라지고 멈추면 생기는 배너이다. 클래스를 하나 만들어 스크롤이 멈추면 클래스를 부여하고 움직이면 클래스를 삭제해주었다. 이벤트를 줄때 에러가 자꾸 발생해서 useEffect로 감싸주었더니 에러없이 잘동작했다. import React, { useRef } from 'react' import { useEffect } from 'react'; import { Link } from 'react-router-dom' export default function GoStore() { const goStore = useRef..
-
React / heroku 에 json-server 배포하기 React deployWeb dev/React 2022. 4. 16. 14:19
저번에 AWS EC2에서 react 와 express 로만든 프로젝트를 배포해보았다. 그리고 이번에는 json-server로 api를 만들어 프로젝트를 베포해봤다. 물론 React는 CRA로 만들었다. webpack이니 뭐니 아직 초보라 잘모르겠다..공부할것이 많다. 1. json-server 셋팅 프로젝트 최상위 루트에 서버폴더를 만든 후 api와 index.js를 만들어 서버를 만들것이다. 리엑트 빌드까지 할 것이다. 2.헤로쿠 프로젝트올리기 회원가입 후 프로젝트를 git으로 push할 것이다. 물론 처음해본거지만 깃헙과 비슷한것 같다. 깃헙과 연동도 되어 깃헙에 푸쉬하면 자동으로 업데이트된다 ㅋㅋ 1. json-server 셋팅 json-server 설치 npm i json-server server..
-
React / json-server 로 쉽고 빠르게 API , server 만들기Web dev/React 2022. 4. 16. 13:28
프론트엔드 개발연습을 할 때에 백엔드까지 개발하는것은 번거롭다.. json-server를 사용하면 3분만에 임시서버를 만들 수 있다. 프로젝트 최상위 루트에 api를 만들어준다. data.json { "carList": [ { "id": 1, "name": "올 뉴 투싼", "price": "78000", "manufacture": "17년식", "imageURL": "/images/car-tucson.png", "discount":"20%" }, { "id": 2, "name": "코나", "price": "65000", "manufacture": "19년식", "imageURL": "/images/car-kona.png", "discount":"20%" }, { "id": 3, "name": "셀토스..