묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
flutter 설치 과정 flutter warning
[!] Flutter (Channel stable, 3.7.12, on macOS 13.3.1 22E261 darwin-arm64, locale ko-KR) • Flutter version 3.7.12 on channel stable at /Users/tooney/documents/libraries/flutter ! Warning: flutter on your path resolves to /Users/tooney/Documents/libraries/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/tooney/documents/libraries/flutter. Consider adding /Users/tooney/documents/libraries/flutter/bin to the front of your path. ! Warning: dart on your path resolves to /Users/tooney/Documents/libraries/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/tooney/documents/libraries/flutter. Consider adding /Users/tooney/documents/libraries/flutter/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 4d9e56e694 (12 days ago), 2023-04-17 21:47:46 -0400 • Engine revision 1a65d409c7 • Dart version 2.19.6 • DevTools version 2.20.1 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. flutter doctor -v 해서 얻은 에러코드인데 어느부부을 수정해야하는지 몰라서 질문드립니다.~/.zshrc에서 수정해야되는건지 알고싶습니다.
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
영상 5:20 설명 질문
실패하면 then의 revalidate때문에 원래 있던 데이터가 사라진다고 하셨는데 따로 catch부분에서 처리해줘야 이전에 넣어뒀던 가짜 데이터를 삭제하는 등 처리되는 거 아닌가요?
-
해결됨[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
isScrollable에서 오류가 발생합니다.
안녕하세요!BasicAppbarTabbarScreen 강의 진행 중 isScrollable 부분이 제대로 작동하지 않아 질문드립니다.제 코드의 문제인가 해서 선생님 깃허브의 코드를 갖다 썼습니다.안드로이드 에뮬레이터 Tiramisu버전 Pixel XL 사용중입니다. isScrollable: false,Row에 감싸기 전 위와 같이 isScrollable을 false로 설정하면 A RenderFlex overflowed by 2.0 pixels on the bottom.이런 오류가 발생합니다.이후 Row로 감싸게 되면이렇게 AppBar의 내용이 나오질 않게 됩니다.안드로이드 에뮬레이터 동일버전 Pixel 5를 만들어 재시도해봤지만 같은 문제가 발생하여 해결 방법을 여쭙고자 질문드립니다! 강의가 너무 재밌어서 매일같이 보고 있습니다.특히 점점 힘들어 갈 때쯤 여기서 포기하면 안된다고 말씀하시는게 너무 재밌었어요 ㅋㅋ좋은 강의 만들어주셔서 감사합니다!
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
useSWRInfinite에서 index질문
const { data: chatData, mutate, setSize, } = useSWRInfinite<IDM[]>( (index) => `/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=${index + 1}`, fetcher, );setSize에서 prevSize +1이 1페이지 더 불러오는 거면 useSWRInfinite에서 index +1은 뭔 역할이죠? 둘 다 페이지 관련된거라 헷갈립니다.
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
비디오 파일이 안옮겨집니다
비디오 파일을 에뮬레이터로 옮기는데 이런 팝업이 뜨면서 안되네요 ㅠㅠ.apk를 에뮬레이터로 옮기면 된다고 해서이 파란색 파일을 옮겼는데요이렇게 install 팝업창 뜨더니 그냥 꺼지고 다시 옮겨보면 처음과 똑같은 창이 뜹니다. ㅠㅠ제가 만든 파일 이름(vid_player).apk를 찾아봤는데 없구요 ㅠㅠ뭐가 잘못됐는지 모르겠네요 ㅠㅠ
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
[Tip] NAS와 같이 외부의 DB에 연결하는 경우
Environment- Synology NAS - code-server - MySQL(mariaDB) - Node.js@latest | v18.16.0 - npm@latest | v9.5.1 - nvm@latest | v0.39.3sequelize 사용 시, 로컬이 아닌 외부 DB에 연결하는 경우저 같은 경우, Synology NAS로 code-server를 사용하고 있습니다. 저와 비슷한 환경에서 개발하시는 경우, 포트 설정에 애먹으시는 분 있을까봐 메모 납깁니다.db의 port를 방화벽에서 해제하기해당 포트 포트포워딩(공유기)참고로, phpMyAdmin이나 WorkBench에서 외부 DB에 접근이 가능한데, squelize로 접근하면 ERROR: connect ETIMEDOUT과 같은 메시지가 출력되는 경우가 있는데, 저는 아래 방법으로 해결할 수 있었습니다.(위 에러메시지는 host는 찾았지만 DB를 찾지 못했거나, DB가 있어도 접근할 수 없을 때 출력된다고 합니다.){ "development": { "username": "slackk", "password": process.env.DB_PASSWORD, "database": "slack-db", "host": "***.***.***.***", //IP "port": 3307, //source|target 다를 경우 별도로 지정 "dialect": "mysql" } }port를 별도로 지정해주어야 합니다. ERROR: getaddrinfo ENOTFOUND {IP address} 메시지가 출력되는 경우host에 입력한 주소 문제입니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
로그인 성공시 /workspace/channel 로 이동이 안되고 있습니다.
App.tsximport React, { FC } from 'react'; import loadable from '@loadable/component'; import { Switch, Route, Redirect } from 'react-router'; const Login = loadable(() => import('@pages/Login')); const SignUp = loadable(() => import('@pages/SignUp')); const Channel = loadable(() => import('@pages/Channel')); const App: FC = () => { return ( <Switch> <Redirect exact path="/" to="/login" /> <Route path="/login" component={Login} /> <Route path="/signUp" component={SignUp} /> <Route path="/workspace/channel" component={Channel} /> </Switch> ); }; export default App; Login/ index.tsximport React, { useState, useCallback } from 'react'; import useInput from '@pages/hooks/useinput'; import axios from 'axios'; import { Error, Form, Label, Input, LinkContainer, Button, Header } from '@pages/SignUp/styles'; import { Link, Redirect } from 'react-router-dom'; import useSWR from 'swr'; import fetcher from '@utils/fetcher'; const Login = () => { const { data, error, revalidate } = useSWR('http://localhost:3095/api/users', fetcher); //주소를 fetcher로 옮겨주고 실제로 주소를 어떻게 처리할지 정해줌 const [logInError, setLogInError] = useState(false); const [email, onChangeEmail] = useInput(''); const [password, onChangePassword] = useInput(''); const onSubmit = useCallback( (e) => { e.preventDefault(); setLogInError(false); axios .post( 'http://localhost:3095/api/users/login', { email, password }, { withCredentials: true, }, ) .then(() => { revalidate(); }) .catch((error) => { setLogInError(error.response?.data?.statusCode === 401); }); }, [email, password], ); if (data) { return <Redirect to="/workspace/channel" />; }Channel / index.tsximport Workspace from '@layouts/Workspace'; import React from 'react'; const Channel = () => { return ( <Workspace> <div>로그인을 축하합니다.</div> </Workspace> ); }; export default Channel; Workspace.tsximport React, { FC, useCallback } from 'react'; import useSWR from 'swr'; import fetcher from '@utils/fetcher'; import axios from 'axios'; import { Redirect } from 'react-router'; const Workspace: FC = ({ children }) => { const { data, error, revalidate } = useSWR('http://localhost:3095/api/users', fetcher); const onLogout = useCallback(() => { axios .post('http://localhost:3095/api/users/logout', null, { withCredentials: true, }) .then(() => { revalidate(); }); }, []); if (!data) { return <Redirect to="/login" />; } return ( <div> <button onClick={onLogout}>로그아웃</button> {children} </div> ); }; export default Workspace; 현재 코드에서 로그인 성공까지 되는데 페이지 이동이 없습니다... 하나하나 빠짐없이 확인 해봤는데 제가 찾지 못하는거 같습니다 ㅠㅠ더군다나 URl 주소를 다이렉트로 localhost:3090/workspace/channel 입력해도 아무런 창이 뜨지 않고 있어서 어떤 문제가 있는지 확인이 어렵습니다.. 도움을 부탁드려요
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
정규표현식 질문
만약에 닉네임을 name[react](23) 라고 지었고, id가 20이라면data.content는 @[name[react](23)](20) 이런식으로 되잖아요. 그런데 거기서 코드에 있는 정규표현식을 쓰면 match는](1) 부분을 빼먹게 되고 그 상태에서 arr을 구하면닉네임이 name[react 으로, id는 1이 아닌23으로 출력되더라고요. 실제로 예시와 똑같이 회원가입 하고 name[react](23)에게 멘션 해보니클릭했을 때 초깃값으로 파란줄이 name[react 까지만 생성되고 추가로 ](20) 이란 텍스트가 더해지더라고요. (참고로 name[react](23)의 ID가 20입니다.)물론 Link로 넘어가는 것도 안되고요. 그래서 +? 말고 그냥 +로 해보니깐 위처럼 잘 매칭 되는 것 같아서 코드에 적용시켰더니이제 Link부분은 잘 나오는데 멘션 클릭시 초깃값이 여전히 이상하게 나옵니다. 저 부분은 어딜 고쳐야 되는 건가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
상위커뮤니티 데이터 가져오기 undefined가 뜨네요
커뮤니티 리스트 ui생성 강의 부분에서 맨앞 내용에서 상위 커뮤니티 데이터를 가져오는 부분이const {data: topsubs} = useSWR<Sub[]>(address,fetcher) 부분 undefined가 나오네요 ㅠ 소스코드가 확인해서 오타도 확인해봤는데 원인을 찾지못했습니다. 혹시 짐작가는 부분이 있으시나요?
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
폴링 방식 쓰면 CORS에러 나는 이유
웹 소켓쓸 때 폴링방식으로 쓰면 http갔다가 웹 소켓으로 전환되기 때문에 CORS문제가 발생한다고 했는데 http요청을 한다 한들 저희는 이미 proxy를 설정한 상태인데 왜 cors문제가 발생하는 건가요?
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
socket.io 버전
다시 시도해보고 질문하겠습니다.
-
해결됨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 sleactDB 연결 성공GET /api/users 304 24.697 ms - -GET /api/users 200 4.038 ms - 5GET /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 - --회원가입 indeximport 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> 이미 회원이신가요? <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:trueconnection:closedate:Wed, 26 Apr 2023 05:29:10 GMTetag:W/"5-fLbvuYullyqbUJDcLlF/4U0SywQ"vary:Originx-powered-by:Express요청 헤더소스 보기Accept:application/json, text/plain, /Accept-Encoding:gzip, deflate, brAccept-Language:ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7Connection:keep-aliveHost:localhost:3090If-None-Match:W/"5-fLbvuYullyqbUJDcLlF/4U0SywQ"Referer:http://localhost:3090/signupsec-ch-ua:"Chromium";v="112", "Google Chrome";v="112", "Not:A-Brand";v="99"sec-ch-ua-mobile:?0sec-ch-ua-platform:"Windows"Sec-Fetch-Dest:emptySec-Fetch-Mode:corsSec-Fetch-Site:same-originUser-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
배포시 Ubuntu에 yarn 설치
안녕하세요 선생님,yarn을 사용중이었는데, Ubuntu에서 npm이 아니라 yarn을 설치하면 되겠죠?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
버전이 다른데 어떤 식으로 학습하는게 좋을까요?
Nextjs 버전을 내리고 강의 버전과 똑같이 맞춰서 사용할 지, 아니면 문법을 수정하여 학습해야 할 지 모르겠습니다.. index.tsx 구조 다른거부터 머리아프네요 ㅜㅜ... 강의에서 사용하신 버전도 알려주세요!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
섹션 1 관련 강의 노트는 없는지요?
안녕하세요. 강의를 듣고 있는 수강생 입니다. 강의 관련 기본 지식이 부족하다 보니, 여러 번 듣게 되는데요. 섹션 1에 대한 강의노트가 없는 것 같습니다. (draw.io diagram file)혹시 받을 수 있는지 문의 드립니다. 감사합니다.
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
api/workspaces POST요청시 500에러가 뜹니다.
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], );뭐가 문제인건가요?
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
agoraAPI강의중
renderMainView() { if (uid == null) { return Center( child: Text('채널에 참여해 주세요.'), ); } else { return AgoraVideoView( controller: VideoViewController( rtcEngine: engine!, canvas: VideoCanvas( uid: 0, ), ), ); } } 여기서 위에 engine!에서 casterror가 나는데 위 에러가 발생후 안드로이드 시뮬레이터에서 화면이 보이지않습니다. 이부분 해결방법이 있을까요?
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
생성자에 const 만 되는 이유
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.코드팩토리 디스코드https://bit.ly/3HzRzUMFlutter 강의를 구매하시면 코드팩토리 디스코드 서버 플러터 프리미엄 채널에 들어오실 수 있습니다! 디스코드 서버에 들어오시고 저에게 메세지로 강의를 구매하신 이메일을 보내주시면 프리미엄 채널에 등록해드려요! 프리미엄 채널에 들어오시면 모든 질의응답 최우선으로 답변해드립니다! 안녕하세요. 생성자에 const 만 되고, final 을 사용하면 오류가 발생하는 이유가 궁금해서 질문 드립니다.
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
interface Props 타입 넣는 법 질문
interface Props { show: boolean; onCloseModal: () => void; style: CSSProperties; closeButton?: boolean; } const Menu: FC<React.PropsWithChildren<{}>> = ({ children, style, show, onCloseModal, closeButton }) => {...}이 상태에선 Props타입을 어떻게 넣어야 하는 건가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
클라이언트와 서버를 Docker로 배포할 시 보안 관련 질문 드립니다.
강의에서 좀 더 나아가 클라이언트와 서버도 도커 환경으로 구축?을 해보려고 합니다.계획은 Docker hub private repo에 Dockerfile로 빌드된 이미지를 push하고 ec2인스턴스에서 docker-compose up으로 pull을 받으려고 합니다. 간단히 테스트를 해보니 제대로 실행은 되고 있으나 보안적인 부분에 있어 문제될 것이 있나 궁금하여 질문 드립니다.답변 주시면 감사하겠습니다.감사합니다~