묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] 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만 이렇게 써야되는 규칙인가요?
-
미해결코로나맵 개발자가 알려주는 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 로그를 보거나 쌓을 수있는 다른 방법이 있을까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
lamda폴더
안녕하세요 제로초님 저는 폴더 구조를 한 폴더안에 프론트 백엔드 담겨있지않고 다 따로 두고 있는데 그럴경우에 람다도 따로 보관해도 되는지 궁금합니다 아니면 지금 임시로 백엔드 폴더 안에 두고 진행하고있는데 괜찮은지 궁금합니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Link적용하기 강의에서 useParams 쓰면 에러가 뜹니다.
좋은 강의 너무 감사드립니다. 강의 10:40 부분에 useParams 사용하는 부분에서:const params = useParams();console.log(params); 이거 입력한 후에 리프레쉬 한후 각자 아이템을 누르면, 밑에 화면이 뜹니다. 뭐가 잘못된 건지 잘 모르겠어요..
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
axios를 다운받을때 특정한 폴더에서 받아야 하나요?
Axios 를 다운 받을때, 꼭 특정한 폴더에서 받아야 하는 건가요? Node-modules 랑 json.package 가 public 폴더 밑으로 또 생겨있고, nom start 누르면 Axios error 라고 뜹니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
graphQL에서 @apollo/server의 port번호는 4000번으로 default가 되어있는것 같습니다.
v3버전 이후로는 server.listen에 대한 값이 없는것같아서 port번호를 4000번으로 기본설정해놓는걸 console.log로 확인할 수 있는 방법과 혹시 port번호를 변경하고자 할때는 어떻게 해야하는지 알 수 있을까요?계속 해메고 있네요,,,
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
VSCode 백틱(``) 내의 글자 색상
안녕하세요.강의를 보면 강의자님의 VSCODE 에서는 백틱 내에서도변수, 함수 등이 글자 색상이 각각 다르게 표현됩니다.그런데 제 VSCODE에서는 백틱 내에서는 모두주황색으로 나옵니다.이 부분은 어떻게 옵션을 바꿔야하나요?구글링해도 못 찾겠네요.
