개인 블로그 정리
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요 선생님 혹시 강의를 듣고 정리한 내용을 개인 블로그에 게시해도 될까요??
- Next.js
- redux
- react
- tdd
- next.js
- typescript
kwonhd
댓글 1
좋아요 0
조회수 482
묻고 답해요
172만명의 커뮤니티!! 함께 토론해봐요.
이렇게 코드 짜도 되나요?
미해결
파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)
강사님 안녕하세요. 강의 잘 듣고 있습니다. 감사합니다. 세가지 질문이 있습니다. 1. 아래와 같이 코드 짜도 되나요? 2. 코드가 맞다면, 제가 탐색 알고리즘 원리로 푼게 맞나요? 3. 강사님 코드가 더 효율이 높다고 보면 되는건가요? 이정도 차이면 코딩테스트에서 큰건가요? - 제 코드 실행시간: 0.00021576881408691406 - 강사님 코드 시간: 0.00020885467529296875
- 코딩-테스트
- 코테 준비 같이 해요!
- python
홍푸름
댓글 2
좋아요 1
조회수 799
yarn generate 에러
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Invalid Custom Plugin "typescript" 라면서 에러가 뜹니다 어떻게 해결해야 할까요?
- Next.js
- node.js
- nodejs
- seo
- react
- next.js
- graphql
cheolung
댓글 1
좋아요 1
조회수 721
파이참 gutter 색상이 너무 궁금합니다.
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
파이참 사용시 좌측처럼 코드가 있는부분은 색상이 다르던데 이건 어떻게 해야할까요? 강의 듣다가 이게 궁금해서 계속 옆길로 빠지게 됩니다 ;;;
- python
- docker
- react
- django
히징징
댓글 1
좋아요 0
조회수 374
8:24분경 코드 오류나서 수정하셨는데!
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
8분 20초경 오류나서 코드를 수정하셨는데, case ADD_POST_TO_ME: return { ...state, me: { ...state.me, // 이부분 왜 추가한건가요? Posts: [{ id: action.data }, ...state.me.Posts], }, }; 코드 주석부분 왜 추가하신건가요..? const dummyUser = (data) => ({ ...data, nickname: "wewewe", id: 1, Posts: [{ id: 1 }], Followings: [{ nickname: "we1" }, { nickname: "we2" }, { nickname: "we3" }], Followers: [{ nickname: "we1" }, { nickname: "we2" }, { nickname: "we3" }], }); dummy데이터 구조를 보면 Posts를 제외한 nickname, id, Followings 등 변하지 않는 데이터들의 불변성을 유지하기 위해서 추가한것이 맞는건가요?!
- nodejs
- node.js
- redux
- express
- react
- next.js
- Next.js
뽀개즈아
댓글 1
좋아요 0
조회수 302
선생님 세그멘테이션관련 질문을 드립니다 ㅎ
미해결
[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
선생님 안녕하세요 이번에 선생님강의 머신러닝2개, 컴퓨터비젼2개를 모두 완강한 열혈팬 회사원입니다 ㅎㅎㅎ 선생님 강의 덕분에 이번에 회사에서 세그멘테이션을 담당하게 되엇는데, 세그멘테이션강의관련 질문이 잇어서 이렇게 메일을 드립니다 ㅎ 바쁘시겟지만 조언 좀 부탁드리겟습니다 <배경> 이번에 검출할 객체(첨부파일)는 바늘과 같이 아주 가늘고 긴 객체(섬유)인데 이미지1장당 객체전체면적이 0.5 - 2%밖에 없는 아주 미세한 객체입니다. 실제원본데이터에서도 객체는 눈으로 자세히 보아야 검출할수 잇을정도입니다 ㅎ (학습데이터30장, 학습마스크영상 30장, 테스트데이터 5장 ). 사용모델은 깃헙에서 공개한 U-NET모델로 세그멘테이션을 수행햇는데, 첫epoch부터 정확도가 90%이상, 로스가 0.1이하로 상당히 높은 성능을 보엿는데 예측결과이미지영상에는 아무것도 검출이 안된 상태(완전검은영상)입니다. 참고로 다른 이미지데이터를 가지고 U-NET모델로 세그멘테이션을 수행해본결과 예측결과도 상당히 잘되어서 모델에는 문제가없는것으로 판단햇습니다. 여기서 조언을 좀 부탁드리겠습니다. 1> 정확도는 90%이상, 로스가 0.1이하인데 아무것도 검출이 안되엇다는 것은 , 객체가 너무미세해서 검출을 못한걸로 이해해도 되는지요? 2> 이런경우 성능을 올리기 위한방법으로 오그멘테이션방법도 잇는데, 특히 사용해야할 오그멘테이션방법이 잇는지요? 참고로 확대기능등을 사용햇습니다. 3> 다른방법으로 선생님CNN강의에서사용한 mark-rcnn 방법도 해볼려고 하는데, 어떻게 생각하시는지요? 글을 적다보기 글이 너무 길어져서 죄송합니다, 바쁘시겟지만 조언 좀 부탁드리겟습니다 ㅎ
- 머신러닝
- tensorflow
- 딥러닝
- 컴퓨터-비전
- keras
- python
- 컴퓨터-비전
- 딥러닝
- 머신러닝 배워볼래요?
anycad11
댓글 1
좋아요 0
조회수 422
안녕하세요.
해결됨
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. 질문 있습니다. 강의에서는 SWR을 쓰시는데 공부할때는 react-query를 쓰려고 합니다. 이유는 생태계가 더 큰 라이브러리를 사용할 목적이었는데 알려주신 npm trends에 검색해보니 둘 다 비슷비슷하더라고요. SWR도 아직 많이 쓰이는 추세인가요??? 궁금한 이유는 react-query 외에도 추가로 하나의 라이브러리를 동시에 더 써볼 생각이라 추천해주시면 감사합니다. 추가로 수업 외 질문으로 유틸리티 라이브러리?를 하나 써보려고 합니다. 기존에는 fxjs를 사용 중이었습니다. npm trends를 보니 가장 많이 사용하는 라이브러리는 lodash, rxjs인 것 같고 lamda도 많이 쓰는거 같고 타입스크립트로 된 fp-ts도 있는거 같은데 fp-ts를 제외한 것들 중 추천해주시는게 있을까요? 감사합니다!!
- 웹팩
- babel
- socket.io
- Socket.io
- typescript
- 클론코딩
- react
- 클론코딩
Milkyway
댓글 1
좋아요 0
조회수 471
우분투에서 작업시 윈도우로 mysql 설치하는 것에 관해서
미해결
[리뉴얼] React로 NodeBird SNS 만들기
제로초쌤 제가 우분투에서 Nodebird를 진행하고 있는데 더북에 써져있는 거처럼 리눅스(우분투)에서 설치하는 방법 그대로 설치하다가 Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (13) 소켓 에러가 계속 나서 해결하려고 인터넷에 찾아보면서 따라하고 있는데 해결이 안되서 혹시 윈도우로 mysql설치해서 진행해도 크게 차이가 없을까요?
- redux
- react
- node.js
- nodejs
- express
- next.js
- Next.js
CJW
댓글 2
좋아요 0
조회수 421
Cannot read properties of undefined (reading 'map')
미해결
Slack 클론 코딩[실시간 채팅 with React]
제로초님, 코드를 따라친 후에 로그아웃을 하고 다시 로그인 하면 이런 에러메세지가 뜹니다. 그런데 네트워크 탭을 보면 로그인이 정상적으로 된거 같아서 새로고침을 하면 에러 메세지가 사라지고 슬랙에서 로그인된 화면이 제대로 뜹니다. 근데 또 여기서 워크스페이스를 생성하려고 하면 콘솔에 axioserror메세지가 떠서 어떻게 해야될지 모르겠습니다.. Workspace/index.tsx import axios from "axios"; import React, { FC, useCallback, useState } from "react"; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; import { Navigate, Routes, Route } from "react-router-dom"; import { AddButton, Channels, Chats, Header, LogOutButton, MenuScroll, ProfileImg, ProfileModal, RightMenu, WorkspaceButton, WorkspaceName, Workspaces, WorkspaceWrapper } from "@layouts/Workspace/style"; import gravatar from 'gravatar'; import loadable from '@loadable/component'; import Menu from "../../components/Menu"; import Modal from "../../components/Modal"; import { Link } from "react-router-dom"; import { IUser } from "@typings/db"; import { Button, Input, Label } from "@pages/SignUp/styles"; import useInput from "@hooks/useInput"; import {toast} from 'react-toastify'; const Channel = loadable(() => import('@pages/Channel')); const DirectMessage = loadable(() => import('@pages/DirectMessage')); const Workspace: FC<React.PropsWithChildren<{}>> = ({children}) => { const [showUserMenu, setShowUserMenu] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); // revalidate = 서버로 요청 다시 보내서 데이터를 다시 가져옴 // mutate = 서버에 요청 안보내고 데이터를 수정 const {data: userData, error, mutate} = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, }); const onLogout = useCallback(() => { axios.post('/api/users/logout', null , { withCredentials: true, }) .then(() => { mutate(false, false); }) }, []); const onClickUserProfile = useCallback((e: any) => { e.stopPropagation(); setShowUserMenu((prev) => !prev); }, []) const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []) const onCreateWorkspace = useCallback((e: any) => { e.preventDefault(); // 띄어쓰기도 검사해줘야됨 if(!newWorkspace || !newWorkspace.trim()) return; if(!newUrl || !newUrl.trim()) return; axios.post('http://localhost:3095/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }) .then(() => { mutate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }) .catch((error) => { console.dir(error); // 에러가 나면 사용자가 인지하게 해줌 toast.error(error.response?.data, { position: 'bottom-center' }) }) }, [newWorkspace, newUrl]) const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); }, []) if(!userData) { return <Navigate to="/login" /> } if(!userData) return null; return( <div> <Header> <RightMenu> <span onClick={onClickUserProfile}> <ProfileImg src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} /> {showUserMenu && <Menu style={{ right: 0, top: 38 }} show={showUserMenu} onCloseModal={onClickUserProfile}> <ProfileModal> <img src={gravatar.url(userData.nickname, { s: '36px', d: 'retro' })} alt={userData.nickname} /> <div> <span id="profile-name">{userData.nickname}</span> <span id="profile-active">Active</span> </div> </ProfileModal> <LogOutButton onClick={onLogout}>로그아웃</LogOutButton> </Menu>} </span> </RightMenu> </Header> <WorkspaceWrapper> <Workspaces> {userData?.Workspaces.map((ws) => { return ( <Link key={ws.id} to={`/workspace/${123}/channel/일반`}> <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton> </Link> ); })} <AddButton onClick={onClickCreateWorkspace}>+</AddButton> </Workspaces> <Channels> <WorkspaceName>Sleact</WorkspaceName> <MenuScroll>menu scroll</MenuScroll> </Channels> <Chats> <Routes> <Route path="/channel" element={<Channel />} /> <Route path="/dm" element={<DirectMessage />} /> </Routes> </Chats> {/* Input이 들어있으면 별도의 컴포넌트로 빼는 것을 추천(input에 글자를 입력할 때마다 여기 있는 함수들이 다 리렌더링 되기 때문에 비효율적) */} </WorkspaceWrapper> <Modal show={showCreateWorkspaceModal} onCloseModal={onCloseModal}> <form onSubmit={onCreateWorkspace}> <Label id="workspace-label"> <span>워크스페이스 이름</span> <Input id="workspace" value={newWorkspace} onChange={onChangeNewWorkspace} /> </Label> <Label id="workspace-url-label"> <span>워크스페이스 이름</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> </div> ) } export default Workspace; Modal/index.tsx import React, { useCallback, FC } from "react"; import { CloseModalButton, CreateModal } from "./style"; interface Props { show: boolean; onCloseModal: () => void; children: React.ReactNode; } const Modal: FC<Props> = ({show, children, onCloseModal}) => { const stopPropagation = useCallback((e: any) => { e.stopPropagation() }, []); if(!show){ return null; } return( <CreateModal onClick={onCloseModal}> <div onClick={stopPropagation}> <CloseModalButton onClick={onCloseModal}>×</CloseModalButton> {children} </div> </CreateModal> ); }; export default Modal; swr2.0 버전, react v18, typescript v18 swr을 최신버전 사용해서 revalidate대신 mutate를 사용했는데 제가 잘못 사용한건지 모르겠습니다.
- 클론코딩
- babel
- typescript
- socket.io
- 웹팩
- react
- 클론코딩
- Socket.io
성창수
댓글 2
좋아요 0
조회수 1887
length 오류
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
콘솔 결과와 error가 같이 출력됩니다!
- html/css
- react-native
- react
- express
- node.js
- nodejs
- 머신러닝
- javascript
- 머신러닝 배워볼래요?
- tensorflow
- HTML/CSS
유영
댓글 1
좋아요 0
조회수 739
body : ReadableStream 관련 문의드립니다.
해결됨
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
안녕하세요. 2강 진행 중 상품목록 조회시 msw Response 결과에 대한 body 값이 ReadableStream 으로 넘어옵니다. 이 경우 body 의 data를 확인할 방법이 있을까요? 답변 부탁드립니다. 감사합니다.
- react
- graphql
- firebase
kylor
댓글 1
좋아요 0
조회수 856
webp 확장자질문
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
강사님 안녕하세요 좋은강의 잘 수강중인 학생입니다. 강의중에는 클라이언트에 저장된 확장자 2개의 이미지를 사용해서 분기처리를 하셨는데요, 서버에서 받아오는 이미지파일을 분기처리 할려면(webp를 지원하지않는 브라우저를 위해) webp파일 이미지와 jpg(또는 png) 파일 이미지 총 2개 파일 이미지를 보내줘야 분기처리가 가능한가요? 아니면 서버에서 1개의 확장자 이미지를 보내주면 jpg -> webp 또는 webp->jpg로 바꾸어서 분기처리 하는방법은 없을까요?
- react
- devtools
형우리
댓글 1
좋아요 1
조회수 440
react-router-dom link클릭시 이동이 안되는 오류
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 강사님 해당 상품을 클릭했을때 url은 바뀌지만 상품상세페이지로 화면은 바뀌지 않는 오류가 발생했습니다(새로고침하면 화면이 바뀌긴 합니다) 다른 수강생들의 비슷한 질문답변을 참고하여 <React.StrictMode>를 지워도보고 react-router-dom 버전도 5.2.0이고 Route path도 "/products/:id"라고 적었는데 여전히 오류가 해결되지 않습니다 https://github.com/kanghanju/grab-market-client/commit/01c0657f4f64398b47493c1b2c3b44836bf1a785# 여기는 Link태그 해당 수업코드 파일입니다!
- html/css
- HTML/CSS
- 머신러닝 배워볼래요?
- node.js
- react
- react-native
- nodejs
- 머신러닝
- tensorflow
- express
- javascript
한조
댓글 2
좋아요 0
조회수 1588
네이버 항공권 관련 제가 작성한 코드 조심스럽게 공유해드립니다.ㅜ
미해결
파이썬 무료 강의 (활용편3) - 웹 스크래핑 (5시간)
안녕하세요 먼저 좋은 강의 해주시는 나도코딩님께 감사드립니다. 이전에 나름 정성들여 글을 작성했는데, 확인이 안돼서 다시 작성해봅니다. 제가 강의를 보고있는 2023년 1월 19일과 강의날인 2020년 8월과 네이버 항공권 인터페이스가 많이 상이하고, 셀레니움과 파이썬 버전이 달라 저의경우 아래와 같이 코드를 작성했습니다. 다른분들께 도움이 되었으면 좋겠습니다. 현재 저의 환경의 경우 python버전 3.10.7 버전이고 selenium또한 강의때 사용하신것 보다 더 높은 것으로 보입니다. 현재 제 경우와 강의내용과 상이한 부분은 아래와 같습니다. 네이버 항공권 진입시, "지금 바로 혜택 확인하기" 광고 팝업창 발생, 해당부분 get_attribute메소드를 사용해 title을 비교해, 팝업이 있다면 팝업을 삭제하는 XPATH를 확인해 해당 엘리먼트를 클릭하도록 구현 browser.find_element_by_class_name과 같이 find_element_by_~~ 메소드 사용불가 => 현재 제가 사용중인 셀레니움 버전이 상위 버전으로 보이는데, 이는 3 line과 같이 import By로 쉽게 수정 가능 find_elements_link_text 메소드 사용 불가 => 2020년대비 2023년 현재 네이버 항공권 웹페이지 인터페이스의 변화때문인지 "가는 날" 및 날짜 선택을 위해 해당 메소드 사용시 빈리스트만 반환 "가는 날"은 XPATH로 엘리먼트를 얻어와 클릭하도록 구현 원하는 날짜의 경우 class이름을 확인해 모든 날짜정보를 갖고와 원하는 날짜정보만 사용하도록 구현 (compute_date 함수 참고 부탁 드립니다.) 추가적으로, 이 경우에 1년치 달력정보를 모두 읽어와 속도가 매우 느린데 더 좋은 방법을 알고계신분은 공유 부탁드립니다. ( _ _ ) compute_date(dates, 30)[1].click() 코드를 이렇게 수정해 오는날을 2월 30일을 선택하려 했으나 3월 30일을 선택해, 코드 오류인줄 알고 디버깅해보니 2월달은 30일이 없었습니다...ㅎ 정상동작 중 입니다. 저와같이 초반에 고생하시는 분들께 조금이나마 도움이 되었으면 좋겠습니다. 감사합니다. import time from selenium import webdriver from selenium.webdriver.common.by import By URL = "https://flight.naver.com/" def compute_date(dates, target) -> list: print("compute entire date information from current month to limit") return [date for date in dates if date.text == str(target)] browser = webdriver.Chrome() # browser.maximize_window() browser.get(URL) time.sleep(1) # remove AD popup find = browser.find_elements(By.CLASS_NAME, "anchor") for f in find: if f.get_attribute("title") == "지금 바로 혜택 확인하기": browser.find_element(By.XPATH, '//*[@id="__next"]/div/div[1]/div[9]/div/div[2]/button[1]').click() print("remove pop up") break # push 가는 날 button also delay 1 sec is necessary, if don't use this, can not read date information. browser.find_element(By.XPATH, '//*[@id="__next"]/div/div[1]/div[4]/div/div/div[2]/div[2]/button[1]').click() time.sleep(1) # read date information and push 25 day dates = browser.find_elements(By.CLASS_NAME, "sc-evZas dDVwEk num".replace(" ", ".")) compute_date(dates, 25)[0].click() # read date information and push 30 day dates = browser.find_elements(By.CLASS_NAME, "sc-evZas dDVwEk num".replace(" ", ".")) compute_date(dates, 30)[0].click() while True: pass
- selenium
- python
- 웹-크롤링
- 웹 스크래핑
박재현
댓글 2
좋아요 7
조회수 2584
편집
미해결
프로젝트로 배우는 React.js
72번째 강의 초반부 편집오류 있습니다.
- es6
- react
- redux
댓글 1
좋아요 0
조회수 323
비동기문제
미해결
프로젝트로 배우는 React.js
강의에서는 toast가 비동기적으로 실행되는것을 해결하기 위해 useRef를 활용했는데 혹시 async나 promise로도 해결이 가능한건가요?
- react
- es6
- redux
댓글 1
좋아요 1
조회수 320
playground api-docs 질문
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
playground에서 api-docs가 강의에 있는 docs랑 다릅니다 같게 할 방법이 있을까요?
- seo
- react
- graphql
- nodejs
- Next.js
cheolung
댓글 2
좋아요 0
조회수 446
DB 연결 성공 후 테이블 까지 만들었습니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
그런데 테이블을 선택해서 코드를 보려면 자꾸 workbench가 팅겨서 꺼집니다 ㅠㅠ 코드를 깃허브에 있는 class형 함수를 긁어서 사용해서 문제가 되는걸까요..?ㅠㅠ 아래는 오류창입니다..
- redux
- nodejs
- react
- express
- Next.js
hyuri
댓글 2
좋아요 1
조회수 557
HistoryListView 구현 시 KeywordListView 상속 받는 것에 관련해 문의드립니다.
해결됨
[React 1부] 만들고 비교하며 학습하는 React
안녕하세요. 강사님께서 강의에서 HistoryListView 클래스를 작성하실 때 KeywordListView를 상속 받아서 작성하셨는데요. 실무에서도 이와 같이 비슷한(동일한 수준의) 클래스 중 하나를 먼저 구현하고 이를 상속 받아 다른 클래스를 만드는 경우가 흔히 있나요? 저는 아래와 같이 공통의 기능을 갖고 있는 또 다른 클래스 (ex. ListView)를 만들고, 각 클래스들(ex. KeywordListView, HistoryListView)이 이 공통의 클래스를 상속받는 것이 좋을 것이라고 생각했었거든요. KeywordListView -> ListView -> View HistoryListView -> ListView -> View 강사님께서 사용하신 방법 대로 하면 기존의 코드를 최대한 활용할 수 있다는 장점은 있지만 서로 동일한 수준의 클래스가 서로 상속을 받게 되는 것 같아서요.
- react
- MVC
JIYEON KIM
댓글 1
좋아요 -2
조회수 391
사가 모든 설정 후 로그인시 오류
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
강사님 모든 코드를 수정한 후 로그인하려고 하는데 아이디, 비밀번호 입력 후 누르면 로그인이 되지 않습니다. 콘솔창에 에러도 나타나지 않아서 어디가 틀렸는지 모르겠네요. 몇개파일의 코드 같이 올려드립니다. 아래는 로그인 안되는 화면캡처본입니다. LoginForm.js import React, { useCallback, useMemo } from "react"; import Link from "next/link"; import { Form, Input, Button } from "antd"; import styled from "styled-components"; import useInput from "../hooks/useInput"; import { useDispatch, useSelector } from "react-redux"; import { loginRequestAction } from "../reducers/user"; const FormWrapper = styled(Form)` padding: 15px; `; const LoginForm = () => { const dispatch = useDispatch(); const { isLoggingIn } = useSelector((state) => state.user); const [id, onChangeId] = useInput(""); const [password, onChangePassword] = useInput(""); const style = useMemo(() => ({ marginTop: 10 }), []); const onSubmitForm = useCallback(() => { console.log(id, password); dispatch(loginRequestAction({ id, password })); }, [id, password]); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <Input name="user-id" value={id} onChange={onChangeId} required></Input> </div> <div> <label htmlFor="user-password">비밀번호</label> <Input name="user-password" value={password} onChange={onChangePassword} required ></Input> </div> <div style={style}> <Button type="primary" htmlType="submit" loading={isLoggingIn}> 로그인 </Button> <Link href="/signup"> <a>회원가입</a> </Link> </div> </FormWrapper> ); }; export default LoginForm; reducers-user.js export const initailState = { isLoggingIn: false, // 로그인 시도중 - 로딩창을 띄우기위해 isLoggedIn: false, isLoggingOut: false, // 로그아웃 시도중 me: null, signUpDate: {}, loginData: {}, }; // 로그인 액션 create export const loginRequestAction = (data) => { return { type: "LOG_IN", data, }; }; export const logoutRequestAction = () => { return { type: "LOG_OUT", }; }; const reducer = (state = initailState, action) => { switch (action.type) { case "LOG_IN_REQUEST": console.log("reducers login"); return { ...state, isLoggingIn: true, }; case "LOG_IN_SUCCESS": return { ...state, isLoggingIn: false, isLoggedIn: true, me: { ...action.data, nickname: "가나다" }, }; case "LOG_IN_FAILURE": return { ...state, isLoggingIn: false, isLoggedIn: false, }; case "LOG_OUT_REQUEST": return { ...state, isLoggingOut: true, }; case "LOG_OUT_SUCCESS": return { ...state, isLoggingOut: false, isLoggedIn: false, me: null, }; case "LOG_OUT_FAILURE": return { ...state, isLoggingOut: false, }; default: return state; } }; export default reducer; sagas-user.js import { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; function loginAPI(data) { return axios.post("/api/login", data); // 서버에 요청 } function* login(action) { try { console.log("saga login"); yield delay(1000); // 비동기 요청 대신수행 // const result = yield call(loginAPI, action.data); yield put({ type: "LOG_IN_SUCCESS", data: action.data, }); } catch (err) { yield put({ type: "LOG_IN_FAILURE", data: err.response.data, }); } } function logoutAPI() { return axios.post("/api/logout"); // 서버에 요청 } function* logout() { try { yield delay(1000); // const result = yield call(logoutAPI); yield put({ type: "LOG_OUT_SUCCESS", }); } catch (err) { yield put({ type: "LOG_OUT_FAILURE", data: err.response.data, }); } } function* watchLogIn() { yield takeLatest("LOG_IN_REQUEST", login); } function* watchLogOut() { yield takeLatest("LOG_OUT_REQUEST", logout); } export default function* userSaga() { yield all([fork(watchLogIn), fork(watchLogOut)]); } configureStore.js import { applyMiddleware, createStore, compose } from "redux"; import createSagaMiddleware from "redux-saga"; import { createWrapper } from "next-redux-wrapper"; import { composeWithDevTools } from "redux-devtools-extension"; import reducer from "../reducers"; import rootSaga from "../sagas/index"; const configureStore = () => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware]; const enhancer = process.env.NODE_ENV === "production" ? compose(applyMiddleware(...middlewares)) : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper;
- nodejs
- redux
- react
- express
- Next.js
뽀개즈아
댓글 3
좋아요 0
조회수 692
인기 태그
인프런 TOP Writers
- 정현섭 8
- 닉네임 5
- eggmun(문성진) 4
- 박영준 4
- 김보노 3
- Like me black 3
- 꿈이 있는 자유 3
주간 인기글
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- [프로젝트] 앱 출시 목표 6개월간 함께할 사이드 프로젝트 팀원 모집 vsvx13
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv