묻고 답해요
148만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Slack 클론 코딩[실시간 채팅 with React]
채널 생성시 channelData.map is not a function
채널생성 클릭하면 channeldata.map is not a function이라고 에러가 뜨는데channelData뿌려지는곳에 ?옵셔널도 줬고..아래처럼 잘 작성한것같은데 어딜 놓쳤는지 모르겠습니다.새로고침하면 추가된 채널명이 출력됩니다. workspaceimport fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { FC, useCallback, useState } from 'react'; import { Navigate, useParams } from 'react-router-dom'; import useSWR from 'swr'; import { AddButton, Channels, Chats, Header, LogOutButton, MenuScroll, ProfileImg, ProfileModal, RightMenu, WorkspaceButton, WorkspaceModal, WorkspaceName, Workspaces, WorkspaceWrapper, } from './styles'; import gravatar from 'gravatar'; import Menu from '@components/menu'; import { Link } from 'react-router-dom'; import { IChannel, IUser, IWorkspace } from '@typings/db'; import { Button, Input, Label } from '@pages/signup/styles'; import useInput from '@hooks/useInput'; import Modal from '@components/modal'; import { toast } from 'react-toastify'; import CreateChannelModal from '@components/createChannelModal'; const Workspace: FC = ({ children }) => { const { workspace, channel } = useParams<{ workspace: string; channel: string }>(); const { data: userData, error, mutate } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000 }); const { data: channelData } = useSWR<IChannel[]>(userData ? `/api/workspaces/${workspace}/channels` : null, fetcher); if (!userData) { return <Navigate to="/login" />; } const [showUserMenu, setShowUserMenu] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); const [showWorkspaceModal, setShowWorkspaceModal] = useState(false); const [showCreateChannelModal, setShowCreateChannelModal] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); //functions const onLogout = useCallback(() => { axios .post('/api/users/logout', null, { withCredentials: true, }) .then((res) => { mutate(res.data); }); }, []); const onClickUserProfile = useCallback(() => { setShowUserMenu(!showUserMenu); }, [showUserMenu]); const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []); const onCreateWorkspace = useCallback( (e) => { e.preventDefault(); if (!newWorkspace || !newWorkspace.trim()) return; if (!newUrl || !newUrl.trim()) return; //trim ->띄어쓰기 하나도 통과 돼버리는걸 막는다. axios .post( '/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }, ) .then((res) => { mutate(res.data); setShowCreateWorkspaceModal(false); setNewWorkspace(''), setNewUrl(''); }) .catch((err) => { console.dir(err); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [newWorkspace, newUrl], ); const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); setShowCreateChannelModal(false); }, []); const toggleWorkspaceModal = useCallback(() => { setShowWorkspaceModal(!showWorkspaceModal); }, [showWorkspaceModal]); const onClickAddChannel = useCallback(() => { setShowCreateChannelModal(true); }, []); 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 }} onCloseModal={onClickUserProfile} show={showUserMenu}> <ProfileModal> <img src={gravatar.url(userData.email, { s: '28px', 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: IWorkspace) => { 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> {channelData?.map((v, idx) => ( <div key={idx}>{v.name}</div> ))} </MenuScroll> </Channels> <Chats> {children}</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} /> </div> ); }; export default Workspace; createChannelModalimport Modal from '@components/modal'; import useInput from '@hooks/useInput'; import { Button, Input, Label } from '@pages/signup/styles'; import { IChannel, IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { useCallback, VFC } from 'react'; import { useParams } from 'react-router-dom'; import { toast } from 'react-toastify'; import useSWR from 'swr'; interface Props { show: boolean; onCloseModal: () => void; setShowCreateChannelModal: (flag: boolean) => void; } const CreateChannelModal: VFC<Props> = ({ show, onCloseModal, setShowCreateChannelModal }) => { const [newChannel, onChangeNewChannel, setNewChannel] = useInput(''); const { workspace, channel } = useParams<{ workspace: string; channel: string }>(); const { data: userData } = useSWR<IUser | false>(`/api/users`, fetcher); const { data: channelData, mutate } = useSWR<IChannel[]>( userData ? `/api/workspaces/${workspace}/channels` : null, fetcher, ); const onCreateChannel = useCallback( (e) => { e.preventDefault(); axios .post( `/api/workspaces/${workspace}/channels`, { name: newChannel, }, { withCredentials: true }, ) .then((res) => { setShowCreateChannelModal(false); mutate(res.data); setNewChannel(''); }) .catch((err) => { console.dir(err); toast.error(err.response?.data, { position: 'bottom-center' }); }); }, [newChannel], ); return ( <Modal show={show} onCloseModal={onCloseModal}> <form onSubmit={onCreateChannel}> <Label id="channel-label"> <span>채널</span> <Input id="channel" value={newChannel} onChange={onChangeNewChannel} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> ); }; export default CreateChannelModal;
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
m1 맥 에러 아무리 해도 해결되지 않습니다
m1맥 에러나시는분 !!!필독!!! 문서를 정독하고 문서에 써져있는 방법대로 5번 이상의 시도를 하고, 그 후 구글 서칭을 통해 여러가지 솔루션을 적용시켜 보았습니다. 하지만 어떤 방법을 적용시켜도 문제가 해결되지 않고 계속하여 같은 문제가 발생합니다. 이에 대한 해결책이 필요해요.. sudo gem uninstall cocoapodssudo gem uninstall ffibrew uninstall cocoapodsbrew install cocoapods를 순서대로 실행하였고, 제 생각에는 brew command가 제대로 작동하지 않는 것 같습니다.
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
Invalid href passed to next/router
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 94강 13:55초를 보면 콘솔 창에 next-dev.js?3515:20 Invalid href passed to next/router: /u//r/test02/043hzrH/test44, repeated forward-slashes (//) or backslashes \ are not valid in the hre와 같은 에러가 떠있습니다. [username].tsx에서 <Link href={`/u/${comment.post?.url}`}>을 불러 올때 url에 '/r/test02/043hzrH/test44'가 담겨 오면서 슬래쉬(//)가 2번 입력되어 생기는 에러 같습니다. 제공된 소스코드에도 위와 같이 입력되어 있어요. 아래와 같이 '/'를 지우고 링크를 href에 넣어주면 에러가 사라지는데 이게 맞을까요?<Link href={`/u${comment.post?.url}`}>
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
import { User } from "../entities/User"
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.백엔드 entities에서 Post, Sub, Comment는 아래와 같이import Post from "../entities/Post" import Sub from "../entities/Sub" import Comment from "../entities/Comment"처럼 불러올 수 있게 작성하셨는데 User만import {User} from "../entities/User"중괄호를 넣어서 불러와야 합니다. export default class User extends BaseEntity 가 아닌export class User extends BaseEntity 로 작성한 이유가 있을까요?
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
post?.voteScore undefined
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 81강을 수강중입니다.src/pages/r/[slug]/[identifier]/[slug].tsx 작성중{post.voteScore} 를 콘솔로 찍어보면 undefined가 나와서 페이지에 노출되지 않습니다.타입을 voteScore? : number 로 한게 문제인가해서 ?를 지워보았지만, 증상은 동일했고 api를 불러오면서 voteScore는 0으로 초기화되지 않은채 받는것 같아요.그러던 중 백엔드의 Post.ts를 살펴보았더니 get voteScore()를 get VoteScore()로 오타 아닌 오타를 가져가서 초기화 되지 않았단걸 알아내었습니다. 누군가에게 도움이 되시길 바라며
-
해결됨[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
앱 실행 오류 An error occurred while processing the post-install hook of the Podfile
안녕하세요앱실행시 오류가 발생합니다.이전까지 오류가 종종나긴했어도 구글링으로 해결했는데이번에는 도저히 안되고 있습니다. 제 개발환경은 M1맥이고앱실행시콘솔 내리다보면 다음과 같은 문구가 있고 [!] An error occurred while processing the post-install hook of the Podfile. 가장 밑에는 다음과 같이 문구가 발생합니다Error running pod installError launching application on iPhone 11 Pro Max. 관련 내용을 구글링해서 해결해보려는데 안되네요시도한방법들은재부팅, 터미널에서 스튜디오 시작, flutter clean, flutter upgradge, ios - Podfile 두번째줄 주석flutter doctor에는 이상없음cd ios flutter precache --ios pod install sudo arch -x86_64 gem install ffi arch -x86_64 pod install <- 실행시 An error occurred while processing the post-install hook of the Podfile. 등등..
-
해결됨[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
포스트맨 및 앱 오류 질문입니다
안녕하세요 미세먼지앱 강의보는중이고 포스트맨 오류가 나는데(강의 SliverAppBar에 데이터적용하기 5분대기준)아예 안되는게 아니라어쩌다 성공하면서도 파라미터를 수정하거나 다시 요청보내면 실패합니다.앱에서는return response.data['response']['body']['items'].map<StatModel>( (item) => StatModel.fromJson(json: item), ).toList();fetchData() async { final statModels = await StatRepository.fetchData(); print('$statModels'); setState(() { tempModel = statModels[0]; }); } 오류가 나고 각각 21:25, 27:24줄 코드입니다 flutter clean, 스튜디오, 앱재실행, 포스트맨도 새로 만들어보고 했는데안되고있습니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
cookie-parser Invalid or unexpected token error
영상에 따라서 단순하게 cookie-parser 설치하고 import cookie-parser 한다음에 app.use(cookieParser()) 진행하면 상단에 이미지처럼 에러가 발생하더라구요. cookie-parser을 제거하면 cookie가 정상적으로 저장되는 것을 볼 수 있었습니다. 어떤 부분을 놓친 것일까요server.tsimport express from "express"; import morgan from "morgan"; import { AppDataSource } from "./data-source" import authRoutes from "./routes/auth"; import subRoutes from "./routes/subs"; import cors from 'cors'; import dotenv from 'dotenv'; import cookieParser from "cookie-parser"; const app = express(); dotenv.config(); app.use(cors({ origin: process.env.ORIGIN, credentials: true })) app.use(express.json()); app.use(morgan('dev')); app.use(cookieParser()) app.get("/", (_, res) => res.send("running")); app.use('/api/auth', authRoutes); app.use("/api/subs", subRoutes); const PORT = process.env.PORT; console.log('PORT', PORT) app.listen(PORT, async () => { console.log(`server running at http://localhost:${PORT}`); AppDataSource.initialize().then(async () => { console.log("data initialize...") }).catch(error => console.log(error)) })
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
ec2 에 배포시 500 (Internal Server Error) 에러가 뜹니다.
안녕하세요?강의를 무사히 다듣고 따라 했는데 로컬에서는 문제가 없다가.env파일과 next.config, 하드코딩된 url 주소를 다 바꿔주었는데도 ec2 환경에서 에러가 뜹니다.
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
GET /api/auth/me 304
커뮤니티생성 - 커뮤니티 생성핸들러 생성하기(2) 까지 강의를 들은 상황에서 첫 로그인은 network status가 200이 뜨는데 그 다음부터는 어느 페이지든 접근시 GET /api/auth/me 304 가 나옵니다. routes/auth.ts 에서 [변경전] const me = async (_: Request, res: Response) => { return res.json(res.locals.user) } [변경후] const me = async (_: Request, res: Response) => { return res.status(200).json(res.locals.user) }바꾸었으에도 계속 그러네요.. 왜 그런지 아시나요 아래와 같은 글을 발견했지만 캐싱 이후 그냥 304를 날린다는데 이게 맞는건가요..?https://www.inflearn.com/questions/14571
-
미해결Slack 클론 코딩[실시간 채팅 with React]
npx sequelize db:create 오류
ws@DESKTOP-9H6S8B6 MINGW64 ~/Desktop/sleact/back$ npx sequelize db:createSequelize CLI [Node: 16.15.0, CLI: 6.4.1, ORM: 6.21.4]Loaded configuration file "config\config.js".Using environment "development".ERROR: Access denied for user 'root'@'localhost' (using password: NO) 이런 오류가 계속 뜨고 다른 분들께서 질문하신 답변을 봐도 모르겠습니다... mysql 비밀번호는 확실하게 맞습니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
error: password authentication failed for user "postgres"
도커 컨테이너도 실행 잘 되고, 서버 연결도 잘되서localhost: 4000에서 서버도 잘 띄워집니다.그런데, 데이터베이스만 연결이 안되는 것 같아요 ㅠㅠnpm run dev 만 하면이런 에러가 납니다.// docker-compose.yml// data-source.ts환경변수로도 해봤는데 안되서,일단은 postgres, password로 입력해 놓은 상태입니당 ㅜDocker Desktop에 컨테이너에서 로그 같은 기능이 있길래 봤는데자꾸 비밀번호 인증에 실패 했다고만 나오고 구글링해도 모르겠어용 ㅠㅠreddit-postgres | 2022-08-28 02:13:17.747 UTC [1] LOG: database system is ready to accept connections reddit-postgres | 2022-08-28 02:13:52.751 UTC [33] FATAL: password authentication failed for user "postgres" reddit-postgres | 2022-08-28 02:13:52.751 UTC [33] DETAIL: Connection matched pg_hba.conf line 100: "host all all all scram-sha-256"
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
dispatch("LOGIN",res.data?.user); 쪽에서 에러가 뜹니다 ㅜ
TypeError: dispatch is not a functionat _callee$ (login.tsx?11e1:20:10)at tryCatch (runtime.js?ecd4:45:16)at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)at prototype.<computed> [as next] (runtime.js?ecd4:97:1)at asyncGeneratorStep (_async_to_generator.mjs?949a:3:1)at next (async_to_generator.mjs?949a:25:1)라는 에러가 뜨는데 어디가 문젠지 모르겠습니다.. ㅠ
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
질문 드려요
findone vs findoneorfail무슨차이 인가요?
-
해결됨애플 웹사이트 인터랙션 클론!
messageA_opacity_out 글자가 사라지지 않는 문제
강사님 안녕하세요. 특정 타이밍 스크롤 애니메이션 적용하기 2번째 시간 transform 적용하기 전까지 들었습니다. (13분쯤 ) opacity: 1;로 글자가 점점 나타나는 부분까지는 했는데 글자가 사라지지 않아 console 로 messageA_opacity_out을 찍어봤습니다. console 창에서는 messageA_opacity_out 숫자가 제대로 줄어드는데 글자는 사라지지가 않습니다. 앞뒤로 강의를 돌려서 반복해서 다시 들었으나 문제점을 찾지 못하여 질문을 드립니다. 답변해주시면 감사합니다! https://florentine-trombone-82f.notion.site/0398c6579ce64b948fae207605e623ad 따로 파일을 올릴 수 없어 페이지에 올려둡니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
상위 커뮤니티 imageUrl
사진을 등록하고 메인 페이지에서 위와 같이 이미지가 제대로 나오지 않습니다. server.ts 에서 express.static("public") 코드 추가한상태입니다. 해당 커뮤니티 페이지 내에서 사진 업로드는 잘 됩니다. 메인 페이지에서 이미지가 안보이는건 어떻게 해결해야 할까요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
npx sequelize db:create 입력시 에러 발생
back 폴더에 npm i 이후 npx sequelize db:create 입력시 npm ERR! could not determine executable to run npm ERR! A complete log of this run can be found in:npm ERR! /Users/eycha/.npm/_logs/2022-08-21T06_14_10_186Z-debug-0.log 라는 에러 발생합니다. mysql 과 node 정상적으로 설치했는데 관련되서 검색해도 해결책이 없어서 질문 남깁니다.
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
sleact/alecture/pages/login/styles.tsx ?
깃헙에서 sleact/alecture/pages/login/styles.tsx 파일이 비워 있는데 일부러 비워 두신거죠?
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 웹팩 관련질문입니다.
안녕하세요! 웹팩 관련 질문이있습니다. 제꺼 빌드용량이 3MB로 엄청크더라구요. 그래서 원인을 알아보니 isDevelopment가 계속 development 모드로 빌드 되는게 이유였습니다. devtool설정은 아래와 같이했는데 development이다 보니까 계속 inline source map 으로 작동해서 파일크기가 큰것같더라고요. isDevelopment ? 'inline-source-map' : 'hidden-source-map' 차이점을 보니 npm script가 start는 webpack serve, build는 webpack만 되어있는 상태였어요. 그래서 start 에는 webpack serve --env development build에는 NODE_ENV=production webpack 를 적어주니까 production모드로 되고, 300kb로 떨어진걸 확인했어요. 그런데 start는 --env development이고, build는 NODE_ENV=production인 이유가 있나요? 둘다 --env development, --env production을 적거나 NODE_ENV=development, NODE_ENV=production으로 하는것과 차이가 있나요? 공식문서에서는 webpack dev와 prod로 파일을 다르게하는 아래방법밖에 못찾았는데, "start": "webpack serve --open --config webpack.dev.js", "build": "webpack --config webpack.prod.Js 제로초님은 어떤걸 보고 하셨는지 궁금합니다. 그리고 EnvironmentPlugin은 적지 않아도 console.log(isDevelopment)를 찍어보면 process.env.NODE_ENV 상태가 출력되고 빌드/실행도 잘되던데, 아래와같이 추가해야하는 이유가 있는지도 궁금합니다. new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production',
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
updateAcquireFence: Did not find frame.
webview plugin 을 사용하여 웹페이지를 띄우면 애뮬레이터에서 휠로 사이트를 내릴 때 updateAcquireFence: Did not find frame.라는 에러가 뜨면서 스크롤이 내려가지 않습니다.