월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인을 연결하고 프론트 도메인으로 접속 로딩시간이 엄청 오래걸립니다.
도메인을 연결하고 프론트 도메인으로 접속 로딩시간이 엄청 오래걸립니다.이런경우는 도대체 뭐때문에 그럴까요? 용량이 커서 그럴까요?백 서버 도메인은 접속이 잘됩니다..vscode에서도 front터미널만 자꾸 렉걸리는 현상이 생겨요 ㅠㅠ
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
nginx+https 적용후 www.zoommeetinggo.p-e.kr 입력시 서비스 화면이 아닌 Welcome to nginx 화면 이동 관련하여 질문드립니다.
nginx+https 적용후www.zoommeetinggo.p-e.kr 입력시 서비스 화면이 아닌 Welcome to nginx 화면으로 이동하게 되었습니다. (https 가 적용된 https://www.zoommeetinggo.p-e.kr 으로 이동)- sudo vim /etc/nginx/nginx.conf 코드 수정# 443 포트로 접근시 ssl을 적용한 뒤 3000포트로 요청을 전달해주도록 하는 설정server {server_name 13.125.232.127 www.zoommeetinggo.p-e.kr; listen 80; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000; proxy_redirect off; } listen 443 ssl; # managed by Certbot ssl_certificate /etc/letsencrypt/live/www.zoommeetinggo.p-e.kr/fullchain.pem; # managed by Certbot ssl_certificate_key /etc/letsencrypt/live/www.zoommeetinggo.p-e.kr/privkey.pem; # managed by Certbot include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot } # 80 포트로 접근시 443 포트로 리다이렉트 시켜주는 설정 server { if ($host = www.zoommeetinggo.p-e.kr) { return 301 https://$host$request_uri; } # managed by Certbot server_name www.zoommeetinggo.p-e.kr; listen 80; return 404; # managed by Certbot }///////////////////////////////////////////////////////////////////////- sudo vim cd /etc/nginx/sites-available/default 코드 수정server { listen 80; listen [::]:80; root /var/www/html index index.html index.htm index.nginx-debian.html; server_name www.zoommeetinggo.p-e.kr; location / { proxy_pass http://localhost:3000; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; }}코드 수정후http://13.125.232.127 연결시 http://13.125.232.127:3000 리다이렉트 하여 서비스 화면을 보여줍니다. (http)http://www.zoommeetinggo.p-e.kr:3000 연결시 서비스 화면 보여줍니다, (http)https://www.zoommeetinggo.p-e.kr 연결시 nginx 화면으로 이동됩니다.무엇을 놓치고 있는지 잘 모르겠어서 질문드립니다. (https://www.zoommeetinggo.p-e.kr/ 연결시 https://www.zoommeetinggo.p-e.kr:3000 포트로 연결 되게 하고 싶습니다.)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
reducer설정 중 user 초기값이 undefined로 나오는 에러
안녕하십니까 형님진행하다 보니 궁금한게 생겨서 여쭤보려고 합니다. reducer설정 중 초기값이 undefined로 들어오는 에러가 놔왔었는데욥error - Error: The slice reducer for key "user" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. 에러 났던 부분운 default: state 이 부분이고 코드 보고 아래처럼 수정하니 잘 동작했습니다. export const initialState = { isLoggedIn: false, user: null, signUpData: {}, loginData: {}, } const reducer = (state=initialState, action) => { switch(action.type) { default: { return { ...state } } } }default: state vs default: { return {...state}}문법적으로 똑같은 내용이 아닌지...어떤 차이가 있는지를 모르겠어서 질문드립니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
첫 로그인 후 req.user.id 사용이 어텋게 가능한지 궁금합니다.
..// user.js router.post("/login", isNotLoggedIn, (req, res, next) => { passport.authenticate("local", (err, user, info) => { // ... return req.login(user, async (loginErr) => { if (loginErr) { console.error(loginErr); return next(loginErr); } const fullUserWithoutPassword = await User.findOne({ where: { id: req.user.id }, // ... }); return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); }); // index.jsconst passport = require("passport"); const local = require("./local"); const { User } = require("../models"); module.exports = () => { passport.serializeUser((user, done) => { done(null, user.id); }); passport.deserializeUser(async (id, done) => { console.log(`deserializeUser`) try { const user = await User.findOne({ where: { id } }); done(null, user); // req.user안에 넣어줌 } catch (error) { console.error(error); done(error); } }); local(); };첫 로그인 할 때는serializeUser만 실행되고,그 이후 요청 부터 deserialzeUser가 실행되어req.user에 db 테이블에 user객체가 저장되는 걸로 이해했습니다.첫 로그인 할 때는 deserializeUser가 실행이 안되어서 req.user가 저장이 안된 상태일텐데 어텋게req.user.id로 fullUserWithoutPassword 에 값을 할당할 수 있는지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
[도메인 연결하기] 로그인 완료 후에 getServerSideProps 실행되지만,회원정보가 null 이 표시 되는 이유를 몰라서 질문드립니다.
React로 Nodebird sns를 시청하고 나서 개인 프로젝트를 만들고 나서 배포하는 과정에서 막히는 부분이 있어서 질문드립니다. 기존에 localhost:3060 에서 로그인 완료후 메인화면으로 이동시 메인화면 서버사이드 렌더링이 실행됩니다.export const getServerSideProps = wrapper.getServerSideProps(async (context) => { const cookie = context.req ? context.req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; } context.store.dispatch({ type: LOAD_MY_INFO_REQUEST, }) context.store.dispatch(END); await context.store.sagaTask.toPromise(); })그래서,const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); me에 데이터가 들어있습니다. [도메인 연결하기] 영상 시청후Route 53, 가비아 주소, 탄력적 ip 주소를 사용하여 백엔드/ 프론트 서버를 실행하였습니다. 회원가입 후 로그인하고 나서 메인 화면으로 이동되면 쿠키가 저장되는 것을 확인했습니다 하지만로그인 후 메인 화면으로 이동하면, 메인page에 서버사이드 렌더링 코드(getServerSideProps)가 실행하고, export const getServerSideProps = wrapper.getServerSideProps( async (context) => { const cookie = context.req ? context.req.headers.cookie : ""; axios.defaults.headers.Cookie = ""; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; } context.store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); context.store.dispatch(END); await context.store.sagaTask.toPromise(); } ); const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); 이때 로그인한 사용자의 데이터 정보가 null로 표시됩니다.[back logs]왜 me가 null 인지 ? 무엇이 문제인지 모르겠어서 질문드립니다. 진행 순서[로그인 화면]: 아이디와 비밀번호 를 입력하고 확인 버튼을 누른다. 메인화면에서 서버사이드 렌더링 코드부분 실행하여 회원정보를 불러온다. (LOAD_MY_INFO_REQUEST) export const getServerSideProps = wrapper.getServerSideProps(async (context) => { const cookie = context.req ? context.req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; } context.store.dispatch({ type: LOAD_MY_INFO_REQUEST, }) context.store.dispatch(END); await context.store.sagaTask.toPromise(); }) export default Blog;const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); 3. [메인화면] 회원정보를 불러와 회원정보가 null 이여서 로그아웃 버튼으로 변경되지 않습니다. (me 정보가 null 여서 버튼이 변경되지 않습니다.) 쿠기는 유지되어서 로그인 화면으로 가서 로그인 할시 "로그인하지 않은 사용자만 접근 가능합니다" 안내창이 나옵니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
db 시퀄라이즈 관계 설정 및 백엔드 요청 질문입니다!
안녕하세요 제로초님, 강의 잘듣고잇습니다!!! db시퀄라이즈 관계 설정? 질문좀 드리려고요. 강의듣고 블로그를 만들어보려고 백/프론트 구상하고 있는데요, db table설정?을 어떻게 해야할지 헷갈려서요. 메인 페이지는 전체 post를 카테고리(메뉴)별로 나눠서 보여줍니다.메뉴[ study / TIL / portfolio ]를 클릭하면 해당 categories로 저장한 게시글을 보여줍니다 (노란화살표)포스트 작성할 때는 하나의 categories를 선택합니다. 각 게시글은 하나의 카테고리만 가집니다! 헷갈리는 부분은메뉴탭을 눌러서 study / TIL 로 이동했을 때, 전체 post를 가져오는 게 아니라 해당 categories의 post만 가져오고 싶은데, db를 활용해야 하는건지, 백엔드에서 필터링 과정을 해야 하는건지, 헷갈립니다이때 categories를 관계형 테이블?로 만들어서 해당 카테고리로 post를 가져올 수 있나요????백엔드가 전체 db에서 post를 findAll로 가져와, 카테고리로 필터링해서 프론트로 넘겨줘야 하나요?서버에서 전체 post를 받아서 프론트에서 필터링해서 각 컴포넌트에서 사용해야 하나요?? 흠. 뭔가 여러 방법이 떠오르긴 하는데 아직 시도해보지는 않았고 ㅎㅎㅎ 효율적인 방법이 뭔지 알고싶어요!! 제로초님이라면 어떤 방법을 사용하시나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인 연결 후 게시글 작성..
안녕하세요 도메인 연결 후 로그인과 로그아웃이 잘 되고, 새로고침 시에도 유지가 되는데요~게시글이 작성은 안됩니다 ㅠㅠ 회원가입은 되구요!이 다음 강의 S3를 연결하면 게시글이 작성이 되는게 맞을까요? 아니면 현재 오류가 있는건가여..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로컬 front에서 직접 build하여 메모리 해결 하는 방법.
안녕하세요.. 우분투에서 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
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
state 구조 잘짜는 법
조금 포괄적인 질문인데 어텋게 하면 state 구조를 잘 짤수 있을까요? 라이브러리 문법이나 그런 건 쓰다보면 익숙해지는 부분이 있어서 크게 어렵게 느껴지지는 않는데이 강의에서 reducer을 user reducer랑 post reducer로 나누는 부분처럼 state 구조 짜는 것은 스스로 생각하기 쉽지 않은 것 같아요. 예전에 자바 살짝 공부 했을 때 배웠던 객체지향적인 부분도 있는 것 같고 좀 혼란스럽네요
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
Error: Unknown column Hashtag.name in where clause
프론트에는 해쉬태그가 표현되나 백에서는 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을 진행하였으나 계속 같은 오류가 발생되고 있습니다 네트워크 오류 메시지백 오류 메시지워크벤츠 해쉬태그 테이블
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
DB에서 Comment 테이블이 안불러와지는 것 같습니다.
// 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 테이블에 들어있는 값이 들어있을 것으로 예상이 되는데 빈배열인 상황입니다. 혹시 다른 살펴볼만한 곳이 있는지 알려주시면 감사하겠습니다. 감사합니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
ubuntu안에 있는 mysql db데이터
안녕하세요 제로초님, 로컬상에서 mysql workbench 처럼ec2인스턴스 ubuntu내에 있는 mysql db 데이터들을 시각화해서 관리할 수 있는 툴 같은 건 혹시 없을까요?데이터들을 수정하고 싶을때 query문으로 직접 관리하는 것이 일반적인지 문의드립니다!
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
git push -> git pull 후에 build 문의
안녕하세요~ backUrl을 수정하여 소스코드가 변동되었으니 github에 commit push를 한 뒤, 우분투 서버에 접속하여 front에서 다시 git pull을 할 경우, 우분투 서버 front에서 build를 또 진행 해야하나요?그리고, 이전에 강의에서 vim으로 .env를 만든것들도 다시 만들어야할까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
프론트 ip로 들어갈때 연결이 안됩니다....
지금 빌드까지 마친 상황이고 sudo npx pm2 start npm -- start 이후 sudo npx pm2 monit을 하엿는데 이러한 에러가 나옵니다.https://github.com/jinhwansong/blog 다른 분들의 이야기를 보면 비슷한 에러가 나는거 같기는 한데 답을 모르겟어요 ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초님 프론트서버를 배포하려는데 문제가....
지금 계속 프론트서버에서 npm run build를 하려는데 왠지는 모르겟는데 빌드가 되다가 멈추는 현상이 생깁니다. 여기서 멈추고 30분째 가만히 있는데 이유가 따로 있을까요? 우분투 서버는 Ubuntu Server 22.04 LTS (HVM), SSD Volume Type 이거를 사용했고 인스턴스 유형은 t2.micro입니다..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
https 적용 후 다른 포트 사용이 가능한가요?
안녕하세요.강의보고 따라하니 https 적용이 잘 됐습니다. 저는 https를 적용하기 전에 3050번 포트에 프론트,3060번 포트에 백,3000번 포트에 관리자 페이지를 각각 배포해놓았습니다. ec2의 한 인스턴스에 이 3개를 배포하는 방법은 있을까요?예를 들어 도메인이 domain.com 일때,프론트는 domain.com에 배포하고관리자는 domain.com:3000에 배포하고백은 domain.com:3060에 배포하는 방법이 있을까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
해시태그 검색관련 질문있습니다.
자주 질문을 드려 죄송합니다. ㅠㅠ 모르는게 많아서 ㅠㅠ그 해시태그 부분을 작업 하고 있는데 제가 해시태그를 클릭하게 되면 예를 들러 123123을 클릭을 한다 라고 하면 기존 아래에서 검색이 될시 이런식으로 해시태그가 123123만 나오고 나머지 것들은 안나오는 현상이 나오고 있습니다. 코드 같은 경우는 알려주신데로 router.get("/:hashtag", async (req, res, next) => { try { const users = req.user ? req.user.id : null; const offset = (parseInt(req.query.page) - 1) * 10 || 0 const { count, rows: post } = await Post.findAndCountAll({ offset: offset, limit: 10, // DESC 최신순 ASC 오래된순 order: [ ["createdAt", "DESC"] ], include: [ { model: Hashtag, where: { hashtag: req.params.hashtag }, attributes: ["hashtag"], through: { attributes: [] }, }, { model: Image, attributes: ["src"], },{ model: User, attributes: ["nickName"], }], attributes: [ "id", "title", "createdAt", "view", "content", // 좋아요 수 [Sequelize.literal("(SELECT COUNT(*) FROM `Like` WHERE `Like`.`postId` = `Post`.`id`)"), "count"], // 좋아요 여부 [Sequelize.literal("IF((SELECT `postId` FROM `Like` WHERE `Like`.`postId` = `Post`.`id` AND `Like`.`userId` = " + users + "), 1, 0)"), "like"], ], }) const posts = post.map((post) => { const format = post.toJSON() format.hashtag = format.Hashtags.map((tag)=>tag.hashtag) format.src = format.Images.map((img) => img.src).join("") format.nickname = format.User.nickName format.content = format.content.replace(/<[^>]+>|<img.*?>/g, ""); delete format.Images; delete format.User; delete format.Hashtags; return format; }) res.status(201).json({ count, posts }) } catch (error) { console.error(error) next(error) } })이렇게 작성을 하였는데 찾아 보니 where: { hashtag: req.params.hashtag },이렇게 작성을 하게 되면 해당 해시태그에 해당하는 게시물이 불러와 지기는 하는데 검색된 해시태그만 뽑아서 나타나지게 되니 where: { hashtag: { [Op.contains]: [`${req.params.hashtag}`] } },이런식으로 작성을 하면 된다고 해서 써봣는데 "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ''asd' LEFT OUTER JOIN Images AS Images ON Post.`id` = Images.`PostId` LE' at line 1", sql: "SELECT count(`Post`.`id`) AS count FROM Posts AS Post INNER JOIN ( PostHashtag AS Hashtags->PostHashtag INNER JOIN Hashtags AS Hashtags ON Hashtags.`id` = Hashtags->PostHashtag.`HashtagId`) ON Post.`id` = Hashtags->PostHashtag.`PostId` AND Hashtags.`hashtag` <@ 'asd' LEFT OUTER JOIN Images AS Images ON Post.`id` = Images.`PostId` LEFT OUTER JOIN Users AS User ON Post.`UserId` = User.`id`;",이런 에러가 나더라구요... 왜 images에 관련된 문구가 나오는지는 모르겟지만.... 혹시 mysql에서 contains메소드가 사라진건지 아닌지 혹시 고칠수 잇는건지 궁금합니다.제 sequelize 버전은 6.35.2 입니다. ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
조회수 증가 관련 질문 있습니다.
제가 블로그를 만들어 보고 잇는데 해당 게시물을 보면 조회수가 증가하는데 같은 ip일경우에는 30분을 기준으로 조회수가 증가하게 작업을 하려고 합니다.이때 제가 게시물 조회시 ip와 해당 게시물의 id를 저장하는 테이블을 만들어서 작업을 해보려는데 이때 ip만 db상에서 암호화 한다면 보안상으로 안전할까요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
해시태그 가공해보고 싶습니다 ㅠ
해시태그를 가져오려 include: [{ model: Hashtag, attributes: ["hashtag"], through: { attributes: [] } }],이런식으로 코드를 짯는데 프론트로 데이터를 보내는게Hashtags: [1:{hashtag: "ㅁㄴㄴ"}2: {hashtag: "ㅇㅇㅇ"}3: {hashtag: "ㅂㅂㅂ"}4: {hashtag: "ㅁㅁㅋㅋ"}]이런식으로 데이터가 가더라구요 여기서 hashtag 라는 이름 없이Hashtags: [ 1 : "ㅁㄴㄴ"2:"ㅇㅇㅇ"3:"ㅂㅂㅂ"]이런식으로 보내고 싶은데 방법 없을까요...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 업로드에 관해 질문이 있습니다.
제가 지금 블로그에서 에디터로 이미지를 합해서 백에다가 데이터를 보내고 잇는데 제로초님이 말씀하신데로 해봣는데 이미지의 소스는 imges라는 테이블에 정상적으로 들어가는데문제는 post에<p>이미지 </p><p><img src=">"http://localhost:3065/KakaoTalk_20240122_212009014_01_1707401883946.jpg"></p>이런식으로 이미지가 들어가게 되는데 에디터라서 이렇게 들어가게 되는게 맞는지 아닌지 궁금합니다...용량이 걱정이 되서요 ㅠㅠ이미지로 보여드리면 이런데 원래 에디터안에 들어가는 이미지 같은경우는 텍스트랑 같이 db에 저장시키는게 맞는지 궁금합니다.