월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
인피니트 스크롤링 적용시 LOAD_POST_REQUEST 두번 찍히는 문제
안녕하세요 선생님 상황)인피니트 스크롤링 적용시 LOAD_POST_REQUEST 두번 찍히는 상황인데 이거의 원인과 해결방법을 어떻게 찾을 수 있을까요? loadPostsLoading과 throttle을 적용했는데도 2번씩 실행되는 상황입니다.redux) 작성한 코드) 10,000 자이하만 적을 수 있어서 LOAD_POSTS_REQUEST 관련 코드만 올립니다..!!pages/index.jsimport React, { useEffect } from 'react'; import {useDispatch, useSelector} from 'react-redux'; import AppLayout from '../components/AppLayout'; import PostCard from '../components/PostCard'; import PostForm from '../components/PostForm'; import {LOAD_POSTS_REQUEST} from '../reducers/post'; const Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector((state) => state.post); useEffect(() => { dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); useEffect(() => { function onScroll() { if(window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight-300) { if(hasMorePosts && !loadPostsLoading) { dispatch({ type: LOAD_POSTS_REQUEST, }); } } } window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('scroll', onScroll); }; }, [hasMorePosts, loadPostsLoading]); return ( <AppLayout> {me && <PostForm />} {mainPosts.map((post) => <PostCard key={post.id} post={post} />)} </AppLayout> ); }; export default Home;reducers/post.jsimport shortId from 'shortid'; import {produce} from 'immer'; import faker from 'faker'; export const initialState = { mainPosts:[], imagePaths: [], //게시물 저장 경로 hasMorePosts: true, loadPostsLoading: false, //게시글 로드 완료시 true loadPostsDone: false, loadPostsError: null, } export const generateDummyPost = (number) => Array(number).fill().map(() => ({ id: shortId.generate(), User: { id: shortId.generate(), nickname: faker.name.findName() }, content: faker.lorem.paragraph(), Images: [{ src: 'https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_1280.jpg' //faker.image.imageUrl(640, 480, true), lorempixel.com 고장나서 임시로 }], Comments: [{ User: { id:shortId.generate(), nickname:faker.name.findName(), }, content:faker.lorem.sentence(), }], })); export const LOAD_POSTS_REQUEST = 'LOAD_POSTS_REQUEST'; export const LOAD_POSTS_SUCCESS = 'LOAD_POSTS_SUCCESS'; export const LOAD_POSTS_FAILURE = 'LOAD_POSTS_FAILURE'; const dummyPost = (data) => ({ id: data.id, content: data.content, User: { id:1, nickname:'해지니', }, Images: [], Comments: [], }); const dummyComment = (data) => ({ id: shortId.generate(), content: data, User: { id: 1, nickname: '제로초' }, }); const reducer = (state = initialState, action) => produce(state, (draft) => { switch(action.type){ case LOAD_POSTS_REQUEST: draft.loadPostsLoading = true; draft.loadPostsDone = false; draft.loadPostsError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostsLoading = false; draft.loadPostsDone = true; draft.mainPosts = action.data.concat(draft.mainPosts); draft.hasMorePosts = draft.mainPosts.length < 50; break; case LOAD_POSTS_FAILURE: draft.loadPostsLoading = false; draft.loadPostsError = action.error; break; default: break; } }); export default reducer; sagas/post.jsimport { all, fork, takeLatest, put, delay, throttle } from 'redux-saga/effects'; import axios from 'axios'; import shortId from 'shortid'; import { LOAD_POSTS_REQUEST, LOAD_POSTS_SUCCESS, LOAD_POSTS_FAILURE, generateDummyPost, } from '../reducers/post'; function loadPostsAPI(data){ return axios.get('/api/post', data); } function* loadPosts(action) { try{ // const result = yield call(loadPostsAPI, action.data); yield delay(1000); yield put({ type: LOAD_POSTS_SUCCESS, data:generateDummyPost(10) }); } catch(err) { yield put({ type: LOAD_POSTS_FAILURE, data: err.response.data }); } } function* watchLoadPosts(){ yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts); } export default function* postSaga() { yield all([ fork(watchLoadPosts) ]); }사용중인 OS) macOS (Apple M1 Pro)
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
팔로잉, 팔로워 목록에 사용자 이름과 StopOutlined 아이콘이 화면에 표시되지 않는 문제 질문합니다!(에러 메시지x)
안녕하세요! React로 NodeBird SNS 만들기섹션4 팔로우/언팔로우 강의를 끝까지 수강한 수강생입니다!항상 강의 잘 보고 있습니다! 제로초님 감사합니다! 김블루 계정으로 핑크공주 계정을 팔로우 했을 때팔로잉, 팔로워 사용자의 이름과 금지 표시 아이콘이 목록 화면에 보이지 않습니다!(아이콘이 들어가는 위치에 다른 아이콘을 넣었을 때도 아이콘이 표시되지 않았습니다!)리덕스와 네트워크 탭을 확인했을 때 팔로워, 팔로잉 목록 불러오기는 성공했습니다.vsCode 터미널, 콘솔, 리덕스, 네트워크 항목에도 에러가 없으며앤트 디자인 아이콘 버전도 아이콘에 맞게 수정하고, item도 추가했지만 해결되지 않았습니다!구글 검색 및 제로초님 강의와 트위터 클론 깃허브를 확인 후에도 원인을 알 수 없어 질문 글 올립니다! [김블루 계정의 팔로잉 목록][핑크공주 계정의 팔로워 목록]FollowList.js// Ant Design 아이콘 불러오기 import { StopOutlined } from '@ant-design/icons'; ... return ( <List style={{ marginBottom: '20px' }} /* 격자 모양 */ grid={{ gutter: 4, xs: 2, md: 3 }} /* 목록 크기 */ size="small" /* 팔로잉 목록, 팔로워 목록 헤더 */ header={<div>{header}</div>} /* 더보기 버튼 */ loadMore={ <div style={{ textAlign: 'center', margin: '10px 0px' }}> <Button>더 보기</Button> </div> } /* 팔로잉 목록, 팔로워 목록 전체 테두리 */ bordered /* 목록용 데이터소스 : 팔로잉 목록, 팔로워 목록 더미데이터 배열 전달 */ dataSource={data} renderItem={(item) => { <List.Item style={{ marginTop: '20px' }}> <Card actions={[<StopOutlined key="stop" onClick={onCancel(item.id)} />]}> <Card.Meta description={item.nickname} /> </Card> </List.Item> }} />/* List 닫음 */ ); };
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
리덕스 툴킷에서 extraReducers에 HYDRATE설정 방법이 궁금합니다.
툴킷으로 작업을 해보려고 하고 있는데 faker를 써보려다가 제로초님 깃허브에 HYDRATE에 관련된 사항이 있어서 작업을 하려고 하고 잇엇는데 제로초님처럼 똑같이 타이핑을 햇는데 에러가 납니다.const postReducer = createSlice({ name: "postReducer", initialState, reducers: {}, // 청크를 쓸때 필요함 extraReducers: (builder) => builder // 클라이언트 상태를 초기화하는 역할 .addCase(HYDRATE, (state, action) => ({ ...state, ...action.payload.data, })), }); 여기서 에러가 나는 부분은...action.payload.data, 중 payload부분이고 에러 사항은 다음과 같이 나옵니다. 'Action<"__NEXT_REDUX_WRAPPER_HYDRATE__">' 형식에 'payload' 속성이 없습니다.next-redux-wrapper 의 버전은 아래와 같습니다. 혹시 "next-redux-wrapper": "^8.1.0",혹시 next-redux-wrapper로 리덕스 툴킷에 HYDRATE를 하는 방법이 달라진걸까요....
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
Cannot read properties of null (reading 'useRef') 오류 질문
강의에서 진행 된 요소 추가 전까진 정상 작동 되는 것 확인 했습니다. Menu 추가 후 아래와 같은 오류가 출력 됩니다. Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same appSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. TypeError: Cannot read properties of null (reading 'useRef') at useRef (C:\Users\sion\node_modules\react\cjs\react.development.js:1630:21) at Object.render (C:\Users\sion\node_modules\antd\lib\menu\index.js:19:37) at ReactDOMServerRenderer.render (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3535:44) at ReactDOMServerRenderer.read (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29) at renderToString (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27) at Object.renderPage (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\server\render.js:50:851) at Document.getInitialProps (C:\Users\sion\Documents\prepare\front\.next\server\pages\_document.js:264:19) at loadGetInitialProps (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\lib\utils.js:5:101) at renderToHTML (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\server\render.js:50:1142) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 터미널에 찍힌 로그입니다.react/react dom 버전은 동일함을 확인했고 16.14.0 버전 사용 중입니다. 구글링 중 react hook form을 인스톨 하라는 검색 결과가 있어 해당 패키지 설치 했습니다. 버전은 7.49.2 사용 중 입니다. 로컬에서 실행 된 화면입니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
짹짹 버튼 클릭시 게시물을 우측이 아닌 아래로 정렬하는 방법
질문)짹짹을 눌렀을 때 게시물이 우측에 정렬되는데 어떻게 해야 아래로 정렬될까요? 현재 게시물 추가시 화면)작성한 코드)PostForm.jsimport React,{useCallback, useState, useRef} from 'react'; import {Form, Input, Button} from 'antd'; import {useSelector, useDispatch} from 'react-redux'; import {addPost} from '../reducers/post'; const PostForm = () => { const {imagePaths} = useSelector((state) => state.post); const dispatch = useDispatch(); const imageInput = useRef(); const [text, setText] = useState(''); const onChangeText = useCallback((e) => { setText(e.target.value); }, []) const onSubmit = useCallback(()=> { dispatch(addPost); setText(''); }); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); return ( <Form style={{ margin: '10px 0 20px'}} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> <div> <input type="file" multiple hidden ref={imageInput}/> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{float:'right'}} htmlType="submit">짹짹</Button> </div> <div> {imagePaths.map((v) => ( <div key={v} style={{display: 'inline-block'}}> <img src={v} style={{width:'200px'}} alt={v}/> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ) } export default PostForm;post.jsexport const initalState = { mainPosts:[{ id:1, User:{ id:1, nickname: '해지니1', }, content: '첫 번째 게시글 #해시태그 #행복한집사생활', Images:[{ src: 'https://loremflickr.com/640/360' },{ src: 'https://placekitten.com/640/360' },{ src: 'https://picsum.photos/640/360' }], Comments: [{ User: { nickname:'해지니2' }, content: '고양이는 다 기여벙', }, { User: { nickname:'해지니3' }, content: '냥냥냥' }] }], imagePaths: [], //게시물 저장 경로 postAdded: false //게시글 추가 완료시 true } const ADD_POST = 'ADD_POST'; export const addPost = { type: ADD_POST } const dummyPost = { id: 2, content: '더미데이터', User: { id:1, nickname:'해지니', }, Images: [], Comments: [], }; const reducer = (state = initalState, action) => { switch(action.type){ case ADD_POST: return { ...state, mainPosts: [dummyPost, ...state.mainPosts], postAdded: true, }; default: return state; } } export default reducer;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
reduxjs/toolkit 적용하여 코드를 작성해보았는데 맞는지 확인 부탁드립니다. 감사합니다.
안녕하세요 선생님 상황) 리덕스 실제 구현하기 부분을 따라하던 도중 configureStore.js에서 createStore 단어 가운데에 취소선이 생기면서 @reduxjs/toolkit의 configureStore로 대체를 권장한다고 뜨는 상황입니다.import {createStore} from 'redux'; import reducer from '../reducers'; const configureStore = () => { const store = createStore(reducer); store.dispatch({ type:'CHANGE_NICKNAME', data:'luckyhaejin' }); return store; }; 사용 중인 OS, 버전)저는 맥 OS사용자이며, 사용하고 있는 버전은 아래와 같습니다.{ "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next", "build": "next build" }, "author": "luckyhaejin", "license": "ISC", "dependencies": { "@ant-design/icons": "^4.2.1", "antd": "^4.2.1", "next": "^9.5.5", "next-redux-wrapper": "^6.0.2", "prop-types": "^15.8.1", "react": "^16.14.0", "react-dom": "^16.14.0", "react-redux": "^7.2.9", "redux": "^4.2.1", "styled-components": "^6.1.1" }, "devDependencies": { "eslint": "^8.56.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0" } } 상황) 그래서 @reduxjs/toolkit과 관련한 문제 같아 react, react-dom 버전을 최신버전인 18로 바꾸고 next도 최신 버전인 14버전으로 바꾼 뒤 @reduxjs/toolkit을 설치하고 @reduxjs/toolkit 방식으로 대체하라는 메세지 안의 redux 링크를 참고하여 코드를 수정해보았습니다. https://redux.js.org/introduction/why-rtk-is-redux-today 하지만 제가 맞게 작성한건지 잘 모르겠고, 이렇게 제가 짠 코드로 변경을 하게되면 강의를 보며 따라하기가 어려워질 것 같아서 다시 원래 에러가 난 상태로 되돌린 상태입니다. 질문)reduxjs/toolkit을 적용하여 작성한 아래 코드가 맞게 작성된건지 궁금합니다. 질문)깃에서 reduxjs/toolkit을 사용한 코드를 강의 순서대로 적용하고 싶어서 찾아보았으나, 섹션2 코드가 순서대로 적용된게 아니라 한번에 올라온것 같아서, 혹시 강의 순서대로 @reduxjs/toolkit을 적용한 코드가 있다면 어떻게 해야 그 코드를 순서대로 볼 수 있는지 궁금합니다. 만약 강의 순서대로 적용한 코드가 없고 섹션별로 나눠져 있다면 섹션 순서대로 코드를 보는 방법이 궁금합니다. 수정 전)reducers/index.jsconst initialState = { user: { isLoggedIn:false, user:null, signUpData:{}, loginData:{} }, post: { mainPosts:[] } }; export const loginAction = (data) => { return { type: 'LOG_IN', data } } export const logoutAction = () => { return { type: 'LOG_OUT' } } // 이전 상태, 액션 => 다음상태 const rootReducer = (state = initialState, action) => { switch(action.type) { case 'LOG_IN': return { ...state, user: { ...state.user, isLoggedIn: true, user:action.data } }; case 'LOG_OUT': return { ...state, user: { ...state.user, isLoggedIn: false, user:null } }; default: return state; } }; export default rootReducer; 수정 후)reducers/userSliceimport {createSlice} from '@reduxjs/toolkit' const userSlice = createSlice({ name: 'user', initialState: { isLoggedIn: false, user:null }, reducers: { login(state, action) { isLoggedIn: true, user:action.payload; }, logout(state) { isLoggedIn: false, user:null } } }) export const {login, logout} = userSlice.actions; export default userSlice.reducer;reducers/postSliceimport {createSlice} from '@reduxjs/toolkit' const postSlice = createSlice({ name: 'post', initialState: { mainPosts:[] }, reducers: { } }); export default postSlice.reducer; 수정 전)store/configureStore.jsimport {createWrapper} from 'next-redux-wrapper'; import {createStore} from 'redux'; import reducer from '../reducers'; const configureStore = () => { const store = createStore(reducer); store.dispatch({ type:'CHANGE_NICKNAME', data:'luckyhaejin' }); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === 'development', }); export default wrapper;수정 후)store/configureStore.jsimport { createWrapper } from 'next-redux-wrapper'; import { configureStore } from '@reduxjs/toolkit'; import userReducer from '../reducers/userSlice'; import postReducer from '../reducers/postSlice' const makeStore = () => { const store = configureStore({ reducer: { user: userReducer, post: postReducer } }); return store; }; const wrapper = createWrapper(makeStore, { debug: process.env.NODE_ENV === 'development', }); export default wrapper;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
nginx 배포시 antd 적용이 안돼요
안녕하세요.nginx에 배포를해서 실행을하니 실행은되는데 antd 가 적용이 안되는데 왜그런지 모르겠습니다. nginx.conf파일에 아래처럼 구성했고요(docker이용해서 .next 폴더 /usr/share/nginx/html/_next 에 복사했음) location / { root /usr/share/nginx/html; index /_next/server/pages/index.html; } .next 폴더 하위에 server/pages 폴더 아래에 index.html이 있어 index부분을 해당 파일로 지정하였는대 antd가 적용이 안됩니다. 왜그런걸까요 ㅠ? (npm run dev로 실행시에는 적용됩니다.)
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
백엔드 npm run dev 시 'nodemon은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.' 에러가 발생합니다!
안녕하세요! 제로초님! 섹션 4. 백엔드 노드 서버 구축하기credentials로 쿠키 공유하기 강의까지 수강한 수강생입니다! 작업물을 git clone하고 모듈 설치 후 npm run dev 하는 과정에서 문제가 발생했습니다!(프론트는 front 폴더 내에서 npm install 로 node_modules 를 생성하였습니다.)회원가입 구현하기 강의 영상과 똑같이 백엔드 터미널에 npm i express@4.17.1 를 입력해back 폴더 내에 node_modules 폴더를 생성하고백엔드에서 npm run dev 를 하면 아래 사진과 같은 에러가 나타납니다!이유가 무엇인지 궁금합니다!++ MySQL 환경 변수 설정은 미리 path로 설정하여 MySQL이 정상 작동됨을 확인하였습니다!++ vsCode 파워셀 터미널에서 작업하였습니다!항상 강의 영상 잘 보고 있습니다! 감사합니다 제로초님!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
react 관련 질문드립니다.
안녕하세요. react와 react-native가 따로 있는 것으로 아는대 react로는 웹과 앱 모두 한번에 개발할 수 있는 프레임워크가 따로 없나요? flutter의 경우는 3개의 환경 모두 한번에 개발이 가능한걸로 아는대 react는(반응형 x) 웹/앱 개발을 위해 native 를 별도로 개발해야하는지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로컬호스트 접속 시 Module not found: Can't resolve 'child_process' 에러
안녕하세요! 갑자기 로컬호스트에 접속이 안 되어서 질문합니다 npm run dev 하면 컴파일까지는 성공하는데 그 다음에 localhost로 접속하면 다음과 같은 에러가 뜹니다error - ./node_modules/worker-farm/lib/fork.js:3:0Module not found: Can't resolve 'child_process'nullError from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'Could not find files for / in .next/build-manifest.json(중간중간에 콘솔로그 찍힌건 생략했습니다) 개발자도구 확인해보면 에러는 안 나옵니다구글링해서 package.json 수정하는 방법이랑 _document.js에 import 'classlist.js' 하는방법 시도해봤는데 오류가 해결되지 않았습니다.. 어떻게 해야할까요ㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
빌드 시간..
넥스트는 12버전 사용하고 있습니다.빌드 할 때 보통 시간이 20초 정도 걸리나요?새로고침하면 20초 정도 계속 걸려서 테스트하기가 참.. 힘드네용..ㅜ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
우분투 빌드 시간이 너무 깁니다.
ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ npm run build > react-nodebird-front@1.0.0 build > cross-env ANALYZE=true NODE_ENV=production next build Linting and checking validity of types .. ⨯ ESLint: ESLint configuration in .eslintrc is invalid: - Unexpected top-level property "parseOptions". ✓ Linting and checking validity of types Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled Webpack Bundle Analyzer saved report to /home/ubuntu/TwitterClone-FS-/front/.next/analyze/nodejs.html No bundles were parsed. Analyzer will show only original module sizes from stats file. Webpack Bundle Analyzer saved report to /home/ubuntu/TwitterClone-FS-/front/.next/analyze/edge.html Using external babel configuration from /home/ubuntu/TwitterClone-FS-/front/.babelrc ⚠ It looks like there is a custom Babel configuration can be removed : ⚠ Next.js supports the following features natively: ⚠ - 'styled-components' can be enabled via 'compiler.styledComponents' in 'next.config.js' ⚠ For more details configuration options, please refer https://nextjs.org/docs/architecture/nextjs-compiler#supported-features Creating an optimized production build ...계속 빌드를 진행하고있는데, ⨯ ESLint: ESLint configuration in .eslintrc is invalid: - Unexpected top-level property "parseOptions". 이부분, 통과못해도 계속해서 빌드가 진행되나요!? 아니면, 이부분때문에 지금 계속 빌드를 못하고 있는걸까요?평균적인 빌드시간을 알고 싶습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
ubuntu front 빌드 에러
ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ npm install npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@faker-js/faker@8.3.1', npm WARN EBADENGINE required: { node: '^14.17.0 || ^16.13.0 || >=18.0.0', npm: '>=6.14.13' }, npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'next@13.5.6', npm WARN EBADENGINE required: { node: '>=16.14.0' }, npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'styled-components@6.1.1', npm WARN EBADENGINE required: { node: '>= 16' }, npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' } npm WARN EBADENGINE } up to date, audited 421 packages in 3s 105 packages are looking for funding run `npm fund` for details 1 high severity vulnerability To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ npm run dev > react-nodebird-front@1.0.0 dev > next /home/ubuntu/TwitterClone-FS-/front/node_modules/next/dist/lib/picocolors.js:134 const { env, stdout } = ((_globalThis = globalThis) == null ? void 0 : _globalThis.process) ?? {}; ^ SyntaxError: Unexpected token '?' at wrapSafe (internal/modules/cjs/loader.js:915:16) at Module._compile (internal/modules/cjs/loader.js:963:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) at Module.load (internal/modules/cjs/loader.js:863:32) at Function.Module._load (internal/modules/cjs/loader.js:708:14) at Module.require (internal/modules/cjs/loader.js:887:19) at Module.mod.require (/home/ubuntu/TwitterClone-FS-/front/node_modules/next/dist/server/require-hook.js:64:28) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (/home/ubuntu/TwitterClone-FS-/front/node_modules/next/dist/build/output/log.js:55:21) at Module._compile (internal/modules/cjs/loader.js:999:30) ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ ls components next.config.js package-lock.json pages sagas utils hooks node_modules package.json reducers store ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ 이런 에러가 발생됩니다. unexpected token '?' 어떤 이유로 에러가 발생하고, 어떤식으로 해결해야지 실행할 수 있는지 알 고 싶습니다!!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next-auth 로그인 시 unauthorized 문제
문제가 몇일째 안풀리는게 있어 문의드려요제가 next-auth를 사용해서 로그인 프로세스를 해보고 있습니다.로컬에서 별도로 배포환경 만들어서 테스트를 했을 때에는 잘 되는데 배포시에 계속 Unauthorized 에러가 발생해서요제가 작성한 [...nextauth].ts 코드입니다.import NextAuth, { User } from 'next-auth'; import CredentialsProvider from 'next-auth/providers/credentials'; import { refreshAccessToken } from 'utils/tokenRefresh'; export default NextAuth({ providers: [ CredentialsProvider({ name: 'Credentials', credentials: { userId: { label: 'UserId', type: 'text', placeholder: 'jsmith' }, password: { label: 'Password', type: 'password' }, }, authorize: async (credentials) => { const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/users/signin`, { method: 'POST', body: JSON.stringify({ userId: credentials!.userId, password: credentials!.password, }), headers: { 'Content-Type': 'application/json' }, }); const user = await res.json(); // 로그인 성공 시 사용자 객체를 반환하고, 실패 시 null을 반환 if (res.ok && user) { console.log('ok user', user); return user; } else { console.log('error user', user); return false; } }, }), ], secret: process.env.NEXTAUTH_SECRET, // session: { // strategy: 'jwt', // maxAge: 0, // 브라우저가 닫히면 세션 종료 // // updateAge: 24 * 60 * 60, // 24시간마다 세션 갱신 (옵션) // }, callbacks: { async jwt({ token, user }) { // 사용자 로그인 시 토큰 설정 if (user) { return { ...token, accessJwt: user.result?.accessJwt, refreshJwt: user.result?.refreshJwt, companyId: user.result?.companyId, userName: user.result?.userName, accessTokenExpires: Date.now() + 3600 * 1000, }; } // 토큰 만료 확인 및 리프레시 if (Date.now() > token.accessTokenExpires!) { const newAccessJwt = await refreshAccessToken(token.refreshJwt!); return refreshAccessToken(newAccessJwt); } return token; }, async session({ session, token }) { if (token && token.accessJwt) { const customUser = session.user as User; if (!customUser.result) { customUser.result = { accessJwt: '', refreshJwt: '', companyId: '', userName: '', }; } customUser.result.accessJwt = token.accessJwt; customUser.result.refreshJwt = token.refreshJwt; customUser.result.companyId = token.companyId; customUser.result.userName = token.userName; session.user = customUser; } return session; }, }, }); NEXT_PUBLIC_BACKEND_URL 환경변수는 별도의 백엔드를 구성한 주소이구요 배포는 도커를 사용했습니다.FROM node:20.10 as builder # pnpm 설치 RUN npm install -g pnpm WORKDIR /usr/src/app COPY package*.json ./ RUN pnpm install ARG NEXT_PUBLIC_BACKEND_URL ARG NEXTAUTH_SECRET COPY . . RUN NEXT_PUBLIC_BACKEND_URL=https://${NEXT_PUBLIC_BACKEND_URL} NEXTAUTH_SECRET=${NEXTAUTH_SECRET} pnpm run build FROM node:20.10 RUN npm install -g pnpm WORKDIR /usr/src/app COPY --from=builder /usr/src/app/package*.json ./ RUN pnpm install --prod COPY --from=builder /usr/src/app . # COPY --from=builder /usr/src/app/.next ./.next EXPOSE 3000 CMD ["pnpm", "run", "dev"]NEXTAUTH_SECRET은 프론트 주소를 도커 실행 시 넣어줘야 한대서 도커 실행 할 때 환경변수로 따로 넣어줬구요Docs, Stackoverflow, ChatGPT 등 여러 방면으로 찾아봤는데 해결이 안되더라구요..강의하고는 별개 내용이긴 한데 더이상 물어볼 데가 없어서 강사님께 여쭈어봅니다..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Redux-Saga Login_REQUEST 문제입니다.
redux-saga 쪼개고 reducer 연결 하려고 하니 user reducer만 반응하고 LOG_IN_SUCCESS 는 반응을 하지 않습니다. 커뮤니티 게시판에서 여러가지를 확인해보고 해도 어디 부분이 잘못 된지 몰라 올려봅니다.. 제가 작성한 코드는 이러합니다. store/configureStore.js import { applyMiddleware, createStore, compose } from "redux"; import createSagaMiddleware from "redux-saga"; import { createWrapper } from "next-redux-wrapper"; import { composeWithDevTools } from "redux-devtools-extension"; import reducer from "../reducers"; import rootSaga from "../sagas"; const configureStore = (context) => { console.log("context", context); const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware]; const enhancer = process.env.NODE_ENV === "production" ? compose(applyMiddleware(...middlewares)) // 배포용 : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper;reducers/index.js import { HYDRATE } from "next-redux-wrapper"; // HYDRATE = action import { combineReducers } from "redux"; import user from "./user"; import post from "./post"; const rootReducer = combineReducers({ index: (state = {}, action) => { switch (action.type) { case HYDRATE: console.log("HYDRATE", action); return { ...state, ...action.payload }; default: return state; } }, user, post, }); export default rootReducer; reducers/user.js export const initialState = { isLoggingIn: false, // 로그인 시도중 isLoggedIn: false, // 로그인 isLoggingOut: false, // 로그아웃 시도중 meUser: null, signUpData: {}, loginData: {}, }; export const LOG_IN_REQUEST = "LOG_IN_REQUEST"; export const LOG_IN_SUCCESS = "LOG_IN_SUCCESS"; export const LOG_IN_FAILURE = "LOG_IN_FAILURE"; export const LOG_OUT_REQUEST = "LOG_OUT_REQUEST"; export const LOG_OUT_SUCCESS = "LOG_OUT_SUCCESS"; export const LOG_OUT_FAILURE = "LOG_OUT_FAILURE"; export const loginRequestAction = (data) => ({ type: LOG_IN_REQUEST, value: data, }); export const logoutRequestAction = () => ({ type: LOG_OUT_REQUEST, }); const reducer = (state = initialState, action) => { // prettier-ignore switch(action.type) { case LOG_OUT_REQUEST : return {...state, isLoggingIn : true}; case LOG_IN_SUCCESS : return {...state, isLoggingIn : false, isLoggedIn:true, meUser:{...action.value, nickName:"Jay"}}; case LOG_IN_FAILURE : return {...state, isLoggingIn : false, isLoggedIn:false }; case "LOG_OUT_REQUEST" : return {...state, isLoggingOut:true}; case "LOG_OUT_SUCCESS" : return {...state, isLoggingOut:false, isLoggedIn:true, meUser:null}; case "LOG_OUT_FAILURE" : return {...state, isLoggingOut:false}; default: return state; } }; export default reducer;sagas/index.jsimport { all, fork, call } from "redux-saga/effects"; import userSaga from "./user"; export default function* rootSaga() { yield all([fork(userSaga)]); } sagas/user.js import { all, fork, put, delay, takeLatest } from "redux-saga/effects"; import { LOG_IN_FAILURE, LOG_IN_REQUEST, LOG_IN_SUCCESS, } from "../reducers/user"; function* logIn(action) { try { console.log("saga logIn"); // const result = yield call(logInAPI); yield delay(1000); yield put({ type: LOG_IN_SUCCESS, value: action.value, }); } catch (err) { console.error(err); yield put({ type: LOG_IN_FAILURE, error: err.response.data, }); } } function* watchLogIn() { yield takeLatest(LOG_IN_REQUEST, logIn); } function* watchLogOut() { yield takeLatest("LOG_OUT_REQUEST"); } export default function* userSaga() { yield all([fork(watchLogIn), fork(watchLogOut)]); }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
23분 13초 관련 질문입니다.
리트윗 에러시, alert를 띄워주실 때, 게시글 . 수만큼 리렌더링이 발생하셔서 index.js 상위 페이지로 에러를 올려주셨는데, 설명하실떄 리트윗 에러에다가, 게시글 id까지 같이 넣어서, 그. 포스트 카드에만 에러메시지가 나오게 해서 해결하실 수있다고 하셨습니다. 어떤식으로 코드를 작성하면 되는지 해당 부분에 대한 코드 작성법도 알고싶습니다.어떤식으로 postId를 넘겨주고 useEffect를 활용할 수 있는지 알고 싶습니다.function retweetAPI(data) { return axios.post(`/post/${data}/retweet`); } function* retweet(action) { try { const result = yield call(retweetAPI, action.data); yield put({ type: RETWEET_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: RETWEET_FAILURE, error: err.response.data, }); } }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next 13,14버전으로 하고 있는데 antd에서 다음과같은 오류가 발생합니다.
SyntaxError: Cannot use import statement outside a module이란 에러가 발생하는데 왜그런걸까요 stackoverflow찾다보니 nextjs 바벨설정이 src 하위를 보게되있어서 es6문법을 변환못해준다고 next.config.js 파일에 아래 transpilePackages 설정을 저렇게 넣어주면 해당 오류가 사라지긴하는대 매번 이렇게 해야되는건지... 근본적인 해결하려면 어떻게 해야할까요const nextConfig = { reactStrictMode: true, transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'kitchen-flow-editor', '@ant-design/pro-editor', 'zustand', 'leva', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ], }
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
Next 14 강의
안녕하세요,슬랙 채널에서 Next 14 강의 업로드 예정이시라는 글을 봤습니다. 해당 강좌의 리뉴얼 버전이라고 보면 될까요? 차이점이 궁금합니다.감사합니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
미리보기가 보이지 않습니다
//app.js app.use('/', express.static(path.join(__dirname, 'uploads'))); //PostForm.js import { Button, Form, Input } from 'antd'; import React, { useCallback, useEffect, useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; import useInput from '../hooks/useInput'; import { ADD_POST_REQUEST, REMOVE_IMAGE, UPLOAD_IMAGES_REQUEST, addPost, } from '../reducers/post'; const FormWrapper = styled(Form)` margin: 10px 0 20px; `; const ButtonStyle = styled(Button)` float: 'right'; `; const PostForm = () => { const { imagePaths, addPostLoading, addPostDone } = useSelector( (state) => state.post ); const dispatch = useDispatch(); const imageInput = useRef(); const [text, onChangeText, setText] = useInput(''); useEffect(() => { if (addPostDone) { setText(''); } }, [addPostDone]); const onSubmitForm = useCallback(() => { if (!text || !text.trim()) { return alert('게시글을 작성하세요.'); } const formData = new FormData(); imagePaths.forEach((p) => { formData.append('image', p); }); formData.append('content', text); return dispatch({ type: ADD_POST_REQUEST, data: formData, }); }, [text, imagePaths]); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); const onChangeImages = useCallback((e) => { console.log('images', e.target.files); //배열모양을 띄는 객체 const imageFormData = new FormData(); [].forEach.call(e.target.files, (f) => { imageFormData.append('image', f); }); dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData, }); }, []); const onRemoveImage = useCallback( (index) => () => { dispatch({ type: REMOVE_IMAGE, data: index, }); }, [] ); return ( <FormWrapper encType='multipart/form-data' onFinish={onSubmitForm}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder='어떤 신기한 일이 있었나요?' /> <div> <input onChange={onChangeImages} type='file' name='image' hidden multiple ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <ButtonStyle type='primary' htmlType='submit'> Twit </ButtonStyle> </div> <div> {imagePaths.map((item, i) => ( <div key={item} style={{ display: 'inline-block' }}> <img src={`http://localhost:3065/${item}`} style={{ width: '200px' }} alt={item} /> <div> <Button onClick={onRemoveImage(i)}>제거</Button> </div> </div> ))} </div> </FormWrapper> ); }; export default PostForm; //post.js const multer = require('multer'); const path = require('path'); const fs = require('fs'); const { Post, Image, Comment, User } = require('../models'); const { isLoggedIn } = require('./middlewares'); const router = express.Router(); try { fs.accessSync('uploads'); } catch (error) { console.log('uploads 폴더가 없으므로 생성합니다.'); fs.mkdirSync('uploads'); } //이미지나 동영상처리는 웬만하면 프론트에서 클라우드로 바로 올리는게 좋다. const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, 'uploads'); }, //배포때는 s3로 , 개발에는 드라이브에 filename(req, file, done) { const ext = path.extname(file.originalname); //확장자 추출 const basename = path.basename(file.originalname, ext); done(null, basename + '_' + new Date().getTime() + ext); //이나당151817842.png }, }), limits: { fileSize: 20 * 1024 * 1024 }, //20MB }); router.post('/', isLoggedIn, upload.none(), async (req, res, next) => { // POST /post try { const post = await Post.create({ content: req.body.content, UserId: req.user.id, }); if (req.body.image) { if (Array.isArray(req.body.image)) { const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); } else { const image = await Image.create({ src: req.body.image }); await post.addImages(image); } } console.log('POST', post); const fullPost = await Post.findOne({ where: post.id, include: [ { model: Image, }, { model: Comment, include: [{ model: User, attributes: ['id', 'nickname'] }], }, { model: User, //작성자 attributes: ['id', 'nickname'], }, { model: User, //좋아요 누른 사람 as: 'Likers', attributes: ['id'], }, ], }); res.status(201).json(fullPost); } catch (error) { console.error(error); next(error); } }); router.post( '/images', isLoggedIn, upload.array('image'), async (req, res, next) => { //POST /post/images try { console.log(req.files); res.json(req.files.map((v) => v.filename)); } catch (error) { console.error(error); next(error); } } ); 안녕하세요 제로초님! 질문이 있습니다.. 파일은 제대로 올라가서 uploads 폴더안에 있는데 화면에서 이미지를 가져오지 못하고있습니다.. 프론트-백 api통신도 잘 되는데, 왜 개발자도구-네트워크에서 이미지를 가져올 수 없는지 이유를 모르겠습니다 ㅠㅠ
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
[공유] Next.js 12버전 redirect
import { useRouter } from 'next/router'; const Profile = () => { ... const router = useRouter(); if (!me) { router.push('/'); return null; } ... }이런식으로 하면 잘 동작해요~