173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Slack 클론 코딩[실시간 채팅 with React]
웹 소켓쓸 때 폴링방식으로 쓰면 http갔다가 웹 소켓으로 전환되기 때문에 CORS문제가 발생한다고 했는데 http요청을 한다 한들 저희는 이미 proxy를 설정한 상태인데 왜 cors문제가 발생하는 건가요?
해결됨
Slack 클론 코딩[실시간 채팅 with React]
다시 시도해보고 질문하겠습니다.
해결됨
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> 이미 회원이신가요? <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
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요 선생님, yarn을 사용중이었는데, Ubuntu에서 npm이 아니라 yarn을 설치하면 되겠죠?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
Nextjs 버전을 내리고 강의 버전과 똑같이 맞춰서 사용할 지, 아니면 문법을 수정하여 학습해야 할 지 모르겠습니다.. index.tsx 구조 다른거부터 머리아프네요 ㅜㅜ... 강의에서 사용하신 버전도 알려주세요!
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요. 강의를 듣고 있는 수강생 입니다. 강의 관련 기본 지식이 부족하다 보니, 여러 번 듣게 되는데요. 섹션 1에 대한 강의노트가 없는 것 같습니다. ( draw.io diagram file) 혹시 받을 수 있는지 문의 드립니다. 감사합니다.
해결됨
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], ); 뭐가 문제인건가요?
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
renderMainView() { if (uid == null) { return Center( child: Text('채널에 참여해 주세요.'), ); } else { return AgoraVideoView( controller: VideoViewController( rtcEngine: engine!, canvas: VideoCanvas( uid: 0, ), ), ); } } 여기서 위에 engine!에서 casterror가 나는데 위 에러가 발생후 안드로이드 시뮬레이터에서 화면이 보이지않습니다. 이부분 해결방법이 있을까요?
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 코드팩토리 디스코드 https://bit.ly/3HzRzUM Flutter 강의를 구매하시면 코드팩토리 디스코드 서버 플러터 프리미엄 채널에 들어오실 수 있습니다! 디스코드 서버에 들어오시고 저에게 메세지로 강의를 구매하신 이메일을 보내주시면 프리미엄 채널에 등록해드려요! 프리미엄 채널에 들어오시면 모든 질의응답 최우선으로 답변해드립니다! 안녕하세요. 생성자에 const 만 되고, final 을 사용하면 오류가 발생하는 이유가 궁금해서 질문 드립니다.
해결됨
Slack 클론 코딩[실시간 채팅 with React]
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 hub private repo에 Dockerfile로 빌드된 이미지를 push하고 ec2인스턴스에서 docker-compose up으로 pull을 받으려고 합니다. 간단히 테스트를 해보니 제대로 실행은 되고 있으나 보안적인 부분에 있어 문제될 것이 있나 궁금하여 질문 드립니다. 답변 주시면 감사하겠습니다. 감사합니다~
해결됨
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번인가 싶기도 하고 헷갈립니다. 뭐가 맞는거죠?
해결됨
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를 걸어주려고 하는데 잘 되지 않습니다 어떻게 개선하면 좋을까요?
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
안드로이드 스튜디오에서 프로젝트를 재시작하면 lib 폴더가 사라져있어서 엔트리포인트를 못찾고 있습니다.. 프로젝트 파일 구조에는 있는데 프로젝트탭을 누르면 안보이네요 ㅜㅜ
해결됨
Slack 클론 코딩[실시간 채팅 with React]
그냥 기존의 백엔드 app.js 코드 그대로 하고 웹팩 데브서버에 프록시 설정을 하지 않고 회원가입 했을 때 201로 요청이 성공했습니다. 하지만 제로초님과 달리 OPTIONS요청이 추가적으로 생기지 않았고 POST요청만 네트워크 창에 보이는데 잘못된게 있는 건가요 아님 시스템 상 뭐가 바뀐건가요? 작동상 문제는 없는데 궁금해서 여쭤봅니다. index.ts webpack.config.ts app.js
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
Xcode - develop for iOS and macOS (Xcode 14.3) ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
안녕하세요. 중급까지 다 듣긴했는데 프로젝트 중, 폼필드 부분에 복습을 할 필요성이 생겨 돌아와서 보던중 궁금한 점이 생겨서 질문드립니다. onSaved의 타입이 현재의 플러터(3.7.11) 혹은 다트(2.19.6)에서 확인을 해보면 text_form_field.dart에서 내용이 저는 ValueChanged<String?> onFieldSubmitted, super.onSaved, super.validator, 로 표기가 됩니다. text_form_field.dart 에서는 FormFieldSetter<String> 에 해당하는 타입이나 문구는 cmd+f를 해서 찾아보아도 나오진 않아요. 다만 Form 위젯의 정의에서는 타입데프로 나오긴 하며, 강의에서 처럼 onSaved를 매개변수로 받아 외부에서 입력하도록 했을때 FormFieldSetter<String>로 해도 작동은 하네요. 버전이 바뀌며 변경이 있었던 건지 이 부분은 왜 text_form_field.dart에서 찾을 수가 없는지 궁금합니다. 또한 이런 경우 Form위젯을 뒤지지 않고도 적절한 타입을 찾을 수 있는 방법을 알고 싶습니다. 감사합니다.
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
webview 4.x 버전으로 수정 했습니다. 근데 에러가 발생해서요.. 계속 영상을 돌려봐도 똑같이 입력 했는데 ㅜㅜ 해결책이 필요합니다!!! 도와주세요!! 콘솔에 나타난 에러화면이랑 소스코드 아래 첨부 드립니다. <소스코드> import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; final homeUrl = Uri.parse('https://blog.codefactory.ai'); class HomeScreen extends StatelessWidget { WebViewController controller = WebViewController() ..setJavaScriptMode(JavaScriptMode.unrestricted) ..loadRequest(homeUrl); HomeScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.orange, title: Text('Code Factory'), centerTitle: true, actions: [ IconButton( onPressed: () { controller.loadRequest(homeUrl); }, icon: Icon( Icons.home, ), ), ], ), body: WebViewWidget(controller: controller), ); } } import 'package:flutter/material.dart'; import 'package:web_view_ex/screen/home_screen.dart'; void main() { runApp( MaterialApp( debugShowCheckedModeBanner: false, home: HomeScreen(), ), ); } <에러>
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
항상 좋은 강의 감사드려유♡
해결됨
Slack 클론 코딩[실시간 채팅 with React]
mysql 실행할 때 프롬프트에서 mysql -h localhost -u root -p 로 입력한 사용자 명이랑 config.js 파일에서의 username값과 일치해야 하나요? 그리고 프롬프트로 들어가지 않고 그냥 MySQL 8.0 Command Line Client 파일을 클릭해서 실행시키면 바로 비번입력하는게 나오던데 이렇게 들어가도 상관없나요?
