안녕하세요 제로초님, 강의 잘듣고잇습니다!!! db시퀄라이즈 관계 설정? 질문좀 드리려고요. 강의듣고 블로그를 만들어보려고 백/프론트 구상하고 있는데요, db table설정?을 어떻게 해야할지 헷갈려서요. 메인 페이지는 전체 post를 카테고리(메뉴)별로 나눠서 보여줍니다.메뉴[ study / TIL / portfolio ]를 클릭하면 해당 categories로 저장한 게시글을 보여줍니다 (노란화살표)포스트 작성할 때는 하나의 categories를 선택합니다. 각 게시글은 하나의 카테고리만 가집니다!  헷갈리는 부분은메뉴탭을 눌러서 study / TIL 로 이동했을 때, 전체 post를 가져오는 게 아니라 해당 categories의 post만 가져오고 싶은데, db를 활용해야 하는건지, 백엔드에서 필터링 과정을 해야 하는건지, 헷갈립니다이때 categories를 관계형 테이블?로 만들어서 해당 카테고리로 post를 가져올 수 있나요????백엔드가 전체 db에서 post를 findAll로 가져와, 카테고리로 필터링해서 프론트로 넘겨줘야 하나요?서버에서 전체 post를 받아서 프론트에서 필터링해서 각 컴포넌트에서 사용해야 하나요?? 흠. 뭔가 여러 방법이 떠오르긴 하는데 아직 시도해보지는 않았고 ㅎㅎㅎ 효율적인 방법이 뭔지 알고싶어요!! 제로초님이라면 어떤 방법을 사용하시나요?

안녕하세요 도메인 연결 후 로그인과 로그아웃이 잘 되고, 새로고침 시에도 유지가 되는데요~게시글이 작성은 안됩니다 ㅠㅠ 회원가입은 되구요!이 다음 강의 S3를 연결하면 게시글이 작성이 되는게 맞을까요? 아니면 현재 오류가 있는건가여..

안녕하세요. 좋은 강의 만들어주셔서 감사합니다.이번에 강의 업데이트가 된 김에 미뤄왔던 공부를 하려고 하는데요.가지고 있는 강의는 이정도가 있고,리액트 훅 정도는 알고 사용할 수 있는 정도인데, 공부 순서를 어떻게 하면 좋을까요? [보유 강의]따라하며 배우는 노드, 리액트 시리즈 - 기본 강의따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기 (리뉴얼)따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기 (리뉴얼)따라하며 배우는 TDD 개발 (리뉴얼)따라하며배우는 도커와 CI환경 (리뉴얼)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.BlogList에 limit은 1로하고 Pagination의 default props limit값은 5로 했을때,페이지의 값과 default props limit의 값이 같으면 네비게이션이 생성되지가 않아요..

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 페이지로 넘어가기만 합니다. 오류를 도저히 못찾겠어요 도와주세요!

안녕하세요.. 우분투에서 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

조금 포괄적인 질문인데 어텋게 하면 state 구조를 잘 짤수 있을까요? 라이브러리 문법이나 그런 건 쓰다보면 익숙해지는 부분이 있어서 크게 어렵게 느껴지지는 않는데이 강의에서 reducer을 user reducer랑 post reducer로 나누는 부분처럼 state 구조 짜는 것은 스스로 생각하기 쉽지 않은 것 같아요. 예전에 자바 살짝 공부 했을 때 배웠던 객체지향적인 부분도 있는 것 같고 좀 혼란스럽네요

https://ji-gwang.tistory.com/54참고하기

프론트에는 해쉬태그가 표현되나 백에서는 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을 진행하였으나 계속 같은 오류가 발생되고 있습니다 네트워크 오류 메시지백 오류 메시지워크벤츠 해쉬태그 테이블

예전 질문글처럼처음부터 다시 설치해봐도 해결이 안되어 질문을 올립니다.

npm install --save redux-devtools-extension설치명령어 실행시 에러가 난다면 터미널에서npm install --save @redux-devtools/extension 설치 후 store.js에서 import 하기import { composeWithDevTools } from '@redux-devtools/extension' 출처 누나슬랙 학생분께서 찾으신 자료

// 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 테이블에 들어있는 값이 들어있을 것으로 예상이 되는데 빈배열인 상황입니다. 혹시 다른 살펴볼만한 곳이 있는지 알려주시면 감사하겠습니다. 감사합니다.

json-server 터미널에서json-server --version 확인 후 강사님(0.17.0)과 다르다면 검색할 때 제품이 안나올 수 있습니다.npm uninstall -g json-server 서버 삭제 후npm install -g json-server@0.17.0 버전으로 다시 설치 하시면 정상적으로 잘 나오네요

ㅠㅠㅠㅠㅠㅠ 강사님 ... ㅠㅠㅠㅠㅠ이번에는 yarn, create-react-app으로 해서 다시 해당 실습 진행해보고 있는데요...(npx로 cra 설치하는데 예전엔 잘 썼었는데 왜인지 모르겠는데 계속 에러가 나서 똑같이는 못했어요...)강의와 동일한 코드인데 에러문구대로 한건지 모르겠는데 import thunkMiddleware from "redux-thunk";의 thunkMiddleware 키워드를 thunk로 변경했더니어제와 같이 vite 패키지 에러가 콘솔창에 뜨더라구여.....살려주세요ㅠㅠ해당 작업한 것까지 커밋한 내용인데 혹시 봐주실 수 있을까요...ㅜㅜhttps://github.com/laurenCho9/soaple-redux-cra

안녕하세요 제로초님, 로컬상에서 mysql workbench 처럼ec2인스턴스 ubuntu내에 있는 mysql db 데이터들을 시각화해서 관리할 수 있는 툴 같은 건 혹시 없을까요?데이터들을 수정하고 싶을때 query문으로 직접 관리하는 것이 일반적인지 문의드립니다!

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;    

안녕하세요~ backUrl을 수정하여 소스코드가 변동되었으니 github에 commit push를 한 뒤, 우분투 서버에 접속하여 front에서 다시 git pull을 할 경우, 우분투 서버 front에서 build를 또 진행 해야하나요?그리고, 이전에 강의에서 vim으로 .env를 만든것들도 다시 만들어야할까요?

지금 빌드까지 마친 상황이고 sudo npx pm2 start npm -- start 이후 sudo npx pm2 monit을 하엿는데 이러한 에러가 나옵니다.https://github.com/jinhwansong/blog 다른 분들의 이야기를 보면 비슷한 에러가 나는거 같기는 한데 답을 모르겟어요 ㅠㅠ

지금 계속 프론트서버에서 npm run build를 하려는데 왠지는 모르겟는데 빌드가 되다가 멈추는 현상이 생깁니다. 여기서 멈추고 30분째 가만히 있는데 이유가 따로 있을까요? 우분투 서버는 Ubuntu Server 22.04 LTS (HVM), SSD Volume Type 이거를 사용했고 인스턴스 유형은 t2.micro입니다..

실습코드 부분이 빠르게 지나가는데,실습코드를 따로 받을수 있는 곳이 있을까요?