묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
배포하고 난 후에 일기저장
안녕하세요 !배포를 완료하고 일기를 작성은 잘 되는데, 제가 쓴 일기는 제 노트북에서 배포주소로 잘 보입니다.배포한것을 다른사람들에게 전달했을 시, 다른사람들이 쓴 일기는 제가 배포한 주소로 제 노트북에서 볼 수 없나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
cookie 완전히 제거 하는법
로그아웃을 했을때 브라우저에서 쿠키를 완전히 제거하는 코드를 구현했습니다 그런데 페이지 이동을 하는게 아니면 같은 페이지에선 새로고침을 하면 계속 connect.sid에 쿠키가 남아있는데 완전히 없애는 방법 없는지 여쭤보고 싶습니다
-
미해결만들면서 배우는 리액트 : 기초
고양이사진
고양이 사진 언제 다시 뜰까요?ㅠㅠ 사진이 안나와서 잘 되는지 확인이 조금 어렵네요,,
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
백엔드 수업 부분
안녕하세요 백엔드 수업 부분은실습이 불가하다고 하는데,따로 vscode 사용없이강의만 수강해도 괜찮은건가요?
-
미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
npm run start를 하면 흰색 화면만 나옵니다.
소스코드는 다음과 같습니다.import React, { useEffect } from "react"; import { Routes, Route, useNavigate } from "react-router-dom"; import ChatPage from "./components/ChatPage/ChatPage"; import LoginPage from "./components/LoginPage/LoginPage"; import RegisterPage from "./components/RegisterPage/RegisterPage"; function App() { return ( <Routes> <Route path="/" element={<ChatPage />} /> <Route path="/login" element={<LoginPage />} /> <Route path="/register" element={<RegisterPage />} /> </Routes> ); } export default App;
-
미해결[React 1부] 만들고 비교하며 학습하는 React
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
강사님 트름하시는거 너무 웃기네요 ㅋㅋㅋㅋ지루하던참에 덕분에 웃었습니다 감사합니다
-
미해결누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌
PhoneForem.js 파일에서 [e.target.phone] : e.target.value 해줘야하지 않나요?
PhoneForem.js 파일에서 [e.target.phone] : e.target.value 해줘야하지 않나요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
강의에 나오는 문법이 적용되지 않습니다
MongooseError: Model.prototype.save() no longer accepts a callback이 오류가 떠서 확인해보니 Mongoose6부터 callback 문법이 사용되지 않는다고 합니다버전을 바꾸는 것은 시도 하지 않았고.then .catch or async await 로 바꾸고 싶은데수 시간 시도해보다가 안되서 글 남깁니다. callback 구문을 보고 .then .catch or async await이 방식으로 바꾸는 법을 알고 싶습니다.이 부분에서만 에러가 발생하는지는 모르겠으나stack Overflow에 적어봤는데 역시 답을 얻을 수 없더라구요app.post("/login", (req, res) => { User.findOne({ email: req.body.email }, (err, user) => { if (!user) { return res.json({ loginSuccess: false, message: "제공된 이메일에 해당하는 유저가 없습니다.", }); } user.comparePassword(req.body.password, (err, isMatch) => { if (!isMatch) return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다." }); user.generateToken((err, user) => { if (err) return res.status(400).send(err); res.cookie("x-auth", user.token).status(200).json({ loginSuccess: true, userId: user._id }); }); }); }); });
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
스크롤때문에 데이터 불러오는거
스크롤때문에 무한으로 데이터 요청 보내는거 작업, 게시글 좋아요 강의 편에서 한다고 했는데 돌려봐도 스크롤 데이터 요청막는거 안보여서요 아직 구현 안한건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
run dev 오류
notion에 있는 '수업 프로젝트 설치할 것' 이후 yarn dev를 해보면 다음과 같이 Can't resolve '@styles.Home.module.css'가 뜹니다. _app.js에 있는 import문도 삭제하였는데, 해당 문제가 해결되지 않아 qqq폴더 안에 index.js도 실행이 되지 않습니다..! 혹시 어떻게 해결 가능할까요? 실행 위치는 codecamp, class, qqq 모두 해보았는데 같은 오류가 발생합니다! ㅠㅠ + import styles from ~~부분을 주석처리하고, return 안의 내용을 삭제시키니 동작하는데 삭제시켜둔 상태로 강의를 진행해도 괜찮나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
apollo-client의 사용 및 _app.js 작동원리
example 주소 : http://practice.codebootcamp.co.kr/graphql이 주소가이렇게 떠서포트폴리오용 주소 : http://backendonline.codebootcamp.co.kr/graphql이주소를 uri에 넣었고이렇게 실행해봤더니이렇게 뜨네요버튼을 눌러도 네트워크에 뜨지 않습니다뭐가 문제일까요?..
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
redux saga를 사용한 비동기 통신 질문
안녕하세요 강사님, 비동기 통신 관련해서 질문이 있습니다.상세페이지를 만들면서 map 돌린 것 중 어떤 아이템을 클릭하면 아이템의 이름을 url 주소에 넣고, 그걸 매개변수로 데이터를 가져오려고 합니다.그래서 api를 result를 매개변수로 아래와 같이 만들고 saga도 만들었습니다.getWordArt: (result) => localApi.get("/api/markets/search?text=" + result),function* loadSearchArt(action) { try { const result = yield call(ArtApi.getWordArt()); yield put({ type: SEARCHART_SUCCESS, data: result.data, }); } catch (err) { yield put({ type: SEARCHART_FAILURE, error: err.response.data, }); }}function* watchLoadSearchArt() { yield takeLatest(SEARCHART_REQUEST, loadSearchArt);}export default function* ArtSaga() { yield all([ fork(watchLoadSearchArt), ]);}그리고 useParams로 result를 가져와서 아래처럼 getWordArt에 매개변수로 넣었습니다.const { result } = useParams(); useEffect(() => { ArtApi.getWordArt(result) .then((res) => { setSearchArt(res.data.data.markets); }) .catch((err) => { throw new Error(err); }); }, [result]);데이터는 잘 가져오는데 이 코드를 dispatch를 사용해서 아래처럼 수정하고 싶은데 어떻게 하면 좋을지 잘 모르겠어서 질문합니다. useEffect(() => { dispatch({ type: SEARCHART_REQUEST, }); }, [dispatch]);저런 코드에 result를 여기저기 넣어봤는데 데이터를 못 가져옵니다ㅜㅜ아래에 reducer도 같이 첨부합니다.const initialState = {searchArt: [], searchArtLoading: false, searchArtDone: false, searchArtError: null}export const SALEART_REQUEST = "SALEART_REQUEST";export const SALEART_SUCCESS = "SALEART_SUCCESS";export const SALEART_FAILURE = "SALEART_FAILURE"; const ArtReducer = (state = initialState, action) => { return produce(state, (draft) => { switch (action.type) { case SEARCHART_REQUEST: draft.searchArtLoading = true; draft.searchArtDone = false; draft.searchArtError = null; break; case SEARCHART_SUCCESS: draft.searchArtLoading = false; draft.searchArtDone = true; draft.searchArt = action.data.data; break; case SEARCHART_FAILURE: draft.searchArtLoading = false; draft.searchArtDone = true; draft.searchArtError = action.data.error; break; default: return; } });};
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
Workspaces.map 함수가 제대로 작동하지 않습니다 ㅠ
워크스페이스에서 user정보들이 전부 불러오지 않고..하나씩만 담겨져서 보여집니다 ㅠㅠ아무리 찾아봐도 해결을 하지못해서 글을 남깁니다.프록시는 설정되어있습니다.무엇이 문제일까요.. Workspace 코드입니다.import { Channels, Chats, Header, ProfileImg, RightMenu, WorkspaceWrapper, WorkspaceName, MenuScroll, Workspaces, ProfileModal, LogOutButton, WorkspaceButton, AddButton, } from '@layouts/Workspace/styles'; import React, { FC, useCallback, useState } from 'react'; import useSWR from 'swr'; import fetcher from '@utils/fetcher'; import axios from 'axios'; import Menu from '@components/Menu'; import Modal from '@components/Modal'; import { IUser } from '@typings/db'; import { Redirect, Switch, Route, Link } from 'react-router-dom'; import loadable from '@loadable/component'; import gravatar from 'gravatar'; const Channel = loadable(() => import('@pages/Channel')); const DirectMessage = loadable(() => import('@pages/DirectMessage')); const Workspace: FC = ({ children }) => { const [showUserMenu, setShowUserMenu] = useState(false); const { data: userData, error, mutate, } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, }); const onLogOut = useCallback(() => { axios .post('/api/users/logout', null, { withCredentials: true, }) .then(() => { mutate(); }); }, []); const onClickUserProfile = useCallback(() => { setShowUserMenu((prev) => !prev); }, []); // 토글 함수 if (!userData) { return <Redirect to="/login" />; } 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 }} show={showUserMenu} onCloseModal={onClickUserProfile}> <ProfileModal> <img src={gravatar.url(userData.email, { 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/${1234}/channel/일반`}> <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton> </Link> ); })} {/* <AddButton onClick={onClickCreateWorkspace}>+</AddButton> */} </Workspaces> <Channels> <WorkspaceName>Sleact</WorkspaceName> <MenuScroll>menuscroll</MenuScroll> </Channels> <Chats> <Switch> <Route path="/workspace/channel" component={Channel} /> <Route path="/workspace/dm" component={DirectMessage} /> </Switch> </Chats> </WorkspaceWrapper> </div> ); }; export default Workspace;
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
callback
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 1. 여기서 쓰인 callback 함수의 의미는 어떻게 될까요?? 간단하게 return으로 이해하면 될까요??next()가 없어도 다음 핸들러로 넘어가는 건가요??callback에서 첫번째 인자는 에러를 뜻하고, 두번째 인자는 위에 사진처럼하나는 filename이고하나는 acceptFile: boolean 을 뜻하는데그저 multer의 형식이라고 생각하면 될까요?? 그리고 upload =multer 저 부분이 실행되고 다음 핸들러인 uploadSubImage에서는 이미 파일이 업로드가 된 상태라고 했는데 그럼 upload= multer가 uploadSubImage로 request로 file정보를 보낸건가요?? 로그를 찍어보니까 req는 ownSub에서는 undefined였는데 uploadSubImage에서 생기더라구요...
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
../ 을 통한 상위 폴더로의 이동없이 어떻게 <img src="images/icons/logo.png />만으로 사진을 불러오신건가요
../ 을 통한 상위 폴더로의 이동없이 어떻게 <img src="images/icons/logo.png />만으로 사진을 불러오신건가요?제가 앞에 ../을 붙이지 않았을 경우에는 그림이 제대로 불러와지지 않습니다<img src="../images/icons/logo.png />를 해야만 정상적으로 사진이 불러와 집니다
-
해결됨따라하며 배우는 리액트 A-Z[19버전 반영]
handleSubmit을 useCallback으로
handleSubmit를 useCallback으로 감싸서 만들어봤는데const handleSubmit = useCallback( (e) => { e.preventDefault(); let newTodoData = todoData.map((data) => { if (data.id === id) { data.title = editedTitle; } return data; }); console.log(newTodoData); setTodoData(newTodoData); setIsEditing(false); }, [todoData, setTodoData, id, editedTitle] );의존성배열에 setTodoData 를 넣지않으면 아래오류가 나면서 handleSubmit 함수가 실행되지 않더라구요React Hook useCallback has a missing dependency: 'setTodoData'. Either include it or remove the dependency array. If 'setTodoData' changes too often, find the parent component that defines it and wrap that definition in useCallback제 지식으론 의존성배열에 todoData만 넣으면 될줄 알았는데 왜 setTodoData 까지 같이 넣어야하는지 궁금합니다!
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
axios.js 에 인스턴스를 만든 후 Banner.js 에 import 할 때 문의
안녕하세요!axios.js 에 인스턴스를 만들고 그 인스턴스를 export default instance; 로 export 해줬는데그렇다면 Banner.js 에서 가져와서 사용할 때import instance from "../api/axios"; 라고 가져와서 instance.get(requests.fetchNowPlaying);이런 식으로 사용하는게 맞지 않나 생각이 들어서 질문 드립니다.
-
해결됨따라하며 배우는 리액트 A-Z[19버전 반영]
Lists.js에서 List컴포넌트로 프롭스 보내줄때,
<List key={data.id} id={data.id} title={data.title} completed={data.completed} todoData={todoData} setTodoData={setTodoData} provided={provided} snapshot={snapshot} />List에 프롭스 key를 넘겨주었는데왜 List.js에서는 key를 받지 않은 건가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
오류 해결에 도움이 필요합니다.
시퀄라이즈 sync 부분 강의까지 들었습니다. port는 3306번을 다른게 차지하고 있어서 3307을 사용했습니다. node app.js 했는데 실행이 안되네요.. 오류를 파일 부분을 찾아보려했는데 다 모듈 관련된 부분인거 같아서 어디를 봐야 할지 막혔습니다. 워크벤치도 연결이 안되는 상황입니다. 서버 실행 중ConnectionRefusedError [SequelizeConnectionRefusedError]: connect ECONNREFUSED 127.0.0.1:3307 at ConnectionManager.connect (/Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/dialects/mysql/connection-manager.js:92:17) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async ConnectionManager._connect (/Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/dialects/abstract/connection-manager.js:220:24) at async /Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/dialects/abstract/connection-manager.js:174:32 at async ConnectionManager.getConnection (/Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/dialects/abstract/connection-manager.js:197:7) at async /Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/sequelize.js:304:26 at async MySQLQueryInterface.tableExists (/Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/dialects/abstract/query-interface.js:102:17) at async Function.sync (/Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/model.js:939:21) at async Sequelize.sync (/Users/jinkyungjung/Documents/programming/TIL/react-nodebird/prepare/back/node_modules/sequelize/lib/sequelize.js:376:9) { parent: Error: connect ECONNREFUSED 127.0.0.1:3307 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16) { errno: -61, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 3307, fatal: true }, original: Error: connect ECONNREFUSED 127.0.0.1:3307 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16) { errno: -61, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 3307, fatal: true }}
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새일기를 쓰면 한개가 아닌 두개가 등록이 됩니다ㅠ
윈터로드님 알려주신 덕분에 완강할수잇었습니다ㅠㅠ 인프런 강의 첫 수강완료증을 받앗네요제 프로젝트에 큰오류를 발견했습니다,,,, 새일기쓰면 똑같은게 2개가 만들어지는데 이거 어디서 오류를 수정해야 하는지알수잇을까요?