inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

회원가입 버튼 클릭 시 콘솔창에 입력정보들이 나열되지않습니다.

해결됨

Slack 클론 코딩[실시간 채팅 with React]

정보를 입력 후 회원가입 버튼을 클릭하면 콘솔창에 제로초님 화면처럼 정보들이 나열되지않습니다! -백 콘솔창 Executing (default): SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'BASE TABLE' AND TABLE_NAME = 'ChannelMembers' AND TABLE_SCHEMA = 'sleact' Executing (default): SHOW INDEX FROM ChannelMembers FROM sleact DB 연결 성공 GET /api/users 304 24.697 ms - - GET /api/users 200 4.038 ms - 5 GET /api/users 304 2.241 ms - - GET /api/users 304 3.459 ms - - GET /api/users 304 2.637 ms - - GET /api/users 304 2.528 ms - - -회원가입 index import useInput from '@hooks/useInput'; import { Header, Form, Label, Input,Error, Success, LinkContainer, Button } from "./style"; import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { useCallback, useState } from "react"; import { Redirect } from "react-router-dom"; import useSWR from 'swr'; const Signup = () => { const [email, setEmail] = useState(''); const [nickname, setNickname] = useState(''); const [password, setPassword] = useState(''); const [passwordCheck, setPasswordCheck] = useState(''); const {data: userData} = useSWR('/api/users', fetcher); const [signupError, setSignUpError] = useState(false); const [signUpSuccess, setSignUpSuccess] = useState(false); const [mismatchError, setMismatchError] = useState(false); const onChangeEmail = useCallback ( (e) => { setEmail(e.target.value); }, []); const onChangeNickname = useCallback ( (e) => { setNickname(e.target.value); }, []); const onChangePassword = useCallback ( (e) => { setPassword(e.target.value); setMismatchError(passwordCheck !== e.target.value); }, [passwordCheck, setPassword], ); const onChangePasswordCheck = useCallback( (e) => { setPasswordCheck(e.target.value); setMismatchError(password !== e.target.value); }, [password, setPasswordCheck], ); const onSubmit = useCallback( (e) => { e.preventDefault(); if(!nickname || nickname.trim()) { return; } if(! mismatchError) { setSignUpError(false); setSignUpSuccess(false); axios .post('/api/users', {email, nickname, password }) .then(() => { setSignUpSuccess(true); }) .catch((error) => { console.log(error.response?.data); setSignUpError(error.response?.data?.code ===403); }); } }, [email, nickname, password, mismatchError], ); if (userData) { return <Redirect to ="/workspace/sleact"/>; } return ( <div id="container"> <Header>Sleact</Header> <Form onSubmit={onSubmit}> <Label id="email-label"> <span>이메일 주소</span> <div> <Input type="email" id="email" name="email" value={email} onChange={onChangeEmail}/> </div> </Label> <Label id="nickname-label"> <span>닉네임</span> <div> <Input type="text" id="nickname" name="nickname" value={nickname} onChange={onChangeNickname}/> </div> </Label> <Label id="password-label"> <span>비밀번호</span> <div> <Input type="password" id="password" name="password" value={password} onChange={onChangePassword}/> </div> </Label> <Label id="password-check-label"> <span>비밀번호 확인</span> <div> <Input type="password" id="password-check" name="password-check" value={passwordCheck} onChange={onChangePasswordCheck}/> </div> {mismatchError && <Error>비밀번호가 일치하지 않습니다.</Error>} {!nickname && <Error>닉네임을 입력해주세요</Error>} {signupError && <Error>이미 가입된 이메일입니다.</Error>} {signUpSuccess && <Success>회원 가입되었습니다! 로그인해주세요.</Success>} </Label> <Button type="submit">회원가입</Button> </Form> <LinkContainer> 이미 회원이신가요?&nbsp; <a href="/login">로그인 하러 가기</a> </LinkContainer> </div> ); }; export default Signup; -개발자도구 콘솔창 -개발자도구 네트워크 요청 URL: http://localhost:3090/api/users 요청 메서드: GET 상태 코드: 304 Not Modified 원격 주소: [::1]:3090 리퍼러 정책: strict-origin-when-cross-origin 응답 헤더소스 보기 access-control-allow-credentials: true connection: close date: Wed, 26 Apr 2023 05:29:10 GMT etag: W/"5-fLbvuYullyqbUJDcLlF/4U0SywQ" vary: Origin x-powered-by: Express 요청 헤더소스 보기 Accept: application/json, text/plain, / Accept-Encoding: gzip, deflate, br Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7 Connection: keep-alive Host: localhost:3090 If-None-Match: W/"5-fLbvuYullyqbUJDcLlF/4U0SywQ" Referer: http://localhost:3090/signup sec-ch-ua: "Chromium";v="112", "Google Chrome";v="112", "Not:A-Brand";v="99" sec-ch-ua-mobile: ?0 sec-ch-ua-platform: "Windows" Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: same-origin User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
sehun910124 댓글 2 좋아요 0 조회수 523

