월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
클릭시 파란색 배경으로 focus
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 모바일에서 랜더링된 뷰를 클릭할 때 파란색으로 focus가 잡히는 부분을 없애고 싶은데 혹시 어떻게 해야 할까요?개발자 도구로 element를 선택했을때와 같은 모습입니다 ㅠㅠ
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
aws 빌드 메모리부족 질문입니다.
안녕하세요 빌드시 메모리 부족으로 계속 빌드가 멈추는데요 구글링해서 옵션도 다 붙여보고 해도 똑같네요,, 질문글들을 보니까 .next를 서버에 전송하여 실행하라는 답글을 봤습니다. 이부분이 잘 이해가 안가서요. 혹시 .next폴더는 용량이 크니까 커밋푸시로는 안올라가니까 lfs를 사용해서? 깃헙에 올려하는것 같던데 이런식으로 올리고 ubuntu에서 그냥 git clone하라는 말씀 맞나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
localhost를 실행하면 시작화면이 로그인 되어있는 상태로 시작합니다..
localhost를 실행하면 시작화면이 로그인 되어있는 상태로 시작합니다.. 로그아웃도 되지 않습니다 해결 방법을 알 수 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
인피니트 스크롤 질문 있습니다.
안녕하세요 인피니트 스크롤 적용 중 이상한 점이 하나 있어서 질문드립니다. f12누르고 개발자 모드 킨 상태로 redux 툴로 action을 체크하는 상태에서 스크롤을 맨 밑으로 내리면 제로초님처럼 LOAD_POSTS_REQUEST를 보내고 SUCCESS까지 동작하는데 문제는 스크롤이 계속 맨 밑에 머물러서 REQUEST SUCCESS를 계속 반복합니다. 즉 한번 맨 밑으로가면 스크롤이 다시 올라오지 않고 그 상태에서 REQUEST, SUCCESS를 5번 반복합니다. 그런데 개발자모드를 키지않고 테스트하면 제로초님처럼 정상작동합니다. 이거는 별 문제가 아닌건가요? (코드도 깃허브참고해서 똑같이 했습니다.)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
카카오톡 서버 크롤러의 크롤링 원리
안녕하세요 제로초님! 서버의 크롤러가 크롤링을 진행하는 과정이 주어진 url에 먼저 request를 보내서 html문서를 내려받고 그 다음에 meta 태그를 분석하는 것이 맞나요?? 아니면 다른 방법이 있는건지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
스크롤 위에 10개 post 생성되면 이거 참조하세요
이렇게 고치시면 아래에 나와용
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
불변성에 대해 질문 있습니다.
안녕하세요! 강의 수강중에 제가 제대로 이해하고 있는것인지 궁금해서 질문 드립니다! 불변성을 지키기 위해서 const mainPosts라는 변수를 새로 만든것인가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
getServerSideProps 를 이용하면 store 가 초기화돼요.
main posts 들이 보이는 index.js 에서 getServerSideProps 를 통해 초기 post 들을 불러오고 있는데, Link 태그를 이용해서 게시글 상세 페이지 ex) /post/39 와 같이 이동하게 만들었습니다. 그 이후 '뒤로 가기' 하면 index.js 를 불러오면서 새롭게 main posts 를 불러오는데 혹시 그전 값들로 유지하게 할 수 있나요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
front 배포 후 사이트 연결할 수 없음 문제 질문드립니다.
잘 따라와서 입력을 한거 같은데 사이트 연결 할 수 없음 문제가 나와서 질문드립니다. 해당 질문은 프론트 서버 배포하기 강좌를 보다가 나온 문제입니다. 제가 했던 절차는 이러합니다. 1. local 컴퓨터 front에서 npm i pm2 설치 2. local 컴퓨터 front에서 saga/index.js 쪽 backUrl을 전역적으로 사용하기 위해서 config 만들고 import 설정 3. local 컴퓨터 front에서 localhost3065로 돌아가는 back을 backUrl로 전부 설정 4. local 컴퓨터 front에서 package.json 설정("start": "cross-env NODE_ENV=production next start -p 80") 4. local 컴퓨터 front git romote 후 우분투 front에서 git pull 5. 우분투 front에서 npm build ("build": "cross-env NODE_ENV=production ANALYZE=true next build",) 6. 우분투 front에서 sudo npx pm2 start npm -- start && sudo npx pm2 monit로 실행 7. aws front ip 로 브라우저 접속 -> 사이트 연결할 수 없음 이렇게 진행하였는데... 왜 안되고 있는지 잘 모르겠습니다 ㅠㅠ 커뮤니티 게시판에서 보안그룹 관련해서 나온 글이 있길래 초기 ec2 인스턴스 생성시에 http, https 설정할때 제 ip로 설정 해놔서 Anywhere 설정으로 변경 후 다시 실행을 했거든요.. 그래도 무반응 입니다. 혼자 해결 해보려 찾아보는데 키워드 조차 나오지 않다 보니 찾기가 매우 힘드네요. 답변주시면 감사하겠습니다. 아래 스크린샷 첨부합니다. front/package.json aws 보안 그룹 - ssh는 제 ip로 되어 있고 보안 그룹 이름은 ec2 인스턴스와 일치합니다.. build log - front에서 about.js 제외하고 빌드했습니다. front 실행
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
css 서버사이드 랜더링 적용이 되지 않아 질문드립니다.
크롬에서 disable javasrcript 하고 나서 새로고침을 하여 ssr css 확인을 해보았더니 css가 적용이 되어 있지 않아서 질문드립니다. 원인을 좀 찾아 보려고 서버사이드 랜더링시 디버깅을 하여 각각 값이 잘 들어오나 _document.js 쪽 확인을 해보았는데 style쪽이 빈 배열로 나오는데 혹시 이게 원인일까요..? 문제 스크린샷 network 스크린샷 디버깅한 값 스크린샷 소스코드 _app.js (/prepare/front/pages/_app.js) import 'antd/dist/antd.css' import Prototype from 'prop-types' import Head from 'next/head' import wrapper from '../store/configureStore'; const App = ({ Component }) => { return ( <> <Head> <meta charSet='utf-8'></meta> <title>NodeBird</title> </Head> {/* <div>공통메뉴</div> */} <Component /> </> ); } export default wrapper.withRedux(App); App.Prototype = { Component: Prototype.elementType.isRequired, } _document.js (/prepare/front/pages/_document.js) import React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import { ServerStyleSheet } from 'styled-components'; export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ enhanceApp: App => props => sheet.collectStyles(<App {...props} />), }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <div> {initialProps.styles} {sheet.getStyleElement()} </div> ), }; } catch (error) { console.error(error); } finally { sheet.seal(); } } render() { return ( <Html> <Head /> <body> <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019"></script> <Main /> <NextScript /> </body> </Html> ); } } 바벨 설정 (/prepare/front/.babelrc) { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", { "fileName": true, "displayName": true, "pure": true, "ssr": true, "preprocess": false } ] ] }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
component
저기 위에 Component 가 빨간줄이여서 봤는데 ESLint: 'Component' is missing in props validation(react/prop-types) 이런 에러문구가있어서 그러는데 화면은 또 나와요 선생님님은 에러 문구가없었는데 어떻게된건지 모르겠어요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
아직도 Eslint 가 안돼요
저 동그란부분을 클릭하고 저렇게 팝업이 뜹니다 그리고 오케이 버튼을 눌러도 사라지지않은데 그이유를 모르겠어요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
혹시 버전중에 리엑트
리엑트 버전이 { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next" }, "author": "PK", "license": "ISC", "dependencies": { "@ant-design/icons": "^4.6.4", "antd": "^4.16.13", "next": "^9.5.5", "prop-types": "^15.7.2", "react": "^17.0.2", "react-dom": "^17.0.2", "styled-components": "^5.3.1" }, "devDependencies": { "eslint": "^7.32.0", "eslint-plugin-import": "^2.24.2", "eslint-plugin-react-hooks": "^4.2.0" }}괜찮은가요 ? 17이라고 되어있는데
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
mainPosts
제로초님 reducer 부분에서 변수이름으로 사용한 mainPosts 는 꼭 변수명이 mainPosts여야 하나요?? case ADD_COMMENT_SUCCESS: { ~나머지 코드들~ const mainPosts = [...state.mainPosts]; //이부분이요 mainPosts[postIndex] = posts; return { ...state, mainPosts, commentIsBeingAdded: false, commentIsAdded: true, }; } ㅇ
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
profile.js 관련 ssr 적용 질문 있습니다.
http://localhost:3060/profile에서 새로 고침시 나타나는 문제인데 원인을 몰라서 한참보다가 질문드립니다. ssr 적용전에는 dispatch를 하여 FollwList.js 쪽에 data render가 되어 컴포넌트가 제대로 그려지는데... ssr 적용 후 useEffect에서 dispatch를 사용하니 아래와 같이 문제가 계속 나와 질문드립니다. getSercerSideProps로 내용을 내려보았으나 위 404에러는 사라졌으나 서버에서 오류가 생겨 404와 '존재하지 않는 사용자입니다'로 나옵니다. 확인 내용이 좀 많을거 같아서 git 주소로 남깁니다. reducer쪽 LOAD_FOLLOWINGS_SUCCESS , LOAD_FOLLOWERS_SUCCESS 로 가지않는 이유 답변주시면 감사하겠습니다. https://github.com/oshosh/react-sns/tree/master/prepare
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
user에서 에러가 발생하는데 원인을 모르겠습니다...
위와 같은 에러가 발생하는데 이유를 잘 모르겠습니다.... 해결방법을 알려주시면 진심으로 감사드리겠습니다...ㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
vscode 에서 eslint
eslint 깔았는데 vscode에서는 어떻게 잘 작동되는지 확인을 할 수 없는건가요 ?? 여러가지 방법들이있는데 무엇을 해야 할지 모르겠어요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
처음에 VScode 나 webstom 둘다 무관하다고 하셨는데
처음에 VScode 나 webstom 둘다 무관하다고 하셨는데 webstom에서 프로젝트 생성하면 여러가지 옵션들이 나오는데 어떤걸 선택해서 프로젝트를 만드나요 ?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
해시태그 검색 모바일에서 문제 발생
제 사이트고 그렇고 제로초님 nodebird.com 사이트도 마찬가지인데, 모바일에서 우측 상단에 ... 버튼을 클릭한 뒤, 해시태그를 검색하려고 하면 검색창이 꺼져버리는 문제가 발생합니다. AppLayout ant design에서 문제가 발생하는 것 같은데, 이것의 해결 방법이 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
my sql 설치후 react-nodebird db가 바로 보여야하나요?
안녕하세요, 강좌 잘 듣고 있습니다. 백엔드 react mysql 연결 설정에서 헤매고 있어서 문의드려요 mysql설치후 schemas에서 sys밖에 안보이는데 강좌에서 보이는 react-nodebird db없이 보이는게정상인건가요?? 아니면 후에 강좌에서 설정 후 자동으로 생성되는건지 궁금합니다. 추가 질문으로 설치시 default port 가 3306이 사용중이여서 3305로 변경하여 설치했는데 config.json에 따로 port 번호 3305로 명시해서 다음 강좌 수강 진행하면 될지 확인 부탁드립니다. "development": { "username": "root", "password": , "database": "react-node-sns", "host": "127.0.0.1", "port": "3305", "dialect": "mysql"