묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
dynamic에 대한 질문
NoSSR도 useEffect와 같이 실행되는 건가요? 선생님 안녕하세요. 좋은강의 너무 잘 듣고있습니다. 감사합니다.윈도우 크기를 변경했을 때, width의 값이 같이 변경되는게 신기해서 질문드립니다.useEffect안의 math.random()의 값이 변경되는 타이밍에 window의 width값도 같이 변경되더라구요. 제 생각에는, 랜덤값이야 useEffect안에서 setData를 통해 계속 바꿔주고 있으니 변경되는게 맞다고 생각했지만, window값은 처음 값을 받아오면 새로고침을 해주기 전까지는 값이 변경되지 않을줄 알았거든요. 그런데 랜덤값이 변경될 때 값이 같이 변경되더라구요. 그래서 혹시 이게 dynamic이 useEffect와 같은 역할을 한다면, window크기를 변경할 때마다 width의 값이 바로바로 바껴야 할 텐데, 그건 또 아니고 랜덤값이 바뀔때 같이 바뀌니까, 이게 어떤식으로 실행되는건지 알고싶어서 질문드립니다. import { NextPage } from "next"; import dynamic from "next/dynamic"; import { useEffect, useState } from "react"; // import NoSSR from "@/components/section1/NoSSR"; const NoSSR = dynamic(() => import("@/components/section1/NoSSR"), { ssr: false, }); const Example: NextPage = () => { const [data, setData] = useState(0); useEffect(() => { const delayInSeconds = 10; new Promise<number>((resolve) => setTimeout(() => resolve(Math.random()), delayInSeconds * 1000) ).then((result) => setData(result)); console.log("NoSSR : ", NoSSR); }); return ( <main> <h1>Client - Side data fetching</h1> <p>값 : {data}</p> <NoSSR /> </main> ); }; export default Example; 위 코드는 강의 보면서 따라치고, 궁금해서 로그를 찍어본 코드입니다. 딜레이를 10초로 주고, 그 안에서 윈도우 크기를 계속 바꿔봤는데, 윈도우 크기를 바꾼다고 해서 바로바로 변경되는 게 아니라, 10초가 지나고 랜덤값이 바뀔 때, 같이 바뀝니다.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
401, Unauthorized가 뜹니다. 혹시 다른 분들은 잘되시나요?
프론트엔드에서 진행할 때는 이런 이상이 없었습니다 postman으로 로그인 했고, 바탕화면에서 바로 이미지 업로드하려고 하니'This file isn't in your working directory' 라는 에러가 나와서 구글링하니포스트맨으로 이미지 업로드하려면 지정된 경로에서 업로드해야한다고 하더라구요.포스트맨 설정에서 경로 찾아서 C:\Users\admin\Postman\files에 업로드할 이미지 넣고, 다시 로그인 한 다음 강의대로 진행하니 아래 사진과 같이 나옵니다Unauthorized이니 jwt와 컨트롤러 이미지 업로드 api의 JwtAuthGuard 부분이 문제라고 생각되는데..어떻게 확인을 해보면 될까요? 조언 부탁드립니다.
-
미해결탄탄한 백엔드 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위와 같은 에러가 발생하며 프론트엔드가 웹 서버가 실행되지 않고 있습니다..이러한 상황에서는 어떻게 진행하면 좋을지 조언 부탁드립니다.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
res.on('finish')
안녕하세요 강의 잘 듣고 있습니다.res.on('finish', cb); 이벤트를 걸어뒀다고 가정하고 만약 어떤 request에 의한 비즈니스 로직 수행 중적당한 예외처리가 되지 못해서 서버가 죽어버리는 로직을 거쳐 res를 쏘는 부분까지 도달하지 못했다면해당 cb함수는 실행되지 않을거라고 생각했는데 맞을까요?(이렇게 되면.. 어떤 요청에 의해 프로그램이 죽었는지 알기 어려울 것 같다는 생각이 문득 들어서 질문드립니다)
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
SSR vs SSG
안녕하세요 강의 정말 잘 듣고있습니다!SSG가 SSR보다 사용자 경험이 좋은건 이해했습니다! 근데 한가지 더 의문점인건 SSG가 아니고 SSR을 선택해야하는 케이스가 있을까요? 라는 의문이 듭니다! 예를 들면 검색결과 페이지라던가 매번 매순간 페이지의 내용이 달라지는 페이지라면 SSG가 아니고 SSR로 만드는게 더 적합한 그런 케이스가 실무에서 있을까요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
고양이 정보 커뮤니티 프론트앤드와 합칠 때 오류
일단 먼저 제 상황을 말씀드릴게요 섹션 4에 강의 협업을 위한 API만들기와 CORS 문제 강의를 듣던중 프론트앤드 파일을 다운받아서 프론트앤드 파일을 열고 회원가입을 해보는 부분에서 프론트 앤드 파일이 열리지 않았습니다.강의가 작성 된지 시간이 오래 된 것인지 아니면 제가 아직 고양이 정보 커뮤니티에 대한 강의를 다 듣지 못해서 인지 확신이 되지 않아 강사님의 깃허브 05 실전 프로젝트 파일을 다운받아 npm i 로 전부 설치했고(이 때도 워낙 버전이 달라서 버전 fix 를 하는 과정이 필요했습니다.) 그리고 프론트 부분의 파일도 받아서 cd로 프론트파일쪽 폴더로 접근한다음 npm i 로 프론트에 해당하는 패키지까지 전부 설치했습니다. ( 프론트쪽 버전은 백보다 더욱 심각해서 npm install react@latest react-dom@latest 이 명령어를 쳐서 버전업을 하지 않으면 아에 오류가 뜨는 정도였습니다..) 어쨋든 이러한 과정을 마치고 localhost:3000/signup 을 실행하면 이런식으로 오류가 생기면서 되질않았습니다. 이건 일부분의 오류이고 훨씬 더 많은 오류가 생겼습니다.하나하나 다 열거하기 힘들정도라서 개인적으로 이 코드들을 수정하는것이 제 수준에선 불가능했습니다.질문에 답변하신 것을 보니 2023년에도 호환성에 문제가 없다고 되어있는데 진짜 그런지 잘모르겠습니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
NoSSR 관련한 질문입니다:)
강의후반부에 window에 접근하는 상황인 NoSSR을 수강하면서 해당 상황이 어떤 케이스인지 확인차 질문 남깁니다.Next에서 window나 document같이 WebAPI에 기재된 객체들에 접근하는 코드를 쓸 때 백엔드 단에서 접근이 불가하니, dynamic을 사용한다 정도로 이해하면 되려나요?.? 이와는 다르게, useEffect의 경우 브라우저에서 렌더가 될 때 코드가 돌아가니까 WebAPI에 접근이 가능하다 정도로 이해하면 되려나요?.?
-
미해결Nuxt.js 시작하기
npm run generate 배포
heroku 대신 npm run generate를 이용하여 gitgub 페이지에 배포하는 것 도 가능할까요?
-
해결됨
(Next.js) 전역 상태 관리할 때...
현재 Next 13 APP라우팅 방식으로 프로젝트를 하고 있습니다.프로젝트에서 전역상태관리를 위해서 ContextAPI를 이용하고 Provider를 아래와 같은 방법으로 적용을 시켜줬습니다.(layout.js)return ( <html> <body> <Provider> {children} </Provider> </body> </html> )(Provider.js)'use client' //생략 export default function Provider({children}) { return ( <ContextProviber> {children} </ContextProviber> ) }이렇게 Provider로 감싸주었더니 'use client'를 사용하여 CSR환경에서 작동해야 한다고 하더라구요. 그래서 "use client"까지 적용했는데이렇게 'use client'로 작성된 component로 감싸면 이 아래오는 모든 코드가 SCR로 적용되는 건가요?만약 이게 맞다면 SSR의 장점을 전혀 살리지 못하는 것인데 어떻게 해결할 수 있나요?
-
미해결Nuxt.js 시작하기
캡틴판교 선생님 너무 궁금해서 질문드립니다 ㅜ
캡틴판교 선생님 너무 궁금해서 질문드립니다 ㅜ 흔히 CSR은 SEO 최적화가 어렵다고 하는데 최적화가 어렵지 기본적인 메인 홈페이지는 검색이 되는게 맞죠? 시작이되는 index.html의 소스의 <head></head> 태그안에 meta 태그 속성 중 네임과 컨텐트,그리고 타이틀 태그로 인해서, 기본적인 메인 홈페이지는 검색이 되는것 맞나요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
user에 delete 관련 속성이 없다는 에러가 발생합니다.
해당 에러를 해결하려고 철자라든가 패턴 잘못 작성한 게 있나 찾아봤는데 없네요..대체 어디가 문제인지 모르겠습니다
-
미해결Nuxt.js 시작하기
nuxt.config.js 에서 baseurl 지정하는 방법
1.nuxt.config.js 에서 baseurl 을 현재 window.location.origin 으로 설정할 수 있을까요..?그리고 훅을 어떤 식으로 사용할 수 있는 건지 여쭤봅니다.버전이 달라서 그런지 검색해서 나오는 값들을 그대로 적용하면 잘 안되네요..강의 소개만 듣고 중구난방 이상한 질문을 남깁니다.^^';;2.그리고 nuxt.config.js에서 axio, ruoter 등이 실행은 되지만 빨간줄이 보이는 것도 문제가 된다고 하면 어떻게 대처해야할지도 질문드립니다.감사합니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
a tag 질문 !
안녕하세요 !강의 중에 a tag를 감싸고 있는 컴포넌트를 만들경우라고 하셨는데 useRouter나 Link를 쓰게 되면 a tag를 굳이 안써도 되지 않을까 생각하는데 그럼에도 불구하고 a tag를 쓰는 경우가 있을까요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
8분 20초 배포 관련
안녕하세요!마지막에 8:20에 나오는 설명대로 commit을 나누어서 진행하고 push and build를 하였는데 아래와 같이 error가 발생하고 있습니다. 어떤 부분이 문제인지 궁금합니다Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error SyntaxError: Unexpected token < in JSON at position 0 Error: Export encountered errors on following paths:/ 아래에 코드로 build하면 정상적으로 동작합니다..const stores = (await import('../public/stores.json')).default
-
미해결Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요! 구글 서치 콘솔에 등록하는 도중 다음 오류가 뜹니다
아니요: 'X-Robots-Tag' http 헤더에서 'noindex'가 감지됨페이지 색인을 생성할 수 없음: ‘NOINDEX’ 태그에 의해 제외되었습니다. 라고 뜨는데,Robots.txt 도 제 url 에 맞춰서 변경했는데 뭐가 문제가 되는지 모르겠습니다..!네이버 서치어드바이저에는 잘 등록된 상태 입니다.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
app.module.ts 하는도중에
화면처럼 AppModule에 붉은 줄이 떠서 확인을 해보니'AppModule' 클래스가 'NestModule' 인터페이스를 잘못 구현합니다. 'configure' 속성이 'AppModule' 형식에 없지만 'NestModule' 형식에서 필수입니다.ts(2420)nest-module.interface.d.ts(6, 5): 여기서는 'configure'이(가) 선언됩니다.라고 뜨는데 어떤식의 해결을 해야할 지 모르겠습니다.
-
미해결Nuxt.js 시작하기
db.json 안에 이미지 아래 본문 처럼 바꾸면 랜덤으로 나옵니다.
{ "id": 0, "name": "Refined Fresh Chicken", "price": "209.00", "imageUrl": "https://picsum.photos/id/{id}/640/480" }, return { products: data.map(item => ({ ...item, imageUrl: item.imageUrl.replace('{id}', Math.floor(Math.random() * 30)) })) }
-
미해결Nuxt.js 시작하기
axios 설치 후 새로고침 시 에러 발생할 때 해결 방법 입니다.
// next.config.js build: { transpile: [({ isLegacy }) => isLegacy && 'axios'] }, git clone 받지 않고 하다 보니 계속 에러 발생해서 찾아보니 위처럼 코드 추가해 주면 에러 발생 안 합니다.다만 axios외 다른 라이브러리에서 버전 관련 문제가 있을 수 있을 것 같긴 합니다.사실 위처럼 안 하고 axios 버전을 낮춰서 설치 하시거나 clone 받아서 하시면 문제없을 것 같습니다.axios 버전 관련 링크
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
emotion styles 파일이 빌드시 경고로 뜹니다.
저는 scss 대신 emotion 스타일을 사용하고 컴포넌트or 페이지를 스타일 파일과 한폴더에 넣어 사용합니다 (아래와 같은 폴더구조)페이지 폴더가 라우트 기능을 해서인지 다음과 같이 빌드 최적화에 실패햇다고 뜨는 현상이 있는데 컴포넌트폴더 에서는 문제없이 되는데 페이지 폴더에서만 이렇게 되는 원인이 무엇인가요?또 해당 페이지를 컴포넌트로 이동신후 페이지에서 단순 호출만 하게 한다면 최적화가 정상적으로 되는건가요?
-
미해결Next.js 시작하기(feat. 지도 서비스 개발)
naver map 이 출력되지 않습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 네이버 클라우드 플랫폼에도 사용횟수는 늘어나고 있고 css를 건드려봐도 map이 생성이안되서 height 100% 가 먹히질 않고있습니다.. 뭐가문제일까요 ㅠㅠ++ 개발자 도구 Network 를 열어봐도 잘 받아오고잇고 지도 이미지도 받아오는것을 확인 하였습니다.