묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
CSR에서 window나 document를 접근할수 없다는 부분이 이해가 잘 안갑니다.
CSR 부분 강의를 듣던도중 useEffect 바깥에서 window나 document를 접근하는 경우 문제가 되는것을 알게 되었습니다.강의에서는 초기에 값이 들어있지않은 html을 프리렌더링해서 제공한다고 설명하고 있는데 이부분에서 의문점이 있습니다. 1. 제가 기존에 알고있던 CSR은 프리렌더링을 하지 않는걸로 알고 있었는데그러면 결국 프리렌더링 이라는것은 SSR SSG ISR CSR 까지 모두 적용되고있는 방식인가요? 2. 프리렌더링을 하는것이 맞다면, 저같은 경우 일전에 했던 리액트 프로젝트를정적 파일을 저장하는 aws S3에 배포해본적이 있는데 이것이 가능했던 이유가서버에서 렌더링을 진행하기 않기때문에 가능한것이라고 알고 있었습니다.그렇다면 S3에서 CSR만 적용된 리액트 프로젝트를 배포할수있는 이유는 무엇인가요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
보안 관점에서의 SSR과 CSR 선택지
개인정보 페이지같은 보안이 중요한경우 CSR보다 SSR을 적용하는게 좋다고 하셨는데 오히려 검색엔진의 정보수집때문에(SEO) 개인정보를 노출할수도 있지 않나요? 검색을 해보니 이런 주장을 하는 분들도 계셔서요요청을 최소화 하냐 vs 정보수집에 노출되지 않도록 하냐 이 두개의 충돌같은데 어떻게 생각하시는지 궁금합니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
3분 쯤에 자바스크립트 파일을 캐시한다는 의미가 궁금합니다.
먼저 좋은 강의 해주셔서 감사합니다. 궁금한 점은 CSR이 자바스크립트 파일을 캐시한다고 하셨는데 여기서의 캐시가 브라우저가 state값을 계속 가지고 있다는 것인지 아니면 브라우저가 js파일을 가지고 계속 동적으로 렌더링 할 때 사용한다는 의미인가요? 둘 다 아니라면 캐시의 의미가 궁금합니다. 다시 한 번 좋은 강의 감사드려요
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
getServerSideProps cache가 되지 않을 때
안녕하세요 강사님. getServerSideProps 강의를 보고 실습중에 캐시가 되지 않아 질문드립니다. 다음과 같이 코드를 작성하고, getServerSideProps 페이지에서 로드된 html 문서의 헤더를 보면 캐시 정보가 나오지 않고 캐시가 되지 않는데 이유를 알 수 있을까요..?import type { GetServerSideProps, NextPage } from 'next'; type Props = { data: number; }; const Example: NextPage<Props> = ({ data }) => { return ( <main> <h1>getServerSideProps Page!</h1> <p>값: {data}</p> </main> ); }; export default Example; export const getServerSideProps: GetServerSideProps = async ({ res }) => { res.setHeader( 'Cache-Control', 'public, s-maxage=5, stale-while-revalidate=10' ); const delayInSeconds = 2; const data = await new Promise((resolve) => setTimeout(() => resolve(Math.random()), delayInSeconds * 1000) ); return { props: { data }, }; };
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
Next.js13 에서 getStaticProps 관련해서 질문드립니다!
안녕하세요! 강의 잘보고있습니다 :)next.js 13 버전으로 create-next-app 으로 설치하여 강의를 듣고있는데요,섹션1 > getStaticProps 강의내용대로 동일코드를 입력했지만props로 넘긴 값을 받아오질 못하더라구요.. console.log를 찍어봐도 안넘어와서 문의드립니다ㅠㅠ 아래와같이 입력했고 /app/section1/page.tsx로 만들었습니다.관련 깃헙소소는 : https://github.com/simjieun/next13 여기에 있습니다! 한번 확인부탁드리겠습니다ㅠㅠimport { NextPage } from "next"; interface Props { second: number; } const Example: NextPage<Props> = ({ second }) => { return ( <main> <h1>getStaticProps Page</h1> <p>{second}</p> </main> ); }; export default Example; export async function getStaticProps() { const delayInSecond = 2; const second = await new Promise((resolve) => { setTimeout(() => { resolve(Math.random()); }, delayInSecond * 1000); }); return { props: { second, }, }; }
-
미해결Nuxt.js 시작하기
안녕하세요 강의 잘 보고 있습니다.
다름이 아니라 nuxt 개발 환경에서 소스 수정을하면 그때그때 바로 컴파일이 됐으면 좋겠는데시간이 꽤 오래(30초~1분) 정도 재 컴파일을 하는데 혹시 이 현상을 해소 할 수 있는 방법이 있을까요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
클러스트생성이 안보여요
몽고디비사이트에서 올가니제이션 만들고 프로젝트만들고 다음순서가 클러스트 생성인데현재 atlas 사이트 보면 클러스트 생성하는게 없어요
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
git 관련 질문
안녕하세요. 최근 강의를 수강을 시작하였는데요. nextjs가 13버전으로 바뀜에 따라 강의 에 맞게 소스 코드를 받아서 진행하려고 합니다. git checkout 으로 0-2 branch로 이동하고 여기서 부터 이어하려고 했으나, error: Your local changes to the following files would be overwritten by checkout: pages/section1/clientSideRendering.tsx pages/section1/getServerSideProps.tsxPlease commit your changes or stash them before you switch branches.Aborting 변경점이 있는것 같아 해당 branch로 이동이 안되는것 같습니다!$ git stash && git pull origin master && git stash pop임시 저장소로 옮기고 pull을 하려고 했으나 git@github.com: Permission denied (publickey).fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists. 키가 없어서 안되는것 같습니다! 혹시 이런경우에 어떻게 해결해야 할지 알 수 있을까요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
Material Theme 테마 관련해서 질문 드립니다.
똑같이 설치 했는데 왜 저는 강사님 처럼데코레이터는 파란색함수명은 빨간색으로 하고 싶은데저는 이 2개가 같이 바뀌네요 ? ㅠ 스코프를 아래와 같이 설정하면, 데코랑 함수명이 같이 움직입니다. 따로 셋팅은 힘든 걸가요?"scope": ["entity.name.function"], "settings": { "foreground": "#FFFF00" }
-
미해결Nuxt.js 시작하기
Vue 3 내용 추가 업데이트 관련 문의
Vue 3 내용도 추가로 업데이트 할 예정이라고 해주셨는데... 혹시 언제쯤 추가 업데이트 해주실 수 있는지 궁굼합니다. :)
-
미해결Nuxt.js 시작하기
장바구니에 담기 하면 되었다 안되었다 하네요
장바구나 목록 조회기능 API 연동 강의 학습하고있습니다. 이전 강의까지는 리스트에 담는것은 잘되었습니다db.json 파일에 /carts 데이터를 지우니 장바구니에 잘 담기네요 ..;;그 다음F5 누르면 남아있어야되는데 남아있는 상품이 없네요 뭐가 문제일까요?혹시 이 문구과 상관이 있을까요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
콘솔이 터미널에 찍힙니다.
안녕하세요 선생님 콘솔을 찍으면 자꾸 브라우저 개발자 도구 콘솔에서 안보이고 터미널에서만 보이는데 이유가 뭔지 알 수 있을까요? 해당 컴포넌트가 server client component라 그런걸까요?'use client'; 라고 적은 컴포넌트에서는 콘솔이 잘 찍힙니다.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
passport와 인증 전략 & Custom decorator 수강 중 Unauthorized 문제가 발생했습니다.
포스트맨으로 정확히 헤더에 { Authorization: 토큰값 } 넣고 { "success": false, "timestamp": "2023-06-19T07:07:40.995Z", "path": "/cats", "statusCode": 401, "message": "Unauthorized"}으로 나와서 response를 콘솔로 찍어보니 authorization과 같이 a가 소문자로 변환되어 찍혔는데요, 혹시 이와 관련되서 토큰값을 제대로 못받는걸까요 ?혹시나해서 코드는 깃허브 참고해서 비교해봤는데 도저히 못찾겠어서 도움요청드립니다 ㅜ
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
getStaticPaths로 각 매장의 상세 페이지 만들기
안녕하세요! 강의 수강 중 에러 원인을 모르겠어서 문의드립니다.next.js 최신 업데이트 버전을 사용하고 있어 동적 페이지 아래와 같이 생성 후 동일한 코드를 작성하였습니다. getstaticpath로 페이지 생성은 되었습니다. console에 path도 잘 나타나는 것 확인했습니다!근데 getstaticprops에서의 console이 아무것도 찍히지 않습니다. 실행 자체가 되지 않는 것 같은데 아무리 찾아도 모르겠습니다ㅜㅜ 무엇이 잘못된 것일까요?ㅜㅜ
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
app폴더 방식
안녕하세요 선생님.제가 지금 npx create next app을 하면 pages가 아니라 app폴더 방식으로 버전 13이 기본으로 되어 있는 것 같습니다.13 버전으로 공부해도 괜찮을까요? getStaticProps함수 등 여러가지 기능이 바뀌었을 것 같아서요
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
Next.js 스타일링 방식 결정
Next.js 에서 스타일링을 하는 방법들이 다양한 것으로 알고 있습니다.css-in-js도 제공하는 styled-jsx아니면 재설정 해서 styled-component, emotion ..... 등등프로젝트 스타일링을 scss, scss module로 결정하셨는데 혹시 이유가 있나요 ?????
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
letsStart파일들
package-lock.jspackage.jsontsconfig.json src디렉터리강의 보면 다운받아서 초기설정해주는것같은데얘네는 개발자가 원래 다 직접 쳐야하나요???아니면매번 파일들을 저장했다가 프로젝트처음할때붙여놓고 npm i 하고 해야하는건가요???
-
미해결Nuxt.js 시작하기
nuxt2 , nuxt3 어떤걸로 시작할까요?
안녕하세요. 선생님~이번에 프로젝트를 nuxt 를 적용할려고 하는데 버전을 2로 할지 3로 할지 고민 중입니다.2,3에 많은 변화가 있다고 하는데 강좌는 2 버전으로 되어 있는거 같아서요어떤 차이가 있는지 참고할만한 사이트나 문서가 있으면 링크 부탁드리겠습니다
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
OneToOne 관계
USER와 Profile테이블은 OneToOne 관계입니다.근데 서로 하나씩만 존재하다면 그냥 USER테이블에 Profile을 넣어버리면 되는거 아닌가요?OneToOne 관계를 유지하는 특별한 이유가 있나요??하나의 테이블이 커지는걸 방지하기 위해 OneToOne 관계를 형성하는 걸까요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
자바스크립트 최신문법
강의중 자바스크립트 최신문법을 사용해서 설정했다고 언급(7:35)되는데 "module": "commonjs","target": "ES5",commonjs에 최신문법을 적용해도 상관없는건가요?exnext에 적용하는게 좀더 안정적이지 않을까 생각이 들어서 말씀드립니다.