월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
jwt 리프레쉬토큰 질문!
안녕하세요 제로초님 1. jwt를 활용하여 한계정에서 중복 로그인을 허용할때 서버에서 기기별로 제어를 하고 싶을때 각 기기들으 정보를 어떤식으로 확인을 하는것인가요? 2. 리프레쉬토큰도 액세스토큰과 마찬가지로 만료기한이 거의 다되면 새로 발급받아서 사용하는식으로 로그인을 유지시키는건가요? 아니면 리프레쉬토큰은 만료기한 없이 영구적으로 로그아웃 전까지 가지고있는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
.gitignore 질문
이 강의 내용과는 동떨어진 내용이긴 하나 궁금하여 질문드립니다. git에 올릴 때 prepare/front/.next 폴더 내의 파일을 올려도 되는 것인지 궁금합니다. node_modules는 npm install로 설치가 가능하여 .gitignore 파일에 넣는 것은 알고 있습니다. 현 강좌의 깃허브에 있는 .gitignore 파일을 참조하였으나 질문드린 폴더는 없어서 문의드립니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
disaptch 방법
dispatch 로 액션을호출하고 action에 설정한 type으로 saga가 이동되는데 이걸생략하고 뒤에는 dispatch에서 바로 saga의 type을 불럿더라구요 . 그럼 성공하면 성공쪽으로 가고 그러면 액션은 필요없는거아닌가요 ? saga적용시 어차피 사가에서받아온 data로 reducer에서 state를변경하니까요 ? 액션은 dispatch에서 액션말고 saga의 type을 호출하는게 깔끔하겟네요 ?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
styles파일의 분리 문의
안녕하세요? 다음과 같은 props값을 는 경우에 styles 코드만 따로 분리하려 합니다. A.js(다음의 코드) Astyles.js(styled-components 따로 분리하려는 새 파일) isSelected는 어떻게 처리해야하는지, 궁금합니다. import React from 'react' import styled from 'styled-components' const Bar = (props) => { return ( <BarWrapper onClick={props.handleClickBar} isSelected={props.isSelected}> <BarInfo> <Percent>{props.percent}%</Percent> <ItemVaue>{props.itemValue}</ItemVaue> <Count>{props.count}</Count> </BarInfo> <BarGraph width={props.percent} isSelected={props.isSelected}></BarGraph> </BarWrapper> ) } const BarWrapper = styled.div` position: relative; margin-bottom: 3px; padding: 8px 0; background: ${({isSelected}) => isSelected ? '#dddddd' : '#f3f3f3'}; ` const BarInfo = styled.div` width: 100%; display: flex; z-index: 2; position: relative; ` const Percent = styled.span` text-align: right; min-width: 70px; flex: 0 0 auto; ` const ItemVaue = styled.span` padding-left: 60px; flex: 1 1 0%; ` const Count = styled.span` padding-right: 20px; flex: 0 0 auto; ` const BarGraph = styled.div` position: absolute; left: 0; top: 0; width: ${({width}) => width}%; transition: width 1.5s ease; height: 100%; background: ${({isSelected}) => isSelected ? 'rgba(126, 198, 81, 0.7)' : 'rgb(198, 198, 198)'}; z-index: 1; ` export default Bar
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
error, done, loading 상태 질문
각 비동기 데이터마다 loading, error, done을 모두 만들어주던데 실제로 쓰지않는 상태는 애초에 작성안해도될까요?? 그리고 비동기 성공할때(done === true)가 될때 useEffect 안에서 다른 로직을 작성하려는데 done이 true가 되면 해당 비동기요청 디스패치를 하기전까지는 true로 남아있어서 문제가되던데 done === true 상태를 false로 넘어가는 액션을 따로만들어서 useEffect의 흐름이 useEffect(() => { if(done) { ...done이 true일경우 비즈니스로직}dispatch(doneFalse)// *done을 false로 바꿔주는 액션 디스패치로 실행}, [done]);이런식으로 해야하나요? 다른 좋은 방법이 따로 있을까요!>?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
ADD_POST_TO_ME 질문있습니다.
게시글을 추가할 때(ADD_POST)는 잘 됩니다.그런데 ADD_POST_TO_ME 를 할 때 문제가 발생합니다. 1. me.Posts 에 id 값만 넣었을 경우 case ADD_POST_TO_ME: console.log('action.data: ', action.data); console.log('draft.me: ', state.me); draft.me.Posts = action.data break; 이 코드는 action.data를 통해 id 값을 잘 받아오는지 테스트를 위해 작성했습니다. 결과는 아래와 같습니다. me.Posts가 생겼고 값으로 id값이 잘 들어갑니다. 그러나 문제는 unshift를 통해 넣었을때 발생합니다. 2. me.Posts.unshift({id: action.id}) case ADD_POST_TO_ME: console.log('action.data: ', action.data); console.log('draft.me: ', state.me); draft.me.Posts.unshift({ id: action.data }); break; 위와 같이 작성할 경우 아래와 같은 에러가 생기며ADD_POST_TO_ME action이 실행되지 않습니다. reducer에서 문제가 생기는것 같은데.. 혹시 me의 상태가 객체여서 그런것일까요? 문제가 무엇인지 파악하기 어려워 조언을 구합니다. 3. redux-saga (post.js) function addPostAPI(data) { return axios.post('/post', data); // { title: data.title, category: data.category, content: data.content } } function* addPost(action) { try { const result = yield call(addPostAPI, action.data); // console.log('result', result.data.id); yield put({ type: ADD_POST_SUCCESS, data: result.data, }); yield put({ type: ADD_POST_TO_ME, // 사용자 본인의 POST에 추가 data: result.data.id, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } 결과 값(result)은 잘 받아옵니다. 참고: https://github.com/ko7452/e-Library/tree/master/prepare
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
배포 후 모바일에서 로그인 안되는 문제.
업로드해주신 리액트쿼리 버전을 기반으로 연습 프로젝트를 만들었습니다. PC버전에서는 로그인이 잘 되고 기능들도 이미지 업로드 부분을 제외하곤 잘 되고 있습니다. 문제는 모바일에서 로그인이 안되네요. 크롬/삼성브라우저 동일합니다. 휴대폰 USB로 연결해서 개발자모드에서 나타난 에러는 이렇고요 SSH 백서버는 아무런 반응이 없습니다. CORS문제인것 같긴한데 몇시간째 삽질중인데 갈피를 못잡겠네요. 그 외에 테이블이 대문자시작으로 생성됐는데 DROP 하고 다시 실행했지만 여전히 대문자로 시작하네요. PC버전에선 아직 별 문제를 못찾았긴 했는데 로컬에서처럼 정상적으로 테이블 생성하는 다른 방법이 있나요? app.js 코드는 이렇습니다. const express = require('express'); const cors = require('cors'); const morgan = require('morgan'); // front에서 보내는 요청 console 해주는 툴 const dotenv = require('dotenv'); // 환경설정 정보 저장 const hpp = require('hpp'); const helmet = require('helmet'); const passport = require('passport'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const path = require('path'); // 파일이름 관련 const db = require('./models'); const passportConfig = require('./passport'); const userRouter = require('./routes/user'); const itemRouter = require('./routes/item'); const orderRouter = require('./routes/order'); const postRouter = require('./routes/post'); dotenv.config(); const app = express(); // db.sequelize.sync({ alter: true }) // 테이블 수정 가능 설정 db.sequelize.sync({ logging: false }) .then(() => { console.log('db 연결 성공'); }) .catch(console.error); passportConfig(); if (process.env.NODE_ENV === 'production') { //배포모드일 떄 console.log('production 배포모드'); app.use(morgan('combiend')); app.use(hpp()); app.use(helmet({ contentSecurityPolicy: false })); app.use(cors({ origin: ['http://localhost:3060', 'http://excusemoa.com'], credentials: true, })); // npm i pm2 cross-env helmet hpp } else { console.log('dev 개발모드'); app.use(morgan('dev')); app.use(cors({ origin: true, credentials: true, })); } app.use('/', express.static(path.join(__dirname, 'uploads'))); // front에서 이미지 폴더 접근 === '/back'(__dirname) + 'uploads' app.use(express.json()); // req.body 파싱 app.use(express.urlencoded({ extended: true })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { // 쿠키 공유를 위한 필수 옵션 httpOnly: true, secure: false, domain: process.env.NODE_ENV === 'production' && '.excusemoa.com', // 백, 프론트 서버 IP 다르다면 쿠키공유 위해 도메인설정 필수 }, })); app.use(passport.initialize()); app.use(passport.session()); app.get('/', (req, res) => { res.send('hello express'); }); // 다른 라우터 불러오기 app.use('/user', userRouter); app.use('/item', itemRouter); app.use('/order', orderRouter); app.use('/post', postRouter); app.listen(80, () => { console.log('서버 실행 중'); }); 프론트 config.ts export const backUrl = process.env.NODE_ENV === 'production' ? 'http://api.excusemoa.com' : 'http://localhost:3070';
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
AWS에서 메모리부족 빌드 안되는 문제>
올려주신 타입스크립트-리액트쿼리 기반으로 연습용 프로젝트 만들어서 AWS에서 npm build를 했는데 에러가 발생하네요. 로컬에선 빌드가 정상적으로 됐습니다. back은 aws에서 정상적으로 작동하고 front 빌드가 실패하네요. 서버는 강의에 나온 그대로 무료서버 선택했습니다. AWS 로그는 이러합니다. > excuse-moa-front-rq@1.0.0 build /home/ubuntu/excuse-moa/front_rq > cross-env ANALYZE=true NODE_ENV=production next build info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5 info - Checking validity of types error - ESLint: Failed to load config "airbnb" to extend from. Referenced from: /home/ubuntu/excuse-moa/front_rq/.eslintrc.js info - Using external babel configuration from /home/ubuntu/excuse-moa/front_rq/.babelrc info - Creating an optimized production build . <--- Last few GCs ---> [11366:0x53d8700] 68649 ms: Mark-sweep (reduce) 485.5 (491.0) -> 484.3 (491.5) MB, 775.4 / 0.0 ms (average mu = 0.186, current mu = 0.085) allocation failure scavenge might not succeed [11366:0x53d8700] 68736 ms: Scavenge (reduce) 485.4 (490.5) -> 484.5 (491.5) MB, 4.6 / 0.0 ms (average mu = 0.186, current mu = 0.085) allocation failure [11366:0x53d8700] 68823 ms: Scavenge (reduce) 485.4 (493.5) -> 484.8 (493.7) MB, 26.9 / 0.0 ms (average mu = 0.186, current mu = 0.085) allocation failure <--- JS stacktrace ---> FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 1: 0xa38a30 node::Abort() [node] 2: 0x96e0af node::FatalError(char const*, char const*) [node] 3: 0xbb7ebe v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node] 4: 0xbb8237 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node] 5: 0xd74445 [node] 6: 0xd74fcf [node] 7: 0xd82e0b v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node] 8: 0xd869cc v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node] 9: 0xd550ab v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node] 10: 0x109d68f v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node] 11: 0x14467f9 [node] npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! excuse-moa-front-rq@1.0.0 build: `cross-env ANALYZE=true NODE_ENV=production next build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the excuse-moa-front-rq@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2022-01-23T08_23_06_820Z-debug.log 에러 발생후 package-lock.json, node_modules 삭제하고 재시도 했는데 그대로네요. allocation failure면 메모리부족같긴 한데 원인이 tree-shaking 못한 최적화 문제인지 그저 서버 램부족인지 제가 놓친게 있는건지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
server side rendering 시 END 에 관한 질문
[getServerSideProps - 코드] export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req, res, ...ets }) => { console.log('getServerSideProps req.headers: ', req.headers); const cookie = req ? req.headers.cookie : ''; console.log('cookie: ', cookie); axios.defaults.headers.Cookie = ''; // 서버에서 다른 사람과 cookie가 공유되는 문제를 방지하고자 초기화를 해준다. if (req && cookie) { axios.defaults.headers.Cookie = cookie; // 서버에서 요청일때랑 cookie가 있으면 설정한 cookie를 넣어준다. console.log('axios.defaults.headers.Cookie: ', axios.defaults.headers.Cookie); } store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch(END); await store.sagaTask.toPromise(); }); 로그인 페이지에서 로그인 시 성공적으로 홈으로(index.js) 이동하게 됩니다. 1. front server에 console을 확인하면 REQUEST 후 SUCCESS까지 잘 받아옵니다. [Front: Application - Cookies] [API Server: Application - Cookies] 2. 페이지를 새로고침 시 로그인이 풀리는 문제 발생 SSR을 통해 다시 REQUEST 후 다음으로 넘어가질 못합니다. [Front: Application - Cookies] [API Server: Application - Cookies] axios 통해 header에 동일한 Cookie를 담아 잘 넘길텐데 request 후 success까지 넘지길 못하고 user state me에 user 정보를 왜 담아오지 못하는지 원인을파악하지 못했습니다. END를 통해 요청과 응답까지 기다려주는 것으로 알고있는데왜 기다리질 못하고 끝나버리는지 궁금합니다. 계속해서 구글링과 흐름을 파악하고 console을 살피는데도문제해결에 어려움을 겪고있습니다.. 도와주시면 감사하겠습니다
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
intersectionObserver적용 했는데 왜 계속 inView 값이 False로 찍힐까요
import { useInView } from 'react-intersection-observer'; .... const Home = () => { ... const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector( state => state.post, ); const [ref, inView] = useInView(); useEffect(() => { dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); useEffect(() => { console.log(inView); if (hasMorePosts && !loadPostsLoading) { const lastId = mainPosts[mainPosts.length - 1]?.id; dispatch({ type: LOAD_POSTS_REQUEST, lastId, }); } }, [inView, hasMorePosts, loadPostsLoading, mainPosts]); return ( <AppLayout> .... <div ref={hasMorePosts && !loadPostsLoading ? ref : undefined} /> </AppLayout> ); ... pages/index.js 코드가 다음과 같은데 계속해서 콘솔창에 inView 값이 false라고 뜹니다. true로 변화하지 않습니다. 그래서 if 문 구절이 실행조차 되지 않는데 뭐가 문제일까요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
S3 bucket과 pre-signedurl 질문
안녕하세요 제로초님 S3 bucekt 서비스를 공부하면서 pre-signedurl을 알게되어 학습하면서 궁금한것이 생겨 질문드립니다. S3 bucket에 올라간 파일의 접근을 막기 위하여 pre-signedurl를 사용한다고 이해했습니다.그리고 pre-signedurl을 서버에서 생성해서 클라이언트로 넘겨주면 설정된 제한 시간동안만 클라이언트에서 직접 S3으로 파일을 업로드하거나 이미지를 불러온다거나 하는 등의 작업도 할수있게되는데 여기서 궁금한것이 1. S3 스토리지에 파일들을 접근 못하게 하는것이 목적이면 처음부터 public 말고 priavte으로 설정하면 될거같은데 private으로 설정되있다면 back서버에서 S3 스토리지에서 이미지를 가져와서 클라이언트에게 넘겨줄때 back서버에서 S3 스토리지로 접근하는것도 막는건가요?? 그게 아니라면 굳이 이미지를 불러올때마다 매번 서버에서 pre-signedurl을 생성하고 클라이언트에서 그 url로 이미지를 요청하는게 이해가 되지 않는데 이미지를 불러오는것일경우 pre-signedurl로 하나 private로 설정을하나 무슨차이가 있는지 궁금합니다. 2. pre-signedurl을 사용하는 주된 이점은 서버를 거치지 않고 클라이언트에서 S3으로 바로 업로드하는 것일거같은데 다른 주된 이점이 있을까요??3. pre-signedurl을 사용한다면 업로드만 pre-sigendurl로 클라이언트에서 직접 s3로 올리는 작업만하고 이미지를 불러오는것은 서버에서 s3접근해서 경로를 내려주는식으로 하는 방법은 안돼나요? pre-signedurl을 사용하면 이미지를 불러오든 업로드를하든 모두 pre-signedurl로 사용할수밖에없는지 궁금합니다
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
우분투 mysql 계속 5.7로만 설치됩니다.
AWS 배포부분에서 우분투에 MYSQL 설치하기 따라하고 있습니다. 동일하게 아마존 AWS로 했고 우분투 버전은 Operating System: Ubuntu 18.04.6 LTS Kernel: Linux 5.4.0-1060-aws Architecture: x86-64 이렇게 나오네요. 중간에 sudo update할때 PUBKEY 오류가 나서 https://comcube.tistory.com/entry/Ubuntu-%EC%97%90%EC%84%9C-GPG-ERROR-NOPUBKEY-%EC%97%90%EB%9F%AC%EC%8B%9C-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95 위 블로그를 보고 해결한 상태입니다. 알려주신 사이트 외에 몇개 다른 블로그글 참고해서 설치 시도중인데 계속 버전이 5.7만 뜨네요.. ubuntu@ip-172-31-36-77:~/excuse-moa/back$ wget -c https://repo.mysql.com/mysql-apt-config_0.8.13-1_all.deb --2022-01-20 08:30:14-- https://repo.mysql.com/mysql-apt-config_0.8.13-1_all.deb Resolving repo.mysql.com (repo.mysql.com)... 23.205.96.240 Connecting to repo.mysql.com (repo.mysql.com)|23.205.96.240|:443... connected. HTTP request sent, awaiting response... 200 OK Length: 35560 (35K) [application/x-debian-package] Saving to: ‘mysql-apt-config_0.8.13-1_all.deb’ mysql-apt-config_0.8.13-1_ 100%[========================================>] 34.73K --.-KB/s in 0.03s 2022-01-20 08:30:14 (1.03 MB/s) - ‘mysql-apt-config_0.8.13-1_all.deb’ saved [35560/35560] ubuntu@ip-172-31-36-77:~/excuse-moa/back$ sudo dpkg -i mysql-apt-config_0.8.13-1_all.deb (Reading database ... 69208 files and directories currently installed.) Preparing to unpack mysql-apt-config_0.8.13-1_all.deb ... Unpacking mysql-apt-config (0.8.13-1) over (0.8.13-1) ... Setting up mysql-apt-config (0.8.13-1) ... Warning: apt-key should not be used in scripts (called from postinst maintainerscript of the package mysql-apt-config) OK ubuntu@ip-172-31-36-77:~/excuse-moa/back$ sudo apt update Hit:1 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic InRelease Hit:2 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates InRelease Get:3 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-backports InRelease [74.6 kB] Hit:4 https://deb.nodesource.com/node_14.x bionic InRelease Hit:5 http://repo.mysql.com/apt/ubuntu bionic InRelease Hit:6 http://security.ubuntu.com/ubuntu bionic-security InRelease Fetched 74.6 kB in 1s (88.4 kB/s) Reading package lists... Done Building dependency tree Reading state information... Done 24 packages can be upgraded. Run 'apt list --upgradable' to see them. ubuntu@ip-172-31-36-77:~/excuse-moa/back$ sudo apt-get install mysql-server Reading package lists... Done Building dependency tree Reading state information... Done The following packages were automatically installed and are no longer required: libcgi-fast-perl libcgi-pm-perl libencode-locale-perl libevent-core-2.1-6 libfcgi-perl libhtml-parser-perl libhtml-tagset-perl libhtml-template-perl libhttp-date-perl libhttp-message-perl libio-html-perl liblwp-mediatypes-perl libtimedate-perl liburi-perl Use 'sudo apt autoremove' to remove them. The following additional packages will be installed: libmecab2 mysql-client mysql-common mysql-community-client mysql-community-server The following packages will be REMOVED: mysql-client-core-5.7 mysql-server-core-5.7 The following NEW packages will be installed: libmecab2 mysql-client mysql-common mysql-community-client mysql-community-server mysql-server 0 upgraded, 6 newly installed, 2 to remove and 24 not upgraded. Need to get 51.5 MB/51.5 MB of archives. After this operation, 240 MB of additional disk space will be used. Do you want to continue? [Y/n] y Get:1 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/universe amd64 libmecab2 amd64 0.996-5 [257 kB] Get:2 http://repo.mysql.com/apt/ubuntu bionic/mysql-5.7 amd64 mysql-community-client amd64 5.7.37-1ubuntu18.04 [14.6 MB] Get:3 http://repo.mysql.com/apt/ubuntu bionic/mysql-5.7 amd64 mysql-client amd64 5.7.37-1ubuntu18.04 [70.3 kB] Get:4 http://repo.mysql.com/apt/ubuntu bionic/mysql-5.7 amd64 mysql-community-server amd64 5.7.37-1ubuntu18.04 [36.5 MB] Get:5 http://repo.mysql.com/apt/ubuntu bionic/mysql-5.7 amd64 mysql-server amd64 5.7.37-1ubuntu18.04 [70.3 kB] Fetched 51.5 MB in 2s (23.0 MB/s) Preconfiguring packages ... (Reading database ... 69208 files and directories currently installed.) Removing mysql-client-core-5.7 (5.7.36-0ubuntu0.18.04.1) ... Removing mysql-server-core-5.7 (5.7.36-0ubuntu0.18.04.1) ... Selecting previously unselected package mysql-common. (Reading database ... 69100 files and directories currently installed.) Preparing to unpack .../0-mysql-common_5.8+1.0.4_all.deb ... Unpacking mysql-common (5.8+1.0.4) ... Selecting previously unselected package mysql-community-client. Preparing to unpack .../1-mysql-community-client_5.7.37-1ubuntu18.04_amd64.deb ... Unpacking mysql-community-client (5.7.37-1ubuntu18.04) ... Selecting previously unselected package mysql-client. Preparing to unpack .../2-mysql-client_5.7.37-1ubuntu18.04_amd64.deb ... Unpacking mysql-client (5.7.37-1ubuntu18.04) ... Selecting previously unselected package libmecab2:amd64. Preparing to unpack .../3-libmecab2_0.996-5_amd64.deb ... Unpacking libmecab2:amd64 (0.996-5) ... Selecting previously unselected package mysql-community-server. Preparing to unpack .../4-mysql-community-server_5.7.37-1ubuntu18.04_amd64.deb ... Unpacking mysql-community-server (5.7.37-1ubuntu18.04) ... Selecting previously unselected package mysql-server. Preparing to unpack .../5-mysql-server_5.7.37-1ubuntu18.04_amd64.deb ... Unpacking mysql-server (5.7.37-1ubuntu18.04) ... Setting up mysql-common (5.8+1.0.4) ... update-alternatives: using /etc/mysql/my.cnf.fallback to provide /etc/mysql/my.cnf (my.cnf) in auto mode Setting up libmecab2:amd64 (0.996-5) ... Setting up mysql-community-client (5.7.37-1ubuntu18.04) ... Setting up mysql-client (5.7.37-1ubuntu18.04) ... Setting up mysql-community-server (5.7.37-1ubuntu18.04) ... update-alternatives: using /etc/mysql/mysql.cnf to provide /etc/mysql/my.cnf (my.cnf) in auto mode Created symlink /etc/systemd/system/multi-user.target.wants/mysql.service → /lib/systemd/system/mysql.service. Setting up mysql-server (5.7.37-1ubuntu18.04) ... Processing triggers for libc-bin (2.27-3ubuntu1.4) ... Processing triggers for systemd (237-3ubuntu10.52) ... Processing triggers for man-db (2.8.3-2ubuntu0.1) ... Processing triggers for ureadahead (0.100.0-21) ...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
새로고침 시 hydrate 상태 초기화 문제 질문 있습니다.
import { END } from 'redux-saga'; import axios from 'axios'; import { wrapper } from '../store/configureStore'; . . (중간 코드 생략) . . export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { console.log('getServerSideProps req: ', req); const cookie = req ? req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (req && cookie) { axios.defaults.headers.Cookie = cookie; } store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch(END); await store.sagaTask.toPromise(); }); 처음에 로그인 시 cookie 도 잘 받아오며 SSR도 잘 동작합니다. @@INIT state는 초기값이고 hydrate를 통해 이후 state를 보면 로그인 정보도 잘 담겨 있습니다. 그런데 새로고침 시 hydrate 을 보면 state가 초기화가 되어있고 me 의 정보에 로그인된 user의 정보가 담겨있지 않습니다. cookie는 잘 가지고 있다고 나와 있는데 무엇이 문제인지 ㅍ파악이 되지 않습니다. 흐름을 봐도 문제가 없는 것 같은데.. 해결을 위해 힌트를 얻을 수 있는 방법이 있을까요?제가 확인해봐야 할 것이 무엇인지 알고 싶습니다. 1. 로그인 전 2. 로그인 후 3. 로그인 후 새로고침 시 4. cookie 보유 여부 (브라우저 localhost: 3000)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
getServerSideProps 사용관련 질문 있습니다.
먼저 현재 배포는 하지 않았고 npm run dev를 통해 개발을 진행하고 있습니다. 브라우저의 도매인은 현재 localhost 3000 이고, server의 도메인은 localhost: 3065입니다. ! 질문: next.js에 Server Side Rendering을 적용하기 위해선 api 서버가 배포가 되어있어야 하나요? 그게 아니라면 아래의 방식에서 발생하는 에러의 원인을 찾아봤지만 파악하기가 어렵습니다... 조언 부탁드립니다. reducer에 index.js 수정 뒤 pages/index.js에서 사용법을 참고하여 하단에 아래의 코드를 추가했습니다. import { END } from 'redux-saga'; export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { console.log('getServerSideProps req: ', req); store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch(END); await store.sagaTask.toPromise(); 그런데 아래와 같은 에러가 발생합니다. TypeError: Cannot read properties of undefined (reading 'getServerSideProps') 개발자 console network
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
rootReducer 질문 있습니다.
reducer를 확장 가능하게 구조를 바꾸셨는데 이 방법에 대해 뭐라고 구글링을 해야 상세하게 볼 수 있는지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
문자열 배열 출력하기
제로초님 다운로드 a href={} 를 누르면 이미지가 다운로드 되도록 만들어 보았습니다. 이런 식으로 되어 있습니다. 지금은 a 태그 링크를 누르면 동시에 모두 다 다운로드 되는 방법을 몰라서 [0] 이런 식으로 코드를 작성하고 첫 번쨰 배열에 있는 링크 주소에 이미지 값만 다운로드 하고 있습니다. 다운로드 버튼을 누르면 모두 다 다운로드 동시에 되고 싶은데 몇 시간동안 삽질 해 봤는데 어떻게 잡고 가야 할 지 모르겠습니다. 동시에 다운로드 하는 게 불가능할까요? 배열만큼 [0] [1] 버튼을 생성 해 놓고 각 값에 따라 다운로드 되도록 만들어야 할까요? <button><a href={(value.imageUrl || '').split(',')[0]</button> value.imageUrl[0] 0: "https://www.zeroch.com/images/1" 1: "https://www.zeroch.com/images/23" 2: "" value.imageUrl[1] 0: "https://www.zeroch.com/images/5" 1: "" value.imageUrl[2] 0: "https://www.zeroch.com/images/24" 1: ""
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 슬라이드 구현 하기 또 다른 방법
안녕하세요 이미지가 1~2장일때와 그 이상일때로 나누어서 1장: 기본 출력 2장 : 기본 출력에 버튼으로 이동 3장 이상 : 4분할 기본 출력 + 모달 + 이미지 슬라이드 이렇게 구현해 보았습니다. http://skilnote-for-react.co.kr/wm/myshortcut/react-nodebird/28
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
서버에서 build 질문
리눅스 환경 즉 서버에서 npm run build를 할때 대문자를 소문자로 바꿔야하는 이슈가 있다면 처음 개발할때부터 소문자로 파일명을 지어서 프로젝트를 만들면 되는걸까요? 아니면 npm run build를 해놓고 서버에서 git pull만 한다면 상관은 없을 거같은데 빌드 커밋을 해줘야 하는 문제가 있는것 같고 제로초님은 현업에서 1. 파일명을 소문자로 지어서 개발한다, 2. build된 결과물을 push하고 pull 받는다. 어떠한 방식으로 하시는지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Unhandled Runtime Error 질문입니다
아래는 에러 문구입니다.'REACT_APP_SC_ATTR'로 검색시 확인되지 않습니다1. package.json을 지우고 npm install을 다시 하는게 최선일까요?2. 제 폴더 내에서는 검색되지 않는 내용인데, 왜 이런 에러가 나는지도 궁금합니다. Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'REACT_APP_SC_ATTR') Call Stack eval node_modules\styled-components\dist\styled-components.browser.esm.js (1:1130) Module../node_modules/styled-components/dist/styled-components.browser.esm.js file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/pages/index.js (9943:1) Module.options.factory /_next/static/chunks/webpack.js (633:31) __webpack_require__ file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/webpack.js (37:33) fn /_next/static/chunks/webpack.js (302:21) eval webpack-internal:///./components/AppLayout.js (13:75) Module../components/AppLayout.js file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/pages/index.js (1568:1) Module.options.factory /_next/static/chunks/webpack.js (633:31) __webpack_require__ file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/webpack.js (37:33) fn /_next/static/chunks/webpack.js (302:21) eval webpack-internal:///./pages/index.js (4:79) Module../pages/index.js file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/pages/index.js (1623:1) Module.options.factory /_next/static/chunks/webpack.js (633:31) __webpack_require__ file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/webpack.js (37:33) fn /_next/static/chunks/webpack.js (302:21) eval node_modules\next\dist\build\webpack\loaders\next-client-pages-loader.js?page=%2F&absolutePagePath=D%3A%5C2021%5CNodeBirdSNS%5Cfront%5Cpages%5Cindex.js! (5:15) eval node_modules\next\dist\client\route-loader.js (236:50)
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
마이그레이션 관련 질문입니다~
안녕하세요~ 배포 후에 DB변경을 위해 마이그레이션을 사용해야 할 것 같아서 질문드립니다~ 공부해본 바로는 table 추가와 column 추가는 마이그레이션으로 진행하고 일대다, 다대다 관계 등은 직접 model폴더내 파일에서 변경해야 하는 걸로 알고 있는데 맞나 싶어서요~ 그리고 개발모드에서 back 서버에서 마이그레이션을 진행하고 배포한 서버에서 실행하려면 ec2 서버에 접속하여 mysql root 접속 후에 마이그레이션을 별도로 실행(npx sequelize-cli db:migrate)해야 하는지 궁금함니다~ 감사합니다~^^