분류 전체보기
-
Git / github pull 덮어쓰기Web dev/Git&Github 2022. 5. 6. 12:38
EC2 자동배포에 시도했다가 실패해서 급한대로 pull을 했다.. 1. git pull 덮어쓰기 git fetch --all git reset --hard origin/master 2. master가 아닌 branch로 덮어 쓰기 git fetch --all git reset --hard origin/ // branch로 작업중이였다면 브랜치이름으로 작성 3. 현재 로컬 커밋을 유지하려면 다른 브랜치를 만들어 pull 해주기 git checkout master git branch git fetch --all git reset --hard origin/master
-
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..