월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리액트와 스프링으로 프로젝트를 구상할시
검색엔진 최적화를 어떤식으로 해야되나요? nextjs를 사용해도 되나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
react query ssr 질문있습니다!
ssr 적용시 제로초님은 대부분 getStaticProps를 사용하셨더라구요 저는 SSR을 위해 getServerSideProps를 사용해보았고 그 결과 밑에와 같은 오류가 발생하였습니다. 어떤 이유인지 알고 싶습니다..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
인피니트 스크롤링 lastId
안녕하세요 제로초님 강의 잘 보고 있습니다. 다름이 아니라 강의 소식에서 본 Intersection Observer 를 사용한 인피니트 스크롤링을 보고 궁금한 것이 있어 질문을 드립니다. lastId 없이 디스패치해도 게시물들이 나오던데 lastId를 같이 디스패치 하신 이유가 무엇인지 감이 안 잡혀 질문 드립니다! import React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import AppLayout from "../components/AppLayout"; import PostCard from "../components/PostCard"; import PostForm from "../components/PostForm"; import { LOAD_POSTS_REQUEST } from "../reducers/post"; // 어떤 Element가 화면(viewport)에 노출되었는지를 감지할 수 있는 API import { useInView } from 'react-intersection-observer'; const Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector((state) => state.post); const [ref, inView] = useInView(); // 처음 게시물들 불러올 때 useEffect(() => { dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); useEffect(() => { if (inView && hasMorePosts && !loadPostsLoading) { const lastId = mainPosts[mainPosts.length - 1]?.id; dispatch({ type: LOAD_POSTS_REQUEST, lastId, }); } }, [inView, hasMorePosts, loadPostsLoading, mainPosts]); /* 더 보여줄 게시물이 있고, 게시물을 보여주기 위한 로딩 중이 아닐 때 + PostCard들 아래에 위치한 div가 화면에 보일 때(마지막 게시글을 봤다는 얘기) => inView가 true가 되면서 두 번째 useEffect가 작동함. => 마지막 게시글에 가까워질 때쯤 불러오도록 수정함. */ return ( <AppLayout> {me && <PostForm />} {mainPosts.map((post, i) => { if (i === mainPosts.length - 3) { return ( <> <div ref={hasMorePosts && !loadPostsLoading ? ref : undefined} /> <PostCard key={post.id} post={post} /> </> ) } return <PostCard key={post.id} post={post} /> }) } </AppLayout> ) } export default Home;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
domain 질문, front 요청에서 error
1. 현재 domian을 구입하지 않으면 route 에서 연결된 프론트 or 백엔드 도메인은 못들어가나요? 탄력적 IP를 하고 IP 바뀌어서 front ,back -> 도메인이 아닌 바뀐 ip로 변경 git push git pull sudo npx pm2 reload all 똑같이 다시 시작 했는데 .next 오류인거 같은데 회원가입 및 로그인 버튼을 눌렀을 때 아무것도 실행이 되지 않습니다. 탄련적 IP 하기 전에는 회원가입이랑 로그인까지 됐는데 갑자기 왜 안되는걸까요? 현재 프론트에서 새로고침을 누르면 서버사이드렌더링이 실행되고 있습니다. 하지만 프론트에서 저 오류로 인해서 원활하게 진행되지 않고 있습니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
리덕스 설치강좌 듣고 있는데요, 제 vscode에서 설치가 제대로 안됩니다.(win10 64bit)
리덕스 설치강좌 듣고 있는데요, 제 vscode에서 설치가 제대로 안됩니다.(win10 64bit) npm i next-redux-wrapper@6 명령어를 넣었을때 -> npm i redux 명령어를 입력했을때 -> 제대로 설치가 안된거 같은데 어떻게 해야 하나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
sudo npx pm2 reload all && sudo npx pm2 monit 에러
back 에서 나오는 에러인데 http , https 다 넣었습니다 0|app | Warning: connect.session() MemoryStore is not 0|app | designed for a production environment, as it will leak 0|app | memory, and will not scale past a single process. 0|app | Error: listen EACCES: permission denied 0.0.0.0:80 0|app | at Server.setupListenHandle [as _listen2] (net.js:1314:21) 0|app | at listenInCluster (net.js:1379:12) 0|app | at Server.listen (net.js:1465:7) 0|app | at Function.listen (/home/ubuntu/react-nodebird-aws/back/node_modules/express/lib/application.js:618:24) 0|app | at Object.<anonymous> (/home/ubuntu/react-nodebird-aws/back/app.js:69:5) 0|app | at Module._compile (internal/modules/cjs/loader.js:1085:14) 0|app | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) 0|app | at Module.load (internal/modules/cjs/loader.js:950:32) 0|app | at Function.Module._load (internal/modules/cjs/loader.js:790:12) 0|app | at Object.<anonymous> (/home/ubuntu/react-nodebird-aws/back/node_modules/pm2/lib/ProcessContainerFork.js:33:23) { 0|app | code: 'EACCES', 0|app | errno: -13, 0|app | syscall: 'listen', 0|app | address: '0.0.0.0', 0|app | port: 80 0|app | }
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
npm pm2 start -- npm start 에러
npm i 설치 npm run build npm pm2 start -- npm start 하면 정상적으로 작동하지만 npm pm2 monit 하면 저 에러가 발생합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요, next 에선 React import 안해도된다 하셨는데
next 에선 React import 안해도된다 하셔서 코드를 잠시 주석처리 해보니 에러가 발생하는데 왜이럴까요? 그리고 전에 제가 해당 강의를 들었을 때 메모를 해놓은것이 있어 다시 보려는데 그 내용이 아무리 강의를 돌려도 안보이네요 다음과 같이 Menu Item 들에 key 를 작성한 이유와 useRouter 를 쓴 부분이 기억이 안나서요 (selectedKey? 의 의미)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
ssh 명령어 port 22: Connection timed out
안녕하세요. 제로초님! 좋은 강의 잘 수강하고 있습니다. ec2 생성하기 영상에서 배포에 필요한 첫 단계로 aws 인스턴스를 만들어 ssh 연결을 하는 과정에서 어려움이 발생했습니다. 스스로 최대한 해결하려고 시도해봤지만, 안타깝게도 그러지 못 하고 며칠간 삽질만 했습니다. 삽질한 내용을 이 곳에 담기 어려워보여개인 기술 블로그에 작성하였으니 해당 내용을 보시고 조언을 해주시면 감사하겠습니다. https://juicyjerry.tistory.com/283 좋은 강의를 만들어 주셔서 감사드리고 오늘도 좋은 하루 보내세요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
메뉴구성을 하는 방법차이
제로초님, Menu를 구성할때 각각의 Item으로 나누어서 작성하지 않고 아래와 같이 배열의 형태에서 map함수로 반복해서 구성하게 되면 Next에서 큰 차이점이 생기나요..? const pages = ['whattoeat', 'signin', 'signup']; {pages.map((page) => ( <MenuItem key={page} onClick={handleCloseNavMenu}> <Typography textAlign="center"> <Link href={`/${page}`}> <a>{page}</a> </Link> </Typography> </MenuItem> ))}
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
react query 질문있습니다!
이번에 redux를 걷어냈다고 하셨는데 그럼 로그인 유지나 데이터 공유등 문제는 react-query로 대체할 수 있는걸까요 ? ㄷㅔ이터를 공유해야하다는 상황이나 로그인유지 같은것들도 대신할 수 있는지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
자동으로 import 써지게 되는건 어떻게 하시는건가요?
16:54에 자동으로 import 써지게 되는건 어떻게 하시는건가요? vscode라 그런지 안나오네요ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
eslint 적용 후 에러 및 IntelliJ eslint 적용방법 질문
제로초님 안녕하세요? 이번 강의에 eslint 적용 후에 다른 분들처럼 피바다가 나서 질문을 드립니다. 지금까지 해본 것 1. 제로초님의 .eslintrc 파일 적용 2. prepare/front/package.json 파일 내 eslint 관련 내용 적용 3. IntelliJ 재시작 4. IntelliJ내 설정 적용하기 위의 사진처럼 적용을 하였습니다. 이렇게 에러가 나고 있습니다. 위의 사진처럼 파일하나당 적용을 할 수 있을 것 같은데 그것은 방법이 아닌 것 같습니다. 아무래도 .eslintrc가 IDE에서 적용이 안되는 것으로 보입니다.혹시나 첫번째 사진에 제가 설정을 잘못한 것인지 알고 싶습니다.'인텔리제이 eslint 프로젝트 설정'로 검색하여 나온 방법대로 하였는데 에러가 나서 질문드립니다.https://github.com/hyunjoogo/react-nodebird제 깃헙주소는 이것입니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
기존 10버전에서 14버전으로 설치해도 그대로인경우
npm i node@14 > node@14.18.3 preinstall /Users/user/node_modules/node > node installArchSpecificPackage + node-darwin-x64@14.18.3 added 1 package in 2.49s npm WARN saveError ENOENT: no such file or directory, open '/Users/user/package.json' npm WARN enoent ENOENT: no such file or directory, open '/Users/user/package.json' npm WARN user No description npm WARN user No repository field. npm WARN user No README data npm WARN user No license field. + node@14.18.3 removed 1 package and updated 1 package in 6.83s USER-no-MacBook-Pro-2:front user$ node -v v10.24.1 - - - 기존의 10버전이여서 14버전으로 설치했는데 버전확인했을 때 변경되지 않고 그대로 10버전으로 뜨는 경우는 어떻게 해야하나요? 노드를 삭제한 후에 다시 설치해야하나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
현영님 여기에 질문하는게 좀그렇긴하지만..
최근 노드버드강의 + js웹게임만들기 + react무료강좌듣고 프론트엔드 신입개발자로 취직을하였습니다. 최근에 타입스크립트로 프로젝트 적용을하고있고 인터페이스나 타입추론 유니온타입 선택적프로퍼티 ?? 이론만 알고있던상태에서 프로젝트를 진행하고있는데. redux에서 typeAction이랑 reducer action 정의해주는 부분이 어렵더라구요..그래서 타입스크립트 강의를 들으려는데.. 슬랙강의 타입스크립트라 그거바로봐도될런지.. 아니면 웹게임만들기 먼저 봐야하는지 궁금해서요.. 그리고 타입스크립트 기초가 웹게임이랑 그냥타입스크립트 두개있어서 저한텐 어떤게나을지 궁금해서... 수강전 질문 이런 커뮤니티가 없어서 여기에 올립니다 ..죄송합니다.. 새해복 많이받으세요!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
quill editor 사용 이미지 업로드 질문 있습니다.
/back/routes/post const router = require('express').Router(); const multer = require('multer'); const fs = require('fs'); const path = require('path'); try { fs.accessSync('uploads'); } catch (error) { console.log('uploads 폴더가 없으므로 생성합니다.'); fs.mkdirSync('uploads'); } const upload = multer({ storage: multer.diskStorage({ destination: function (req, file, done) { done(null, 'uploads/'); }, // 이미지.png filename: function (req, file, cb) { const ext = path.extname(file.originalname); // 확장자 추출(.png) const basename = path.basename(file.originalname, ext); // 이미지 done(null, basename + new Data().getTime() + ext); // 이미지20210124.png }, }), limits: { fileSize: 20 * 1024 * 1024 }, // 파일크기: 20MB }); // 지금은 하드디스크에 저장하지만 AWS 배포 시 storage 옵션만 S3 서비스로 갈아끼울 예정 // POST /post/images router.post('/images', isLoggedIn, upload.array('image'), (req, res, next) => { console.log(req.files); // 업로드가 어떻게 됬는지 정보들이 담겨있음 res.json(req.files.map((v) => v.filename)); // 어디로 업로드 됬는지에 대한 파일명들을 프론트로 전송 }); // 먼저 파일명만 return 해준다. -> v.filename, 추후 배포 시 이미지는 지우지 않는다.(자산이다) 백엔드에서 multer를 이용해 이미지 업로드 시 upload라는 파일을 생성하고, multer를 통해 저장위치와 파일도 추출했습니다. 이후 POST /post/images 라우터에서 프론트의 key 값이 일치해야 파일을 가져오는데 1. 현재 quill editor를 사용, image file을 올리면 사진이 첨부되지 않고 요청에 대한 result를 받아오지 못합니다. (saga) 그런데 SUCCESS 까지는 잘 넘어갑니다. // saga post function uploadImagesAPI(data) { return axios.post(`/post/images`, data); // data: post.id } function* uploadImages(action) { try { const result = yield call(uploadImagesAPI, action.data); console.log('result', result); // yield delay(1000); yield put({ type: UPLOAD_IMAGES_SUCCESS, data: result.data, }); } catch (err) { yield put({ type: UPLOAD_IMAGES_FAILURE, error: err.response.data, }); } } 2. quill editor 사용법과 많은 코드들을 참고하여 작성한 로직입니다. //* quill text editor const QuillNoSSRWrapper = dynamic(import('react-quill'), { ssr: false, loading: () => <p>Loading ...</p>, }); const formats = [ 'header', 'font', 'size', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'list', 'bullet', 'indent', 'link', 'image', 'video', ]; //* AddPost const AddPost = () => { const dispatch = useDispatch(); const { me, addPostError, imagePaths } = useSelector((state) => state.user); console.log('imagePaths', imagePaths); const [title, onChangeTitle] = useInput(''); const [category, setCategory] = useState(); const [content, setContent] = useState(''); const quillRef = useRef(); //* quill text editor const imageHandler = (e) => { console.log('에디터의 이미지 버튼을 클릭하면 이 핸들러가 시작됩니다.'); // true const input = document.createElement('input'); // 1. 이미지를 저장할 input type=file DOM을 만든다. // 속성 써주기 input.setAttribute('type', 'file'); input.setAttribute('accept', 'image/*'); input.click(); // 에디터 이미지버튼을 클릭하면 이 input이 클릭된다. input이 클릭되면 파일 선택창이 나타난다. input.addEventListener('change', async () => { console.log('onChange'); const file = input.files[0]; const imageFormData = new FormData(); // multer에 맞는 형식으로 데이터 만들어준다. [].forEach.call(file, (f) => { imageFormData.append('image', f); // formData는 키-밸류 구조 }); dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData, }); }); }; //* quill text editor // useMemo를 사용한 이유는 modules가 렌더링마다 변하면 에디터에서 입력이 끊기는 버그가 발생 const modules = useMemo( () => ({ toolbar: { container: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline', 'strike', 'blockquote'], [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }], ['link', 'image'], ['clean'], ], handlers: { image: imageHandler }, }, }), [], ); const onSubmit = useCallback( (e) => { e.preventDefault(); if (!title) { return alert('제목을 입력하세요'); } else if (!category) { return alert('카테고리를 설정하세요'); } else if (!content) { return alert('게시글을 작성하세요'); } const formData = new FormData(); imagePaths.forEach((p) => { formData.append('image', p); }); formData.append({ title: title, category: category, content: content }); // dispatch loadPostRequest dispatch({ type: ADD_POST_REQUEST, data: formData, }); // error 없으면 community 목록으로 이동 if (!addPostError) { Router.push('/community'); } }, [title, category, content], ); <QuillNoSSRWrapper ref={quillRef} modules={modules} formats={formats} theme="snow" placeholder={`${me?.nickname}님의 글을 입력해주세요`} value={content} onChange={setContent} /> 참고: https://github.com/ko7452/e-Library/tree/master/prepare 혹시 제가 quill editor를 잘못 사용하거나 이해를 못하는 듯 한데.. 조언 주실 수 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
응답에 비밀번호가 담겨있으면
그전에 요청 날릴때 비번을 해시화 하지 않는이유가 https 로 날릴경우 클라이언트에서 보낸 요청을 암호화 해서 서베에서 디비에 저장할때만 해시화 했던걸로 기억하는데 https 를 적용하면 응답되는 데이터도 암호화 되는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
nginx proxy pass 질문드립니다.
proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header X-Real-IP $remote_addr; 다음과 같이 nginx에 설정해놓고 실행해보면, 크롬에서는 세션쿠키가 잘 저장이 되는데, 사파리에서는 세션쿠키가 저장이 되지 않습니다. 왜그럴까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
더미데이터와 포스트폼 만들기 map관련 질문
mainPosts.map is not a function이라고 에러가 뜹니다. mainPosts가 배열이 아닐때 이런 에러가 뜬다고 하여 코드를 확인해 보았으나 post.js의 mainPosts는 배열로 되어있었습니다. 이것 외에는 문제해결 방법을 찾을 수가 없어서 이렇게 질문드립니다. 오류가 난 해당 코드는 아래와 같습니다. import { useSelector } from "react-redux"; import AppLayout from "../components/AppLayout"; import PostForm from "../components/PostForm"; import PostCard from "../components/PostCard"; const Home = () =>{ const { isLoggedIn } = useSelector((state) => state.user); const { mainPosts } = useSelector((state) => state.post); return ( <AppLayout> {isLoggedIn && <PostForm/>} {mainPosts.map((post) => <PostCard key={post.id} post={post} />)} 윗 부분에서 에러발생했습니다. </AppLayout> ) } export default Home;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
antd 렌더링 성능
제로초님 antd, Material Design 같은 디자인 라이브러리를 많이 쓰다보면 나중에 사용자가 많아 지고 동시 접속자가 증가하면 페이지 렌더링 성능에 안 좋아 지나요? 직접 스타일컴포넌트로 css 퍼블리싱한거랑 디자인 라이브러리를 설치 해 쓴 거랑 렌더링 성능에 크게 차이는 없는거에요???