월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
cors 질문입니다.
cors 는 브라우저에서 다른 서버로 도메인이 다른곳으로 url에 요청을 보낼떄 나타나고 , 프론트서버에서 백엔드서버로 요청보낼땐 상관없다고하셧는데, 저희의 방식은 요청을 saga에서받아서 (프론트서버), 요청을 하는것이아닌가요 ? 그럼 서버에서 서버라 cors 문제가 없어야 정상아닌지요 ? 궁금해서 여쭤봅니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 에러 질문입니다.
영상 2분 59초 쯤에 node app을 하는 순간 unexpected token 'export'라고 나왔습니다. 구글링을 하고 영상을 다시 돌려봤는데 어떤 문제점인지 몰라서 이렇게 질문 드립니다. 아래는 routes폴더의 post.js파일입니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
React 인라인 스타일 DOM 업데이트 관련해서 질문드립니다.
안녕하세요? 리렌더링 강의 중에 React의 인라인 스타일 객체가 리렌더링 시 새로 그려진다는 부분에 궁금한 점이 생겨 질문드립니다. 먼저 해당 컴포넌트가 리렌더링 될 때 Element가 인라인 스타일로 할당이 되면 그 자식 요소들도 다시 그려진다고 이해를 했는데요 아래 사진과 같이 테스트를 해봤는데 a가 버튼 클릭 시 바뀔 때마다 리렌더링이 될 때 Form에 인라인스타일을 적용했음에도 a를 사용하는 div이외에는 다시 그려지지 않는 것을 개발자도구로 확인을 했습니다. 혹시 제가 잘 못 이해한 부분이 있나요? 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
카카오 로그인 적용 관련해서 질문 드릴게요
안녕하세요 제로초님 강좌 너무 잘 들었습니다. 강의를 다 듣고난 뒤 저만의 크롬 확장 프로그램을 만들고 호스팅만 남겨놓은 상태입니다. 저는 passport 전략으로 카카오와 구글 로그인을 사용하였고 세션을 mysql에 저장하여 자동 로그인 기능을 구현했습니다. 문제는 역시 aws로 배포할 때 브라우저로 쿠키가 전달되지 않는 문제입니다. 이미 다른 분들이 질문해 주셔서 답변을 참고했습니다. 답변들을 참고삼아 제가 이해한 원리는 다음과 같습니다. 로그인 시도 => 백엔드에서 로그인 성공 => 카카오 콜백 라우터에서 프론트 api 라우터로 sessionId 전달 => 프론트 라우터에서 전달 받은 sessionId를 쿠키로 저장 => 홈페이지 이동 => 다시 백엔드로 get 요청 => sid 쿠키를 가지고 있기에 deserialize에서 user 정보를 req에 붙여줌 => 정상적으로 req.user 생성 우선 제로초님이 이곳 에서 답변하신 내용을 참고삼아서 카카오 콜백에서 프론트 라우터로 sessionId를 url로 보내주었습니다. ---------- router.get( "/kakao/callback", passport.authenticate("kakao", { failureRedirect: "/login", }), async (req, res) => { const sessionId = req.sessionID; const passportId = req.session.passport.user; res.redirect( `http://3.38.99.75/api/login?sid=${sessionId}&pid=${passportId}` ); } } ); -------- // front/api/login export default function handler(req, res) { const sid = req.query.sid; const pid = req.query.pid; res.setHeader("Set-Cookie", [ "connect.sid=" + sid + ";" + "path=/;", "passportId=" + pid + ";" + "path=/;", ]); res.redirect("/"); } --------- 이렇게 한 뒤 프론트에서 백엔드로 요청을 할 때 쿠키가 전달되었지만, 로그인이 되지 않습니다. 문제가 무엇인지 생각해보니 개발환경에서 보았던 값과 조금 다른것 같습니다. 개발환경에서는 SessionID값 뒤에 점이 붙은 뒤 추가 문자열이 생성되서 쿠키가 저장됩니다. 하지만 배포환경에서 제가 SessionId 값을 얻을 때는 정말 딱 session id 값만 받습니다. 로그인 후 프론트 라우터에서 홈페이지로 이동하고 그곳에서 백엔드로 보내는 첫 get 요청을 라우터로 확인하면 아래와 같습니다. 세션쿠키를 첨부해서 요청을 보내도 deserialize에서 req.user를 생성해주지 않습니다. 도저히 원인을 모르겠습니다. 이분이 해결한 방법처럼 콜백에서 passport를 호출 해보았지만 원리를 잘 모르겠고 이게 맞는 방법인지도 모르겠습니다. ------------- router.get( "/kakao/callback", passport.authenticate("kakao", { failureRedirect: "/login", }), async (req, res) => { req.login(req.user, () => { req.login( req.user, () => { } ) }) } ); ------------- 이 문제 때문에 프로젝트 다 만들어 놓고 3일 째 끙끙 대며 호스팅을 못하고 있습니다. ㅜㅜ 왜 sessionId가 쿠키로 전달되는데도 로그인이 되지 않을까요?? 혹시 다른 호스팅 서비스나 aws 서버리스를 사용해도 똑같은 문제가 발생할까요?? 바쁘실텐데 봐주셔서 감사드립니다. 참고로 github 주소는 https://github.com/ChangKeunJi/pickle 입니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
배포 시 mysql을 쓸지 RDS를 쓸지 고려 기준
안녕하세요, 제로초님 서비스를 배포하는 실습을 진행중인데, 한가지 질문드릴게 있어서 질문드립니다. AWS에 RDS 시스템을 사용하지 않고 back-server에 mysql 설치 하였을때, 한계점이라고 할 부분이 용량적인 부분일까요?? DB 용량이 많을것으로 예상 될 때 RDS 서비스를 이용해야하는지 궁금해서 질문드려요.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초님 각 id 값 마다 특정 이미지 넣기
제로초님 안녕하세요 다름이 아니라. 제가 신발 상세 페이지에서 json 에 신발 사이즈 Array(10) 개가 있고. 0,1,2,3,4,5,6,7,8,9,10 이 있습니다 id 값이. 각 id 값 마다 이미지를 부여 하고 싶습니다. 예시로 들자면? 만약 Array 중 id 값 -> 8 인 값에 예시로 구름 이미지를 넣어주고 싶고, id 값 중 5 인 값에는 햇님 이미지를 넣어주고 싶습니다. 제가 프론트쪽 공부해서. 백단에서 이미지를 넣어주면 되지만, 프론트에서 한번 id 값마다 특정 이미지를 넣어주고 싶은데 어떻게 해야 할 지 감이 안옵니다 ㅠㅠㅠ 도와주세요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
mariaDB 사용중이라 포트 3307 햇는데
생성됫다고 떳는데 포트번호도 같고 근데 실제로 들어가보면 테이블이없는뎁숑?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 리사이징할 thumb 폴더가 생성되지 않고 있습니다.
선생님 강의와 비교하니 클라우드워치 로그에 put과 original이 에러가 나는것 같은데 에러 내용을 보니 권한 문제인것 같습니다. 우분투 백,프론트 서버 각각 npm i 잘 적용했고 코드도 선생님 코드 복붙해서 문제 없는것 같습니다. 람다에 s3 연결 잘한것 같은데 어떻게 해야 될까요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
aws 탈퇴
aws free tier 1년 무료기간이 곧 만료되어 탈퇴하려고 합니다. 사용안하는 리소스들을 모두 삭제하지않고 탈퇴하면 등록된 결제 정보로 이용요금이 계속 부과될 수 있다고 알고있어서 나름 리로스들 모두 삭제했는데요. (인스턴스, 탄력적ip, 보안그룹, 키페어) 혹시나 지우지못한 리소스들이 있어서 추후에 지속적으로 요금이 부과되지 않을까 걱정이 됩니다. 사진의 내용처럼 따로 구독관련된것을 한것이 없는데 이 경우 계정 해지를 하면 자동으로 모든 리소스가 삭제되고 추후 요금 부과에대해서 걱정하지 않아도 될까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
webpack을 쓰기 때문에 import를 쓸 수 있다?
개념에 대해서 깊게 파다가 의문이 생겨 질문드려요 es6 문법인 import export와 commonJS 명세를 따르는 require, module.exports가 있고 런타임인 노드는 기본적으로 commonJS 명세를 따르기 떄문에 require을 쓰는 것이고 프론트는 '바벨'을 사용하는 경우가 많기 때문에 es6문법을 commonJS 명세로 바꾸어줘서 사용 가능하다 제가 제대로 이해한 것이 맞나요? 바벨은 문법을 변환하고, 웹팩은 파일들 합쳐준다는데 개념이 헷갈려서 질문드립니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
영상 3:20 , 8분35초 입니다
3:20 영상에서는 dispatch에서 addPost라는 함수에 text를 넘겨주고 사가에서받는 함수의 이름도 addPost인데 8:35영상에서는 addComment 사가에서 어떻게 해당 data를 받는건지 이해가안됩니다.ㅠㅠ 왼쪽화면에서 TYPE이 ADD_COMMENT_REQUEST라 오른쪽에서 화면 takeLatest에 해당 type의 액션이 있어서 addComment에서 받은것인가요 ?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이해2
1번째 했던 질문이랑 연결됩니다. 해당영상 11:30에 dispatch는 loginRequestAction 인데 11:34에서 LOG_IN_REQUEST의 액션이 실행되는 이유는 액션 생성기에서 먼저 와서 해당 type을 saga에서 찾는걸까요 ? 그리고 다시 saga의 리턴값을 data에 담아서 그걸 다시생성기로 가져가고 생성기에 type을 reducre에 action으로 전달하여 action case에 맞는 state로 store 변경 와 진짜 한 8번은 돌려본것같네요 ㅠㅠㅠ 힘드네요..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
선생님 제가 이해한게 맞을까요 ?
지금 saga쪼개고 리듀서 연결하기 까지 본상태인데... 1. 이벤트등록 2. view에서 dispatch로 해당액션 호출 3. addPost함수실행 4. addPostApi 값실행 5. 결국엔 api값받아와서 addPost에서 해당값으로 트라이/캣츠 실행해서 해당 구문안에서 설정된 액션의 데이터를 data객체에 담아놓고 reducer에서 설정 정한 ADD_POST_SUCCESS란 액션생성기 이름이 있다면 이쪽으로 담은 data가오고 액션생성기 type에서 리듀서로 case retrun처리 state 변경
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
페이지 로딩 오류 질문드립니다
제로초님 아래 Warning: connect.session() MemoryStore is not designed for a production environment, as it will leak memory, and will not scale past a single process 이 경고를 제외 하고는 에러가 보이지 않습니다. 그래서 정상적으로 연결되었다고 판단해서 인스턴스(back) 주소를 입력해서 들어가보니 페이지로딩상태만 나옵니다. 혹시나 해서 다시 back 인스턴스를 생성하고 노드및 우분투를 설치해도 같은 결과가 나옵니다 이럴땐 어느 부분이 문제일까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
넥스트 12 버전에 나왔다고 합니다ㅋㅋㅋ
제로초 강사님, 책과 강의 잘보고 있습니다. 감사합니다. 넥스트 12가 나왔는데... 러스트 컴퍼일러 등 다른 기능과~~ 서버 컴포넌트가 나왔다고 하네요 (getServerSideProps or getStaticProps 요거 필요없다고 함) 어떻게 생각하시나요? 넉스트보다 좋나요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
새로고침시 로그인 풀림 현상
무료 도메인을 이용하여 수강중입니다. 로그인 풀림 현상에 대해 강의를 보고 따라하여도 풀리고 있으며 새로고침 후 재로그인시 아래 스샷과 같은 증상을 보이고 있습니다. 그리고 SetCookie에서 이상하게 domain이 표시되지 않고 있는데요. app.js 에는 잘 입력해놓은 상태입니다. 무엇이 문제 일까요?? const express = require('express'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const morgan = require('morgan'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); dotenv.config(); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const hashtagRouter = require('./routes/hashtag'); const db = require('./models'); const passportConfig = require('./passport'); const app = express(); db.sequelize.sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); passportConfig(); if (process.env.NODE_ENV === 'production') { app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); app.use(cors({ origin: 'http://rjgnl.ek.ag', credentials: true, })); } else { app.use(morgan('dev')); app.use(cors({ origin: true, credentials: true, })); } app.use('/', express.static(path.join(__dirname, 'uploads'))); app.use(express.json()); 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' && '.rjgnl.ek.ag' } })); app.use(passport.initialize()); app.use(passport.session()); app.get('/', (req, res) => { res.send('hello express'); }) app.use('/post', postRouter); app.use('/posts', postsRouter); app.use('/user', userRouter); app.use('/hashtag', hashtagRouter); app.listen(80, () => { console.log('서버 실행 중'); }); pm2 백서버로그에선 저런 표시가 나오고 있습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리렌더링이 실행되더라도 실제로 달라진 부분만 새로 그런다고 하셨는데.
안녕하세요. 리렌더링 이해하기 회차에서 리렌더링이 실행되더라도 리액트는 실제로 이전과 달라지는 부분만 돔에 새로 그린다고 하셨는데요. LoginForm.js 코드를 실습하면서 크롬 ReactDevTool의 Highlight updates when components render 옵션을 켜두고 확인하고 있는데, id input에 새로운 값들을 입력하여 리렌더링을 발생시키면 ButtonWrapper 이하 내용들도 함께 하이라이팅이 됩니다. styled-component뿐만이 아니라 useMemo로 리렌더링 최적화를 해도 같은 현상이 보여지는데, Highlight updates when components render 옵션같은 경우 렌더링 되는 부분을 하이라이팅 해주는 기능이라고 알고 있는데요. ButtonWrapper 안에 내용도 리렌더링은 되지만 돔에 다시 그려지진 않는다. 라고 이해하면 되는걸까요? 리렌더링이 일어나도 실제로 돔에 다시 그려지지만 않으면 렌더링 최적화를 구현했다. 라고 할 수 있는건지 궁금합니다.답변 기다리겠습니다:)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인 주소에 nodebird.com과 api.nodebird.com이 작동되려면
가비아 사이트와 같은곳에서 nodebird.com과 api.nodebird.com을 등록해야 정상적으로 작동되는거죠?? route53에서 등록하는것만으론 안되는거죠?? 그리고 해당 도메인주소로 지금 접속이 되는건 제가 만든 사이트가 아닌 다른 수강생분께서 같은 주소로 만든 사이트일수도 있는거죠??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
json 에 있는 데이터들을 map 으로 출력 할 떄 만약 상품마다 데이터가 null 값이라면 어떻게 출력..
안녕하세요 제로초님. 다름이 아니라 제가 react 환경에서 json 에 있는 데이터들을 뽑아 가져와서 react jsx 에서 데이터들을 출력하고 싶은데, 제가 강의를 듣고 배웠던 내용으로 신발 쇼핑몰을 만들 고 있습니다. 예로 들면 신발 제품들 중에서 나이키 에어포스라는 신발이 있는데, 신발 상세 페이지에서 신발 상품이 몇 켤레 있는 지 나옵니다. 예로 들면 3개면 3 켤레 장고 남았다고 출력하도록 나오고. 그 신발이 다 팔려 버려서 데이터가 null 값으로 나옵니다. (신발 마다 장고가 있는 상품이 있고 없는 상품이 있음) 그러면 제가 신발 상세 페이지에서 JSX 문법에서 {ProductDetail && ProductDetail.Nike.map(List => ( <li key={List.id}>{List.displayText} </li> ))} 이런 식으로 상세 페이지를 만들어 놓았는데. (displayText 가 신발 몇 켤레 있는 지 data 입니다.) 근데 만약에 displayText 가 null 값으로 있다면? 그 displayText 가 null 값인 신발 상세 페이지로 들어가면 에러가 나옵니다. displayText data 가 들어 있는 상세 페이지는 정상적으로 들어가 지고.. 근데 제가 이 displayText 가 null 인 즉, 신발 장고가 없는 상세 페이지들은 장고가 없으면 -> displayText( 몇 켤레 남았는 지 데이터) 위치에 <p>신발 품절 입니다. </p> 이렇게 출력하고 싶습니다. 고민 해 보았지만 하지만 어떻게 해 줘야 할 지 모르겠습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
drop database 삭제 관련 질문
강의 수강중 우분투에서 sudo su로 mysql에 접속하여 drop database로 삭제를 하고 다시 exit을 통해 우분투로 와서 npx pm2 리로드를 하고 mysql 접속 후 데이터베이스를 불러오려하니 삭제가 되서 없어진것 같습니다. 그 이후 위 스샷처럼 홈페이지 회원가입 버튼 누를시 저런 창이 나오고 개인정보 입력 후 가입버튼을 눌러도 failure 응답에 경고창과 같은 문구가 나오고 있습니다. 아무래도 데이트베이스가 삭제되서 그런것 같은데 데이터베이스가 삭제되면 복구할 방법은 없을까요?