173만명의 커뮤니티!! 함께 토론해봐요.
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
유튜브 다트 강의, 인프런 플러터 강의, 그리고 코드팩토리의 플러터 프로그래밍 책까지 잘 보고 있습니다. 양질의 컨텐츠와 친절한 답변에 매번 감사드립니다. 현재 챗gpt api를 이용한 간단한 앱을 만들었고 이것을 빌드하려고 합니다. 책 606쪽의 flutter build appbundle이라고 터미널에 치면 아래 에러가 납니다. mac@HanHoseokui-iMac kind_teacher_han % flutter build appbundle 💪 Building with sound null safety 💪 FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:mergeReleaseResources'. > Multiple task action failures occurred: > A failure occurred while executing com.android.build .gradle.internal.res.Aapt2CompileRunnable > Android resource compilation failed ERROR:/Users/mac/Documents/codefactory/kind_teacher_han/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: AAPT: error: file failed to compile. > A failure occurred while executing com.android.build .gradle.internal.res.Aapt2CompileRunnable > Android resource compilation failed ERROR:/Users/mac/Documents/codefactory/kind_teacher_han/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: AAPT: error: file failed to compile. > A failure occurred while executing com.android.build .gradle.internal.res.Aapt2CompileRunnable > Android resource compilation failed ERROR:/Users/mac/Documents/codefactory/kind_teacher_han/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: AAPT: error: file failed to compile. * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 5s Running Gradle task 'bundleRelease'... 6.2s Gradle task bundleRelease failed with exit code 1 이미지 쪽에 에러가 있는 것 같아 보입니다. 저는 앱 아이콘 만들기 웹 사이트( https://www.appicon.co)에서 제가 만든 아이콘으로 안드로이드용 이미지를 만든 후 /Users/mac/Documents/codefactory/kind_teacher_han/android/app/src/main/res에 폴더 붙여넣기를 했었는데 이게 문제가 되었을까요? 옛날에 앱인벤터라는 교육용 블록코딩 앱 개발 플랫폼으로 했을 때는 앱 출시까지 그렇게 어렵지 않게 했었는데.. 한 달가량 헤메고 있으니 힘드네요ㅠㅠ 도와주세요!^^
amorvo
2023-07-01T18:14:14.851Z
댓글 1
좋아요 0
조회수 1119
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
부모 클래스를 상속할 때.. class Idol { String name; int membersCount; Idol({ required this.name, required this.membersCount, }); void sayName() { print('저는 ${this.name}입니다.'); } void sayMembersCount() { print('${this.name}은/는 ${this.membersCount}명의 멤버로 구성되어 있습니다.'); } } 강의에서 설명해주신 class GirlGroup extends Idol { GirlGroup( String name, int membersCount, ) : super( name: name, membersCount: membersCount, ); } 이 코드 대신 명시적으로 class BoyGroup extends Idol { BoyGroup({ required super.name, required super.membersCount, }); } 이렇게 사용해도 인스턴스에서 명시적으로 선언하는 것 외에 다른 차이는 없는 건가요? (두 가지 모두 정상 출력확인했습니다.)
건강한 고슴도치
2023-06-30T07:14:44.707Z
댓글 1
좋아요 0
조회수 336
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. 우선 저는 맥북을 사용하고 있습니다. import { VFC, useCallback, useEffect, useRef } from 'react'; import { Form, MentionsTextarea, SendButton, Toolbox } from './styles'; import React from 'react'; import autosize from 'autosize'; interface Props { chat: string; onSubmitForm: (e: any) => void; onChangeChat: (e: any) => void; placeholder?: string; } const ChatBox: VFC<Props> = ({ chat, onSubmitForm, onChangeChat, placeholder }) => { // const onSubmitForm = useCallback(() => {}, []); const textareaRef = useRef(null); useEffect(() => { if (textareaRef.current) { autosize(textareaRef.current); } }, []); const onKeydownChat = useCallback( (e) => { if (e.key === 'Enter') { if (!e.shiftKey) { e.preventDefault(); onSubmitForm(e); } } }, [onSubmitForm], ); return ( <Form onSubmit={onSubmitForm}> <MentionsTextarea id="editor-chat" value={chat} onChange={onChangeChat} onKeyDown={onKeydownChat} placeholder={placeholder} ref={textareaRef} /> <Toolbox> <SendButton className={ 'c-button-unstyled c-icon_button c-icon_button--light c-icon_button--size_medium c-texty_input__button c-texty_input__button--send' + (chat?.trim() ? '' : ' c-texty_input__button--disabled') } data-qa="texty_send_button" aria-label="Send message" data-sk="tooltip_parent" type="submit" disabled={!chat?.trim()} > <i className="c-icon c-icon--paperplane-filled" aria-hidden="true"></i> </SendButton> </Toolbox> </Form> ); }; export default ChatBox; 이건 제가 작성한 ChatBox입니다. import React, { useCallback } from 'react'; import { Container, Header } from './styles'; import useSWR, { useSWRInfinite } from 'swr'; import fetcher from '@utils/fetcher'; import { useParams } from 'react-router'; import gravatar from 'gravatar'; import ChatBox from '@components/ChatBox'; import ChatList from '@components/ChatList'; import useInput from '@hooks/useInput'; import axios from 'axios'; import { IDM } from '@typings/db'; const DirectMessage = () => { const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR(`/api/workspaces/${workspace}/users/${id}`, fetcher); const { data: myData } = useSWR('/api/users', fetcher); const [chat, onChangeChat, setChat] = useInput(''); const { data: chatData, mutate: mutateChat, revalidate, } = useSWR<IDM[]>(`/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=1`, fetcher); const onSubmitForm = useCallback( (e) => { e.preventDefault(); if (chat?.trim()) { axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => { revalidate(); setChat(''); console.log('submit'); }) .catch((error) => { console.log(error); }); } }, [chat], ); if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nickname} /> <span>{userData.nickname}</span> </Header> <ChatList chatData={chatData} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); }; export default DirectMessage; 이건 DirectMessage 입니다. e.preventDefault()로 기본 이벤트를 막아줬는데도 DM을 엔터로 전송하면 (한글로만 전송하면 2개씩 보내져요...!)어떨때는 2개가 보내지고 어떨때는 1개가 보내져요... 네트워크나 콘솔에도 2개씩 뜨고요.. 전송버튼을 눌렀을때는 1개만 보내집니다.
react 웹팩 typescript socket.io babel 클론코딩
jjh099
2023-06-30T06:20:11.161Z
댓글 2
좋아요 0
조회수 742
미해결
Slack 클론 코딩[실시간 채팅 with React]
강의를 따라하는 도중에 npx sequelize db:create를 입력하였을때는 정상적으로 "Database sleact create."라는 메세지가 확인됬습니다. 그 이후로 yarn dev를 실행하니 아래와 같은 오류가 확인됬습니다. 이유가 뭘까요?ㅜㅜ
react 웹팩 typescript socket.io babel 클론코딩
Sienna
2023-06-29T11:53:01.067Z
댓글 1
좋아요 0
조회수 361
미해결
하울의 안드로이드 인스타그램 클론 만들기
NavigationBarView 23년 이후 .. : 네이버블로그 ( naver.com ) 해결방법 정리 블로그
오세훈
2023-06-29T03:37:21.532Z
댓글 1
좋아요 0
조회수 527
해결됨
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
[VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: SqliteException(1299): while executing statement, NOT NULL constraint failed: category_colors.id, constraint failed (code 1299)이란 에러가나는데 flutter pub run build_runner build로햇는데도 이런데 어떻게하면될까요?ㅠㅠ
word high
2023-06-28T16:44:20.518Z
댓글 1
좋아요 0
조회수 404
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
위 사진처럼 자동완성 박스가 뜨면, 왼쪽에 심볼의 의미가 궁금합니다. 검색 해봤을때 C는 class, E는 enum 이라고 하는데 =의 의미는 무엇인가요??
승일
2023-06-28T08:20:25.933Z
댓글 1
좋아요 0
조회수 308
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
Flutter Hello World 강의에서 강사님이 작성하시는것과 똑같이 괄호 안에서 엔터키를 누르면서 코드를 작성을 했는데 에뮬레이터를 실행하니 모든 코드에 한줄에 자동으로 정렬되는데 한줄에 코드가 정렬되있으니 보기가 너무 힘든데 자동정렬을 없앨 수 있는방법이 있을까요? 그리고 강의에서는 에뮬레이터를 켜놓고 hot restart를 눌러도 에뮬레이터 화면이 내려가지 않는데 저는 에뮬레이터를 켜놓고 안드로이드 스튜디오의 화면을 클릭하면 에뮬레이터가 뒤로가서 번거로운데 이건 어떻게 해결하죠????
김동민
2023-06-28T08:18:13.212Z
댓글 1
좋아요 0
조회수 605
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
파란 버튼을 이용해서 플러터 SDK를 다운로드 받았는데 flutter doctor을 실행해보니 Flutter (the doctor check crashed) X Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know about this issue at https://github.com/flutter/flutter/issues . X Exception: Cannot find the executable for where . This can happen if the System32 folder (e.g. C:\Windows\System32 ) is removed from the PATH environment variable. Ensure that this is present and then try again after restarting the terminal and/or IDE. 라는 오류가 뜹니다. 이건 어떻게 해결해야 하는건가요? 그리고 또 안드로이드 스튜디오에선 [!] Android Studio (version 2022.1) X Unable to find bundled Java version. 라는 오류가 뜨는데 해결을 어떻게 해야하나요?
김동민
2023-06-27T09:33:19.050Z
댓글 1
좋아요 0
조회수 845
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
강의 잘보고 있습니다. 구글지도 사용해 보기에서 run하면 아래와 같은 화면이 보이고 지도는 보이지 않습니다. 디바이스도 변경해 보았는데 증상이 같습니다. 문제가 무엇일 까요?
shmin
2023-06-27T08:09:11.910Z
댓글 2
좋아요 0
조회수 577
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
도포자료 부록 버전 클릭하니까, https://drive.google.com/file/d/1uvbiIXHVC3QIYBD1XOFRdiHiDQL57-G8/view nextjs와 typescript 내용 한페이지만 있는데 부록 관련 도포자료 pdf가 어디 있나요~?
react node.js postgresql docker typescript 클론코딩 next.js
Sssekkk
2023-06-27T07:50:22.975Z
댓글 1
좋아요 1
조회수 260
해결됨
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
코드팩토리님 강의 잘 보고 있습니다. 제가 간단하게 만든 앱을 안드로이드에 배포하려고 합니다. 메뉴의 빌드 - 플러터 - 빌드 앱 번들 을 선택하면 위와 같은 에러가 납니다. 아무리 봐도 어떻게 해결해야할 지 모르겠습니다. 도와주시면 정말감사드리겠습니다. 그리고 앱을 출시하는 방법에 대해서 강의하신 내용이 있으신가요? 구글링해봐도 잘 모르겠네요ㅠ
amorvo
2023-06-26T15:48:26.832Z
댓글 1
좋아요 0
조회수 275
해결됨
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세용 현재 23.6월 기준 플러터 다운받으려고 하는데 강의 영상과 플러터 홈페이지가 좀 달라서 질문드립니다. 강의영상 녹화 당시에는 깃으로 플러터 SDK 다운받는 코드(커맨드)가 있었는데 현재기준은 없네요ㅠㅠ 현재 깃까지 다운받은 상태입니다..! 코드팩토리 디스코드 https://bit.ly/3HzRzUM Flutter 강의를 구매하시면 코드팩토리 디스코드 서버 플러터 프리미엄 채널에 들어오실 수 있습니다! 디스코드 서버에 들어오시고 저에게 메세지로 강의를 구매하신 이메일을 보내주시면 프리미엄 채널에 등록해드려요! 프리미엄 채널에 들어오시면 모든 질의응답 최우선으로 답변해드립니다!
vvpharos
2023-06-26T07:33:07.682Z
댓글 1
좋아요 0
조회수 553
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
https://www.gravatar.com/avatar?d=mp&f=y 에서 404 에러가 뜨네요
react node.js postgresql docker typescript 클론코딩 next.js
okcleff
2023-06-26T06:18:04.628Z
댓글 2
좋아요 0
조회수 627
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. import React from 'react'; import { Container, Header } from './styles'; import useSWR from 'swr'; import fetcher from '@utils/fetcher'; import { useParams } from 'react-router'; import gravatar from 'gravatar'; const DirectMessage = () => { const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR(`api/workspaces/${workspace}/members/${id}`, fetcher); const { data: myData } = useSWR('api/users', fetcher); if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retor' })} alt={userData.nickname} /> <span>{userData.nickname}</span> </Header> {/* <ChatList /> <ChatBox /> */} </Container> ); }; export default DirectMessage; 이건 DirectMessage입니다. // import EachDM from '@components/EachDM'; // import useSocket from '@hooks/useSocket'; import { CollapseButton } from '@components/DMList/styles'; import { IDM, IUser, IUserWithOnline } from '@typings/db'; import fetcher from '@utils/fetcher'; import React, { FC, useCallback, useEffect, useState } from 'react'; import { useParams } from 'react-router'; import { NavLink } from 'react-router-dom'; import useSWR from 'swr'; const DMList: FC = () => { const { workspace } = useParams<{ workspace?: string }>(); const { data: userData } = useSWR<IUser>('/api/users', fetcher, { dedupingInterval: 2000, // 2초 }); const { data: memberData } = useSWR<IUserWithOnline[]>( userData ? `/api/workspaces/${workspace}/members` : null, fetcher, ); // const [socket] = useSocket(workspace); const [channelCollapse, setChannelCollapse] = useState(false); const [countList, setCountList] = useState<{ [key: string]: number }>({}); const [onlineList, setOnlineList] = useState<number[]>([]); const toggleChannelCollapse = useCallback(() => { setChannelCollapse((prev) => !prev); }, []); const resetCount = useCallback( (id) => () => { setCountList((list) => { return { ...list, [id]: 0, }; }); }, [], ); const onMessage = (data: IDM) => { console.log('dm왔다', data); setCountList((list) => { return { ...list, [data.SenderId]: list[data.SenderId] ? list[data.SenderId] + 1 : 1, }; }); }; useEffect(() => { console.log('DMList: workspace 바꼈다', workspace); setOnlineList([]); setCountList({}); }, [workspace]); // useEffect(() => { // socket?.on('onlineList', (data: number[]) => { // setOnlineList(data); // }); // console.log('socket on dm', socket?.hasListeners('dm'), socket); // return () => { // console.log('socket off dm', socket?.hasListeners('dm')); // socket?.off('onlineList'); // }; // }, [socket]); return ( <> <h2> <CollapseButton collapse={channelCollapse} onClick={toggleChannelCollapse}> <i className="c-icon p-channel_sidebar__section_heading_expand p-channel_sidebar__section_heading_expand--show_more_feature c-icon--caret-right c-icon--inherit c-icon--inline" data-qa="channel-section-collapse" aria-hidden="true" /> </CollapseButton> <span>Direct Messages</span> </h2> <div> {!channelCollapse && memberData?.map((member) => { const isOnline = onlineList.includes(member.id); const count = countList[member.id] || 0; <NavLink key={member.id} activeClassName="selected" to={`/workapce/${workspace}/dm/${member.id}`} onClick={resetCount(member.id)} > ; <i className={`c-icon p-channel_sidebar__presence_icon p-channel_sidebar__presence_icon--dim_enabled c-presence ${ isOnline ? 'c-presence--active c-icon--presence-online' : 'c-icon--presence-offline' }`} aria-hidden="true" data-qa="presence_indicator" data-qa-presence-self="false" data-qa-presence-active="false" data-qa-presence-dnd="false" /> ;<span className={count > 0 ? 'bold' : undefined}>{member.nickname}</span> {member.id === userData?.id && <span> (나)</span>} {count > 0 && <span className="count">{count}</span>} </NavLink>; // return <EachDM key={member.id} member={member} isOnline={isOnline} />; })} </div> </> ); }; export default DMList; 이건 DMList입니다. 현재 DM페이지 만들기 강의를 듣고 있는데, DM리스트에 사용자가 하나도 표시가 되지 않는데 원래 지금 강의까지는 표시가 되지 않는게 맞나요? 워크스페이스 초대, 채널 멤버 초대해도 에러는 발생하지 않는데 DM리스트에 추가는 다음 강의에서 진행하나요? 아니면 지금도 되야하는게 정상인가요..?
react 웹팩 typescript socket.io babel 클론코딩
jjh099
2023-06-26T03:11:44.545Z
댓글 1
좋아요 0
조회수 383
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
window에선 ios에뮬레이터를 돌릴 방법이 없나요?
신태현
2023-06-26T00:51:07.845Z
댓글 1
좋아요 0
조회수 6701
미해결
Slack 클론 코딩[실시간 채팅 with React]
import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { VFC, useCallback, useState } from 'react'; import { Redirect, Route, Switch, useParams } from 'react-router'; import useSWR from 'swr'; import { Header, ProfileImg, RightMenu, WorkspaceWrapper, WorkspaceName, Workspaces, Channels, Chats, MenuScroll, ProfileModal, LogOutButton, WorkspaceButton, AddButton, WorkspaceModal, } from './styles'; import gravatar from 'gravatar'; import loadable from '@loadable/component'; import Menu from '@components/Menu'; const Channel = loadable(() => import('@pages/Channel')); const DirectMessage = loadable(() => import('@pages/DirectMessage')); import { Link } from 'react-router-dom'; import { IChannel, IUser } from '@typings/db'; import Modal from '@components/Modal'; import { Button, Input, Label } from '@pages/SignUp/styles'; import useInput from '@hooks/useInput'; import { toast } from 'react-toastify'; import CreateChannelModal from '@components/CreateChannelModal'; import InviteWorkspaceModal from '@components/InviteWorkspaceModal'; import InviteChannelModal from '@components/InviteChannelModal'; // import ChannelList from '@components/ChannelList'; import DMList from '@components/DMList'; import ChannelList from '@components/ChannelList'; // FC타입안에 children이 알아서 들어있음 // children 안쓸거면 VFC const Workspace: VFC = () => { const [showUserMenu, setShowUserMenu] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); const [showInviteWorkspaceModal, setShowInviteWorkspaceModal] = useState(false); const [showInviteChannelModal, setShowInviteChannelModal] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); const [showWorkspaceModal, setShowWorkspaceModal] = useState(false); const [ShowCreateChannelModal, setShowCreateChannelModal] = useState(false); const { workspace } = useParams<{ workspace: string }>(); // 사용자 데이터 가져오기 const { data: userData, error, revalidate, mutate, } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, }); // channel 데이터 가져오기 const { data: channelData } = useSWR<IChannel[]>(userData ? `/api/workspaces/${workspace}/channels` : null, fetcher); // 워크스페이스에 있는 멤버 데이터 const { mutate: revalidateMembers } = useSWR<IUser[]>( userData ? `/api/workspaces/${workspace}/members` : null, fetcher, ); // 로그아웃 const onLogout = useCallback(() => { axios .post('/api/users/logout', null, { withCredentials: true, }) .then((response) => { mutate(response.data); // 기존에 받은 데이터를 mutate의 data에 담음 }) .catch((error) => { console.log(error); }); }, []); // 프로필 누르면 메뉴 보이기 const onClickUserProfile = useCallback(() => { setShowUserMenu((prev) => !prev); }, []); // 프로필 닫기 const onCloseUserProfile = useCallback((e) => { e.stopPropagation(); setShowUserMenu(false); }, []); // 워크스페이스 모달 열기 const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []); // 워크스페이스 모달 닫기 const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); setShowCreateChannelModal(false); setShowInviteChannelModal(false); setShowInviteWorkspaceModal(false); }, []); // 워크스페이스 생성 const onCreateWorkspace = useCallback( (e) => { e.preventDefault(); // trim() 안넣으면 띄어쓰기 넣으면 걍 통과됨 if (!newWorkspace || !newWorkspace.trim()) return; if (!newUrl || !newUrl.trim()) return; axios .post( '/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }, ) .then(() => { revalidate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }) .catch((error) => { console.log(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [newWorkspace, newUrl], ); // 워크스페이스 사용자 초대 const onClickInviteWorkspace = useCallback(() => { setShowInviteWorkspaceModal(true); }, []); // Channel // 토글 const toggleWorkspaceModal = useCallback(() => { setShowWorkspaceModal((prev) => !prev); }, []); // 채널 만들기 const onClickAddChannel = useCallback(() => { setShowCreateChannelModal(true); }, []); if (!userData) { return <Redirect to="/login" />; } return ( <div> <Header> <RightMenu> <span onClick={onClickUserProfile}> <ProfileImg src={gravatar.url(userData.nickname, { s: '28px', d: 'retro' })} alt={userData.nickname} /> {showUserMenu && ( <Menu style={{ right: 0, top: 38 }} show={showUserMenu} onCloseModal={onCloseUserProfile}> <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 onClick={toggleWorkspaceModal}>Sleact</WorkspaceName> <MenuScroll> <Menu show={showWorkspaceModal} onCloseModal={toggleWorkspaceModal} style={{ top: 95, left: 80 }}> <WorkspaceModal> <h2>Sleact</h2> <button onClick={onClickInviteWorkspace}>워크스페이스에 사용자 초대</button> <button onClick={onClickAddChannel}>채널 만들기</button> <button onClick={onLogout}>로그아웃</button> </WorkspaceModal> </Menu> <ChannelList /> <DMList /> {/* {channelData?.map((v) => ( <div>{v.name}</div> ))} */} </MenuScroll> </Channels> <Chats> <Switch> <Route path="/workspace/:workspace/channel/:channel" component={Channel} /> <Route path="/workspace/:workspace/dm/:id" component={DirectMessage} /> </Switch> </Chats> </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>워크스페이스 url</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> <CreateChannelModal show={ShowCreateChannelModal} onCloseModal={onCloseModal} setShowCreateChannelModal={setShowCreateChannelModal} /> <InviteWorkspaceModal show={showInviteWorkspaceModal} onCloseModal={onCloseModal} setShowInviteWorkspaceModal={setShowInviteWorkspaceModal} /> <InviteChannelModal show={showInviteChannelModal} onCloseModal={onCloseModal} setShowInviteChannelModal={setShowInviteChannelModal} /> </div> ); }; export default Workspace; 이건 제가 작성한 WorkSpace 입니다. import Modal from '@components/Modal'; import useInput from '@hooks/useInput'; import { Button, Input, Label } from '@pages/SignUp/styles'; import { IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { FC, useCallback } from 'react'; import { useParams } from 'react-router'; import { toast } from 'react-toastify'; import useSWR from 'swr'; interface Props { show: boolean; onCloseModal: () => void; setShowInviteChannelModal: (flag: boolean) => void; } const InviteChannelModal: FC<Props> = ({ show, onCloseModal, setShowInviteChannelModal }) => { const { workspace, channel } = useParams<{ workspace: string; channel: string }>(); const [newMember, onChangeNewMember, setNewMember] = useInput(''); const { data: userData } = useSWR<IUser>('/api/users', fetcher); const { revalidate: revalidateMembers } = useSWR<IUser[]>( userData ? `/api/workspaces/${workspace}/channels/${channel}/members` : null, fetcher, ); console.dir(channel); const onInviteMember = useCallback( (e) => { e.preventDefault(); if (!newMember || !newMember.trim()) { return; } axios .post(`/api/workspaces/${workspace}/channels/${channel}/members`, { email: newMember, }) .then(() => { revalidateMembers(); setShowInviteChannelModal(false); setNewMember(''); }) .catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [channel, newMember, revalidateMembers, setNewMember, setShowInviteChannelModal, workspace], ); return ( <Modal show={show} onCloseModal={onCloseModal}> <form onSubmit={onInviteMember}> <Label id="member-label"> <span>채널 멤버 초대</span> <Input id="member" value={newMember} onChange={onChangeNewMember} /> </Label> <Button type="submit">초대하기</Button> </form> </Modal> ); }; export default InviteChannelModal; 이건 제가 작성한 InviteChannelModal입니다. xhr.js:210 GET http://localhost:3090/api/workspaces/sleact/channels/undefined/members 404 (Not Found) dispatchXhrRequest @ xhr.js:210 xhrAdapter @ xhr.js:15 dispatchRequest @ dispatchRequest.js:58 request @ Axios.js:108 Axios.<computed> @ Axios.js:129 wrap @ bind.js:9 fetcher @ fetcher.ts:18 eval @ use-swr.js:392 step @ use-swr.js:43 eval @ use-swr.js:24 eval @ use-swr.js:18 __awaiter @ use-swr.js:14 eval @ use-swr.js:344 softRevalidate @ use-swr.js:532 onFocus @ use-swr.js:550 revalidate_1 @ use-swr.js:73 eval @ use-swr.js:77 eval @ web-preset.js:29 그런데 위와 같은 에러가 발생합니다. 콘솔에 channel을 출력해도 undefined가 뜹니다.. 그런데 url을 보면 http://localhost:3090/workspace/sleact/channel/테스트채널 이렇게 채널 명이 표시가 되는데 도대체 뭐 때문에 undefined라고 뜨는지 모르겠습니다... 아무리 찾아봐도 알 수가 없어서 글 남깁니다... 분명 WorkSpace의 route에도 오타가 없고 url도 표시가 잘되는데 왜 undefined일까요...
react 웹팩 typescript socket.io babel 클론코딩
jjh099
2023-06-25T15:36:04.840Z
댓글 1
좋아요 0
조회수 342
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
postman 사용하여 수업과 동일하게 serviceKey를 입력했는데.. 제목과 같은 오류가 계속 뜨네요.
김대희
2023-06-25T02:24:17.564Z
댓글 1
좋아요 0
조회수 586
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. 먼저 제로초님 강의 보면서 공부 열심히 하고 있습니다. 감사합니다!. 현재 DMList 만드는 중인데 깃허브에 올려주신 front의 DMList와 제로초님이 강의하면서 작성하시는 DMList의 코드가 서로 다른 부분이 꽤 있던데 원래 그런가요...? 영상을 정지해가면서 수정하고 있지만 안보이는 코드가 있어서 많이 헷갈리네요 ㅠㅠ
react 웹팩 typescript socket.io babel 클론코딩
jjh099
2023-06-24T14:40:04.188Z
댓글 1
좋아요 0
조회수 401
미해결
애플 웹사이트 인터랙션 클론!
혹시 강의내용과 같은 페이지를 쉽게 만드는 라이브러리 같은게 있을까요? 저런 스크롤 애니메이션 페이지를 만들 때 바닐라 자바스크립트가 아닌 더 쉽게 만들 수 있게 해주는게 혹시 있나 궁금합니다
HTML/CSS javascript 웹-디자인 svg 인터랙티브-웹 클론코딩
웹개바르르
2023-06-22T19:18:07.063Z
댓글 2
좋아요 1
조회수 448
