묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결습관부터 바꿔주는 Node.js & Express 기초
prisma schema에서
@@index([$$$$], name: "$$$$")라는 것을 model 안에서 설정해주던데공식문서에 봐도 잘모르겠어요....혹시 설명 부탁드려도 될까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
간단히 추가하고 싶은데 막혀서요...
위 내용은 select Box에 "선택" 이라는 걸 하나 추가 하고 싶은데 처음은 되지만 두번째가 되면 에러가 납니다. 분기 처리를 해야될 거 같은데 제가 너무 초보라 아무리 생각해도 모르겠네요 ㅠㅠ 알려주시면 감사하겠습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
지원 중단된 기능이 사용됨 이라고 나오네요 ㅠㅠ
getCurrentPosition() 및 watchPosition()은 더 이상 안전하지 않은 출처에서 작동하지 않습니다. 이 기능을 사용하려면 애플리케이션을 HTTPS와 같은 안전한 출처로 전환하는 것을 고려해야 합니다. 자세한 내용은 다음 페이지를 참고하세요코드 입니다 const askForLocation = function () { navigator.geolocation.getCurrentPosition((position) => { console.log(position); }); };.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
스토리지 데이터에 하나만 안지워 지네요
스토리지 데이터에 다른건 다 삭제 되는데 하나 남았을때 삭제가 안되네요 전체 삭제하든 더블클릭으로 삭제하든 삭제가 안되네요 추가적으로 전체삭제를 해도 데이터가 안지워 지네요 ㅠㅠ코드입니다.const todoInput = document.querySelector("#todo-input"); const todoList = document.querySelector("#todo-list"); //로컬스토리지에서 데이터 빼오기 const savedTodoList = JSON.parse(localStorage.getItem("saved-items")); const createTodo = function (storageData) { //할일 추가 함수 let todoContents = todoInput.value; if (storageData) { todoContents = storageData.contents; } const newLi = document.createElement("li"); const newSpan = document.createElement("span"); const newBtn = document.createElement("button"); //할일 완료 이벤트 newBtn.addEventListener("click", () => { newLi.classList.toggle("complete"); saveItemsFn(); }); //할일 삭제 이벤트 newLi.addEventListener("dblclick", () => { newLi.remove(); saveItemsFn(); }); if (storageData?.complete) { newLi.classList.add("complete"); } newSpan.textContent = todoContents; newLi.appendChild(newBtn); newLi.appendChild(newSpan); todoList.appendChild(newLi); todoInput.value = ""; saveItemsFn(); }; const keyCodeCheck = function () { //할일 추가 실행 함수 if (window.event.keyCode === 13 && todoInput.value !== "") { createTodo(); } }; const deleteAll = function () { //전체 삭제 함수 const liList = document.querySelectorAll("li"); for (let i = 0; i < liList.length; i++) { liList[i].remove(); } saveItemsFn(); }; const saveItemsFn = function () { //할일 저장 함수(네트워크 스토리지에) const saveItems = []; for (let i = 0; i < todoList.children.length; i++) { const todoObj = { contents: todoList.children[i].querySelector("span").textContent, complete: todoList.children[i].classList.contains("complete"), }; saveItems.push(todoObj); } saveItems.length === 0 ? localStorage.removeItem("saved-Items") : localStorage.setItem("saved-items", JSON.stringify(saveItems)); }; if (savedTodoList) { for (let i = 0; i < savedTodoList.length; i++) { createTodo(savedTodoList[i]); } }
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 업로드 할때 한글이름 파일 500에러
안녕하세요 제로초님 이미지 업로드할때 한글이름으로 된 이미지를 업로드하면 화면에 보여지고 s3에도 업로드는 되는데 post할때는 500에러가 나네요 ㅠㅠ 백엔드에 encodeURIComponent하고 normalize("NFC") 까지 써봤는데 고쳐지지가 않아서 문의 남깁니다 ㅠㅠconst upload = multer({ storage: multerS3({ s3: new AWS.S3(), bucket: "react-sansbook-aws", key(req, file, cb) { cb( null, `original/${Date.now()}_${path.basename( encodeURIComponent(file.originalname) )}` ); }, }), limits: { fileSize: 20 * 1024 * 1024 }, // 20MB
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
조건설정 질문입니다
2번째 문제에서 else if의 조건에else if (1 =< product.length =< 4)혹은else if (product.length =< 4 && product.length > 0)는 왜 오류가 나는지 궁금합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
axios를 활용한 데이터 통신
핸드폰 번호를 입력하면 페이지 상에서는개발자 도구에서 이렇게 잘 나오지만vscode console에 찍어보면 myphone 번호가 아니라 undefined로 나옵니다.아래는 phone.js 코드입니다. (length에서 자꾸 에러가 나서 그 부분만 수정된 코드입니다.)function checkPhone(myphone) { //1. 휴대폰 번호 자릿수 맞는지 확인하기(10-11자리) if (myphone && myphone.length < 10 || myphone && myphone.length > 11) { console.log("에러 발생!!! 휴대폰 번호를 제대로 입력해주세요."); return false; } else { return true; } } //2. 인증번호 6자리 만들기 function getToken() { const result = String(Math.floor(Math.random() * 1000000)).padStart(6, "0"); console.log(result); return result; } //3. 핸드폰 번호에 토큰 전송하기 function sendTokenToSMS(myphone, result) { console.log(myphone+ "번호로 인증번호" + result + "를 전송합니다."); } module.exports = { checkPhone, getToken, sendTokenToSMS };이건 signup.html<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입 연습하기</title> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> function zzz(){ //1. 입력한 휴대폰 번호 가져오기 const myphone = document.getElementById("myphone").value console.log("나의 핸드폰 번호 : ", myphone) //2. 해당 휴대폰 번호로 인증번호 API 요청하기 axios.post("http://localhost:3000/tokens/phone", { qqq: myphone }).then((res) =>{ console.log(res.data) document.getElementById("result").innerText = res.data }) } </script> </head> <body> 휴대폰 번호 : <input id="myphone" type="text"/><button onclick="zzz()">인증하기</button> <div id="result">인증상태</div> <button>회원가입하기</button> </body> </html> index.js const express = require('express'); const { checkPhone, getToken, sendTokenToSMS } = require('./phone.js'); const swaggerUi = require('swagger-ui-express'); const swaggerJsdoc = require('swagger-jsdoc'); const {options} = require('./swagger/config.js'); const swaggerSpec = swaggerJsdoc(options); const cors = require('cors'); const app = express(); //use : 모든 메소드에서 작동한다. app.use(express.json()) app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec)); app.use(cors()) //GET 방식의 API를 만들겠다. //endpoint는 /로 하겠다. // /qqq이쪽 endpoint로 누군가 요청을 하면 아래 함수를 실행을 시키겠다. app.get('/boards', function (req, res) { //1.DB에 접속 후, 데이터를 조회. 조회한 데이터를 객체로 담아온다. const result = [ {number : 1, writer: "철수", title : "제목입니다.", contents: "내용이에요."}, {number : 2, writer: "영희", title : "제목입니다.", contents: "내용이에요."}, {number : 3, writer: "훈이", title : "제목입니다.", contents: "내용이에요."}, ] //2.DB에서 꺼내온 결과를 브라우저에 응답(response)으로 주기 res.send(result) }, function (req, res){ }) app.post('/boards', function (req, res) { //1. 브라우저에서 보내준 데이터 확인하기 console.log(req) console.log("=====") console.log(req.body) //2. DB에 접속 후, 브라우저에서 받은 데이터를 디비에 저장해야 함. //3. DB에 저장된 결과를 브라우저에 응답(response) 주기 res.send('게시물 등록에 성공하였습니다.') }) app.post('/tokens/phone', function(req, res){ const myphone = req.body.phone //1. 휴대폰번호 자릿수 맞는지 확인 (10-11자리) const isValid = checkPhone(myphone) if(isValid === false) return //2. 핸드폰 토큰 6자리 만들기 const myToken = getToken() //3. 핸드폰 번호에 토큰 전송하기 sendTokenToSMS(myphone, myToken) res.send("인증완료!!!") }) //포스트맨에서 send 버튼 누르는 것 = 기다린다 = listen app.listen(3000)
-
해결됨탄탄한 백엔드 NestJS, 기초부터 심화까지
한글파일명 업로드시 파일명 깨짐 현상
안녕하세요.강의를 듣고 포스트맨으로 파일을 올리고 있습니다.영어파일명은 파일명이 정상적을 변환되는데한글파일명은 파일명이 깨져서 변환됩니다.-물리적 파일명도 깨지고 디비에도 깨진파일명이 저장됩니다. 깨진파일명으로 크롬에서 불러오면 에러가 납니다.한글파일명을 해결할수 있는 방법이 있을까요?
-
해결됨탄탄한 백엔드 NestJS, 기초부터 심화까지
virtual 필드 만드는 과정에서 id를 찾을 수 없습니다.
보시다시피 id값을 찾지를 못하네요.혹시 해결하시분 계실까요
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
main의 index.js export default가 Mainpage인데 app.js에서는
mainpagecomponent로 쓰던데uploadpage나 productpage는 component가 따로 안붙고 쓰던데 mainpage만 이렇게 써야되는 규칙인가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
12강 데이터베이스에 있는 정보로 로그인 부분 오류가 계속 납니다
안녕하세요 선생님 12강 데이터베이스에 있는 정보로 로그인 하는 쪽 강의 질문 드립니다.app.post("/api/users/login", (req, res) => { // 요청된 이메일을 데이터베이스에서 찾는다 User.findOne({ email: req.body.email }, (err, user) => { if (!user) { return res.json({ loginSuccess: false, message: "제공된 이메일에 해당하는 유저가 없습니다", }); } // 요청된 이메일이 데이터베이스에 있다면 비밀번호가 맞는 비밀번호 인지 확인 user.comparePassword(req.body.password, (err, isMatch) => { // 비밀번호가 틀릴 경우 if (!isMatch) return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다", }); // 비밀번호까지 맞다면 토큰을 생성하기 user.generateToken((err, user) => { if (err) return res.status(400).send(err); // 토큰을 저장한다. 쿠키 로컬스토리지 세션 등 // 여기서는 쿠키 사용 // x_auth라는 이름으로 토큰이 들어감 res .cookie("x_auth", user.token) .status(200) .json({ loginSuccess: true, userId: user._id }); }); }); }); });위와 같이 작성된 코드를 app.post("/api/users/login", async (req, res) => { // 요청된 이메일을 데이터베이스에서 찾는다 try { const user = await User.findOne({ email: req.body.email }); if (!user) { return res.json({ loginSuccess: false, message: "제공된 이메일에 해당하는 유저가 없습니다", }); } // 요청된 이메일이 데이터베이스에 있다면 비밀번호가 맞는 비밀번호 인지 확인 const isMatch = await user.comparePassword(req.body.password); // 비밀번호가 틀릴 경우 if (!isMatch) { return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다", }); } // 비밀번호까지 맞다면 토큰을 생성하기 const token = await user.generateToken(); // 토큰을 저장한다. 쿠키 로컬스토리지 세션 등 // 여기서는 쿠키 사용 // x_auth라는 이름으로 토큰이 들어감 res .cookie("x_auth", token) .status(200) .json({ loginSuccess: true, userId: user._id }); } catch (err) { return res.status(400).json({ loginSuccess: false, error: err }); } });이렇게 변경했습니다. 그런데 postman으로 자꾸 실행해보면 비밀번호가 틀렸다는 오류를 받고 있습니다. 그리고 서버가 꺼지는 현상이 발생하고 있습니다. isMatch문이 잘못된 것 같아서 !isMatch 예외문을 주석처리하고 실행하면 서버가 바로 꺼져버리는 현상이 발생합니다. 어떻게 코드를 변경해야 할까요?그리고 console.log()로 오는 값들을 확인하고 싶은데 cossole.log()로 찍은 보고싶은 값을 어떻게 볼 수 있나요? http://localhost:5000/api/users/login 로 들어갔는데도 안보입니당..%% 이 코드를 /register로 postman을 보낼때는 정상적으로 작동하고 monogdb에도 잘 등록이 되서 다른 부분은 오류가 아닌 것 같습니다 %%%% 스키마 부분 코드도 첨부합니다 (선새인ㅁ과 똑같이 작성함) %%userSchema.methods.comparePassword = function (plainPassword, cb) { // plainPassword 는 입력한 값 데이터베이스 비밀번호는 $2b$10 등 으로 암호화 되어 있음 // 그러므로 plainPassword를 암호호 해야 함 // bcrypt를 이용해 암호화 bcrypt.compare(plainPassword, this.password, function (err, isMatch) { // this.password는 5번째줄에 userSchema에서 가져옴 if (err) return cb(err); cb(null, isMatch); }); }; userSchema.methods.generateToken = function (cb) { let user = this; // 데이터베이스의 id 를 넣고 이름을 정해준다. // 이후 secretToken을 입력하면 user._id가 나온다 let token = jwt.sign(user._id.toHexString(), "secretToken"); // user의 token에 방금 만든 token을 넣어준다. user.token = token; user.save(function (err, user) { if (err) return cb(err); cb(null, user); }); };
-
미해결코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
serach.ts 파일 질문드립니다.
select된 상태를 확인하기 위해 search.ts에서 selectAtom을 가져오셨는데 serach.ts 파일에 대한 코드가 강의에서 누락된 거 같습니다.추가로 섹션1에서 강의해주셨던 Navigation 컴포넌트 코드에 현재 굉장히 코드가 많이 추가됐던데 해당 부분 또한 모두 누락되어있습니다...뒤에 강의에서 일일이 찾아서 정지하고 따라치는데 너무 힘드네요 ㅠㅠ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
npm run dev 에러
script에서 dev를 못 찾는 다고 해서 scripts에서 s가 문제인가 해서 script 로 바꿨는데 이게 아닌가 봅니다 어떻게 하나요?{ "name": "front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next" }, "author": "Seung Won", "license": "ISC" }npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\USER\AppData\Local\npm-cache\_logs\2023-04-29T14_33_46_373Z-debug-0.log PS C:\Users\USER\Desktop\1080\new react\front> npm run dev npm ERR! Missing script: "dev" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\USER\AppData\Local\npm-cache\_logs\2023-04-29T14_34_59_051Z-debug-0.log
-
미해결코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
강의자료 소스코드 질문드립니다.
더미데이터를 강의 자료에 있는 소스코드에서 가져오면 된다고 하셨는데 아무리 찾아봐도 소스코드가 안보이네요 ㅜㅜ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
swr ssr 관련 질문드립니다.
getServersideProps에서 작성한 api는 ssr이든 csr이든 무조건 실행되는데 ssr시에만 실행하고 csr에서는 막을 방법이 없을까요?페이지에서 컴포넌트로 props 넘기지 않고 swr 설정해서 초기에 ssr은 잘 되는데 그 이후 클릭으로 csr 방식으로 다른페이지 이동했다가 다시 돌아왔을때swr 사용중이고 캐싱중임에도 불구하고 getServersideProps에서 작성한 api가 매번 호출되어 25.json?id=25이런식으로 데이터 받아와서 리렌더링되는데 막을 방법이 없을까요?
-
미해결코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
맵 클릭 이벤트 추가 강의와 Jotai 강의 순서에 대해 건의드립니다.
강의 순서로 보면 Jotai -> 맵 클릭 이벤트 추가인데 맵 클릭 이벤트 추가 강의가 앞에 있어서 atoms폴더와 initMap 코드를 작성한적이 없는데 왜있지?라는 혼란이 생겼습니다. 저는 혹시나 하는 마음으로 다음 강의를 봐서 알았지만 다른 수강생분들도 저와 같은 혼란이 생길 거 같아 맵 클릭 이벤트 추가와 Jotai 강의 순서 변경에 대한 건의를 드립니다! 강의는 너무 좋습니다..ㅎㅎ :)
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
히로쿠 말고 fix.io로 한 경우에는도메인주소를 어떻게 불러와야하나요?
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
람다강의에서 런타임 설정 편집부분
안녕하세요 제로초님람다 런타임 설정 편집부분 화면이 좀 바뀐거같아서 질문 남깁니다! 저는 이렇게 보입니다일단 index를 exports로 바꿨는데 이대로 그냥 저장하고,진행했더니 thumb파일도 안만들어지고 이미지도 평소에 잘뜨던게 undefined로 떠서 문제를 찾아보고 있었습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
문의 드립니다
안녕하세요 백엔드쪽로 준비하는 사람이면 로드맵으로 두개다 구매해도 우선 백엔드쪽 강의 수강만 집중하는것이 나을까요?아님 프론트-> 백엔드 순으로 하면 더 도움이될까요?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
axios로 http 요청시 req,res 로깅하는 방법을 찾고있습니다.
안녕하세요 nest.js 로깅 관련해서 질문 넣을게요 axios로 http 요청 주고받을때 req, res에서 로깅을 하고 싶은데요...검색해보면 https://stackoverflow.com/questions/55431189/nestjs-logging-the-request-response-from-httpservice-callsthis.httpService.axiosRef.interceptors.request.use(config => console.log(config)); 이렇게 사용하라고 추천해주셨는데, 혹시 req,res 로그를 보거나 쌓을 수있는 다른 방법이 있을까요?