api/workspaces POST요청시 500에러가 뜹니다.

해결됨

Slack 클론 코딩[실시간 채팅 with React]

const onCreateWorkspace = useCallback( (e: any) => { e.preventDefault(); if (!newWorkspace || !newWorkspace.trim()) return; // trim : 앞 뒤 공백제거 if (!newUrl || !newUrl.trim()) return; axios .post( 'http://localhost:3095/api/workspaces', { Workspace: newWorkspace, url: newUrl, }, { withCredentials: true }, ) .then(() => { mutate(userData, true); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }) .catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [newWorkspace, newUrl], ); 뭐가 문제인건가요?

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
roider2316 댓글 2 좋아요 0 조회수 930

interface Props 타입 넣는 법 질문

해결됨

Slack 클론 코딩[실시간 채팅 with React]

interface Props { show: boolean; onCloseModal: () => void; style: CSSProperties; closeButton?: boolean; } const Menu: FC<React.PropsWithChildren<{}>> = ({ children, style, show, onCloseModal, closeButton }) => {...} 이 상태에선 Props타입을 어떻게 넣어야 하는 건가요?

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
roider2316 댓글 1 좋아요 0 조회수 432

mutate 와 Pessimistic UI, Optimistic UI 관계 질문이요

해결됨

Slack 클론 코딩[실시간 채팅 with React]

1번. axios요청후 then으로 처리 : Pessimistic UI mutate(data, true) : Optimistic UI mutate(data, false) : 데이터를 바꾸는데 서버에 요청 및 점검을 안함. 2번 mutate(data, true) : Pessimistic UI mutate(data, false) : Optimistic UI 처음엔 1번으로 이해를 했는데 shouldRevalidate를 false로 넣어서 시도했을 때 주기적으로 GET요청이 되는 직후 바로 로그아웃을 클릭하면 추가적인 요청이 없는데 그냥 로그아웃하면 바로 추가적인 요청이 보내집니다. 주기적으로 GET요청을 하는 것과의 우연의 일치인진 모르겠는데 뭔가 자꾸 추가적인 GET요청이 되었다 안되었다 하더라고요. 그래서 false를 넣어도 점검을 하는 2번인가 싶기도 하고 헷갈립니다. 뭐가 맞는거죠?

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
roider2316 댓글 1 좋아요 0 조회수 380

updateform, A user with that username already exists. 에러

미해결

작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지

updateform에서 disabled = True로 변경하여 url로 접속해보면 제대로 적용이 되는 것을 확인할 수 있습니다. 하지만 비밀번호를 입력하고 제출을 누르면 계속해서 A user with that username already exists. 메시지만 뜨고 있는 상황입니다. ㅠㅠㅠ

  • python
  • django
  • docker
kookb2000 댓글 3 좋아요 3 조회수 1589

workspace/channel 새로고침 오류

해결됨

Slack 클론 코딩[실시간 채팅 with React]

http://localhost:3090/workspace/channel http://localhost:3090/ 로 접근해서 해당 path까지 접근이 잘되지만 이후 새로고침하면 자바스크립트를 불러오지 못하여 에러가 납니다. <body> <div id="app"></div> </body> //에러코드 Rfused to apply style from 'http://localhost:3090/workspace/public/client-boot-styles.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. GET http://localhost:3090/workspace/public/slack-icons-v2-fe043a5.woff2 net::ERR_ABORTED 404 (Not Found) GET http://localhost:3090/workspace/dist/app.js net::ERR_ABORTED 404 (Not Found) Rfused to execute script from 'http://localhost:3090/workspace/dist/app.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. GET http://localhost:3090/workspace/public/favicon.ico 404 (Not Found) the resource http://localhost:3090/workspace/public/slack-icons-v2-fe043a5.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally. 제 생각에는 http://localhost:3090/workspace/ router가 없어서 channel까지 오지 못하고 중간에서 끊기는 것 같은데 <Routes> <Route path="/" element={<Navigate to="/signin" replace />} /> <Route path="/signin" element={<SignInPage />} /> <Route path="/signup" element={<SignUpPage />} /> <Route path="/workspace" element={<Navigate to="/workspace/channel" replace />} /> <Route path="/workspace/channel" element={<ChannelPage />} /> </Routes> workapce경로에서 channel로 redirect를 걸어주려고 하는데 잘 되지 않습니다 어떻게 개선하면 좋을까요?

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
grs0412 댓글 2 좋아요 0 조회수 605

정상 작동은 하는데 웹팩 프록시 설정이 없어도 OPTIONS요청이 없어요.

해결됨

Slack 클론 코딩[실시간 채팅 with React]

그냥 기존의 백엔드 app.js 코드 그대로 하고 웹팩 데브서버에 프록시 설정을 하지 않고 회원가입 했을 때 201로 요청이 성공했습니다. 하지만 제로초님과 달리 OPTIONS요청이 추가적으로 생기지 않았고 POST요청만 네트워크 창에 보이는데 잘못된게 있는 건가요 아님 시스템 상 뭐가 바뀐건가요? 작동상 문제는 없는데 궁금해서 여쭤봅니다. index.ts webpack.config.ts app.js

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
roider2316 댓글 3 좋아요 0 조회수 385

mongo에러?

미해결

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

https://www.inflearn.com/questions/612530/m1%EB%A7%A5%EB%B6%81-%EB%AA%BD%EA%B3%A0%EB%94%94%EB%B9%84-%EC%84%A4%EC%B9%98%EB%AC%B8%EC%A0%9C 위 글에서 작성자가질문했던것처럼 같은 에러가 나고 해결이 안되고 있습니다.. ㅠㅡㅠ 해결 방법을 아무리 찾아봐도 알수가 없어서 질문 남깁니다!.! 몽고db전체를 삭제하고 다시 설치도 해보았고 권한문제등 여러가지 해결해보려고 했는데 안되서 문의남깁니다. ! [제로초 강좌 질문 필독 사항입니다] 질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다. 도움이 되는 질문을 하는 방법을 알려드립니다. https://www.youtube.com/watch?v=PUKOWrOuC0c 0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다. 1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다. 2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다. 3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요. 4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요. 5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다. 6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
sonhomin98 댓글 1 좋아요 0 조회수 344

async

미해결

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

강의를 진행하다보니 어쩔땐 async를 사용하고 사용하지 않을때가 있으신데 이건 어떻게 구분을 하며 사용을 해야하나요?

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
dch3030 댓글 1 좋아요 0 조회수 372

config.js 에서 username값 질문

해결됨

Slack 클론 코딩[실시간 채팅 with React]

mysql 실행할 때 프롬프트에서 mysql -h localhost -u root -p 로 입력한 사용자 명이랑 config.js 파일에서의 username값과 일치해야 하나요? 그리고 프롬프트로 들어가지 않고 그냥 MySQL 8.0 Command Line Client 파일을 클릭해서 실행시키면 바로 비번입력하는게 나오던데 이렇게 들어가도 상관없나요?

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
roider2316 댓글 1 좋아요 0 조회수 425

태그의 속성값을 텍스트로 출력할수있나요?

미해결

안녕하세요 현재 파이썬을 공부중인 학생입니다. 이전까지는 태그의 값을 텍스트로 출력하고 있었는데 태그안에 속성값을 텍스트로 출력할일이 생겨서 여러 방면으로 검색 및 시도를 해보고 있는데 잘 안되네요 여기서 data-taitle="BLACK(99)" 의 BLACK(99) 를 텍스트로 출력하고 싶습니다. 어떻게 하면 될까요? #python

  • python
  • selenium
kshssi 댓글 1 좋아요 0 조회수 613

setting/ts에 설정한후 폴더생성 및 추후작업

해결됨

Slack 클론 코딩[실시간 채팅 with React]

이전수업을 setting/ts에서 따라해보면서 쫒아왔는데요! github에서 받은것은 완성본이라고 하셨는데, 폴더생성 및 추후 페이지작업 프론트작업도 setting/ts에서 진행해도될까해서 질문드립니다.

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
sehun910124 댓글 2 좋아요 0 조회수 532

9장 프로젝트 구조갖추기부분

해결됨

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

컨트롤러스 page.js 에서 이부분 객체로 만든건가요? exports.renderProfile=(req,res,next)=>{}

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
Hongsun1 댓글 1 좋아요 0 조회수 360

back 서버 오류

해결됨

Slack 클론 코딩[실시간 채팅 with React]

강의 수강중에 에러가 발생했는데, 이를 찾지 못하겠습니다. 회원 가입으로 axios 해서 넘어가는거는 알겠는데... 위의 캡처 긍르 보면 api.js에서 addMembers를 호출하는데 에러가 나고 있습니다. 에러는 Cannot read properties of null (reading 'addMembers')라는데 이 부분에서 에러가 왜 나는지 잘 모르겠습니다. 분명 같은 이메일로 로그인 시도시 "이미 있는 사용자입니다"하는 response를 받고 있는 상황입니다.

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
seonjun Moon 댓글 1 좋아요 1 조회수 445

회원가입시 cors 오류 납니다

미해결

Slack 클론 코딩[실시간 채팅 with React]

어느부분을 봐야할까요?

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
bizpeer001 댓글 1 좋아요 0 조회수 336

BrowserRouter 은 JSX 구성 요소로 사용할 수 없습니다.

미해결

Slack 클론 코딩[실시간 채팅 with React]

-코드- import 'core-js/stable'; import 'regenerator-runtime/runtime'; import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import axios from 'axios'; import App from './layouts/App'; axios.defaults.withCredentials = true; axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'https://sleact.nodebird.com' : 'http://localhost:3090'; render( <BrowserRouter> //오류발생구간 <App /> </BrowserRouter>, document.querySelector('#app'), ); -오류내용- ERROR in ./client.tsx:15:4 TS2786: 'BrowserRouter' cannot be used as a JSX component. Its instance type 'BrowserRouter' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("C:/Users/LG gram 15/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'. 13 | 14 | render( > 15 | <BrowserRouter> | ^^^^^^^^^^^^^ 16 | <App /> 17 | </BrowserRouter>, 18 | document.querySelector('#app'), sleact (webpack 5.74.0) compiled with 1 error in 9547 ms 백엔드 서버를 킨 상태에서, npm i 실행하였고 npm run build를 실행하게되면 위에 오류가 발생됩니다.

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
sehun910124 댓글 3 좋아요 0 조회수 2026

회원가입 로직시 controller\auth 랑 localStrategy

미해결

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

controller\auth 랑 passport\localStrategy에서 로그인 post를 보낼때의 경우가 service로 보내서 비즈니스로직을 돌고 컨트롤러에 return값을 보내주는 방식으로 passport\localStrategy가 Service역할을 한다고 생각해도 괜찮나요?

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
dch3030 댓글 1 좋아요 0 조회수 475

tsconfig-for-webpack-config 초기설정 파일 질문있습니다

해결됨

Slack 클론 코딩[실시간 채팅 with React]

영상을 보면서 진행하다보니 packge.json 스크립트에 TS_NODE_PROJECT가 추가되어있어 깃허브 setting으로 가서 확인을 해보니 tsconfig-for-webpack-config 파일이 추가되어있더라구요 근데 깃허브 package.json에는 "dev": "webpack serve --env development", "build": "cross-env NODE_ENV=production webpack" 이렇게 되어있는데 TS_NODE_PROJECT 스크립트와 tsconfig-for-webpack-config.json 파일에 대해서 설명을 추가로 부탁드릴 수 있을까요? 또한 영상과 달리 npm run dev에서는 cross-env가 빠져있는데 그부분도 빠져도 상관없는지 궁금합니다

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
grs0412 댓글 1 좋아요 0 조회수 370

8.6.1 다시질문!

해결됨

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

mongoose.connect 콜백함수 수정했고 다만들고 실행했는데 Operation users.find() buffering timed out after 10000ms MongoServerSelectionError: connect ECONNREFUSED ::1:27017 mongod연결했는데 이렇게 에러 뜨네요 ㅜㅠ schemas/index.js에서 콜백함수 수정한 코드입니다 혹시 제가 잘못수정한건가요? const mongoose = require("mongoose"); const connect = () => { if (process.env.NODE_ENV !== "production") { mongoose.set("debug", true); } mongoose .connect("mongodb://root:nodejsbook@localhost:27017/admin", { dbName: "nodejs", useNewUrlParser: true, }) .then(() => { console.log("몽고디비 연결 성공"); }) .catch(() => { console.log("몽고디비 연결 에러"); }); }; mongoose.connection.on("error", (error) => { console.error("몽고디비 연결 에러", error); }); mongoose.connection.on("disconnected", () => { console.error("몽고디비 연결이 끊겼습니다. 연결을 재시도합니다."); connect(); }); module.exports = connect;

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
Hongsun1 댓글 1 좋아요 0 조회수 921

8.6.1절에 connect

해결됨

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

connect에 콜백 이제 안된다고해서 코드를 promise로 썻는데 잘작성이안되네요 어떻게 쓰면될까요? ㅠㅠ

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
Hongsun1 댓글 1 좋아요 0 조회수 365

인기 태그

인프런 TOP Writers

주간 인기글