inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

str.toLowerCase is not a function

미해결

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

예상하지 못한 부분에서 에러가 나와서 질문 남겨드립니다 ! ChatBox.tsx import React, { useCallback, useEffect, useRef, VFC } from 'react'; import { ChatArea, EachMention, Form, MentionsTextarea, SendButton, Toolbox } from './styles'; import autosize from 'autosize'; import { Mention, SuggestionDataItem } from 'react-mentions'; import { useParams } from 'react-router'; import useSWR from 'swr'; import { IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import gravatar from 'gravatar'; interface Props { chat: string; onSubmitForm: (e: any) => void; onChangeChat: (e: any) => void; placeholder?: string; } const ChatBox: VFC<Props> = ({ chat, onSubmitForm, onChangeChat, placeholder }) => { const { workspace } = useParams<{ workspace: string }>(); const { data: userData, error, revalidate, mutate, } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, // 2초 }); const { data: memberData } = useSWR<IUser[]>(userData ? `/api/workspaces/${workspace}/members` : null, fetcher); const textareaRef = useRef<HTMLTextAreaElement>(null); useEffect(() => { if (textareaRef.current) { autosize(textareaRef.current); } }, []); const onKeydownChat = useCallback( (e) => { if (e.key === 'Enter') { if (!e.shiftKey) { e.preventDefault(); onSubmitForm(e); } } }, [onSubmitForm], ); const renderSuggestion = useCallback( ( suggestion: SuggestionDataItem, search: string, highlightedDisplay: React.ReactNode, index: number, focus: boolean, ): React.ReactNode => { if (!memberData) return; return ( <EachMention focus={focus}> <img src={gravatar.url(memberData[index].email, { s: '20px', d: 'retro' })} alt={memberData[index].nickname} /> <span>{highlightedDisplay}</span> </EachMention> ); }, [memberData], ); return ( <ChatArea> <Form onSubmit={onSubmitForm}> <MentionsTextarea id="editor-chat" value={chat} onChange={onChangeChat} onKeyPress={onKeydownChat} placeholder={placeholder} inputRef={textareaRef} allowSuggestionsAboveCursor > <Mention appendSpaceOnAdd trigger="@" data={memberData?.map((v) => ({ id: v.id, display: v.nickname })) || []} renderSuggestion={renderSuggestion} /> </MentionsTextarea> <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" /> </SendButton> </Toolbox> </Form> </ChatArea> ); }; export default ChatBox; 혼자서 해결해보려다가 못찾고 있어서 질문 남겨드려요 ㅠㅠ

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
유니크한 고슴도치 댓글 2 좋아요 0 조회수 835

IOS/Android simulator 실행방법 문의

미해결

[LG유플러스] 앱 만들기 초급 과정 (Flutter)

flutter 프로젝트 생성할때, 강의내용중에는 IOS/Android simulator 실행방법이 없는데, 어떻게 실행하는지 알려주시기 바랍니다.

  • flutter
  • 클론코딩
석광국 댓글 1 좋아요 0 조회수 352

데이터 질문이요

미해결

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

const onSubmitForm = useCallback( (e) => { e.preventDefault(); if (chat?.trim() && chatData) { const savedChat = chat; mutateChat((prevChatData) => { prevChatData?.[0].unshift({ id: (chatData[0][0]?.id || 0) + 1, content: savedChat, SenderId: myData.id, Sender: myData, ReceiverId: userData.id, Receiver: userData, createdAt: new Date(), }); return prevChatData; }, false).then(() => { localStorage.setItem(`${workspace}-${id}`, new Date().getTime().toString()); setChat(''); if (scrollbarRef.current) { console.log('scrollToBottom!', scrollbarRef.current?.getValues()); scrollbarRef.current.scrollToBottom(); } }); axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => console.log('first')) .catch(console.error); } }, [chat, workspace, id, myData, userData, chatData, mutateChat, setChat], ); const onMessage = useCallback( (data: IDM) => { if (data.SenderId === Number(id) && myData.id !== Number(id)) { mutateChat((chatData) => { chatData?.[0].unshift(data); return chatData; }, false) 이부분은 socket?.on('dm', onMessage) dm보내는 페이지에서 디엠을 보낼 때 onSubmitForm에서 mutate가 먼저 실행돼서 화면 데이터를 먼저 바꿔주고 그 다음 서버로 데이터를 보낸 뒤 처리하는 과정에서 socket.emit()이 실행되고 onMessage가 실행되는 걸로 이해했는데요. onMessage가 받는 데이터가 onSumbitForm의 mutate가 인자로 받는 함수랑 똑같아서 중복작업이 아닌가 싶어서 onMessage mutate 안의 chat.Data ?.[0].unshift(data)를 지우고 실행해봐도 똑같은 결과가 나오는데 이 코드는 왜 있는 건가요?

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

DM 내용 표시하기

미해결

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

안녕하세요 강의중에 DM 내용 표시 하기 강의에서 map을 활용해 DM내용을 표시하는 부분인데 DM을 클릭하고 내용을 확인할 때 TypeError에러가 뜨면서 chatData.map is not a function 이라는 오류가 나오고 있습니다.. 혼자 해결하다 막혀서 질문 남겨 드립니다! DirectMessage.tsx (return 부분) return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nicknam} /> <span>{userData.nickname}</span> </Header> <ChatList chatData={chatData} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); chatList.tsx import React, { VFC, useCallback, useRef } from 'react'; import { ChatZone } from './styles'; import { IDM } from '@typings/db'; import Chat from '@components/Chat'; import { Scrollbars } from 'react-custom-scrollbars'; interface Props { chatData?: IDM[]; } const ChatList: VFC<Props> = ({ chatData }) => { const scrollbarRef = useRef(null); const onScroll = useCallback(() => {}, []); return ( <ChatZone> <Scrollbars autoHide ref={scrollbarRef} onScrollFrame={onScroll}> {chatData?.map((chat) => ( <Chat key={chat.id} data={chat} /> ))} </Scrollbars> </ChatZone> ); }; export default ChatList; chat.tsx import { IDM, IChat } from '@typings/db'; import React, { VFC, memo, useMemo } from 'react'; import gravatar from 'gravatar'; import { ChatWrapper } from './styles'; interface Props { data: IDM; } const Chat: VFC<Props> = ({ data }) => { const user = data.Sender; return ( <ChatWrapper> <div className="chat-img"> <img src={gravatar.url(user.email, { s: '36px', d: 'retro' })} alt={user.nickname} /> </div> <div className="chat-text"> <div className="chat-user"> <b>{user.nickname}</b> <span>{data.createdAt}</span> </div> <p>{data.content}</p> </div> </ChatWrapper> ); }; export default Chat; 오류내용

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
유니크한 고슴도치 댓글 1 좋아요 0 조회수 379

설치 오류

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

안녕하세요 혹시 path 시 오류가 났나해서 다시 하려하니 이미 진행한걸로 경고 창이 뜹니다 ㅠ echo $PATH 를 한경우 끝이 다르게 아래와 같이 나옵니다. usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin] bin 경로 까지 cd ./ 했을때 저는 선생님과 다르게 bin git:(stable) ✗ <<이렇게 나오는데 이게 문제 일까요? ㅠ ➜ ~ where flutter flutter not found 도와주세요 ㅠ

  • flutter
  • 클론코딩
sg HYUN 댓글 1 좋아요 0 조회수 468

웹소켓은 프록시 사용 할 수 없나요?

해결됨

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

`http://localhost:3095/ws-${workspace}` 위 주소로는 잘 되는데 `/api/ws-${workspace}` 로는 연결이 안됩니다. 웹소켓은 프록시 못쓰는건지, 못쓴다면 혹시 왜 안되는건지 이유를 여쭈워도 괜찮을까요?

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

데이터 베이스 연결 에러 질문

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 강의 도중 데이터베이스 연결 설정 후 에러가 나서 질문 드립니다! 혹시 뭐 터미널이 달라서 그럴까요?

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
김두다 댓글 1 좋아요 0 조회수 511

Scss문법

해결됨

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

styles.tsx파일을 보면 & img {...} & > div {...} 이렇게 있던데 '>' 기호가 있고 없고의 차이점은 뭔가요?

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

chat box가 위에 고정되어 있습니다.

미해결

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

DirectMessage import React, { useCallback, useState } from 'react'; import gravatar from 'gravatar'; import { Container } from 'semantic-ui-react'; import { Header } from './styles'; import useSWR from 'swr'; import { useParams } from 'react-router'; import fetcher from '@utils/fetcher'; import ChatBox from '@components/ChatBox'; import useInput from '@hooks/useinput'; import axios from 'axios'; import { IDM } from '@typings/db'; import ChatList from '@components/ChatList'; 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 { data: chatData, mutate: mutateChat, revalidate, } = useSWR<IDM[]>(`/api/workspace/${workspace}/dms/${id}/chats?perPage=20&page=1`, fetcher); const [chat, onChangeChat, setChat] = useInput(''); const onSubmitForm = useCallback( (e) => { e.preventDefault(); console.log('chat'); if (chat?.trim()) { axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => { revalidate(); setChat(''); }) .catch(console.error); } }, [chat], ); if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nicknam} /> <span>{userData.nickname}</span> </Header> <ChatList chatData={chatData} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); }; export default DirectMessage; ChatList import React, { VFC } from 'react'; import { ChatZone, Section } from './styles'; import { IDM } from '@typings/db'; import Chat from '@components/Chat'; interface Props { chatData?: IDM[]; } const ChatList: VFC<Props> = ({ chatData }) => { return ( <ChatZone> {chatData?.map((chat) => { <Chat key={chat.id} data={chat} />; })} </ChatZone> ); }; export default ChatList; 보여드린 코드처럼 chatbox 중간에 chatlist를 넣게 되면 자동으로 아래로 내려갈 수 있게 했습니다. 말씀대로 chatlist를 만들고 directmessage사이에 chatlist를 import 했습니다. 그런데 아래로 내려오지 않고 상단으로 그대로 고정되어 있어서 아무리 찾아보려고 해도 답이 안나오는거 같아 질문 남겨드립니다 ㅠ

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
유니크한 고슴도치 댓글 1 좋아요 0 조회수 499

