묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
시작부터 오류생기시는 분들 해결법입니다.
boiler plate폴더의 루트 디렉토리의 package.json 에서 bcrypt 를 없애고 npm install 을 해줍니다.이후 npm install bcryptjs --save 를 루트 디렉토리에 설치해줍니다.sever > models > User.js 에서 상단의 const bcrypt = require('bcryptjs') 로 변경해줍니다.sever > models > User.js 파일의 85번째 줄의 "_id" : decoded 부분을 decode 로 변경해줍니다.client폴더로 넘어가서 package.json 은 건들지 않고 npm install 을 해줍니다.위치를 boiler plate 폴더의 루트 디렉토리로 넘어가서 npm run dev 를 실행시켜줍니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
오류 해결 공유
서버에서 npm install 오류 bcrypt 버전을 최신으로 올려주세요.저는 5.1.1 버전입니다.npm run dev 오류시 [오류내용]client -> package.json -> react-scripts 버전을 수정하세요. *package.json을 수정하면 npm install을 다시 진행해서 node_modules을 다시 설치해야 됩니다.npm run dev 실행 후 오류해당 파일을 찾아이 부분을 수정해주면 됩니다. setupMiddlewares: (middlewares, devServer) => { if (!devServer) { throw new Error('webpack-dev-server is not defined') } if(fs.existsSync(paths.proxySetup)) { require(paths.proxySetup)(devServer.app) } middlewares.push( evalSourceMapMiddleware(devServer), redirectServedPath(paths.publicUrlOrPath), noopServiceWorkerMiddleware(paths.publicUrlOrPath) ) return middlewares; },
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
9장 추가과제 (캐싱)
안녕하세요9장 추과과제 중 캐싱까지 만들었는데문제는 회원정보가 업데이트가 되었을때캐싱으로 인해 화면에서 데이터가 바로 바뀌지 않는데어떤 방법으로 해야할지 감이 잡히지 않아서요힌트좀 주시면 감사하겠습니다..
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
AWS-SDK를 사용하여 S3에 이미지를 저장할때 이 경로를 DB에 저장하려면 어떻게 해야하나요?
강의 따라 진행하며 프론트엔드에서 Image Upload 버튼을 눌러서 이미지를 선택하였을때AWS S3에 저장되는 것까지는 확인이 되었습니다. 다만 DB에서는 기존 이미지 경로 그대로여서 업데이트한 이미지가 적용되지 않고 있는데, 여기서는 어떻게 진행하면 좋을까요? S3 사용 전에는 cats.repository에서 save 메소드 사용하여 새로 갱신된 이미지 파일 경로를 저장하는 과정이 있었듯이async findByIdAndUpdateImg(id: string, fileName: string) { const cat = await this.catModel.findById(id); cat.imgUrl = fileName; const newCat = await cat.save(); // DB에 내용 저장 console.log(newCat); return newCat.readOnlyData; } aws.service의 S3 저장하는 구간 중간에 db에 저장하는 과정을 추가해주면 될 것 같은데..언어 실력이 부족하여 어떻게 시도를 해야할지 감이 잡히질 않습니다.async uploadFileToS3( folder: string, file: Express.Multer.File, ): Promise<{ key: string; s3Object: PromiseResult<AWS.S3.PutObjectAclOutput, AWS.AWSError>; contentType: string; }> { try { const key = `${folder}/${Date.now()}_${path.basename( file.originalname, )}`.replace(/ /g, ''); const s3Object = await this.awsS3 .putObject({ Bucket: this.S3_BUCKET_NAME, Key: key, Body: file.buffer, ACL: 'public-read', ContentType: file.mimetype, }) .promise(); return { key, s3Object, contentType: file.mimetype }; } catch (error) { throw new BadRequestException(`File upload failed : ${error}`); } } 조언 부탁드립니다..
-
미해결MERN 스택으로 만드는 지도서비스(+ TypeScript)
Node.js 버전 차이로 인한 오류 발생(추정)
보일러 플레이트에서 npm run start를 할 경우{ opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' }에러가 발생하며 페이지가 표시되지 않습니다.스텍오버플로우에서 찾아본 결과, 검색결과 노드17이후로 발생하는 오류라고 하는데 아직 입문자라 실례가 안된다면노드js 20버전용으로 보일러 플레이트 파일 업데이트 가능할까요?
-
미해결[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
mysql 챕터에 있는 테이블은 도대체 어디에 있는가??
수업자료 라고 링크 걸려 있는 곳에도 없고..테이블을 화면 보고 알아서 만들라는 건가..내가 못 찾는 건가..
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
채팅방을 만든 브라우저에서 모두 나갔을 경우 문의드립니다.
채팅방에 모두 나가기를 했는데요, 이상하게 채팅방을 만든 브라우저에서는 방이 바로 없어지지않고, 새로고침을 해야 제거가되는데 이러면 안되는건가요..?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
403 forbidden error
npm run dev를 하고 크롬에 local 창을 띄운 후 개발자모드로 console을 확인했는데요.창은 정상적으로 뜨지만 GET http://localhost:3000/api/users/auth 403 (Forbidden) 이렇게 오류가 납니다.왜그런건가요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
401, Unauthorized가 뜹니다. 혹시 다른 분들은 잘되시나요?
프론트엔드에서 진행할 때는 이런 이상이 없었습니다 postman으로 로그인 했고, 바탕화면에서 바로 이미지 업로드하려고 하니'This file isn't in your working directory' 라는 에러가 나와서 구글링하니포스트맨으로 이미지 업로드하려면 지정된 경로에서 업로드해야한다고 하더라구요.포스트맨 설정에서 경로 찾아서 C:\Users\admin\Postman\files에 업로드할 이미지 넣고, 다시 로그인 한 다음 강의대로 진행하니 아래 사진과 같이 나옵니다Unauthorized이니 jwt와 컨트롤러 이미지 업로드 api의 JwtAuthGuard 부분이 문제라고 생각되는데..어떻게 확인을 해보면 될까요? 조언 부탁드립니다.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
findCatByIdWithoutPassword 함수 리턴 타입 질문
async findCatByIdWithoutPassword(id: string): Promise<Cat | null> { const cat = await this.catModel.findById(id).select('-password'); return cat; } 위 함수에서 Pomise의 반환값이 Cat 또는 null인데 cat은 password가 없는 Cat이라서 Cat이라고 할 수 없는데 return을 cat으로 해도 에러가 안나는 이유를 알고 싶습니디.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
프론트엔드 코드 실행시 에러가 발생합니다.
>> 갱신, 2023. 10. 06해결했습니다.https://github.com/amamov/teaching-nestjs-a-to-z/tree/frontend위 링크 설명 따라 nestjs root 디렉토리에서 git clone 받고,npm install, npm run dev 하니까 잘 실행되네요$ npm run dev > frontend@0.1.0 dev > next start ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Loaded env from C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\.env 잘못된 파일을 받았던것 같습니다..어느 질문글에서 본 링크 따라서 들어가서 받았던거로 기억하는데..어느 글이었는지 다시 찾아도 보이지 않네요.. >> 질문글, 2023. 10. 04학습자료 frontend를 다운 받았고, 이 폴더를 05 NestJS 실전 프로젝트와 같은 위치에 두었습니다.이후 프론트엔드 코드 실행 방법 강의를 보고frontend 디렉토리로 들어가 npm i를 입력하였습니다admin@DESKTOP-ALLM3V0 MINGW64 ~/OneDrive/바탕 화면/learning_NestJS/frontend (master) $ npm i npm WARN old lockfile npm WARN old lockfile The package-lock.json file was created with an old version of npm, npm WARN old lockfile so supplemental metadata must be fetched from the registry. npm WARN old lockfile npm WARN old lockfile This is a one-time fix-up, please be patient... npm WARN old lockfile npm WARN deprecated @types/antd@1.0.0: This is a stub types definition for antd (https://github.com/ant-design/ant-design). antd provides its own type definitions, so you don't need @types/antd installed! npm WARN deprecated @types/axios@0.14.0: This is a stub types definition for axios (https://github.com/mzabriskie/axios). axios provides its own type definitions, so you don't need @types/axios installed! npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. added 368 packages, and audited 369 packages in 24s 48 packages are looking for funding run `npm fund` for details 15 vulnerabilities (3 moderate, 7 high, 5 critical) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details.위와 같이 경고 메세지가 나왔고... 이 상태에서 npm run dev를 입력하였더니admin@DESKTOP-ALLM3V0 MINGW64 ~/OneDrive/바탕 화면/learning_NestJS/frontend (master) $ npm run dev > frontend@0.1.0 dev > next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Loaded env from C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\.env info - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5 Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at BulkUpdateDecorator.hashFactory (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:133790:18) at BulkUpdateDecorator.update (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:133692:50) at OriginalSource.updateHash (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack-sources2\index.js:1:19148) at NormalModule._initBuildHash (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65772:17) at handleParseResult (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65837:10) at C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65928:4 at processResult (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65651:11) at C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65711:5 Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at BulkUpdateDecorator.hashFactory (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:133790:18) at BulkUpdateDecorator.update (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:133692:50) at OriginalSource.updateHash (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack-sources2\index.js:1:19148) at NormalModule._initBuildHash (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65772:17) at handleParseResult (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65837:10) at C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65928:4 at processResult (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65651:11) at C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65711:5 node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen); ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at BulkUpdateDecorator.hashFactory (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:133790:18) at BulkUpdateDecorator.update (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:133692:50) at OriginalSource.updateHash (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack-sources2\index.js:1:19148) at NormalModule._initBuildHash (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65772:17) at handleParseResult (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65837:10) at C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65928:4 at processResult (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65651:11) at C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65711:5 { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } Node.js v18.16.0위와 같은 에러가 발생하며 프론트엔드가 웹 서버가 실행되지 않고 있습니다..이러한 상황에서는 어떻게 진행하면 좋을지 조언 부탁드립니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
레디스 에러
redis는 4.6.10 버전 쓰고 있고 connect-redis는 7.1.0 버전을 쓰고 있습니다. 레디스 코드를 깃허브에 업데이트 된 것 처럼 수정해 주었는데 로그인을 하려니 C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\RESP2\encoder.js:17 throw new TypeError('Invalid argument type'); ^ TypeError: Invalid argument type at encodeCommand (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\RESP2\encoder.js:17:19) at RedisCommandsQueue.getCommandToSend (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\commands-queue.js:138:45) at Commander._RedisClient_tick (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:519:76) at Commander._RedisClient_sendCommand (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:506:82) at Commander._RedisClient_legacySendCommand (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:460:105) at Commander.sendCommand (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:432:114) at <computed> [as set] (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:478:27) at Object.set (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\connect-redis\dist\cjs\index.js:24:34) at RedisStore.set (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\connect-redis\dist\cjs\index.js:71:39) at Session.save (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\express-session\session\session.js:72:25) Emitted 'error' event on Commander instance at: at C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:466:31 Node.js v18.16.0이런 에러가 뜨는데 버전 문제인가요? 모듈 내부적으로 발생한 거라 어디를 손봐야 할 지 모르겠습니다.참고로 세션 객체는Session { cookie: { path: '/', _expires: null, originalMaxAge: null, httpOnly: true, secure: false } }이렇게 찍혔습니다.
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
axios 이용해서 백엔드로 이미지 전송 중 새로고침
안녕하세요 강사님.현재 axios 이용해서 백엔드로 이미지 전송하기 강의 수강 중npm i axios로 Axios 모듈 설치 후다음과 같이 코드 작성, npm run start 후 제출 버튼 누를 때 계속하여 새로고침이 됩니다.. ㅠ 원래라면 preventDefault로 새로고침이 되지 않아야 할텐데계속해서 새로고침이 되는 문제입니다. 혹시 문제가 뭘까요? ㅠ
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
res.on('finish')
안녕하세요 강의 잘 듣고 있습니다.res.on('finish', cb); 이벤트를 걸어뒀다고 가정하고 만약 어떤 request에 의한 비즈니스 로직 수행 중적당한 예외처리가 되지 못해서 서버가 죽어버리는 로직을 거쳐 res를 쏘는 부분까지 도달하지 못했다면해당 cb함수는 실행되지 않을거라고 생각했는데 맞을까요?(이렇게 되면.. 어떤 요청에 의해 프로그램이 죽었는지 알기 어려울 것 같다는 생각이 문득 들어서 질문드립니다)
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
고양이 정보 커뮤니티 프론트앤드와 합칠 때 오류
일단 먼저 제 상황을 말씀드릴게요 섹션 4에 강의 협업을 위한 API만들기와 CORS 문제 강의를 듣던중 프론트앤드 파일을 다운받아서 프론트앤드 파일을 열고 회원가입을 해보는 부분에서 프론트 앤드 파일이 열리지 않았습니다.강의가 작성 된지 시간이 오래 된 것인지 아니면 제가 아직 고양이 정보 커뮤니티에 대한 강의를 다 듣지 못해서 인지 확신이 되지 않아 강사님의 깃허브 05 실전 프로젝트 파일을 다운받아 npm i 로 전부 설치했고(이 때도 워낙 버전이 달라서 버전 fix 를 하는 과정이 필요했습니다.) 그리고 프론트 부분의 파일도 받아서 cd로 프론트파일쪽 폴더로 접근한다음 npm i 로 프론트에 해당하는 패키지까지 전부 설치했습니다. ( 프론트쪽 버전은 백보다 더욱 심각해서 npm install react@latest react-dom@latest 이 명령어를 쳐서 버전업을 하지 않으면 아에 오류가 뜨는 정도였습니다..) 어쨋든 이러한 과정을 마치고 localhost:3000/signup 을 실행하면 이런식으로 오류가 생기면서 되질않았습니다. 이건 일부분의 오류이고 훨씬 더 많은 오류가 생겼습니다.하나하나 다 열거하기 힘들정도라서 개인적으로 이 코드들을 수정하는것이 제 수준에선 불가능했습니다.질문에 답변하신 것을 보니 2023년에도 호환성에 문제가 없다고 되어있는데 진짜 그런지 잘모르겠습니다.
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
ImageList 컴포넌트에서 업로드 한 사진을 리스트에서 바로 보기 위해 이 방법도 괜찮나요??
ImageList 컴포넌트 안에 있는 useEffect 종속배열 안에 images를 넣게 되면 images가 변경될 때마다 get을 호출해서 사진을 불러오기 때문에 결과적으로 사진을 업로드하면 리스트에 바로 보여지긴 하는데 안 좋은 방법인가요? 선생님께서 ContextAPI를 사용해 관리하는 것과 제가 생각한 방법의 장단점이 궁금해요 const [images, setImages] = useState([]); useEffect(() => { axios .get("/images") .then((res) => setImages(res.data)) .catch((err) => console.log(err)); }, [images]); // images 추가!
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
이미지 처음 올릴 때만 나타나는 오류
사이트 열고 이미지 "처음" 올릴 때 이런 오류가 떠요,근데 그 이후로 사진 올리면 정상적으로 올라가요 저런 오류 안뜨고..이유가 뭘까요?ㅠ...코드 강의 제대로 다 했는데...
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
user에 delete 관련 속성이 없다는 에러가 발생합니다.
해당 에러를 해결하려고 철자라든가 패턴 잘못 작성한 게 있나 찾아봤는데 없네요..대체 어디가 문제인지 모르겠습니다
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
시퀄라이즈 강좌 내실 생각 있으신가요?
강사님 안녕하세요이번에 스프링 JPA를 공부하면서, Express.js에서 사용했던 시퀄라이즈가 생각났는데. 시퀄라이즈를 자세하게 다뤄주시는 강좌를 내주실 생각 있으신가요?언제가 될지는 모르겠지만, 제가 나중에 다시 Node.js 백엔드 개발을 공부하게 된다면 그 강의를 신청할 의향이 있어서요
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
리액트에서 post img불러오기
저는 html대신 react를 사용해서 프로젝트를 진행중인데요.단순히 html로 프로젝트를 진행할 때는 아무 이상없이 미리보기 이미지도 잘 나오고 이미지 정보도 db에 저장이 잘됩니다.그런데 react를 사용해서 하면 미리보기 이미지가 불러와지지 않습니다.그래서 구글링해본 결과 파일 경로 앞에 http://localhost:8005를 붙어야 한다, encodeURI함수를 이용해서 경로를 변환시켜줘여 한다. 등 나와있는 정보대로 해보았지만 다 안되네요..그러다가 FileReader를 사용해서 파일 경로를 데이터URI형식으로 변환해야 한다고 해서 해봤는데 이걸 사용하며는 img가 잘나오더군요. 문제는 FileReader를 사용하여 파일을 변환하면 파일의 경로가 너무 길어져 413에러가 발생합니다..그래서 리액트에서는 대체 어떻게 img를 다뤄야 할지 잘 모르겠습니다..아래 코드들은 리액트에서 다양한 방법으로 경로 설정을 하고 그 후 개발자 도구에서 복사해온 태그들 입니다.물론 한개도 제대로 나온 이미지는 없습니다1.html로 프론트를 다뤘을때랑 같은 코드(실행은 리엑트에서 하고 단순히 html로 실행하면 아래 태그는 잘 나옴)<img id="image-preview" src="img/áá ³áá ³á á µá«áá £áº%202023-08-31%20áá ©áá ®%201.54.471694844382032.png" alt="미리보기" />2.local주소 붙이고 encodeURI로 경로 변환<img id="image-preview" src="http://localhost:8005/img/%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202023-08-31%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%201.54.471694844547805.png" alt="미리보기"></img>이런식으로 encodeURI랑 로컬주소 고려해서 경우의 수 4가지 다 해봤는데 안됐습니다.