33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Boiler Plate 기본 코드의 대한 설명은 따로 없는건가요??
제목 그대로 입니다. 예를 들면 models의 user.js는 왜 이렇게했고 하는 설명은 따로 없는건가요?? 만약 다른 강의에 있다면 그 강의는 무엇인지 알수있나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
FileUpload.js에서. UploadProductPage로 데이터 전송시에
안녕하세요 개인 프로젝트를 진행중이다가 살짝 어려운 부분에 있어서 해결하려고 구글링도 해보고 했는데 해결이 되지 않아서 문의드려봅니다. 강의 내용과도 연관된거라 괜찮을듯해서요. 지금 강의에선 FileUpload에서 실제 사진전송을 서버로 요청하고, 서버에서 요청을 완료하면 response로 이미지 정보를 반환한 후 이것을 다시 Parent인 UploadProductPage에 해당 파일의 path 정보를 반환해서 이것을 Parent에서 디스플레이하는 형식인데, 전 썸네일을 추가했습니다. 결과적으로 FileUpload에서 서버로부터 받아서 Parent 컴포넌드로 전송해주는 정보가 2가지로 imagePath와 thumbnailPath이렇게 입니다. 따라서 Parent로 전송하는 것이 단순한 string 데이터가 아니고 variables 객체 안에 image: Images / thumbnail: Thumbnails 이렇게 2개 항목을 state로 정의해주고 있는데요. 문제는 이렇게 전송할시 Parent에서 처음 읽을시에 제대로 값을 읽지 못한다는 점입니다. 처음을 제외하면 그 다음부턴 undefined가 아니라 제대로 값을 읽어오는데요. 이것이 요청처리로 인한 delay 때문인지 정확히 모르겠습니다. 따라서 image값을 Images state가 아닌 직접 response.data.imagePath로 정의해주면 처음부터 이상없이 값을 읽어오지만 아무래도 variable의 관리상 state으로 정의해주는게 좋을듯해서요. 혹시 delay 때문인가 해서 방법을 알아보니 새로 useTransition이란 훅이 있던데 이건 리액트18부터 적용되는 거라 아직 불안해서 17에서 해결할 방법을 고민중입니다 코드를 직접 넣은게 아니라 헥깔리실 수도 있는데 거의 동일한 코드라 괜찮으실꺼 같아요. 이 부분만 다시 적으면, Axios.post('/api/gallery/upload/image', formData, config).then(response => { if (response.data.success) { setImages(response.data.filePath); setThumbnails(response.data.thumbnailPath); let variables = { image: Images, thumbnail: Thumbnails } props.refreshFunction(variables); } else { alert('Failed to save images on the server'); } }); 처음에는 Thumbnail 생성을 따로 Axios 안의 Axios로 추가로 서버에 요청해서 처리해줬었는데 굳이 각각 따로 요청할 필요가 있을까 하는 생각도 들고, 그냥 서버에서 직접 썸네일이미지를 생성하주고 그 정보를 받아왔는데요, 이때 오류생기면 또 그에 따른 오류메세지만 전송하면 될듯해서 이렇게 했는데 바로 variables을 정상적으로 update하는데 문제가 있는듯합니다. 정확한 답이 아니더라도 해결책이 될 수 있는 조언이라도 해주실 수 있나요? 감사합니다
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
버튼을 눌러야 검색하는 기능
안녕하세요 검색버튼을 눌러야 검색이 되게 하고 싶은데 어떻게 해야될 지 모르겠습니다.. 이렇게 하면 검색창을 눌러야 검색이 되고 검색버튼을 누르면 아무 반응이 없습니다.. ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
xhr.js:178 GET http://localhost:3000/api/users/auth 504 (Gateway Timeout)
계속 504에러가 떠서 온갖 검색을 다하여 따라해봐도 되지않았습니다. 그래서 새로 다운받아서 정말 한글자한글자 비교해가며 다시 해보았더니 사진이 잘 들어왔습니다! 다음것을 따라라치려고 vs코드로 돌아왔다가 다시한번 확인차 페이지를 봤더니 또다시 504에러가 뜹니다..! 분명히! 잘 됬는데 사진도 들어왔는데!! 꿈을 꾼건가요 제가?? 이게 되다가 안되는 경우도 있나요??? ㅠㅠ GET http://localhost:3000/api/users/auth 504 (Gateway Timeout) dispatchXhrRequest @ xhr.js:178 xhrAdapter @ xhr.js:12 dispatchRequest @ dispatchRequest.js:52 Promise.then (async) request @ Axios.js:61 Axios.<computed> @ Axios.js:76 wrap @ bind.js:9 auth @ user_actions.js:31 (anonymous) @ auth.js:14 commitHookEffectListMount @ react-dom.development.js:19731 commitPassiveHookEffects @ react-dom.development.js:19769 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 flushPassiveEffectsImpl @ react-dom.development.js:22853 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushPassiveEffects @ react-dom.development.js:22820 performSyncWorkOnRoot @ react-dom.development.js:21737 (anonymous) @ react-dom.development.js:11089 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushSyncCallbackQueueImpl @ react-dom.development.js:11084 flushSyncCallbackQueue @ react-dom.development.js:11072 unbatchedUpdates @ react-dom.development.js:21909 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757 render @ react-dom.development.js:24840 ./src/index.js @ index.js:20 __webpack_require__ @ bootstrap:784 fn @ bootstrap:150 1 @ serviceWorker.js:135 __webpack_require__ @ bootstrap:784 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 createError.js:16 Uncaught (in promise) Error: Request failed with status code 504 at createError (createError.js:16:1) at settle (settle.js:17:1) at XMLHttpRequest.handleLoad (xhr.js:61:1) 콘솔창에 뜨는 빨간 에러 코드입니다. 사진을 올리기 전에도 계속해서 떠있습니다.!!! 분명히 이 에러가 없었는데 갑자기 떠서 원인을 더 모르겠습니다 !! ㅠㅠ +동영상에서는 product.js파일에서 req.json이라고 되어있었는데 다른게시글을 보고 req.json을 res.json로 고쳐야한다는 것을 보고 고치고 새로 npm run dev를 했습니다. 그랬더니 이번엔 GET http://localhost:5000//var/folders/xr/kqrr20dn4yv307hpyc916qfr0000gn/T/2e37de435ad620ba0840cef7c263dd65 404 (Not Found) 이렇게 404에러가 뜹니다! upload(req, res, (err) => { if(err) { return res.json({ success: false, err }) } return res.json({ success: true, filePath: res.req.file.path, fileName: res.req.file.filename }) }) <FileUpload.js코드> import React, { useState } from 'react'; import Dropzone from 'react-dropzone'; import { Icon } from 'antd' import axios from 'axios'; function FileUpload() { const [Images, setImages] = useState([]) const dropHandler = (files) => { let formData = new FormData(); const config = { header: {'content-type': 'multipart/fomr-data'} } formData.append("file", files[0]) axios.post('/api/product/image', formData, config) .then(response => { if(response.data.success) { setImages([...Images, response.data.filePath]) }else { alert ('파일저장실패') } }) } return ( <div style={{display: 'flex', justifyContent: 'space-between'}}> <Dropzone onDrop={dropHandler}> {({getRootProps, getInputProps}) => ( <div style={{ width: 300, height: 240, border: '1px solid lightgray', display: 'flex', alignItems: 'center', justifyContent: 'center' }} {...getRootProps()}> <input {...getInputProps()} /> <Icon type='plus' style={{fontSize: '3rem'}} /> </div> )} </Dropzone> <div style={{display: 'flex', width: '350px', height: '240px', overflowX: 'scroll' }}> {Images.map((image, index) => ( <div> <img style={{minWidth: '300px', height: '240px'}} src={`http://localhost:5000/${image}`} /> </div> ))} </div > </div> ); } export default FileUpload; <product.js코드> const express = require('express'); const router = express.Router(); const multer = require('multer'); //================================= // product //================================= var storage = multer.diskStorage({ // destination: function (req, file, cb) { // cb(null, 'uploads/'); // }, // filename: function (req, file, cb) { // cb(null, `${Date.now()}_${file.originalname}`) // } }) var upload = multer({ storage: storage }).single("file") router.post('/image', (req, res) => { //가져온 이미지를 저장을 해주면 된다. upload(req, res, (err) => { if(err) { return req.json({ success: false, err }) } return res.json({ success:true, filePath: res.req.file.path, fileName: res.req.file.filename }) }) }) module.exports = router;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
서버에서 토큰 발급시
로그인시 서버에서 토큰생성후 쿠키로 클라이언트에 보넀는데 토큰은 쿠키를 사용하지않고 클라이언트로 보내는게 불가능한가요? 또 쿠키말고 클라이언트에서 localstorage에 저장이 가능한지 궁금합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
회원가입 오류
회원가입 할때 가입이 안되고 다음화면으로 넘어가지 않아요. 콘솔창을 보면 이게 계속 떠있네요. 터미널 상에서는 아무런 오류가 없습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
강의 7:41 삼항연산자 왜쓰는건가요?
1. 이부분에 삼항연산자 왜쓰는건가요? 이미 Skip, Limit를 useState로 관리하면서 초기값을 설정해주었고 getProducts(body)가 호출될때마다 skip,limit은 항상 있었는데 그러면 삼항연산자 부분에서 req.body.limit은 항상 true이니깐 let limit= req.body.limit ? parseInt(req.body.limit): 20; 할필요없이 let limit= parseInt(req.body.limit) 해줘야한다고 생각했었는데요. 2. 이 두방식의 차이점이 있어서 이렇게 하신걸까요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
회원가입시 오류가 뜹니다..ㅠㅠ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
img태그의 src=로컬호스트/이미지 이 부분 질문있습니다!
프론트에서 이미지를 전달받아서 서버측에서 저장을 할때 uploads폴더에 이미지가 저장되게 했는데 1. img태그에 src속성을 보면 왜 uploads폴더에서 가져오지않고 로컬호스트에서 가져오는지 이해가 가지않습니다. 이미지를 uploads폴더에 저장을 해놨는데 다시 서버에 접근하는 느낌을 잘 모르겠습니다. 그냥 uploads폴더에 있는거 가져다가 쓰면 왜 안되는걸까요? 2. uploads폴더에 이미지를 저장한후에 다시 화면으로 가져오는과정이, uploads폴더에 있는거 서버에 올림 -> 서버에 이미지가 올라와있음 -> 서버측에서 프론트로 올림 이런느낌인걸까요? 그러면 다시 이해가 안가는게 localhost/uploads/이미지 왜 이렇지 않은걸까요..? 만약에 여러폴더에 같은이름으로 이미지가 저장되있다면 폴더명을 명시해줘야하는게 아닌가요ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
antd 오류 관련
지금 강의를 진행한 후에 자신만의 boilerplate을 한개 만들고 있는 중인데요, 따라서 nodejs와 다른 라이브러리들도 최신버전으로 해서 진행중인데 오류가 발생해서 문의 드립니다. Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported Failed to parse source map: 'webpack://antd/./components/icon/style/index.less' URL is not supported 매번 클라이언트를 가동시킬때마다 위의 경고가 뜨는데요. 아무래도 경고다 보니 우선 작동하는데는 이상없한듯한데, 문제는 구글링해보니 일부사람의 경우 빌드할 때 웹팩에서 오류가 발생하는듯해서 문의 드립니다. 저 오류를 수정할 수 있는 방법이 있나요? 참고로 node는 16.14.1, antd는 4.19.2를 사용중입니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
state 관련 질문
UploadProductPage 안에 있는 FileUpload 컴포넌트에서 이미지를 업로드할 때 , image state를 UploadProductPage 에도 선언하시고 FileUpload 안에도 선언하셨는데, FileUpload 에서 image를 선언하고 props로 FileUpload 전달해 주면 굳이 2번 해주지 않아도 되지 않나요?? 혹시 이거는 재사용 때문에 설계를 이렇게 하신건지 궁금합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
카트 목록 삭제시 문의드립니다.
제가 이해하기론, removeFromCart 역시 거의 addToCart와 동일한 방식으로 이루어지는 걸로 아는데요 addToCart와는 달리 removeFromCart에선 제품의 수량과 상관없이 대상 상품을 cart 목록에서 삭제하면 되는거라, 사실 db 상에 작업은 매우 간단해보입니다. 어짜피 CartPage가 렌더링 될때 현재의 db정보를 해석해서 렌더링해주는 것이다보니 강의 중간에서처럼 다른 곳에서 오류가 있어도, db수정만 이상이 없다면 CartPage를 새로고침 하는 것만으로도 정상적인 결과가 출력되는 거라, 그냥 카트에서 목록이 삭제될때마다 useEffect가 실행되도록 추가해주면 안되나요? server user routes의 router.get('/removeFromCart')에서 db가 성공적으로 수정되면 res.send(userInfo)로 간단하게 데이터만 보내서 CartPage 컴포넌트에서 이 값이 변경될때마다 useEffect가 추가로 실행되게만 해줘도 문제가 없나해서 문의 드립니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
프록시 서버 에러 질문하겠습니다.
졸업작품 때 참고할려고 강의를 수강하고 있는 학생입니다. 로그인을 하는 과정에서 [HPM] Error occurred while trying to proxy request /api/users/login from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 이런 오류가 발생했습니다. 혹시 몰라 데이터베이스 연결문제를 확인하고 bcrypt도 버전을 낮췄는데도 도저히 해결방법이 안나 질문드립니다. 제 깃허브 주소입니다. https://github.com/jeonseunghyeon/-senier-project
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
redux promise와 chunk관련 질문입니다.
안녕하세요. 완강이후 혼자 해보려구 redux를 사용하는데, dispatch.then이 사용이 불가하다고 나옵니다. 찾아보니 dispatch는 동기식이라 .then()이 사용이 불가하다는데, 이때 chunk을 사용하여 비동기로 사용하는 것인가요? 이 둘의 역할이 궁금합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Signin Signup 메뉴가 안 나타납니다.
같은 질문을 한 분들이 많아서 참고 해봤는데 안됩니다.. Network Access 에서 IP 추가했는데도 안되네요 root에서 npm run dev로 실행했습니다. 이렇게 작성해주었는데 무엇이 문제일까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
handleFilters를 정의해줄 때 문의 드립니다.
handleFilters를 정의해줄때, 마지막에 setFilters(newFilters)로 state을 업데이트 해주면 문제가 생기나요? 다름이아니라 지금 filtering 된 후의 데이터가 limit 숫자를 넘어서서 더보기 버튼이 활성화된 경우엔, 여기서 더 보기 버튼을 누를시에 필터링된 데이터의 다음 페이지가 아닌 원래 전체 데이터에서 limit 숫자만큼 더한 숫자번째의 데이터부터 출력이 되는데요. 보니 더보기 버튼이 호출하는 메소드는 사실 필터랑 상관없는 getProducts 다 보니 제대로 출력이 안되게 되는데요. 이것을 해결하려고 아래와같이 그냥 loadMoreHandler를 정의해줄때도 filters값을 추가하여 이 값에 Filters state값을 읽어서 넣어주었는데, 이때 Filters를 업데이트하줘야해서 setFilters를 추가해 줬습니다. 혹시 이렇게해도 상관없는 건가요? const loadMoreHandler = () => { let skip = Skip + Limit; let body = { skip: skip, limit: Limit, filters: Filters, loadMore: true } console.log(body.filters); getProducts(body); setSkip(skip); }; const handleFilters = (filters, categories) => { const newFilters = {...Filters}; newFilters[categories] = filters showFilteredResult(newFilters); setFilters(newFilters); };
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
antd navbar관련 문제
안녕하세요. 강의 완강 후 필요한 부분을 토대로 조금씩 변형해가며 공부중입니다. 강의처럼 antd의 navBar를 사용하였는데(해당 강의내의 navbar에서 코드만 조금 지웠습니다.) 반응(size)에 따라 drawer버튼이 생성되고 다시 돌아갈 때 원래 있던 menu항목이 사라집니다. 쇼핑몰 앱에서는 해당 현상이 발생하지 않구요. 왜이러는지 알 수 있을까요? 기본상태 화면 줄임 다시 늘림(메뉴항목 사라짐) 또한 같은 코드에서 menuItem항목이 두개가 될 경우 아래 사진과 같이 항목이 ... 안으로 들어가게됩니다. (사이즈 그대로, 쇼핑몰에서는x) 혹시 이유를 알고계실까요? 아래는 코드입니다. NavBar.js import React, { useState } from "react"; import { Link } from "react-router-dom"; import MenuDetails from "./Sections/MenuDetails"; import { Drawer, Button, Icon } from "antd"; import "./Sections/Navbar.css"; function NavBar() { const [visible, setVisible] = useState(false); const showDrawer = () => { setVisible(true); }; const onClose = () => { setVisible(false); }; return ( <nav className="menu" style={{ position: "fixed", zIndex: 5, width: "100%" }} > <div className="menu__logo"> <Link to="/">Logo</Link> </div> <div className="menu__container"> <div className="menu_list"> <MenuDetails mode="horizontal" /> </div> <Button className="menu__mobile-button" type="primary" onClick={showDrawer} > open </Button> <Drawer title="Basic Drawer" placement="right" className="menu_drawer" onClose={onClose} visible={visible} > <MenuDetails mode="inline" /> </Drawer> </div> </nav> ); } export default NavBar; MenuDetails.js import React from "react"; import { useNavigate, Link } from "react-router-dom"; import { Menu, Icon, Badge } from "antd"; function MenuDetails(props) { let navigate = useNavigate(); /*--------------------------------------- 로그인 하지 않았을 때 ---------------------------------------*/ return ( <Menu mode={props.mode}> <Menu.Item key="menu1"> <Link to="/login">Signin</Link> </Menu.Item> <Menu.Item key="menu2"> <Link to="/register">Signup</Link> </Menu.Item> <Menu.Item key="menu3"> <Link to="/register">Signup</Link> </Menu.Item> <Menu.Item key="menu4"> <Link to="/register">Signup</Link> </Menu.Item> </Menu> ); } export default MenuDetails; Navbar.css @import "antd/dist/antd.css"; .menu { padding: 0 20px; border-bottom: solid 1px #e8e8e8; overflow: auto; box-shadow: 0 0 30px #f3f1f1; background-color: white; } .menu__logo { width: 150px; float: left; } .menu__logo a { display: inline-block; font-size: 20px; padding: 19px 20px; } .menu__container { padding-top: 10px; } .menu__container .menu_list { float: right; } .menu__container .ant-menu-item { padding: 0 5px; } .menu__container .ant-menu-horizontal { border-bottom: none; } .menu__mobile-button { float: right; height: 32px; padding: 6px; margin-top: 8px; display: none !important; /* use of important to overwrite ant-btn */ background: #3e91f7; } @media (max-width: 768px) { .menu__mobile-button { display: inline-block !important; } .menu_list { display: none; } .menu__logo a { margin-left: -20px; } .menu__container .ant-menu-item, .menu__container .ant-menu-submenu-title { padding: 1px 20px; } .menu__logo a { padding: 10px 20px; } }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이미지 업로드 하는 과정에서
앞에서 다른분이 이미 질문했던거 같은데 답글이 안달렸던거 같아서 문의 드립니다. 지금 Product의 업로드 과정이 처음에 이미지를 선택해주면, 이 과정에서 이미 서버의 저장공간 (여기선 /uploads)에 저장이 된 후, UploadProduct 컴포넌트의 맨 아래 확인 버튼을 누르면, Back-end상에 state로 저장되있던 정보들로 MongoDB에 새로운 데이터를 추가하는 걸로 이해하고 있는데요. 이미 Dropzone을 이용하여 원하는 사진을 선택하자마자 사진의 업로드는 이루지는 것이기 때문에, 사용자가 사진을 선택한 후에 나머지 form의 양식들을 다 채우지 않고 취소하거나 또는 어떠한 이유로 이 과정에서 오류가 발생한 경우에는 Back-end상에 불필요한 데이터나 남게되는듯 보입니다. 위에 사실이 맞다면, 보통 이러한 경우엔 따로 파일을 삭제하는 코드를 추가를 해주나요? 사용자가 많아질 경우엔 이러한 데이터도 나름 상당해질듯 한데요 따로 해결책이 있나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
저처럼 필터링 안되시는 분들
filters가 아닌 newFilters로 잘 전달하고 있는지 확인하시고 코드가 완벽한데도 안되신다면 mongoDB에서 contients 추가할 때 데이터 타입 설정을 잘 했는지 확인해보세요.... 기본인 string으로 되어있어서 계속 안되는 걸 모르고 한시간동안 코드 뜯어보고 있었습니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
회원가입이 잘 됬었는데 또 안됩니다
[nodemon] app crashed - waiting for file changes before starting... [1] [HPM] Error occurred while trying to proxy request /api/users/register from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 이 오류가 뜹니다 서브밋을 누르면 저렇게 뜨는데 몽고 디비도 제대로 입력했습니다 module.exports = { mongoURI: 'mongodb+srv://kimeunbi:비밀번호@cluster0.sb7wo.mongodb.net/myFirstDatabase?retryWrites=true&w=majority' }