프로그램이 무거운거같아요

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

1 프로젝트가 무겁습니다 용량을 줄일수가 있나요 2 단순 테스트인데 프로젝트 하나 만들때마다 용량이 400메가씩인데 삭제도 안되요 허가를 받아야한다고 ㅜ

  • flutter
  • 클론코딩
염호경(hokki) 댓글 3 좋아요 0 조회수 602

프로젝트 생성 후 기본 코드 실행 시 Null Check Operator 에러 발생

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

안녕하세요. 안드로이드 스튜디오에서 프로젝트 생성 후 코드수정없이 바로 실행했는데, 아래와 같은 오류가 발생합니다. 도와주세요. Oops; flutter has exited unexpectedly: "Null check operator used on a null value". A crash report has been written to C:\Users\IHC\AndroidStudioProjects\dataprogram_flutter\flutter_01.log. 아래는 flutter_01.log 파일안의 내용입니다. Flutter crash report. Please report a bug at https://github.com/flutter/flutter/issues . ## command flutter --no-color run --machine --track-widget-creation --device-id=emulator-5554 --start-paused --dart-define=flutter.inspector.structuredErrors=true lib\main.dart ## exception _TypeError: Null check operator used on a null value ``` #0 AndroidStudioJavaGradleConflictMigration.migrate (package:flutter_tools/src/android/migrations/android_studio_java_gradle_conflict_migration.dart:107:39) #1 ProjectMigration.run (package:flutter_tools/src/base/project_migrator.dart:84:16) #2 AndroidGradleBuilder.buildGradleApp (package:flutter_tools/src/android/gradle.dart:280:15) #3 AndroidGradleBuilder.buildApk (package:flutter_tools/src/android/gradle.dart:208:11) #4 AndroidDevice.startApp (package:flutter_tools/src/android/android_device.dart:578:29) <asynchronous suspension> #5 FlutterDevice.runHot (package:flutter_tools/src/resident_runner.dart:468:33) <asynchronous suspension> #6 Future.wait.<anonymous closure> (dart:async/future.dart:525:21) <asynchronous suspension> #7 HotRunner.run (package:flutter_tools/src/run_hot.dart:421:34) <asynchronous suspension> #8 AppDomain.launch.<anonymous closure> (package:flutter_tools/src/commands/daemon.dart:649:9) <asynchronous suspension> #9 AppDomain.launch (package:flutter_tools/src/commands/daemon.dart:647:5) <asynchronous suspension> #10 RunCommand.runCommand (package:flutter_tools/src/commands/run.dart:638:15) <asynchronous suspension> #11 FlutterCommand.run .<anonymous closure> (package:flutter_tools/src/runner/flutter_command.dart:1294:27) <asynchronous suspension> #12 AppContext.run .<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19) <asynchronous suspension> #13 CommandRunner.runCommand (package:args/command_runner.dart:212:13) <asynchronous suspension> #14 FlutterCommandRunner.runCommand.<anonymous closure> (package:flutter_tools/src/runner/flutter_command_runner.dart:296:9) <asynchronous suspension> #15 AppContext.run .<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19) <asynchronous suspension> #16 FlutterCommandRunner.runCommand (package:flutter_tools/src/runner/flutter_command_runner.dart:244:5) <asynchronous suspension> #17 run.<anonymous closure>.<anonymous closure> (package:flutter_tools/runner.dart:91:9) <asynchronous suspension> #18 AppContext.run .<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19) <asynchronous suspension> #19 main (package:flutter_tools/executable.dart:91:3) <asynchronous suspension> ``` ## flutter doctor ``` [✓] Flutter (Channel master, 3.10.0-17.0.pre.31, on Microsoft Windows [Version 10.0.19044.1288], locale ko-KR) • Flutter version 3.10.0-17.0.pre.31 on channel master at C:\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 3ed5f51208 (81 minutes ago), 2023-04-30 05:42:24 -0400 • Engine revision e99f31f443 • Dart version 3.1.0 (build 3.1.0-56.0.dev ) • DevTools version 2.23.1 [✓] Windows Version (Installed version of Windows is version 10 or higher) [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2) • Android SDK at C:\Users\IHC\AppData\Local\Android\sdk • Platform android-33, build-tools 33.0.2 • Java binary at: c:\Program Files\Android\Android Studio\jbr\bin\java • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694) • All Android licenses accepted. [✓] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe [✗] Visual Studio - develop for Windows ✗ Visual Studio not installed; this is necessary for Windows development. Download at https://visualstudio.microsoft.com/downloads/ . Please install the "Desktop development with C++" workload, including all of its default components [✓] Android Studio (version 2022.2) • Android Studio at C:\Program Files\Android\Android Studio • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694) [✓] Android Studio • Android Studio at c:\Program Files\Android\Android Studio • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • android-studio-dir = c:\Program Files\Android\Android Studio • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694) [✓] Connected device (4 available) • sdk gphone x86 64 (mobile) • emulator-5554 • android-x64 • Android 13 (API 33) (emulator) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19044.1288] • Chrome (web) • chrome • web-javascript • Google Chrome 112.0.5615.138 • Edge (web) • edge • web-javascript • Microsoft Edge 92.0.902.67 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```

  • flutter
  • 클론코딩
