묻고 답해요
147만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
순위 정보를
불러오고 있어요
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 동작 에러
ERROR in ./node_modules/antd/es/version/index.js 2:15-22[1] Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon) 이런 에러가 뜨는데 어떻게 해결하나요...
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
첫 로그인 후 req.user.id 사용이 어텋게 가능한지 궁금합니다.
..// user.js router.post("/login", isNotLoggedIn, (req, res, next) => { passport.authenticate("local", (err, user, info) => { // ... return req.login(user, async (loginErr) => { if (loginErr) { console.error(loginErr); return next(loginErr); } const fullUserWithoutPassword = await User.findOne({ where: { id: req.user.id }, // ... }); return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); }); // index.jsconst passport = require("passport"); const local = require("./local"); const { User } = require("../models"); module.exports = () => { passport.serializeUser((user, done) => { done(null, user.id); }); passport.deserializeUser(async (id, done) => { console.log(`deserializeUser`) try { const user = await User.findOne({ where: { id } }); done(null, user); // req.user안에 넣어줌 } catch (error) { console.error(error); done(error); } }); local(); };첫 로그인 할 때는serializeUser만 실행되고,그 이후 요청 부터 deserialzeUser가 실행되어req.user에 db 테이블에 user객체가 저장되는 걸로 이해했습니다.첫 로그인 할 때는 deserializeUser가 실행이 안되어서 req.user가 저장이 안된 상태일텐데 어텋게req.user.id로 fullUserWithoutPassword 에 값을 할당할 수 있는지 궁금합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
[도메인 연결하기] 로그인 완료 후에 getServerSideProps 실행되지만,회원정보가 null 이 표시 되는 이유를 몰라서 질문드립니다.
React로 Nodebird sns를 시청하고 나서 개인 프로젝트를 만들고 나서 배포하는 과정에서 막히는 부분이 있어서 질문드립니다. 기존에 localhost:3060 에서 로그인 완료후 메인화면으로 이동시 메인화면 서버사이드 렌더링이 실행됩니다.export const getServerSideProps = wrapper.getServerSideProps(async (context) => { const cookie = context.req ? context.req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; } context.store.dispatch({ type: LOAD_MY_INFO_REQUEST, }) context.store.dispatch(END); await context.store.sagaTask.toPromise(); })그래서,const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); me에 데이터가 들어있습니다. [도메인 연결하기] 영상 시청후Route 53, 가비아 주소, 탄력적 ip 주소를 사용하여 백엔드/ 프론트 서버를 실행하였습니다. 회원가입 후 로그인하고 나서 메인 화면으로 이동되면 쿠키가 저장되는 것을 확인했습니다 하지만로그인 후 메인 화면으로 이동하면, 메인page에 서버사이드 렌더링 코드(getServerSideProps)가 실행하고, export const getServerSideProps = wrapper.getServerSideProps( async (context) => { const cookie = context.req ? context.req.headers.cookie : ""; axios.defaults.headers.Cookie = ""; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; } context.store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); context.store.dispatch(END); await context.store.sagaTask.toPromise(); } ); const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); 이때 로그인한 사용자의 데이터 정보가 null로 표시됩니다.[back logs]왜 me가 null 인지 ? 무엇이 문제인지 모르겠어서 질문드립니다. 진행 순서[로그인 화면]: 아이디와 비밀번호 를 입력하고 확인 버튼을 누른다. 메인화면에서 서버사이드 렌더링 코드부분 실행하여 회원정보를 불러온다. (LOAD_MY_INFO_REQUEST) export const getServerSideProps = wrapper.getServerSideProps(async (context) => { const cookie = context.req ? context.req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; } context.store.dispatch({ type: LOAD_MY_INFO_REQUEST, }) context.store.dispatch(END); await context.store.sagaTask.toPromise(); }) export default Blog;const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); 3. [메인화면] 회원정보를 불러와 회원정보가 null 이여서 로그아웃 버튼으로 변경되지 않습니다. (me 정보가 null 여서 버튼이 변경되지 않습니다.) 쿠기는 유지되어서 로그인 화면으로 가서 로그인 할시 "로그인하지 않은 사용자만 접근 가능합니다" 안내창이 나옵니다.
-
미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
마지막 프로젝트 데모 페이지가 보이지 않습니다.
데모🎬 :https://noona-netflix-v2.netlify.app/클릭해도 Site Not Found 만 뜹니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
db 시퀄라이즈 관계 설정 및 백엔드 요청 질문입니다!
안녕하세요 제로초님, 강의 잘듣고잇습니다!!! db시퀄라이즈 관계 설정? 질문좀 드리려고요. 강의듣고 블로그를 만들어보려고 백/프론트 구상하고 있는데요, db table설정?을 어떻게 해야할지 헷갈려서요. 메인 페이지는 전체 post를 카테고리(메뉴)별로 나눠서 보여줍니다.메뉴[ study / TIL / portfolio ]를 클릭하면 해당 categories로 저장한 게시글을 보여줍니다 (노란화살표)포스트 작성할 때는 하나의 categories를 선택합니다. 각 게시글은 하나의 카테고리만 가집니다! 헷갈리는 부분은메뉴탭을 눌러서 study / TIL 로 이동했을 때, 전체 post를 가져오는 게 아니라 해당 categories의 post만 가져오고 싶은데, db를 활용해야 하는건지, 백엔드에서 필터링 과정을 해야 하는건지, 헷갈립니다이때 categories를 관계형 테이블?로 만들어서 해당 카테고리로 post를 가져올 수 있나요????백엔드가 전체 db에서 post를 findAll로 가져와, 카테고리로 필터링해서 프론트로 넘겨줘야 하나요?서버에서 전체 post를 받아서 프론트에서 필터링해서 각 컴포넌트에서 사용해야 하나요?? 흠. 뭔가 여러 방법이 떠오르긴 하는데 아직 시도해보지는 않았고 ㅎㅎㅎ 효율적인 방법이 뭔지 알고싶어요!! 제로초님이라면 어떤 방법을 사용하시나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인 연결 후 게시글 작성..
안녕하세요 도메인 연결 후 로그인과 로그아웃이 잘 되고, 새로고침 시에도 유지가 되는데요~게시글이 작성은 안됩니다 ㅠㅠ 회원가입은 되구요!이 다음 강의 S3를 연결하면 게시글이 작성이 되는게 맞을까요? 아니면 현재 오류가 있는건가여..
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
학습 로드맵
안녕하세요. 좋은 강의 만들어주셔서 감사합니다.이번에 강의 업데이트가 된 김에 미뤄왔던 공부를 하려고 하는데요.가지고 있는 강의는 이정도가 있고,리액트 훅 정도는 알고 사용할 수 있는 정도인데, 공부 순서를 어떻게 하면 좋을까요? [보유 강의]따라하며 배우는 노드, 리액트 시리즈 - 기본 강의따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기 (리뉴얼)따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기 (리뉴얼)따라하며 배우는 TDD 개발 (리뉴얼)따라하며배우는 도커와 CI환경 (리뉴얼)
-
미해결프로젝트로 배우는 React.js
pagination nav가 안보여요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.BlogList에 limit은 1로하고 Pagination의 default props limit값은 5로 했을때,페이지의 값과 default props limit의 값이 같으면 네비게이션이 생성되지가 않아요..
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
toastify-css 적용안됨
ReactDOM.createRoot(document.getElementById('root')).render( <BrowserRouter> <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <App /> </PersistGate> </Provider> </BrowserRouter>, )App /에서 실행할 거여서 설정하고, const userSlice = createSlice({ name: "user", initialState, reducers: {}, extraReducers: (builder) => { builder .addCase(registerUser.pending, (state) => { state.isLoading = true }) .addCase(registerUser.fulfilled, (state) => { state.isLoading = false toast.info('회원가입을 성공했습니다.') }) .addCase(registerUser.rejected, (state, action) => { state.isLoading = false state.error = action.payload toast.error(action.payload) }) } })toast.info, toast.error 등 toast 메세지 정확하게 넣었고, import { ToastContainer } from "react-toastify" import "react-toastify/dist/ReactToastify.css" function Layout() { return ( <div className='flex flex-col justify-between h-screen'> <ToastContainer position='bottom-right' theme='light' pauseOnHover autoClose={1500} /> <Navbar/> <main className='w-10/12 max-w-4xl mx-auto mb-auto'> <Outlet/> </main> <Footer/> </div> ) }toastify랑 css를 사용하려고 import했고, const RegisterPage = () => { const { register, handleSubmit, formState: { errors }, reset } = useForm({ mode: 'onChange' }) const dispatch = useDispatch() // const navigate = useNavigate() const onSubmit = ({ email, name, password }) => { const body = { email, name, password, image: `https://via.placeholder.com/600x400?text=no+user+image` } dispatch(registerUser(body)) reset() // navigate('/login') }실행 하니까, db에 데이터는 잘 담기는데, css가 적용이 안됩니다. 그리고, css가 적용되지 않고, 자꾸 login 페이지로 넘어가기만 합니다. 오류를 도저히 못찾겠어요 도와주세요!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
로컬 front에서 직접 build하여 메모리 해결 하는 방법.
안녕하세요.. 우분투에서 git pull 하고 build가 메모리문제로 되지 않아서,직접 로컬 fornt에서 build 한 뒤, build 폴더를 scp로 우분투 front 폴더로 보내줬는데요.. 필요한 몇가지도 같이 보내주어서 아래와 같이 있습니다.1. 여기서 바로 sudo npx pm2 start npm -- start를 하는게 맞나요?CORS 문제도 back과 front 둘다 해결했습니다.back과 front 둘다 pm2로 실행하였고, 성공한거 같은데..페이지가 열리지가 않습니다 ㅠㅠmonit으로 확인해보니..2. build폴더 안에서 index.html을 찾지 않고,, fornt/pubilc에서 index.html을 찾는데요.. 왜 그럴까요?3. pubilc 폴더도 같이 우분투 서버에 보내줘야하나요?react와 ts로 작업하였고.. scp도 처음 해보는거라 너무 버벅거립니다 ㅠㅠ아래는 제 깃허브 주소 첨부하였습니다..https://github.com/nuring9/sns-nora-react
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
state 구조 잘짜는 법
조금 포괄적인 질문인데 어텋게 하면 state 구조를 잘 짤수 있을까요? 라이브러리 문법이나 그런 건 쓰다보면 익숙해지는 부분이 있어서 크게 어렵게 느껴지지는 않는데이 강의에서 reducer을 user reducer랑 post reducer로 나누는 부분처럼 state 구조 짜는 것은 스스로 생각하기 쉽지 않은 것 같아요. 예전에 자바 살짝 공부 했을 때 배웠던 객체지향적인 부분도 있는 것 같고 좀 혼란스럽네요
-
미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
TMDB 사이트 API 가져오기
https://ji-gwang.tistory.com/54참고하기
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
Error: Unknown column Hashtag.name in where clause
프론트에는 해쉬태그가 표현되나 백에서는 Hashtags 테이블에 기록되지 않습니다에러 메시지 확인해 본 결과Hashtag.name 칼럼이 없다고 오류가 발생되는데https://www.inflearn.com/questions/18298/sequelizedatabaseerror-unknown-column-x27-name-x27-in-x27-field-list-x27?commentId=44343#44343여기 질문과 유사하여 서버 끊고 워크벤치에서 drop table을 진행하였으나 계속 같은 오류가 발생되고 있습니다 네트워크 오류 메시지백 오류 메시지워크벤츠 해쉬태그 테이블
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
플러그인이 추천을 안해줍니다
예전 질문글처럼처음부터 다시 설치해봐도 해결이 안되어 질문을 올립니다.
-
미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
5.리덕스 유용한 툴 소개
npm install --save redux-devtools-extension설치명령어 실행시 에러가 난다면 터미널에서npm install --save @redux-devtools/extension 설치 후 store.js에서 import 하기import { composeWithDevTools } from '@redux-devtools/extension' 출처 누나슬랙 학생분께서 찾으신 자료
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
DB에서 Comment 테이블이 안불러와지는 것 같습니다.
// posts.jsrouter.get("/", async (req, res, next) => { // GET /posts console.log(Comment); try { const posts = await Post.findAll({ limit: 10, order: [["createdAt", "DESC"]], include: [ { model: User, attributes: ["id", "nickname"], }, { model: Image, }, { model: Comment, include: [ { model: User, attributes: ["id", "nickname"], }, ], }, ], }); res.status(200).json(posts); } catch (error) { console.error(error); next(error); } }); module.exports = router;LOAD_POST_REQUEST 액션이 dispatch돼서api 요청을 통해 data를 받아오면 data안에 Comments의 값이 Comments 테이블에 들어있는 값이 들어있을 것으로 예상이 되는데 빈배열인 상황입니다. 혹시 다른 살펴볼만한 곳이 있는지 알려주시면 감사하겠습니다. 감사합니다.
-
미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
json-server 최신버전이면 검색이 안나올 수 있습니다.
json-server 터미널에서json-server --version 확인 후 강사님(0.17.0)과 다르다면 검색할 때 제품이 안나올 수 있습니다.npm uninstall -g json-server 서버 삭제 후npm install -g json-server@0.17.0 버전으로 다시 설치 하시면 정상적으로 잘 나오네요
-
미해결처음 만난 리덕스(Redux)
redux-thunk CRA로 세팅 후 오류
ㅠㅠㅠㅠㅠㅠ 강사님 ... ㅠㅠㅠㅠㅠ이번에는 yarn, create-react-app으로 해서 다시 해당 실습 진행해보고 있는데요...(npx로 cra 설치하는데 예전엔 잘 썼었는데 왜인지 모르겠는데 계속 에러가 나서 똑같이는 못했어요...)강의와 동일한 코드인데 에러문구대로 한건지 모르겠는데 import thunkMiddleware from "redux-thunk";의 thunkMiddleware 키워드를 thunk로 변경했더니어제와 같이 vite 패키지 에러가 콘솔창에 뜨더라구여.....살려주세요ㅠㅠ해당 작업한 것까지 커밋한 내용인데 혹시 봐주실 수 있을까요...ㅜㅜhttps://github.com/laurenCho9/soaple-redux-cra
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
ubuntu안에 있는 mysql db데이터
안녕하세요 제로초님, 로컬상에서 mysql workbench 처럼ec2인스턴스 ubuntu내에 있는 mysql db 데이터들을 시각화해서 관리할 수 있는 툴 같은 건 혹시 없을까요?데이터들을 수정하고 싶을때 query문으로 직접 관리하는 것이 일반적인지 문의드립니다!
-
미해결처음 만난 리덕스(Redux)
redux-thunk 실습 오류
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/redux-thunk.js?v=c406571d' does not provide an export named 'default' (at store.js:3:8)(내용 수정 및 진행상태 업데이트 2023.03.21 am 02:33)비트로 설치한 모듈에서 제공하지 않는 내보내기라길래해결방법 찾아보다가https://github.com/reduxjs/redux-templates여기에 있는 리드미 내용대로yarn add vite-template-redux설치를 하긴 했는데 Vite, with TypeScript 가 아니라 React로 해서 그런지는 모르겠는데그래도 같은 오류가 뜨네요ㅠㅠㅠ 아래는 각각 입력한 코드 내용입니다store.jsimport { applyMiddleware, compose, createStore } from "redux"; import rootReducer from "./reducers"; import thunkMiddleware from "redux-thunk"; // import asyncFunctionMiddleware from "./middlewares/asyncFunctionMiddleware"; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore( rootReducer, composeEnhancers(applyMiddleware(thunkMiddleware)) ); export default store;addTodoThunks.jsimport { addTodo as addTodoActionCreator, removeTodo as removeTodoActionCreator, } from "../actions/todoAction"; const TODO_MAX_COUNT = 3; function addTodoThunkActionCreator(text) { return async function addTodoThunk(dispatch, getState) { const state = getState(); if (state.todo.length < TODO_MAX_COUNT) { dispatch(addTodoActionCreator("아이템 추가중...")); setTimeout(() => { dispatch(removeTodoActionCreator()); dispatch(addTodoActionCreator(text)); }, 3000); return; } else { dispatch(addTodoActionCreator("최대 개수 초과!")); setTimeout(() => { dispatch(removeTodoActionCreator()); }, 3000); } }; } export default addTodoThunkActionCreator; TodoAppContainer.jsimport { connect } from "react-redux"; // import { // addTodoActionCreator, // removeTodoActionCreator, // removeAllActionCreator, // } from "../actions"; // import { // addTodoActionCreator, // removeTodoActionCreator, // removeAllActionCreator, // } from "../ducks/todoDuck"; import { addTodo as addTodoActionCreator, removeTodo as removeTodoActionCreator, removeAll as removeAllActionCreator, } from "../actions/todoAction"; import addTodoThunkActionCreator from "../thunks/addTodoThunks"; import TodoApp from "../../components/TodoApp"; function mapStateToProps(state, ownProps) { return { todoItems: state.todo, }; } function mapDispatchToProps(dispatch, ownProps) { return { addTodo: (text) => { // dispatch(addTodoActionCreator(text)); dispatch(addTodoThunkActionCreator(text)); }, removeTodo: () => { dispatch(removeTodoActionCreator()); }, removeAll: () => { dispatch(removeAllActionCreator()); }, triggerAsyncFunction: (asyncFunction) => { dispatch(asyncFunction); }, }; } const TodoAppContainer = connect(mapStateToProps, mapDispatchToProps)(TodoApp); export default TodoAppContainer;
주간 인기글
순위 정보를
불러오고 있어요