dukDukz

# 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 코드만 읽어서 우리가 만든 코드가 잘 번들이 된것 ----------------------------------------------..

import React from 'react' import styled from 'styled-components' const ButtonStyle = { 'background' : 'black', 'border' : 'none', 'color' : 'white', 'padding' : '7px 14px' } const Button = styled.button` background : #000; border : none; color : white; padding : 7px 14px; ` const ButtonHover = styled(Button)` background : #007bff; :hover{ background : #0069d9; } ` const Index = () =>{ const inpu..

[구조] Layout 컴포넌트 안에 LoginBox LoginBox 컴포넌트 안에 Login Login 컴포넌트 안에 Button 여기에는 화면에 표출될 내용이 들어간다 이렇게 되어있는 컴포넌트를 LayoutContext로 묶어주었다. 이렇게 하면 최하위 컴포넌트에서 상태값을 전달전달 해서 받는것이 아니라 바로 사용할 수 있게 된다. 그리고 LayoutStore라는 틀만 사용해서 상태값을 만든다. Layout.jsx import React from 'react' import LayoutStore, { LayoutContext } from './LayoutContext' const Button = () => { const context = React.useContext(LayoutContext) retur..

import React from 'react' const reducer = (number, action) =>{ switch(action.type){ case 'UP': return number+1; case 'DOWN' : return number-1; default: return number; } } const Counter = () => { const [number, dispatch] = React.useReducer(reducer, 0) const onUP = () => { dispatch({ type: 'UP' }) } const onDown = () => { dispatch({ type: 'DOWN' }) } return ( {number} +1 -1 ) } export default Coun..

useReducer 상태관리 useState랑 비슷하다 상태를 변경하는 로직을 다른 곳에서 처리할 수 있다. 상태관리 할때 객체를 사용할 수 있어서 편리하다. Context Props 하위 컴포넌트에 보내는것이 까다로웠는데 이거를 편리하게 해준다 webpack5/component/counter 폴더 생성 * useReducer const [변수명,dispatch] = React.useReducer() const [number, dispatch] = React.useReducer(reducer,0) 구조 : 함수 number 라는 값을 바꾸기 위해서 dispatch를 써야한다 reducer를 쓸때는 컴포넌트 밖에다 놓자 dispatch는 setState 쓰듯이 쓰면 된다 dispatch({ }) dispa..

import React, { useState, useMemo, useCallback } from 'react' const Memo = () => { const [username, setUsername] = useState('') //React 가 빠진 이유는 위에 import 때문 const [list, setList] = useState([]) const change = (e) => { let { value } = { ...e.target } setUsername(value) } const submit = (e) => { e.preventDefault() const newList = [...list] newList.push(username) setList(newList) setUsername('') }..