IHC 댓글 1 좋아요 0 조회수 1125

flutter 설치 과정 flutter warning

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

[!] 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에서 수정해야되는건지 알고싶습니다.

  • flutter
  • 클론코딩
ksl8719 댓글 1 좋아요 0 조회수 1707

영상 5:20 설명 질문

해결됨

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

실패하면 then의 revalidate때문에 원래 있던 데이터가 사라진다고 하셨는데 따로 catch부분에서 처리해줘야 이전에 넣어뒀던 가짜 데이터를 삭제하는 등 처리되는 거 아닌가요?

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

isScrollable에서 오류가 발생합니다.

해결됨

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

안녕하세요! BasicAppbarTabbarScreen 강의 진행 중 isScrollable 부분이 제대로 작동하지 않아 질문드립니다. 제 코드의 문제인가 해서 선생님 깃허브의 코드를 갖다 썼습니다. 안드로이드 에뮬레이터 Tiramisu버전 Pixel XL 사용중입니다. isScrollable: false, Row에 감싸기 전 위와 같이 isScrollable을 false로 설정하면 A RenderFlex overflowed by 2.0 pixels on the bottom. 이런 오류가 발생합니다. 이후 Row로 감싸게 되면 이렇게 AppBar의 내용이 나오질 않게 됩니다. 안드로이드 에뮬레이터 동일버전 Pixel 5를 만들어 재시도해봤지만 같은 문제가 발생하여 해결 방법을 여쭙고자 질문드립니다! 강의가 너무 재밌어서 매일같이 보고 있습니다. 특히 점점 힘들어 갈 때쯤 여기서 포기하면 안된다고 말씀하시는게 너무 재밌었어요 ㅋㅋ 좋은 강의 만들어주셔서 감사합니다!

  • flutter
  • 클론코딩
