월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
로그인 오류
로그인시 이렇게 오류가 납니다. UserProfile.js 하고 FollowButton.js 코드 모두 github 마스터브랜치의 코드와 맞춰주었습니다. 어떻게 해결할 수 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
zerocho 님 eslint 설정관련해서 질문이 있습니다.
안녕하세요 zerocho 님 eslint 설정관련해서 질문이 있습니다. eslint에서 env쪽에 node: true를 주시면서 node에서 사용하니까 주셨다고 하셨는데 next.js는 Browser환경에서 실행되지 않나요? server 코드가 따로 있는게 아닌 것 같아서요 혹시 이유를 알 수 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
react-slick CSS가 적용안되는 에러
안녕하세요 제로초님 강의 해주신 코드에서 조금 변경하여 진행 중인데 react-slick의 css가 적용이 되지 않는 에러가 발생하여 원인이 궁금하여 질문 남깁니다.(기능은 정상적으로 동작합니다.) 우선 제 생각엔 react-slick 내부적으로 css가 inherit 로 되어있어서 저 부분이 적용안되는 것 같기도하고 사이즈를 Wrapper 높이를 조절해도 해결이 안됩니다. 클래스 네임 보고 하나하나 css 커스텀 해서 적용하면 해결될 것 같은데 에러 발생 원인을 알고싶습니다. 우선 제가 구현하고 싶은 ui는 인스타그램 웹버전 참고해서 비슷하게 만들고 싶습니다. 현재화면과 전체코드 PostImages.js 첨부하겠습니다. 현재 화면 전체 코드 https://github.com/HomieKim/SNS_Project/tree/master/front PostImages.js import React, { useCallback, useState } from 'react'; import PropTypes from 'prop-types'; import styled, { createGlobalStyle } from 'styled-components'; import Slider from 'react-slick'; const ImgWrapper = styled.div` padding: 16px; text-align: center; & img { margin: 0 auto; max-height: 750px; } `; const Global = createGlobalStyle` .slick-slide { display: inline-block; width : 100%; } .ant-card-cover { transform: none !important; } ` const SlideWrapper = styled.div` max-height : 800px; overflow : hidden; `; const PostImages = ({images})=>{ //const [showImagesZoom, setShowImagesZoom] = useState(false); const onZoom = useCallback(()=> { //setShowImagesZoom(true); },[]); const settings = { dots: true, infinite : true, speed: 500, slideToShow : 1, slideToScroll : 1 } if(images.length === 1) { return ( <> <img style={{ maxHeight : 750}} src={images[0].src} alt={images[0].src} onClick={onZoom} /> </> ) } return ( <div> <Global /> <SlideWrapper> <Slider {...settings}> { images.map((item) => ( <ImgWrapper key={item.src} > <img src={item.src} alt={item.src} /> </ImgWrapper> )) } </Slider> </SlideWrapper> </div> ) } PostImages.propTypes = { images: PropTypes.arrayOf(PropTypes.shape({ src: PropTypes.string, })).isRequired, }; export default PostImages; 좋은 강의 감사합니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초 선생님 질문입니다
제로초 선생님 강좌 다 보고 따로 공부하고 있는 코린이입니다 궁금한게 폴더구조에서 예를들어 components 폴더 안에 Home 이라는 폴더가 있으면 Home 폴더안에 Home.tsx, index.ts 이렇게 따로 두는 이유가 궁금합니다 Home.tsx에 구체적으로 코드를 작성하고 index.ts에는 Home.tsx를 import만 해서 사용하는 코드들을 자주 보는데 이렇게 사용하는 이유를 알 수 있을까요? index.ts를 별도로 안만들고 Home.tsx만 만들고 다른곳에서 사용하면 안되는건가요? 감사합니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
프로필 페이지에서 새로고침 에러
다른 분들의 질문글에서 저와 같은 에러 내용을 봤지만 여전히 해결이 안되서 질문드립니다. 프로필 페이지인 상태에서 새로고침을 하면 로그인이 풀리고 에러가 발생합니다, 그래서 답변대로 프로필 페이지에도 LOAD_USER_REAUEST 액션을 넣어 로그인 정보를 불러왔는데 해결이 안되고 me?.Followings 도 적용해봤는데 에러가 사라지지 않네요 내 로그인 정보, 게시글 불러오기 실패, Followers 에러 // 프로필 페이지 profile.js useEffect(() => { dispatch({ type: LOAD_USER_REQUEST, // LOAD_USER_REQUEST 액션 추가 }) dispatch({ type: LOAD_FOLLOWERS_REQUEST, }) dispatch({ type: LOAD_FOLLOWINGS_REQUEST, }) }, []) // me?.Followings 수정 <AppLayout> <NicknameEditForm /> <FollowList header="팔로잉 리스트" data={me?.Followings} /> <FollowList header="팔로워 리스트" data={me?.Followers} /> </AppLayout>
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 질문사항입니다.
강의 잘보고 있습니다. 다름이아니라 지금 로그인접속정보 계속 유지하기 부분 보고있습니다 그런데 로그인 후 새로고침 후 page index.js 에서 useEffect 에 LOAD_MY_INFO_REQUEST -> 리덕스, saga 로넘어갈때 action.data : null 입니다. 그런데 브라우저 애플리케이션 단에서 쿠키는 확인 되었습니다. 쿠키가 있는 상태면 passport 로직에 의해서 두번쨰 로그인부터는 req.user에 첫 로그인시 select 했던 로그인정보가 새로고침후에 action .data에 담겨야하는거죠? 근데 안담기네용.... 어디를 봐야할까용... const passport = require('passport');const local = require('./local');const {User} = require('../models');module.exports = () => { passport.serializeUser((user, done) => { //done에 첫번째인자는 error 두번째 인자는 성공 //req.login 에 정보가 여기로들어감 done(null, user.id); //세션 저장 즉 서버에서 세션 connectSID랑 쿠키와 함께 저장 [{id: 1, cookie : 'clhxy'}] //그리고 쿠키에게 뿌려줌 }); //로그인을 성공하고나서 그 다음 요청부터 매번실행함 //이 부분이 라우터 실행되기 전에 매번 실행된다. 그렇다면 성능적으론 상관없을지 몰라도 // 유지보수 측면에서 이로직을 통한 분산이 가능하다. //라우터 접근 전에 deserializeUser 내부적으로 한 번더 실행함 저장되어있던 아이디를 토대로 select 해서 가지고온다. req.user 로 routes에서 접근이 가능하다 . passport.deserializeUser(async (id, done) => { try { const user = await User.findOne({ where : {id} }); //그래서 id 값을 where 절에 넣고 반환값 user를 done(null, user); //done(user) 넣어주고 이 값이 req.user에 반환된다 . }catch (e) { console.error(e); done(e); } }); local();}; const passport = require('passport');const { Strategy:LocalStrategy } = require('passport-local'); //비구조화 할당에서 : 를 하면 LocalStrategy로 변수명을 변경할 수 있다.const { User } = require('../models');const bcrypt = require('bcrypt');module.exports = () => { passport.use(new LocalStrategy({ usernameField: 'email', passwordField: 'password', }, async (email, password, done) => { //req.body 부분 done 부분 확인 필요 done은 callback부분 결과값 done을 내보낸다. routes.post(login) 쪽으로 넘어가는 값은 done() 이다 . try { // done : e 에러, info fail reason, user success o doen(에러, false-reason, user) const user = await User.findOne({ where: { email } }); if(!user) { return done(null, false, {reason: "존재하지 않는 이메일입니다.!"}); //이유 info } const result = await bcrypt.compare(password, user.password); //else if(result) { return done(null, user); } return done(null, false, {reason : "비밀번호가 일치하지 않습니다."}); //else }catch (e) { console.error(e); return done(e); //server가 error 인 경우 } }));}; 리덕스 상 diff LOAD_MY_INFO_REQUEST { type: 'LOAD_MY_INFO_REQUEST' } LOAD_MY_INFO_SUCCESS { type: 'LOAD_MY_SUCCESS', data: null }
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
회원가입시 오류가나고 MySQL테이블에서 확인이 안됩니다.
회원가입시 가입이 안되고 MySQL user테이블에도 확인이 안됩니다. 어디가 잘못된걸까요? 도와주세요 ~
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
aws 에서 front 빌드 시 에러가 뜨는데 해매고 있습니다..
Error: Parsing error: Must use import to load ES Module: /home/ubuntu/new-node-bird-std/front/node_modules/eslint-scope/lib/definition.js require() of ES modules is not supported. require() of /home/ubuntu/new-node-bird-std/front/node_modules/eslint-scope/lib/definition.js from /home/ubuntu/new-node-bird-std/front/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/ubuntu/new-node-bird-std/front/node_modules/eslint-scope/package.json. info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-nodebird-front@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 react-nodebird-front@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! /home/ubuntu/.npm/_logs/2022-03-04T00_05_27_105Z-debug.log AWS 에서 front 쪽 빌드 시 위의 에러가 발생하는데 로컬에선 빌드가 되서 .next gitignore 풀고 github에 올리려 하니 용량 문제가 있는지 그마저도 업로드가 안됩니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
풀스택 배포 방법에 관해서..
강의를 바탕으로 포트폴리오를 만들어서 이제 배포하려고 하는데요 aws를 안쓰고, 간단하게 netlify, github pages, vercel 등을 써서 배포하려고 하거든요.. 그런데 프로젝트에서 front와 back 폴더를 각각 나눠놔서 여기서 빌드 에러가 생기는 것 같습니다. front만 있으면 배포가 쉬운데.. back 폴더까지 있으니 어떻게 배포를 해야할까요.. 풀스택 배포는 검색을 해도 잘 나오질 않으니 잘 모르겠습니다.. 루트경로 아래에 하나만 생성하라는 거 같은데, 프론트 폴더 안에 내용을 루트로 빼서 빌드해야하는 건가요..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
실무에서 더미데이터
안녕하세요! 조금 외람된 질문이긴 한데요, 강의에서 초반에 데이터를 더미데이터로 처리한 후 테스트를 했다가 후반에 실제데이터로 바꾸는 작업을 하는데 이런 과정이 오래걸리지 않나요? 실무에서도 프로젝트 할 때 처음에 전부 더미데이터로 테스트 해본 후에야 실제데이터로 서버 연결해서 작업하시나요? 궁금해요!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 궁금한게 있습니다.
강의와 상관없는 내용인데 질문해도 괜찮을까요? 다름이아니라 제가 이 프로젝트를 github에 올리고 다른 컴퓨터에서 clone 해서 쓸려고 하는데 예를들어서 이런 npm 라이브러리들 "cors": "^2.8.5","dotenv": "^16.0.0","express": "^4.17.3", clone 시 이러한 package.json npm 인스톨한 파일들이 자동으로 불러와지지 않더라구요 관련해서 질문사항입니다. 1. 이런 버전들이 clone시 자동 빌드되면서 가져와지게 하는 설정법 같은게 있을까요? 2. 아니면 clone해서 가져온 후 컴퓨터 바뀔때마다 하나하나 npm 인스톨을 해줘야 할까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
getServerSide Props cookie
안녕하세요 강의 거의 마무리 되어가네요. dev에서는 잘되는데 aws에서 pages/* getServerSideProps 에서 쿠키 전달이 안되는 것같습니다. 로그인도 되고 포스트 작성되는데 새로고침하면 로그인이 플려버립니다. 서버에서는 유지되는데 client에서 ssr 할때 cookie전달이 안되는 것같습니다. 주소는 http://tweeter.ga 입니다. 무료도메인입니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
다름이 아니라 DB 설계 관련 질문이 있습니다.
안녕하세요 강의 잘보고 있습니다! DB 관련해서 제가 몇가지 궁금한게 있는데 1. 예를 들어 하나의 테이블에서 다 대 다일때 즉 user 와 user에 다대다 일때 중간테이블 follow를 만들어주지 않고 한 User 테이블에 컬럼을 늘리는건 별로 안좋은 방식인가요? 예를 들어서 follow 테이블을 만들지 않고 User 테이블안에 팔로우, 팔로잉 수 컬럼을 넣는 방식 2. 다 대 다 관계일시 중간테이블 관련 다 대 다 관계일시 데이터베이스 이론적으로는 중간테이블을 만드는걸로 저도 배우긴 했는데 근데 이게 프로그래밍 관점에서 테이블을 너무 많이 늘리고 join이 많아질시 성능이 안좋다고 배웠던 기억이 있어서요 그래서 이게 실무에서도 다대다일시 중간테이블로 쪼개고 join을 자주 발생시키는지 궁금해요 로그인 같은경우에도 팔로우,잉,쓴글갯수를 유지하기 위해 로그인을 할때마다 post 테이블 follow 테이블 과의 3개의 테이블을 조인시켜서 select 하는 경우인데 과연 이런식의 3중조인을 로그인할때마다 해줘야 하는건가에 대한 생각 꼭 조인을 이렇게 많이해야 저 데이터를 가지고 올 수있나에 대한 DB설계에 대한 생각이 공존합니다. 아니면 제가 너무 오버하는 것일지 문제가 되지 않는 것인지... 그래서 실제로도 실무에서도 이런식으로 중간테이블과 db설계관련 또한 그걸로 인한 많은 join 관련해서 궁금하네요 ++ 제가 이런 생각이 든 이유가 게시판을 만들때 게시물 상세 페이지에 파일갯수랑, 댓글 갯수를 게시물 리스트에 명시해주는 로직을 짜다가 join 몇번해서 select 해서 가져와보자 했는데.. 다른분께서 이유는 말안하셨지만 join 그렇게 하지말라고 하셨거든요 그래서 그래서 게시물 DB에 갯수에 대한 컬럼을 늘려서 게시물 상세페이지 작성시 댓글, 파일 insert 할때 게시물 db에 갯수counting 해서 insert 하고 조인 없이 list 뿌려지는 형태로 바꿨거든요 그게 생각이나서요(insert 시 다른 db에는 count+1 insert 한 동작에 각 테이블의 2번의 insert 작업) 3. db 생성시 post.js user.js -> 실 테이블 posts, users 뒤에 s가 붙는데 이건 왜 붙는건 가요? 제가 실무 경험이 없어서 꼭 알고 싶은 포인트입니다.. ** 질문이 많은데 읽어주셔서 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
redex 연결 후 초기 데이터를 가져오지 못합니다.
안녕하세요. 선생님, 강의 잘 듣고 있습니다. 리덕스가 AppLayout 에 연결은 된 것 같은데, 초기 값을 가져오지 못합니다. state 에 user 가 없다는 오류만 자꾸 나오는데, 어떤 것을 한번 봐야 할까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Response Cookies가 뜨지 않습니다.
app.js에 app.set('trust proxy', 1); 세션쪽에 proxy: true, cookie엔 secure: true 다 적고 /etc/nginx/nginx.conf에 proxy_set_header X-Forwarded-Proto $scheme; 추가했는데 새로고침하면 로그인이 풀립니다. 그래서 네트워크를 살펴봤더니 아래와 같이 응답을 하지 않습니다...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
핸들러 설정이 보이지 않습니다ㅠㅠ
lambda - 구성 - 일반 구성에서 다른 부분은 바꾸었으나 핸들러 입력하는 부분이 없습니다... 찾아봐도 안 보이는데 혹시 바뀌어서 설정하는 부분이 없어진걸까요...? 이것 때문인지 thumb폴더가 생성이 안되어서 난감하네요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
배포 시 서버 개수 질문합니다
강좌에서는 하나의 인스턴스에 하나의 서버를 배포하려 두개의 인스턴스를 사용하는데 하나의 인스턴스에 두개의 서버를 배포 시 백엔드 포트를 3000번 포트로 바꾸고 프론트에서 디폴트url을 localhost:3000 으로 변경하면 되는 건가요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
코드 스플릿 문의드립니다.
강사님 안녕하세요. redux 와 redux-saga 로 개발을 하게 되면 이쪽 코드량만 상당한 분량이 나오는 듯 한데요.시스템이 커지면 커질수록 redux 와 saga 소스들이 점점 늘어나서 번들링되는 파일 사이즈가 너무 커져서 초기 로딩 속도에 영향을 줄 수 있을 것 같습니다. redux 와 saga 소스들을 code split 처리해서 초기 사이즈를 좀 줄일 수 있는 방법이 궁금한데요.redux 공식홈페이지에 그런 내용이 일부 있기는 한데 초보에게는 좀 어려운 내용 같습니다. 꽤 중요한 부분이라고 생각이 되는데 redux 와 saga 를 code split 처리하는 방법을 혹시 강의에 좀 추가해 주실 수는 없으련지요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
delete 의 body 사용에 대해서 궁금합니다.
axios 요청 시에 , delete는 body를 기본적으로는 제공하지 않는다고 알고 있습니다. 그런데 두 번째 파라미터로 data: {} 를 넣어줘서 body를 쓸 수 있는것으로 알고 있는데, 혹시 이게 권장되지 않는 방법인가요? 혹시 그렇다면, 배열이나 예민한 정보를 delete로 보낼 시에는 어떤 방법이 권장되는지 알고 싶습니다. //예시 axios.delete('/product', { data: { body에 들어갈 객체} });
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
async, await 질문
제가 자바스크립트 쪽에서 promise 를 배운지 얼마 안돼 async, await 부분을 잘 모르는데요, findOne() 부분이 시퀄라이즈로 데이터를 가져오는 비동기적인 작업이라 넣어주신걸까요? 저기서 async, await 의 정확한 동작원리가 궁금한데 간략하게 설명해주실 수 있을까요..!