dukDukz

front front 에서 고친게 있을때 gamgwi 안에서 $ git fetch origin master $ git pull origin master front 폴더로 들어가서 $ npx next build nginx 실행 $ sudo systemctl stop nginx $ sudo systemctl start nginx $ sudo systemctl status nginx npx 실행 $ sudo npx pm2 kill $ npx pm2 start npm -- start back back 에서 고친게 있을때 gamgwi 안에서 $ git fetch origin master $ git pull origin master back 폴더로 들어가서 nginx 실행 [https 때문에 설치함] $ sudo ..

[configureStore.js] SAGA - 웬만하면 프로젝트 단위가 클 때 사용 많이 한다. - 코드 생산성은 좋지가 않다. - 사용하는 이유 : 코드의 안정성 때문에 많이 쓴다. - function * yeild 로 내 코드가 어디서 오류 났는지 정확히 알 수 있어서 쓰는 경우가 대부분 - 설정하는게 까다로워서 - 설정 : wrapper에 내용을 넣어주기 cd / blog/front 에서 # npm install redux-saga - import createSaga from 'redux-saga' configureStore 미들웨어 넣어놓고 하나는 thunkMiddleware Store = createStore(reducer,enhancer) enhancer 는 미들웨어를 장착해주는 녀석 그래서..

0805 Next 빌드해서 올리는거 https 까지 하는거 - 보안을 위해서 local_front aws_front front 폴더를 github에 올려준다 aws_front 에서 ubuntu 계정을 열어준다 ssh -i "hyejun-laptop.pem" ubuntu@ec2-3-34-51-137.ap-northeast-2.compute.amazonaws.com 한개의 PC에는 한개의 포트만 사용가능 우리가 하려는거는 Next.js express 같은 서버가 하나 존재함. Nginx 는 하나의 웹서버임 # Nginx - 80번 포트로 실행했고 /home/ubuntu/[git저장소이름]/index.html 을 열어달라고 한다. 특정 파일을 열어줄 수 있게끔 해준다. # Next package.json sc..

React 는 redux까지 배워 놓고 응용..! * 제너레이터에 대해.. yield(중지시킨다는 의미) 가 .next() 했을때 value 로 들어가는데 이거를 return 값이라고 생각하면 된다. done : true - 끝남 done : false - 아직 안끝남 * 무한 반복인 경우? const abc = function* () { while(true) { console.log('무한반복') yield } } let a = abc() // 함수를 사용할때는 변수에 담아서. a.next(); 하면 무한반복이라는 콘솔로그가 next를 할때마다 한번씩 찍힌다. # 미들웨어가 왜 필요한가? reducer 라는 값이 상태값을 변하게 해주는 아이인데 reducer에서 처리하기 전에 코드가 실행되는게 미들웨이..

# 0728 [login.jsx] # {...userid} {...userpw} 다시 설명 인자값 defaultValue는 꼭 defaultValue로 써야하는게아니라 아무렇게나 써도 되는거죠? - 넵! 그냥 aaa로 써도 됨 # hooks폴더에 custum hook 분리 # 하나의 파일에는 하나의 기능 - 스크롤의 느낌이 너무 많이 내려간다 싶으면? - 100줄 이상이면 나누는 편이 좋다. [join.jsx] 복습! * 웹 접근성 label img alt input title # Accordion 분리 [NavToggle.jsx] 에 있던 Accordion 을 따로 뼀다 [Accordion.jsx] 하고 porps 값을 따로 보내주었다. * css를 export 뒤에 써도 되나요? - 가능~ # [po..

import Styled from 'styled-components' import { useState } from 'react' const Toggle = Styled.div` background : transparent; border-color : transparent; & > .nav-toggle { display : none; } & > .nav-toggle + label{ display : block; width : 2.5rem; height : 2rem; position : relative; cursor : pointer; } & > .nav-toggle + label > span{ display : block; position : absolute; width : 100%; height : 5p..

import Head from 'next/head' import { useState } from 'react' import FormLayout from '../component/FormLayout' const useInput = (defaultValue) =>{ const [value,setValue] = useState(defaultValue) const onChange = e =>{ const {value} = {...e.target} setValue(value) } return{ value, onChange } } const Login = () => { const userid = useInput('') const userpw = useInput('') const handelSubmit = (e) =..

# Styled Components 환경설정 # 새로고침할때마다 css 가 풀리는걸 방지해보자 # /pages / _document.jsx 생성 import Document from "next/document"; import { ServerStyleSheet } from "styled-components"; export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { // sheet을 사용해 정의된 모든 스타일을 수집 ctx.renderPage = () =>..