강수빈 댓글 1 좋아요 0 조회수 347

useSWRInfinite에서 index질문

해결됨

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

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은 뭔 역할이죠? 둘 다 페이지 관련된거라 헷갈립니다.

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

비디오 파일이 안옮겨집니다

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

비디오 파일을 에뮬레이터로 옮기는데 이런 팝업이 뜨면서 안되네요 ㅠㅠ .apk를 에뮬레이터로 옮기면 된다고 해서 이 파란색 파일을 옮겼는데요 이렇게 install 팝업창 뜨더니 그냥 꺼지고 다시 옮겨보면 처음과 똑같은 창이 뜹니다. ㅠㅠ 제가 만든 파일 이름(vid_player).apk를 찾아봤는데 없구요 ㅠㅠ 뭐가 잘못됐는지 모르겠네요 ㅠㅠ

  • flutter
  • 클론코딩
ㅎ 댓글 1 좋아요 0 조회수 527

[Tip] NAS와 같이 외부의 DB에 연결하는 경우

해결됨

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

Environment - Synology NAS - code-server - MySQL(mariaDB) - Node.js@latest | v18.16.0 - npm@latest | v9.5.1 - nvm@latest | v0.39.3 sequelize 사용 시, 로컬이 아닌 외부 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 에 입력한 주소 문제입니다.

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
Young Ill Cho 댓글 0 좋아요 1 조회수 1285

