dukDukz

# 클릭시 해당 글만 가져오는 .../posts/1 해당 id 값만 가져오는 /pages/posts/[id].jsx 생성 이전에는 이렇게 했었지. 더보기 import { useRouter } from "next/router" const Post = ()=>{ const router = useRouter() const {id} = router.query return( hello {id} ) } export default Post 이거를 서버사이드렌더링으로 바꿔보자구! import wrapper from "../../Providers/createCtx" import { GET_POSTS_DETAIL } from "../../reducers/post" import { END } from 'redux-saga'..

[post.jsx] import wrapper from '../Providers/createCtx' import { GET_POST } from '../reducers/post' import { END } from 'redux-saga' import { useDispatch, useSelector } from 'react-redux' import { useEffect } from 'react' import Link from 'next/link' const posts = () =>{ const dispatch = useDispatch() const {posts} = useSelector(state => state.post) const postLink = posts.map((v,k)=>{ return( {/..

git clone https://github.com/hyejjun/Next_Redux_Setting.git # Next 사용하기 npm init // node js 개발환경 만들기 npm i react react-dom next pages 폴더 만들기 index.jst 파일 생성 해서 테스트 해보기 실행하려다 보니 npm run dev 명령어가 없어서 package.json 에 작성해줌 "scripts": { "dev" : "next dev", "build" : "next build", "start" : "next start" }, pages 폴더 안에 _app.jsx 만들어줌 그 전과 다르게 pageProps 내용을 삽입함 styleComponent 때문에 _document.jsx 파일과 babel 설..

[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 는 미들웨어를 장착해주는 녀석 그래서..

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