172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
선생님, 안녕하세요. 좋은 강의 너무 감사해요. 답변도 잘해주셔서 너무 감사해요. 선생님은 천재에요. 강의를 보다보니 (보통 prop을 받을 때) 어떤때는 type을 사용하시고, 어떤때는 interface를 사용하시던데, 각각 어떤 경우에 사용하시는 지 설명해주실수있을까요?
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
선생님 안녕하세요. 좋은강의 너무 감사드립니다! 다름이 아니라 이번 강의에서 MapSection.tsx에서 const MapSection = () => { const { initializeMap } = useMap(); const onLoadMap = (map: NaverMap) => { initializeMap(map); }; return ( <> <Map onLoad={onLoadMap} /> // 이부분 <Markers /> // 이부분 </> ); }; export default MapSection; 이런식으로 return값에 위에 Map 컴포넌트, 아래에 Markers컴포넌트가 왔잖아요. 그래서 저는 맵위에 마커들을 덮어씌우는(?)형식으로 나오게 될 줄 알았습니다. 그런데 결과를 보니, 이렇게 map div밑에 자식으로 들어가있더라구요. 어떻게 이렇게 되는지 설명해주시면 감사하겠습니다!!
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
Map.tsx에서 //Map.tsx if (onLoad) { onLoad(map); } 이 구문은 왜 쓰인걸까요?? MapSection.tsx 에서 Map을 부르는 부분을 봐도 // MapSection.tsx import Map from "./Map"; const MapSection = () => { return ( <Map onLoad={() => { console.log("load!"); }} /> ); }; export default MapSection; 별다른 기능을 하는 것 같지는 않아서요. onLoad를 정의하고 있는 Map.tsx의 Props에서도 type Props = { mapId?: string; initialCenter?: Coordinates; initialZoom?: number; onLoad?: (map: NaverMap) => void; }; 변수로 NaverMap을 받기만 하고 별다른 기능은 하는 것 같지가 않은데, 혹시 onLoad가 어떤 기능을 하고있는지 알려주실 수 있을까요?? ++ 추가로, const map = new window.naver.maps.Map(mapId, mapOptions); 이렇게 했을 때, 어떻게 <div id={mapId} style={{ width: "100%", height: "100%" }} /> 이 태그에 Map이 들어가는지 궁금합니다!
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
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, 기초부터 심화까지
프론트엔드에서 진행할 때는 이런 이상이 없었습니다 postman으로 로그인 했고, 바탕화면에서 바로 이미지 업로드하려고 하니 'This file isn't in your working directory' 라는 에러가 나와서 구글링하니 포스트맨으로 이미지 업로드하려면 지정된 경로에서 업로드해야한다고 하더라구요. 포스트맨 설정에서 경로 찾아서 C:\Users\admin\Postman\files에 업로드할 이미지 넣고, 다시 로그인 한 다음 강의대로 진행하니 아래 사진과 같이 나옵니다 Unauthorized이니 jwt와 컨트롤러 이미지 업로드 api의 JwtAuthGuard 부분이 문제라고 생각되는데.. 어떻게 확인을 해보면 될까요? 조언 부탁드립니다.
해결됨
Airflow 마스터 클래스
안녕하세요 mac 환경에서 강의를 수강하려고 합니다. 이러한 경우 wsl 설치 없이 다음 강의로 넘어가면 될까요??
미해결
탄탄한 백엔드 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 위와 같은 에러가 발생하며 프론트엔드가 웹 서버가 실행되지 않고 있습니다.. 이러한 상황에서는 어떻게 진행하면 좋을지 조언 부탁드립니다.
해결됨
실전 프로젝트로 배우는 데이터 앱 만들기 with Python & Streamlit
theme 적용시, 강사님께서 말씀해주신 것처럼 작업 폴더에 .streamlit 폴더를 만들고, 그 안에 config.toml 파일을 만들어 테마 적용을 했지만, 아래의 문구가 발생하며, 태마가 적용이 되지 않습니다. The page that you have requested does not seem to exist. Running the app's main page. 어떤 이유 인지 알려주세요.
미해결
2주만에 통과하는 알고리즘 코딩테스트 (2024년)
예제 문제는 잘 풀리는데 백준에 제출하니까 시간초과가 뜹니다 강의 자료랑 큰 차이는 없어 보이는데 어느 부분을 고쳐야 시간 안에 계산 가능할까요? #include <iostream> #include <cstdlib> using namespace std; int main(int argc, char **argv) { int n; int minX, minY, maxX, maxY; cin >> n; int arr[n][2]; for(int i=0; i<n; i++){ cin >> arr[i][0] >> arr[i][1]; } minX = arr[0][0]; maxX = arr[0][0]; minY = arr[0][1]; maxY = arr[0][1]; for(int i=1; i<n; i++){ if(arr[i][0]>maxX){ maxX = arr[i][0]; } else if(arr[i][0]<minX){ minX = arr[i][0]; } if(arr[i][1]>maxY){ maxY = arr[i][1]; } else if(arr[i][1]<minY){ minY = arr[i][1]; } } int arr_answer[n]; int arr_dis[n]; for(int i=minY; i<=maxY; i++){ for(int j=minX; j<= maxX; j++){ for(int l=0; l<n; l++){ int subY= 0, subX=0; subY = i-arr[l][1]; subX = j-arr[l][0]; arr_dis[l] = abs(subX) + abs(subY); } int sum = 0; for(int k=0; k<n; k++){ sum+=arr_dis[k]; if(i==minY && j ==minX){ arr_answer[k] =sum; } else if(sum < arr_answer[k]){ arr_answer[k] = sum; } } } } for(int i=0; i<n; i++){ cout << arr_answer[i] << " "; } return 0; }
해결됨
넓고 얕게 외워서 컴공 전공자 되기
안녕하세요 선생님! 동시성과 병렬성 관련해 기초가 약해 해당 강의를 들으면서 OS 부족한 부분을 많이 알게되어 도움이 많이되고 있습니다. 다름이 아니라 해당 강좌 범위는 벗어나지만.. 구글링해도 명확하게 해결되지 않아 질문 드립니다. 동시성을 구현하는 방법으로 멀티쓰레드 나 코루틴 방법으로 구현을 할 수있고 멀티쓰레드 방법에서 쓰레드 전환 간 context switch가 많기 때문에 오버헤드도 많아 Coroutine 방법을 많이 쓰고 또한 유저가 이벤트루프(스케쥴링)을 app에서 관리한다는 측면에서 디버그가 유용하다 정도로 이해하고 있습니다. 많은 블로그에서 멀티쓰레드보다 코루틴을 소개하면서 동시성 구현시 코루틴을 더 상위(혹은 좋은) 방법으로 서술이 많이 되어 있더라구요. I/O작업이 빈번할 경우 코루틴이 더 유리하다는 이해가 됩니다. 싱글스레드 + async 싱글스레드 멀티스레드 + async 멀티스레드 2개의 구현방법이 레이어가 다르다(thread와 task)보니 4가지 경우의 수를 적용할 수 있는데 실제 동시성을 적용해야되는 상황이면 어떻게 판단하고 최적의 구현방법(4가지 중 선택)을 적용할 수 있을까요? (파이썬 스택을 쓰고 있으며 GIL도 이해하고 있는 상태입니다.) 다시한번 해당 강의와 조금 벗어난 질문드려 죄송합니다. ( _ _ )
미해결
탄탄한 백엔드 NestJS, 기초부터 심화까지
안녕하세요 강의 잘 듣고 있습니다. res.on('finish', cb); 이벤트를 걸어뒀다고 가정하고 만약 어떤 request에 의한 비즈니스 로직 수행 중 적당한 예외처리가 되지 못해서 서버가 죽어버리는 로직을 거쳐 res를 쏘는 부분까지 도달하지 못했다면 해당 cb함수는 실행되지 않을거라고 생각했는데 맞을까요? (이렇게 되면.. 어떤 요청에 의해 프로그램이 죽었는지 알기 어려울 것 같다는 생각이 문득 들어서 질문드립니다)
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요 강의 정말 잘 듣고있습니다! 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. 지도 서비스 개발)
강의후반부에 window 에 접근하는 상황인 NoSSR 을 수강하면서 해당 상황이 어떤 케이스인지 확인차 질문 남깁니다. Next 에서 window 나 document 같이 WebAPI 에 기재된 객체들에 접근하는 코드를 쓸 때 백엔드 단에서 접근이 불가하니, dynamic 을 사용한다 정도로 이해하면 되려나요?.? 이와는 다르게, useEffect 의 경우 브라우저에서 렌더가 될 때 코드가 돌아가니까 WebAPI 에 접근이 가능하다 정도로 이해하면 되려나요?.?
해결됨
[신규 개정판] 이것이 진짜 크롤링이다 - 실전편 (인공지능 수익화)
안녕하세요 뉴스크롤링에서 크롤링 하고자 하는 뉴스의 기간을 정해주려면 response = requests.get(" https://search.naver.com/search.naver?where=news&sm=tab_jum&query=검색어 ") 위 코드의 " " 안에 뉴스기간을 옵션으로 설정하여 검색한 페이지의 URL을 긁어서 넣어주면 되는걸지요? 감사합니다.
미해결
Nuxt.js 시작하기
heroku 대신 npm run generate를 이용하여 gitgub 페이지에 배포하는 것 도 가능할까요?
해결됨
현재 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, 기초부터 심화까지
해당 에러를 해결하려고 철자라든가 패턴 잘못 작성한 게 있나 찾아봤는데 없네요..대체 어디가 문제인지 모르겠습니다
미해결
Nuxt.js 시작하기
1.nuxt.config.js 에서 baseurl 을 현재 window.location.origin 으로 설정할 수 있을까요..? 그리고 훅을 어떤 식으로 사용할 수 있는 건지 여쭤봅니다. 버전이 달라서 그런지 검색해서 나오는 값들을 그대로 적용하면 잘 안되네요.. 강의 소개만 듣고 중구난방 이상한 질문을 남깁니다.^^';; 2.그리고 nuxt.config.js에서 axio, ruoter 등이 실행은 되지만 빨간줄이 보이는 것도 문제가 된다고 하면 어떻게 대처해야할지도 질문드립니다. 감사합니다.