로그인 성공시 /workspace/channel 로 이동이 안되고 있습니다.

미해결

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

App.tsx import 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.tsx import 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.tsx import Workspace from '@layouts/Workspace'; import React from 'react'; const Channel = () => { return ( <Workspace> <div>로그인을 축하합니다.</div> </Workspace> ); }; export default Channel; Workspace.tsx import 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 입력해도 아무런 창이 뜨지 않고 있어서 어떤 문제가 있는지 확인이 어렵습니다.. 도움을 부탁드려요

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
유니크한 고슴도치 댓글 2 좋아요 0 조회수 575

정규표현식 질문

해결됨

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부분은 잘 나오는데 멘션 클릭시 초깃값이 여전히 이상하게 나옵니다. 저 부분은 어딜 고쳐야 되는 건가요?

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

상위커뮤니티 데이터 가져오기 undefined가 뜨네요

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

커뮤니티 리스트 ui생성 강의 부분에서 맨앞 내용에서 상위 커뮤니티 데이터를 가져오는 부분이 const {data: topsubs} = useSWR<Sub[]>(address,fetcher) 부분 undefined가 나오네요 ㅠ 소스코드가 확인해서 오타도 확인해봤는데 원인을 찾지못했습니다. 혹시 짐작가는 부분이 있으시나요?

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
나준영 댓글 1 좋아요 0 조회수 349

인기 태그

인프런 TOP Writers

주간 인기글