dukDukz

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 = () =>..

# 오늘의 목적 React 를 배운다기보다 Next 기본구조 정도 배운다 (라우터 만들기... 링크 어떻게 거는지) # Blog 폴더 생성 - 안에 back , front 폴더 생성 # 작업할 디렉토리까지 접근해야함 - front 폴더 까지 들어감 # node js 환경에서 작업할거니까 npm init (node js 환경으로 만들어준다) # npm install next react react-dom # package.json 을 수정함 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"next dev -p 3001 -H 0.0.0.0", "build":"next build", "start":"next start", "l..

1. ec2 아마존 로그인하고 2. 가비아 도메인 관리 (서비스 관리 - 관리툴) back 13.124.13.101 front 3.38.26.47 ------------------------------------------ # local server $ npx webpack build 가 완료 되면 하나의 폴더 (dist) 가 생긴다. 이렇게 하면 index.html 을 liver server 로 열 수 있다. 이렇게 했을 때 오류가 난다면 $ npm install -g webpack $ npm install -g webpack-cli $ npx webpack app.js 코드만 읽어서 우리가 만든 코드가 잘 번들이 된것 ----------------------------------------------..

# backend 설치 해야 할 것들 node js mysql # front end 설치해야 할 것들 node js nginx # webpack 부분에 대해 잘못 알고 있는것 webpack 은 서버가 아니다!!! 이것은 단순히 build 만 해주는 녀석이고 다양한 js css 같은 파일을 하나의 js와 css 파일로 묶어주는 녀석이지 서버가 아니다. 그저 dev server 개발서버 일 뿐이다. 즉 생성을 해주는 녀석이다. # nginix 80번 포트를 열어서 html 가져와서 link rel 읽어서 css 까지 가져오게 해주는 녀석이 nginx 이다. 실무에서 많이 씀 환경설정만 하면 된다. # front-end 설정 - node js 까지는 설치 해줘야 함 $ sudo apt-get update $ ..