172만명의 커뮤니티!! 함께 토론해봐요.
미해결
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
성창수
2023-01-25T06:57:14.751Z
댓글 2
좋아요 0
조회수 1886
해결됨
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 여기에 질문 내용을 남겨주세요. application.yml jpa: hibernate: ddl-auto: create 이라 되어 있는데, 기존의 테이블이 드랍되지 않습니다. 질문 게시판을 검색해보니, H2의 버전이 1.4.200인 경우에는 하이버네이트 버전을 5.4.13.Final 로 바꿔야 한다고 되어 있네요. 그래서, build.gradle 에 ext["hibernate.version"] = " 5.4.13.Final " 를 추가 해놓고 다시 돌려보니 이제는 엄청난 에러메시지가 나오네용.. 하이버네이트 버전을 바꾸는 방법이 올바르지 않았나요?
JPA 웹앱 spring spring-boot java jpa 웹앱
Shin Berg
2023-01-24T10:52:29.397Z
댓글 1
좋아요 0
조회수 532
미해결
Slack 클론 코딩[실시간 채팅 with React]
제로초님 영상을 보고 따라하는 도중 Menu의 index.tsx작성 후에 Workspace로 옮겼는데, Module을 찾을 수 없다고 뜨는데, 어디가 잘못 된건지 모르겠습니다... components/Menu/index.tsx import React, { FC } from 'react'; import { CreateMenu } from './style'; const Menu: FC<React.PropsWithChildren<{}>> = ({ children }) => { return ( <CreateMenu> <div>menu</div> {children} </CreateMenu> ); }; export default Menu; Workspace/index.tsx import React, { FC } from 'react'; import { CreateMenu } from './style'; const Menu: FC<React.PropsWithChildren<{}>> = ({ children }) => { return ( <CreateMenu> <div>menu</div> {children} </CreateMenu> ); }; export default Menu; 에러메세지입니다. 혹시 몰라서 터미널에 뜬 에러메세지도 첨부하겠습니다
클론코딩 Socket.io typescript socket.io 웹팩 react 클론코딩 babel
성창수
2023-01-24T10:16:05.408Z
댓글 1
좋아요 0
조회수 389
해결됨
나도코딩의 자바 기본편 - 풀코스 (20시간)
안녕하세요 챕터 6 부분을 공부하고 있는데 void를 쓰는 경우와 안쓰는 경우의 차이가 잘 와닫지 않습니다. 리턴값이 없으면 void를 쓰고, 리턴값이 있으면 void를 안쓴다고 알고 있는데 리턴값부터 이해가 잘 가지 않네요! 예를 들어서 // 호텔 주소 public static String getAdress() { return "서울시 어딘가"; } 과 셋째 줄에 sout "서울시 어딘가" 를 쓰는 것은 무엇이 다른건지요? 감사합니다 :)
liltjay
2023-01-24T07:42:26.495Z
댓글 1
좋아요 1
조회수 4792
해결됨
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오)예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 쿼리 dsl에서 많이 설명 해주셨는데요 그렇다면 dsl을 쓰는 현업에서는 jpql을 사용할 일이 전혀 없을까요 ? 전혀 없다고 해도 근본이 되는 jpql을 알아둬야 하겠지만 학습시간에 대한 비중을 어디에 크게 둬야 할지 의문입니다 .
java spring-boot jpa JPA dsl spring query
2023-01-24T06:50:29.440Z
댓글 1
좋아요 0
조회수 985
해결됨
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
안녕하세요 영한님 강의 잘 듣고 있습니다^^ 전부터 궁금해 왔던 것인데요, 팩토리를 만들 때 정적으로 올리는 이유에 대해서 궁금합니다 영한님이 다른 QnA에서 추천해 주신 내용들을 읽어보았으나 굳이 왜 "정적"영역으로 보내는 가에 대한 의문은 쉽게 풀리지 않습니다 ㅜㅜ 일단 정적 팩토리 메서드로 보내면 생성자들에 대한 응집도가 크게 떨어지는 느낌입니다. "엘레강트 오브젝트"라는 책을 보면 생성자는 10~15개 까지도 만들고 퍼블릭 메서드를 최대한 적게 가져가라고 가이드를 주는데요, 정적 영역으로 보내면 주/부 생성자로 보낼 수 없기 때문에 그 많은 생성자들이 다 흩어지고, 생성자들 간 관계를 맺을 수 없기 때문에 유연성이 떨어지고 코드 중복이 자주 일어나는 효과가 나는 것 같습니다 이는 굳이 정적 영역으로 보내지 않고 주/부 생성자로 구분하면 쉽게 해결될 일이 아닌가? 하는 생각도 들어 질문을 드립니다
java 웹앱 spring-boot spring JPA jpa 웹앱
득이
2023-01-24T00:25:31.337Z
댓글 1
좋아요 3
조회수 908
미해결
Slack 클론 코딩[실시간 채팅 with React]
제로초님, layouts폴더에 App.tsx에서 import React from "react"; import loadable from '@loadable/component'; import { Routes, Route, Navigate } from "react-router-dom"; const LogIn = loadable(() => import("@pages/Login")); const SignUp = loadable(() => import('@pages/SignUp')); const Channel = loadable(() => import('@pages/Channel')); const App = () => { return ( <Routes> <Route path="/" element={<Navigate replace to="/login" />} /> <Route path="/login" element={<LogIn />} /> <Route path="/signup" element={<SignUp />} /> <Route path="/workspace/channel" element={<Channel />} /> </Routes> ) } export default App; Route의 4번째줄 path에 /workspace로 하면 로그아웃 할 때 제대로 작동하는데 저렇게 workspace/channel로 코드를 작성하면 로그아웃 할 때, 아래처럼 뜹니다 /를 하나만 붙여야 되는건가요? 나머지 코드들은 변경하지 않았습니다. Login 폴더 index.tsx import useInput from "@hooks/useInput"; import axios from "axios"; import React, { useCallback, useState } from "react"; import { Form, Label, Input, LinkContainer, Button, Header, Error} from './styles'; import {Link, Navigate} from 'react-router-dom'; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; const LogIn = () => { const {data, error, mutate} = useSWR('/api/users', fetcher); const [logInError, setLogInError] = useState(false); const [email, onChangeEmail] = useInput(''); const [password, onChangePassword] = useInput(''); const onSubmit = useCallback((e: any) => { e.preventDefault(); setLogInError(false); axios .post( '/api/users/login', {email, password}, {withCredentials: true}, ) .then((response) => { mutate(response.data, false); }) .catch((error) => { setLogInError(error.response?.data?.statusCode === 401); }) }, [email, password, mutate]); if(data === undefined) { return <div>로딩중...</div> } if(data) { return <Navigate to="/workspace/channel" /> } 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="password-label"> <span>비밀번호</span> <div> <Input type="password" id="password" name="password" value={password} onChange={onChangePassword} /> </div> {logInError && <Error>이메일과 비밀번호 조합이 일치하지 않습니다.</Error>} </Label> <Button type="submit">로그인</Button> </Form> <LinkContainer> 아직 회원이 아니신가요? <Link to="/signup">회원가입 하러가기</Link> </LinkContainer> </div> ); }; export default LogIn; workspace.tsx import axios from "axios"; import React, { FC, useCallback } from "react"; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; import { Navigate } from "react-router-dom"; const Workspace: FC<React.PropsWithChildren<{}>> = ({children}) => { // revalidate = 서버로 요청 다시 보내서 데이터를 다시 가져옴 // mutate = 서버에 요청 안보내고 데이터를 수정 const {data, error, mutate} = useSWR('/api/users', fetcher); const onLogout = useCallback(() => { axios.post('api/users/logout', null , { withCredentials: true, }) .then(() => { mutate(false, false); }) }, []); if(data === false) { return <Navigate to="/login" /> } return( <div> <button onClick={onLogout}>로그아웃</button> {children} </div> ) } export default Workspace; swr은 2버전입니다.
Socket.io 웹팩 socket.io babel typescript 클론코딩 react 클론코딩
성창수
2023-01-23T14:40:30.903Z
댓글 1
좋아요 0
조회수 6090
미해결
Slack 클론 코딩[실시간 채팅 with React]
제로초님, 전 강의 듣고 할 때만 해도 잘 됐는데 오늘 쉬고 다시 해보니까 이런 오류 메세지가 뜹니다. 해결해보려고 해도 잘 안되네요.. Cannot read properties of undefined (reading 'data') SignUp 폴더에서 index.tsx에 문제가 있다고 떠서 코드 올립니다 import useInput from "@hooks/useInput"; import React, { useCallback, useState } from "react"; import { Form, Label, Input, LinkContainer, Button, Header, Error, Success} from './styles' import axios from "axios"; import {Link} from 'react-router-dom'; // 타입스크립트는 간단하게 말하면 변수, 매개변수, 리턴 값에 타입을 붙여줌 // 변수에는 딱히 타입을 붙여주지 않아도 된다 타입스크립트가 알아서 추론하기 때문에(리턴값도 마찬가지) 그러나 매개변수에는 붙여주어야됨 const SignUp = () => { const [email, onChangeEmail] = useInput('');//useInput은 커스텀 훅 const [nickname, onChangeNickName] = useInput(''); const [password, setPassword] = useState(''); const [passwordCheck, setPasswordCheck] = useState(''); const [mismatchError, setMismathError] = useState(false); const [signUpError, setSignUpError] = useState(''); const [signUpSuccess, setSignUpSuccess] = useState(false); const onChangePassword = useCallback((e: any) => { setPassword(e.target.value); setMismathError(e.target.value !== passwordCheck); // 함수 기준으로 외부 변수만 deps에 적어줌 내부 변수는 x }, [passwordCheck]); const onChangePasswordCheck = useCallback((e: any) => { setPasswordCheck(e.target.value); setMismathError(e.target.value !== password) }, [password]); const onSubmit = useCallback( (e: any) => { e.preventDefault(); if (!mismatchError && nickname) { console.log('서버로 회원가입하기'); setSignUpError(''); setSignUpSuccess(false); axios .post('/api/users', { email, nickname, password, }) .then((response) => { console.log(response); setSignUpSuccess(true); }) .catch((error) => { console.log(error.response); //여기가 문제가 있다고 뜹니다. setSignUpError(error.response.data); }) .finally(() => {}); } }, [email, nickname, password, passwordCheck, mismatchError], ); 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>{signUpError}</Error>} {signUpSuccess && <Success>회원가입되었습니다! 로그인해주세요.</Success>} </Label> <Button type="submit">회원가입</Button> </Form> <LinkContainer> 이미 회원이신가요? <Link to="/login">로그인 하러가기</Link> </LinkContainer> </div> ); }; export default SignUp;
웹팩 react socket.io babel typescript 클론코딩 Socket.io 클론코딩
성창수
2023-01-23T07:56:20.941Z
댓글 1
좋아요 0
조회수 2385
해결됨
자바 ORM 표준 JPA 프로그래밍 - 기본편
========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 일대다[1:N] 강의의 16분 29초 쯤에 연관관계의 주인이 양쪽에 모두 있으면 망한다라는 언급이 있으신데, 순서가 꼬이거나 예측이 안된다는게 구체적으로 어떤 의미인지 예시가 있을까요? 정말 단순하게 생각하면 어쨋든 연관관계의 주인이 아닌 쪽에서 mappedby를 통해 읽기 전용으로 설정하지 않아도 Member에서 추가하나 Team에서 추가하나 반영될 수 있다면 오히려 좋지 않나 싶은 의구심이 들어서 질문드립니다 감사합니다 :)
김윤식
2023-01-23T06:36:33.543Z
댓글 1
좋아요 0
조회수 4932
미해결
Slack 클론 코딩[실시간 채팅 with React]
https://github.com/ZeroCho/sleact에서 code로 가서 zip파일을 다운 받았습니다. 이후 git clone https://github.com/zerocho/sleact 명령어를 입력한 후, back 폴더에서 npm i까지 마쳤는데, 저는 강의 내용과 다르게 config 폴더가 비어 있습니다. 어떤 부분에서 잘못 따라 하였는이해를 못해서 깃 관련 구글링을 해보다가 결국 질문 드립니다.
react typescript 웹팩 socket.io Socket.io babel 클론코딩 클론코딩
2023-01-22T19:46:21.614Z
댓글 1
좋아요 0
조회수 594
미해결
Slack 클론 코딩[실시간 채팅 with React]
tsconfig.json(ts -> js)로 바꿔주고, 그 후에 webpack.config.ts가 js,css,html들을 하나로 번들링해주는 순서가 맞나요?? $webpack 실행하면 웹팩 프로그램이 그냥 알아서 tsconfig.json이 있으면 먼저 적용한후 webpack.config.ts를 적용하는건가요?
클론코딩 Socket.io react socket.io babel 클론코딩 웹팩 typescript
초간단
2023-01-22T10:06:58.209Z
댓글 1
좋아요 0
조회수 498
해결됨
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
스프링 강의 선행으로 요구되는 지식이 자바, 관계형 데이터베이스 기초라고 되어 있는데요 자바랑 MySQL은 공부했습니다. 그런데 JDBC나 JSP, 서블릿, 디자인 패턴 등에 대한 지식이나 웹 개발에 대한 지식은 모른 채로 로드맵 시작해도 상관없나요?
spring-boot mvc MVC java spring
11 1
2023-01-21T15:35:42.201Z
댓글 1
좋아요 0
조회수 535
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 잘모르겠습니다 ㅎㅎ.. 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 1. 데이터 삽입 순서 관련 질문 서버가 여러 대 있다고 가정했을 때, 각 서버에 하단의 이미지처럼 메모리에 50개씩 값을 올려둘 경우, DB에 들어가는 데이터가 순차적으로 안들어가지 않나요? 구체적으로 생각해보지는 않았지만, 순차적으로 데이터가 들어가지 않을 경우에 대한 이슈가 있지 않을까 싶어서 질문드립니다! 2. 중간에 비어있는 구간 관련 질문 위와 마찬가지로 서버가 여러 대 있고 각 서버마다 50개씩 메모리에 할당했다고 가정했을 때, 특정 서버가 죽게되면 죽은 서버의 메모리가 가지고있던 개수만큼의 공백이 생기지 않나요? (거의 그럴 일은 없겠지만) 서버가 시도때도없이 다운될 경우 아무리 Long 타입을 지정했음에도 수가 넘어가는 케이스가 생기지 않을까 싶습니다.
seungseopahn
2023-01-21T09:24:39.459Z
댓글 1
좋아요 1
조회수 842
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 강사님, 강의 중 채널 생성과정에서 오류가 있어 문의를 남깁니다. 먼저, 채널 데이터를 가져오지 못해 다른 문의를 찾아보니 seed 설정을 해주지 않은거 같아 npx sequelize db:create 진행하였고, 이어서 npx sequelize db:seed:all 과정을 진행했습니다 npx sequelize db:seed:all 을 진행하니 Validation error가 발생했습니다. 다른 문의를 보니 db에 sleact table이 생성되지 않아 발생하는 문의글이 많아서 db 사진 올려드릴게요 추가적으로, back 파일에서 npm run dev를 실행하면 db 연결까지 잘 됩니다. 도대체 어디가 잘 못 된 건지 감이 오지 않습니다.. 감사합니다.
react babel typescript socket.io 웹팩 Socket.io 클론코딩 클론코딩
안찬익
2023-01-21T07:18:15.709Z
댓글 1
좋아요 0
조회수 1120
미해결
Slack 클론 코딩[실시간 채팅 with React]
제로초님, 코드는 정확히 따라 한 거 같은데, 무엇이 문제인지 판단이 안되네요... 리액트 v18, 타입스크립트 v18, axios는 1.2.3 입니다. webpack import path from 'path'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import webpack, { Configuration as WebpackConfiguration } from "webpack"; import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server"; interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; } import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; const isDevelopment = process.env.NODE_ENV !== 'production'; const config: Configuration = { name: 'sleact', mode: isDevelopment ? 'development' : 'production', devtool: !isDevelopment ? 'hidden-source-map' : 'eval', resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path.resolve(__dirname, 'pages'), '@utils': path.resolve(__dirname, 'utils'), '@typings': path.resolve(__dirname, 'typings'), }, }, entry: { app: './client', }, module: { rules: [ { test: /\.tsx?$/, loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { targets: { browsers: ['IE 10'] }, debug: isDevelopment, }, ], '@babel/preset-react', '@babel/preset-typescript', ], env: { development: { plugins: [['@emotion', { sourceMap: true }], require.resolve('react-refresh/babel')], }, production: { plugins: ['@emotion'] } }, }, exclude: path.join(__dirname, 'node_modules'), }, { test: /\.css?$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [ new ForkTsCheckerWebpackPlugin({ async: false, // eslint: { // files: "./src/**/*", // }, }), new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }), ], output: { path: path.join(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist/', }, devServer: { historyApiFallback: true, // react router port: 3090, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, proxy: { '/api/': { target: 'http://localhost:3095', changeOrigin: true, }, }, }, }; if (isDevelopment && config.plugins) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.plugins.push(new ReactRefreshWebpackPlugin()); } if (!isDevelopment && config.plugins) { } export default config; index.tsx import useInput from "@hooks/useInput"; import React, { useCallback, useState } from "react"; import { Form, Label, Input, LinkContainer, Button, Header, Error} from './styles' import axios from "axios"; const SignUp = () => { const [email, onChangeEmail] = useInput('');//useInput은 커스텀 훅 const [nickname, onChangeNickName] = useInput(''); const [password, setPassword] = useState(''); const [passwordCheck, setPasswordCheck] = useState(''); const [mismatchError, setMismathError] = useState(false); const onChangePassword = useCallback((e: any) => { setPassword(e.target.value); setMismathError(e.target.value !== passwordCheck); // 함수 기준으로 외부 변수만 deps에 적어줌 내부 변수는 x }, [passwordCheck]); const onChangePasswordCheck = useCallback((e: any) => { setPasswordCheck(e.target.value); setMismathError(e.target.value !== password) }, [password]); const onSubmit = useCallback((e: React.FormEvent) => { e.preventDefault(); if(!mismatchError && nickname){ console.log('서버로 회원가입하기'); axios.post('/api/users', { email, nickname, password, }) .then((response) => { console.log(response); })//요청이 성공하면 실행 .catch((error) => { console.log(error.response); })//요청이 실패하면 실행 .finally(() => {});//성공하든 실패하든 실행시키고 싶은 것 } console.log(email, nickname, password, passwordCheck) }, [email, nickname, password, passwordCheck, mismatchError]); 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>{signUpError}</Error>} */} {/* {signUpSuccess && <Success>회원가입되었습니다! 로그인해주세요.</Success>} */} </Label> <Button type="submit">회원가입</Button> </Form> <LinkContainer> 이미 회원이신가요? <a href="/login">로그인 하러가기</a> </LinkContainer> </div> ); }; export default SignUp; 이렇게 따라 한 후에 회원 가입 누르면 아래 같은 화면이 뜹니다.
웹팩 react socket.io Socket.io typescript babel 클론코딩 클론코딩
성창수
2023-01-20T09:23:14.775Z
댓글 2
좋아요 0
조회수 1127
해결됨
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
지장없다는 말도 있고 있다는 말도 있던데 저는 김영한님 로드맵 2개 다 들을 예정인데 강의가 몇십 개 있더라구요 인텔리제이 무료 버전을 써서 막히는 부분들이 있을까요?
java spring mvc spring-boot MVC
11 1
2023-01-20T08:00:23.454Z
댓글 1
좋아요 0
조회수 466
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/) [질문 내용] 질문 1 ============================================ 별칭과 관련하여 영한님의 댓글을 찾아보던 도중 라는 글이 있습니다. 제가 이해한 바로는 1:N 이던 N:1 이던 1:1 이던 페치조인할때 별칭은 사용하지 않는것이 좋지만 페치 조인시 별칭을 사용했을때와 별칭을 사용하지 않았을때와 의 데이터가 일치한다면(정합성) 사용 할수 있다 이렇게 이해를 했는데 맞나요 ? 질문 2 ============================================ 페치조인시 1:N 에서 페이징을 사용할수 없는 이유는 페치조인의 메커니즘 자체가 1:N 이면 N 만큼 데이터를 다 가지고 있어야 하는데 ex) @OneToMany(mappedBy = "team") private List<Member> members = new ArrayList<>(); (Team 은 페치조인시 members 의 뻥튀기 된 데이터를 모두 가지고 있어야한다) 그런데 이때 페이징을 실행하면 뻥튀기된 데이터를 가지고 있을수가 없다. 그래서 JPA는 메모리에 모든 정보를 끌어모아 저장 시킨후 메모리에서 페이징 처리를 실행 하기 때문에 메모리 부족 현상이 나타날수 있다 이렇게 이해를 했는데 맞나요 ? (질문1,2) ======================질문3 페이징 처리를 위해 N:1 을 1:N 으로 바꿔서 페치조인을 하면 되는데 막상 이 쿼리를 디비에 실행해도 둘다 데이터가 각 3건씩 똑같이 나오는게 맞나요 ? (뻥튀기 가 일어나면 데이터가 더많아야 하는게 아닌가요 ? 1:n 조인이) 각각 1:N , N:1 페치조인 실행한 결과 [데이터 뻥튀기는 -> 데이터 베이스 쿼리는 동일하게 나오나, 자바 객체에서 뻥튀기 ->[중복] 현상이라고 생각하면 되는건가요 ??] 이 부분은 몆번을 봐도 햇갈리네요
기팝
2023-01-19T09:35:44.421Z
댓글 1
좋아요 1
조회수 1288
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] cmd창에서 dir입력하고 gradle은 있는데 gradlew는 나오지 않네요... C드라이브 안에 study 폴더가 있고, 그안에 hello spring이 있는 상태인데 어느 부분에서 잘못한 것일까요? ㅠㅠ
2023-01-18T11:58:12.297Z
댓글 1
좋아요 1
조회수 753
미해결
실전! Querydsl
안녕하세요 궁금한 부분이 있어 질문 남깁니다 7:58~ 에서 프로퍼티 접근은 setter 를 통해 값이 들어가므로 @Data 애노테이션을 지우고 직접 getter, setter를 만들어주셨습니다. 저는 setter가 없으면 오류가 날 것이라 생각하여 getter, setter를 생성하지 않고 테스트를 해보았는데 정상적으로 실행되더라고요. 오류가 나지 않는 게 맞는지, 그렇다면 이유가 무엇인지 궁금합니다 ㅠㅠ 아래는 실행한 코드입니다 public class MemberDto { private String username; private int age; public MemberDto() { } } @Test public void findDtoBySetter() { List<MemberDto> result = queryFactory .select(Projections.bean(MemberDto.class, member.username, member.age)) .from(member) .fetch(); for (MemberDto memberDto : result) { System.out.println("memberDto = " + memberDto); } } +추가.. .....뒤늦게 MemberDto에 @ToString 을 달아 확인해보았습니다. 오류는 나지 않았지만 안에 값은 없었네요 ㅎㅎㅎ.......
high
2023-01-18T11:56:35.759Z
댓글 1
좋아요 1
조회수 553
해결됨
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
안녕하세요, 기본 키 자동 증가에 관해서 궁금한 게 있어서 질문 드립니다. 기본 키 자동 증가를 @GeneratedValue만 작성해주셨는데 찾아보니 @SequenceGenerator 라는 어노테이션도 있더라고요, 이 어노테이션은 굳이 사용을 안 해줘도 되는 것 인가요?
웹앱 java JPA spring-boot spring
gnstjrdlsla
2023-01-18T07:12:31.817Z
댓글 1
좋아요 0
조회수 392
