Web dev
-
AWS / EC2 ubuntu로 React,Express 배포하기Web dev/AWS 2022. 5. 6. 15:54
포트폴리오를 만드는중에 내 페이지를 어디 배포할지 고민이 생겼다. 깃헙페이지와 헤로쿠로 배포를 해보았고 AWS EC2에 배포를 하는법을 공부해보았다. 나중에 자격증 공부도 해볼것이다 키키 EC2 배포하기 1. AWS 가입 -> EC2 인스턴스 생성 2.EC2 우분투로 생성 -> github 소스 clone해서 빌드 후 실행 처음엔 글이 길어서 어렵다고 생각했지만 하나씩 하다보면 그냥 단계만 많을뿐이다. 1. AWS EC2 인스턴스 시작 인스턴스 시작을 누른다. 1. Amazon Machine Image(AMI) 선택 Ubuntu Server 18.04/20.04 LTS (HVM), SSD Volume Type 선택 우분투서버는 리눅스의 배포판이다. 즉 EC2에서 사용할 프로그램을 선택. 2. 인스턴스 유..
-
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..
-
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..