29,700원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨리액트로 나만의 블로그 만들기(MERN Stack)
선생님 왜 저는 백날해도 collapse 내용이 link아래로 갈까요?
따로 리버스 값을 줘야하는 건가요? 똑같이 했는데 결과가 달라서 무슨 문제인지 모르겠습니다 ㅠ d-flex 가 안먹히는거같습니다..
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
postDetail scss 문제
안녕하세요. 지금 게시글 상세보기 강의 듣고 있는데 강사님과 똑같이 코드를 쳤는데 레이아웃의 버튼 배치나 사이즈가 똑같이 안됩니다. node-scss node-loadr 도 다 설치되었는데 무엇이 문제일까요.. haeder.js 부분도 이상하게 보입니다. 상세보기 화면 client/package.json { "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@babel/core": "7.12.3", "@babel/plugin-transform-react-jsx": "^7.14.9", "@babel/plugin-transform-react-jsx-self": "^7.14.9", "@ckeditor/ckeditor5-adapter-ckfinder": "^31.0.0", "@ckeditor/ckeditor5-alignment": "^31.0.0", "@ckeditor/ckeditor5-autoformat": "^31.0.0", "@ckeditor/ckeditor5-basic-styles": "^31.0.0", "@ckeditor/ckeditor5-block-quote": "^31.0.0", "@ckeditor/ckeditor5-build-balloon": "^31.0.0", "@ckeditor/ckeditor5-build-classic": "^31.0.0", "@ckeditor/ckeditor5-build-inline": "^31.0.0", "@ckeditor/ckeditor5-dev-utils": "^25.4.5", "@ckeditor/ckeditor5-dev-webpack-plugin": "^25.4.5", "@ckeditor/ckeditor5-easy-image": "^31.0.0", "@ckeditor/ckeditor5-editor-balloon": "^31.0.0", "@ckeditor/ckeditor5-editor-classic": "^31.0.0", "@ckeditor/ckeditor5-essentials": "^31.0.0", "@ckeditor/ckeditor5-font": "^31.0.0", "@ckeditor/ckeditor5-heading": "^31.0.0", "@ckeditor/ckeditor5-image": "^31.0.0", "@ckeditor/ckeditor5-indent": "^31.0.0", "@ckeditor/ckeditor5-link": "^31.0.0", "@ckeditor/ckeditor5-list": "^31.0.0", "@ckeditor/ckeditor5-media-embed": "^31.0.0", "@ckeditor/ckeditor5-paragraph": "^31.0.0", "@ckeditor/ckeditor5-paste-from-office": "^31.0.0", "@ckeditor/ckeditor5-react": "^3.0.3", "@ckeditor/ckeditor5-table": "^31.0.0", "@ckeditor/ckeditor5-theme-lark": "^31.0.0", "@ckeditor/ckeditor5-typing": "^31.0.0", "@ckeditor/ckeditor5-upload": "^31.0.0", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.16", "@pmmmwh/react-refresh-webpack-plugin": "0.4.3", "@svgr/webpack": "5.5.0", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@typescript-eslint/eslint-plugin": "^4.5.0", "@typescript-eslint/parser": "^4.5.0", "axios": "^0.23.0", "babel-eslint": "^10.1.0", "babel-jest": "^26.6.0", "babel-loader": "8.1.0", "babel-plugin-named-asset-import": "^0.3.7", "babel-preset-react-app": "^10.0.0", "bfj": "^7.0.2", "bootstrap": "^5.1.3", "camelcase": "^6.1.0", "case-sensitive-paths-webpack-plugin": "2.3.0", "connected-react-router": "^6.9.1", "css-loader": "4.3.0", "dotenv": "8.2.0", "dotenv-expand": "5.1.0", "eslint": "^7.11.0", "eslint-config-react-app": "^6.0.0", "eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jest": "^24.1.0", "eslint-plugin-jsx-a11y": "^6.3.1", "eslint-plugin-react": "^7.21.5", "eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-testing-library": "^3.9.2", "eslint-webpack-plugin": "^2.5.2", "file-loader": "6.1.1", "fs-extra": "^9.0.1", "history": "^4.7.2", "html-webpack-plugin": "4.5.0", "identity-obj-proxy": "3.0.0", "jest": "26.6.0", "jest-circus": "26.6.0", "jest-resolve": "26.6.0", "jest-watch-typeahead": "0.6.1", "mini-css-extract-plugin": "0.11.3", "node-sass": "^4.14.1", "optimize-css-assets-webpack-plugin": "5.0.4", "pnp-webpack-plugin": "1.6.4", "postcss-flexbugs-fixes": "4.2.1", "postcss-loader": "3.0.0", "postcss-normalize": "8.0.1", "postcss-preset-env": "6.7.0", "postcss-safe-parser": "5.0.2", "prompts": "2.4.0", "raw-loader": "^3.1.0", "react": "^17.0.2", "react-app-polyfill": "^2.0.0", "react-bootstrap": "^2.0.1", "react-dev-utils": "^11.0.3", "react-dom": "^17.0.2", "react-helmet": "^6.1.0", "react-redux": "^7.2.5", "react-refresh": "^0.8.3", "react-router-dom": "^5.3.0", "reactstrap": "^8.10.0", "redux": "^4.1.1", "redux-saga": "^1.1.3", "resolve": "1.18.1", "resolve-url-loader": "^3.1.2", "sass-loader": "^10.0.5", "semver": "7.3.2", "style-loader": "1.3.0", "terser-webpack-plugin": "4.2.3", "ts-pnp": "1.2.0", "url-loader": "4.1.1", "web-vitals": "^1.0.1", "webpack": "4.44.2", "webpack-dev-server": "3.11.1", "webpack-manifest-plugin": "2.2.0", "workbox-webpack-plugin": "5.1.4" }, "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "proxy": "http://localhost:700", "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "jest": { "roots": [ "<rootDir>/src" ], "collectCoverageFrom": [ "src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts" ], "setupFiles": [ "react-app-polyfill/jsdom" ], "setupFilesAfterEnv": [], "testMatch": [ "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}", "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}" ], "testEnvironment": "jsdom", "testRunner": "C:\\Users\\skylm\\vscode\\blog\\client\\node_modules\\jest-circus\\runner.js", "transform": { "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js", "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js", "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js" }, "transformIgnorePatterns": [ "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$", "^.+\\.module\\.(css|sass|scss)$" ], "modulePaths": [], "moduleNameMapper": { "^react-native$": "react-native-web", "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy" }, "moduleFileExtensions": [ "web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx", "node" ], "watchPlugins": [ "jest-watch-typeahead/filename", "jest-watch-typeahead/testname" ], "resetMocks": true }, "babel": { "presets": [ "react-app" ] } } postDetail.js import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Helmet } from 'react-helmet'; import { POST_DETAIL_LOADING_REQUEST, POST_DELETE_REQUEST, USER_LOADING_REQUEST } from '../../redux/types'; import { Col, Row, Button } from 'reactstrap'; // import {Col, Row, Button} from 'react-bootstrap'; import { CKEditor } from "@ckeditor/ckeditor5-react"; import { Link } from 'react-router-dom'; import { GrowingSpinner } from '../../components/spinner/Spinner'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import { faPencilAlt, faCommentDots, faMouse, } from "@fortawesome/free-solid-svg-icons"; import BalloonEditor from "@ckeditor/ckeditor5-editor-balloon/src/ballooneditor"; import { editorConfiguration } from '../../components/editor/EditorConfig'; const PostDetail = (req) => { const dispatch = useDispatch(); const { postDetail, creatorId, title, loading} = useSelector((state) => state.post); const { userId, userName } = useSelector((state) => state.auth); console.log(req, "postDetail REQ"); useEffect(() => { dispatch({ type : POST_DETAIL_LOADING_REQUEST, payload : req.match.params.id, }); //작성자만 삭제 버튼 보이게 dispatch({ type : USER_LOADING_REQUEST, payload : localStorage.getItem("token") }); }, []); const onDeleteClick = () => { dispatch({ //작성자만 게시글 삭제 type : POST_DELETE_REQUEST, payload : { id : req.match.params.id, toekn : localStorage.getItem("token") } }); }; const EditButton = ( <> <Row className="d-flex justify-content-center pb-3"> <Col className="col-md3 mr-md-3"> <Link to="/" className="btn btn-primary btn-block"> 홈 </Link> </Col> <Col className="col-md3 mr-md-3"> <Link to={`/post/${req.match.params.id}/edit`} className="btn btn-success btn-block"> 수정 </Link> </Col> <Col className="col-md3"> <Button className="btn-block btn-danger" onClick={onDeleteClick}> 삭제 </Button> </Col> </Row> </> ) const HomeButton = ( <> <Row className="d-flex justify-content-center pb-3"> <Col className="col-sm-12 com-md-3"> <Link to="/" className="btn btn-primary btn-block"> 홈 </Link> </Col> </Row> </> ); const Body = ( <> {userId === creatorId ? EditButton : HomeButton} <Row className="border-bottom border-top border-primary p-3 mb-3 d-flex justify-content-between"> {(() => { if (postDetail && postDetail.creator) { return ( <> <div className="font-weight-bold text-big"> <span className="mr-3"> <Button color="info"> {postDetail.category.categoryName} </Button> </span> {postDetail.title} </div> <div className="align-self-end">{postDetail.creator.name}</div> </> ); } })()} </Row> {postDetail && postDetail.comments ? ( <> <div className="d-flex justify-content-end align-items-baseline small"> <FontAwesomeIcon icon={faPencilAlt} /> <span> {postDetail.date}</span> <FontAwesomeIcon icon={faCommentDots} /> <span>{postDetail.comments.length}</span> <FontAwesomeIcon icon={faMouse} /> <span>{postDetail.views}</span> </div> <Row className="mb-3"> <CKEditor editor={BalloonEditor} data={postDetail.contents} config={editorConfiguration} disabled="true" /> </Row> </> ) : ( <h1>hi</h1> )} </> );; return ( <div> <Helmet title={`Post | ${title}`} /> {loading === true ? GrowingSpinner : Body } </div> ); }; export default PostDetail; header.js import React from 'react'; import {Row, Col} from 'reactstrap'; // import {Row, Col} from 'react-bootstrap'; const Header = () => { return ( <div id="page-header" className="mb-3"> <Row> <Col md="6" sm="auto" className="text-center m-auto"> </Col> </Row> </div> ) }; export default Header; server package.json { "name": "blog", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "nodemon ./server/server.js --exec babel-node --ignore './client'" }, "author": "heymi", "license": "ISC", "keywords": [], "description": "", "dependencies": { "aws-sdk": "^2.1016.0", "babel-watch": "^7.6.0", "bcryptjs": "^2.4.3", "cors": "^2.8.5", "dotenv": "^8.2.0", "express": "^4.17.1", "helmet": "^3.22.0", "hpp": "^0.2.3", "jsonwebtoken": "^8.5.1", "moment": "^2.26.0", "mongoose": "^5.9.18", "multer": "^1.4.3", "multer-s3": "^2.10.0", "node-sass": "^6.0.1", "path": "^0.12.7", "sass-loader": "^12.2.0" }, "devDependencies": { "@babel/cli": "^7.10.1", "@babel/core": "^7.10.2", "@babel/node": "^7.10.1", "@babel/polyfill": "7.10.1", "@babel/preset-env": "^7.10.2", "babel-loader": "^8.1.0", "morgan": "^1.10.0", "nodemon": "^2.0.4" }, "repository": { "type": "git", "url": "git+https://github.com/jazzyfact/my-blog-site.git" }, "bugs": { "url": "https://github.com/jazzyfact/my-blog-site/issues" }, "homepage": "https://github.com/jazzyfact/my-blog-site#readme" }
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
강사님 포스트 디테일 부분을 똑같이 작성하였는데 이런 오류가 나서 도저히 방법을 모르겠습니다 ㅠㅠ
(사진)
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
강사님 포스트 글을 업로드하면 본문에 <p>태그도 같이 나오는데 어떻하죠 ㅠㅠ?
강사님 안녕하세요~ 포스트 글을 쓰고 업로드 시키면 <p> 본문글.... </p> 이렇게 데이터 베이스에 저장되고 포스트글 조회시에도 <p> 본문글.... </p> 이런식으로 조회 되는데 어떻게 해결해야할까요? ㅠㅠ
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
postReducer 관련 질문
postReducer.js에서 아래 부분 처럼 정의를 했는데 만약 POST_LOADING_SUCCESS에서 posts: [...state.posts, ...action.payload] 부분을 posts: [...action.payload]로 변경해준다면 POST_LOADING_REQUEST에서 posts를 초기화해주는 부분을 제거해줘도 될까요? export default function(state = initialState, action) { switch(action.type){ case POST_LOADING_REQUEST: return{ ...state, posts: [], loading: true, } case POST_LOADING_SUCCESS: return{ ...state, posts: [...state.posts, ...action.payload], loading: false, }
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
deploy 단계에서 문제가 생겼습니다 ㅠㅠㅠ
안녕하세요. 수업 재밌게 들었습니다!! deploy 영상 이전 단계 까지는 큰 문제없이 잘 작동이 되었었는데요. 그 이후부터 제대로 작동이 되지 않는 상태입니다. 환경은 MacOS에 ec2 인스턴스 t2.medium 사용중이며 route53에서 도메인도 구입하여 greenlock세팅도 똑같이 하여 빌드파일로 실행 해 보았을때 콘솔에는 이런 화면이 나옵니다. 그런데 저 주소로 접근이 되지않고 콘솔에 아무 반응도 없네요 ㅠㅠ 어떻게 해야할까요?
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
state.auth 부분 문의
안녕하세요 즐거운 추석 보내고계신가요?? 강의 보면서 학습중인데 몇가지 궁금한게 있어서 문의드립니다. LoginModal.js 에서 const { errMsg } = useSelector((state) => state.auth) 이 부분에서 state.auth를 받아오지 못합니다. redux\reducers\index.js에서 const createRouteReducer = (history) => combineReducers({ router: connectRouter(history), auth: authReducer, }); 이렇게 수정하였습니다. 구글 검색하여 react-redux 모듈에서 useSelector 부분의 매개변수을 unknown으로 수정하였는데도 되지 않았습니다. 무슨 문제일까요?
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
postDetail.category.categoryName 이 불러와지지 않네요..
나머지 postDetail.title이나 한단계 레벨로 내려가서 불러오는건 되는데 두단계 내려가는 postDetail.category.categoryName 이나 postDetail.comment.legth 두개만 불러와 지지가 않습니다.. 혹시나 서버 데이터가 느리게 들어와서 그런가 해서 저 위에 두개 데이터 불러오는거 지우고 나머지 데이터들만 불러오게 해놓고 사가에서 딜레이 1초를 뒀는데 데이터가 없다고 에러가 뜨는 대신 그냥 데이타가 들어와야하는 부분이 비어있게 렌더링이 됩니다. 정상적으로 로딩이 된경우 (저 위 두개 불러오는거 포기하면) 빠르게 한 3번 렌더링이 되는데 첫번째 렌더링때는 데이터가 없다고 뜨기는 합니다. 어떻게 해결해야될까요?ㅠㅠ
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
Schema hasn't been registered for model "comment".
Schema hasn't been registered for model "comment".혹시 이 문제 생기시는분 /server/models/post.js 파일 위쪽에 require('./comments') 해주시면 될거예요 인터넷에 찾아보니 포스트모델은 코멘트라는 모델을 참조하고 있기 때문에 몽고스 모델 스키마 저장해줘야되는데 그냥 불러와 진다고 생각하고 안 참조해서 생긴 에러라고 하네요! 요기서 그렇게 설명하네요 https://saegeullee.github.io/nodejs/mongoose-error-schema-hasnt-been-registered
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
빌드 이후 도메인, 빌드, DB, 중지여부에 대해
1. 코드내 변경사항 생겼을시 git pull을 하고 서버, 클라이언트를 새로 빌드하는 과정을 거쳐야 하나요? 2. 타 회사에서 도메인을 사고 탄력적 IP와 연결한다면 클라이언트 env에 ~~SERVER_URL="이부분에 해당 탄력적 IP를 작성해야 할까요?" 3. 도메인을 탄력적 IP와 연결했다면 몽고DB에 네트워크 에세스 부분에도 해당 탄력적IP 도메인을 작성해줘야 하나요? 4. 제가 ec2 스케줄러 건들었는데 해당 사이트가 종료되고 다시 동작됬을때, 사이트가 작동되지 않아서 다시 cmd ? 창에 들어가서 sudo ~~pm2 빌드를 하니 다시 동작이 됬습니다. 중지시마다 다시 이렇게 직접 들어가서 해당 동작을 수행해야 서버가 재 작동될까요?
- 해결됨리액트로 나만의 블로그 만들기(MERN Stack)
build후 빈창만 뜬다면(해결법!)
환경: window 실행: putty 에서 실행, 인스턴스 t2 small 사용중 문제: 성공적으로 db까지 연결이 됬지만 아무것도 창이 띄어지지 않습니다. 보시다시피 퍼블릭IP주소를 입력했는데 빈값입니다. 혹시나 해서 dns접속도 했는데 새로고침만 화면 304만 뜹니다. 해결법: 원래는 강사님에게 질문하려다가 문제를 해결해서 혹시나 어려움이 있으신분들을 위해 해결법 작성합니다. server-app.js 들어가서 app.use(helmet)을 app.use(helmet({contentSecurityPolicy: false})로 변경 => 깃허브에 푸쉬후 cd MyBlog 가서 git pull => client/npm run build => MyBlog/npm run build:server
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
CSS, Server -state, 비밀번호 수정
혼자 고민하다가 도저히 안되서 질문드려요.,.ㅠㅠ 1.CSS 부분 강사님 소스와 똑같이 정의해도 몇몇은 다르게 보입니다. 대표적으로 카테고리 부분에서 반응형이 작동하지 않고 잘려서 나옵니다. (이유를 모르겠습니다.) flex를 적용해제하거나 colum 설정시, 카테고리 버튼이 쭉 아래로 ( 예를들어 react, vsocde, tt 형태로) 나열이 됩니다. 2. server 부분 auth 라우터 부분에서 states(401)을 삭제후 res.json 만 보낼 경우 메인화면에서 로그인하지도 않았는데 AppNavbar.js - authLink가 자꾸 출력이 됩니다. 그래서 확인해본 결과 인정여부를 확인하는 isAuthenticated가 자꾸 true로 바뀌더군요 states를 다시 작성하니 작동이 됩니다. 전 states가 시스템에 문제를 일으키지 않고 메세지 같이 명시만 해주는걸로 알았는데 아닌건가요? 3. 프로필 수정 ( 비밀번호 수정) 로그인 직후 비밀번호 수정 버튼을 클릭 시 페이지가 이동하지 않고, 포스트 수가 증가 합니다. (예를 들어 메인화면에서 포스터수:12개, 노출되어있는 포스터: 6개, 숨겨진 포스트 6개 일시 버튼클릭 시 노출되어 있는 포스터 수(6개) 만큼 포스터수가 증가합니다. 예시대로 하면 최종적으로 12+6 =18 개가 되고있습니다). 그러나 페이지 새로고침 후 비밀번호 수정버튼을 누를시에는 정상적으로 페이지가 이동하여 작동합니다. 원인을 도저히 모르겠네요..) 깃주소 남깁니다. https://github.com/dnjsvltm201311681/cookblog
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
skipNumberRef
1. 제가 이해하고 있는게 맞는건가요? postCount: 모든 포스터 수 postCountRef.current: 초기에 로딩안된 남은 포스터수 skipNumberRef.current: 스크롤(스킵)된 포스트 remainPostCount: 단위?(6개 포스트로 지정 됬으므로 6개 포스트후 로딩되므로 6개당 1씩) 2. payload: skipNumberRef.current+6 이유를 모르겠습니다.
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
바벨 없이 require 로 다 바꿔도 오류가 떠요
안녕하세요 제가 바벨없이 사용하면서 import- > require 로 다 변환하고 exports 로 다 변환을 했습니다. 하지만 여전히 이렇게 /Users/ssong/0818/blog/node_modules/express/lib/router/index.js:458 throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn)) ^ 오류가뜹니다. 도와주실 수 있을까요?
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
protectedRoute
protectedRoute.js 부분이 강의에서 제 지식에 비해 다소 설명이 부족한 것 같아서 의문점이 생겨 질문드립니다. 1. ...rest는 어디서 나온 데이터 인가요? 2. {...rest}가 이 코드에서 하는 역할이 무었인가요? (테스트결과 삭제해도 수정하는데는 아무 이상이 없습니다) 3. props는 PostEdit.js 에서 넘어오는 데이터 인가요? 라우터에 exact component={PostEdit}를 했기때문에 넘어오는 데이터 인건가요? 4. component: Component는 왜이렇게 하나요? component: Component vs Component 차이를 모르겠습니다. Component만 써보니 전자와 달리 console.log({props})는 찍히지 않으나, 수정하는데는 문제가 없던것 같습니다. 5. protectedRoute없이도 사실 데이터 변경은 불가능 한가요? 서버측에서 수정 라우터에 auth 미들웨어를 삽입했기때문에 사실 없어도 데이터 변경은 불가능한것 맞나요? 강사님께서 한번 언급하신것처럼 보안성을 좀더 강화(프론트 부분에서도 보안처리)하기 위한 방식인거죠? --매번 consolo.log를 찍어도 모르는게 많습니다. (질문이 너무 많아서 죄송합니다)
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
서버측 req와, reducer이 없는 이유에 대해서 질문드려요!!
1. req 이 두개에서 상단은 body에 나온 데이터를 사용한 반면, 하단에서는 params만 데이터가 존재합니다. 이 두개의 차이는 무었인가요? (즉 상단 데이터는 왜 요청, req에서 body로 나오고 하단에는 req.params만 나오고 body는 아무것도 안나오는지 궁금합니다) 2. 왜 삭제는 reducer을 사용안해도 될까요? 프론트에서 이벤트 발생후, 서버측에서 처리후 다시 res, 응답 데이터를 프론트에 전송해 따로 프론트 측에서 처리할 화면이 필요없기 때문인건가요?
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
안녕하세요 title이 먹히지 않는 오류가 발생합니다...!
제가 생각하기로는 어딘가에 오타가 있거나, Redux쪽에 문제가 있는 것이라고 생각하지만 리덕스는 차마 봐도 이해할 수가 없어서... 이리저리 바꿔치다가 결국 강사님의 코드를 똑같이 긁어서 넣어봤는데도 같은 오류가 뜹니다. 제가 어딘가의 구문을 실수한 것 같은데... 일단 PostDatail에 들어가면 위와 같이 title이 먹히지 않습니다... 사실 DostDatail의 마지막 시점부터 제대로 구동이 되지 않았던 것 같아요 혹시 실수한 것이 있다면 짚어주시길 부탁드립니다. ㅠㅠ 깃허브 링크는 여기에 있습니다! https://github.com/ireh1214/Blog-project
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
질문입니다ㅠ
삭제된 글입니다
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
mongodb 컬렉션에서 posts 삭제 후 현 상황과 관련된 질문입니다.
수업 후반부에 mongdb posts 컬렉션 삭제를 언급하시길래 별생각 없이 지웠습니다. 문제는 post가 없어 작업중인 postdetail 페이지를 볼 수가 없네요.. postman을 이용해 post를 등록하려고 해봤지만 무한로딩이 발생하고 있습니다.(auth-token 체크를 풀면 당연히 토큰 없음이 나오고요) 또한, http://localhost:3000/ 에 로그인해서 add post를 통한 업로드시 postdetail 페이지로만 넘어갈뿐 mongodb에 데이터가 저장되지 않습니다. 제가 현재까지 진행한 진도로는 add post를 통한 업로드가 되지 않는게 맞는건가요?
- 미해결리액트로 나만의 블로그 만들기(MERN Stack)
useEffect, useRef이 디테일한 역할이 무었인지 궁금합니다
1. useEffect useEffect는 랜더링시 특정작업을 위해 수행하는 hook로 알고 있고 [ ] 에 값을 삽입시 그값만 업데이트시만 수행하는걸로 알고있습니다. Comment.js 에서 [ dispatch, id ] 를 집어넣는데 정확한 이유가 무었일까요? 2. useRef 특정DOM을 가르킬때 사용하는것으로 알고있습니다. 그러나 onSubmit 함수안에서 resetForm.current.value="" 가 의미하는바, 역할이 무엇인지 알지 못하고 있습니다. 간략한 설명좀 해주실 수 있을까요?