inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

강의 들으면서 같이 볼만한 책이나 교재 같은게 있을까요?

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

항상 좋은 강의 감사합니다. 다름이 아니라 혹시 강의 들으면서 같이 볼만한 책이나 교재 같은게 있을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
지우혁 댓글 1 좋아요 0 조회수 327

내장함수 타이머 작동 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

작성된 코드는 똑같은데 타이머가 작동하지 않아요 ㅠㅠ min과 sec 두 변수 모두 String으로 감싸줘보기도 하고 min "+" sec 부분을 String으로 감싸주기도 해봤는데 해결이 안돼요 let auth = () => { const token = String(Math.floor(Math.random() * 1000000)).padStart(6, "0"); document.getElementById("number").innerText = token; document.getElementById("number").style.color = "#" + token; let time = 180; setInterval(function () { if (time >= 0) { let min = Math.floor(time / 60); let sec = Stirng(time % 60).padStart(2, "0"); document.getElementById("timer").innerText = min + ":" + sec; time = time - 1; } else { document.getElementById("finish").disabled = true; } }, 1000); };

  • react
  • node.js
  • seo
  • graphql
  • next.js
댓글 1 좋아요 0 조회수 375

getServerSideProps cache가 되지 않을 때

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

안녕하세요 강사님. 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 }, }; };

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
crewsade 댓글 1 좋아요 1 조회수 642

firebase 업데이트

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강사님 안녕하세요! 다름이 아니라 firebase 데이터 업데이트 하는 부분이 막혀 질문하려고 합니다. 아래 사진은 Firebase 데이터 업데이트 함수와 발생하는 에러 사진입니다. 해당 문제를 해결할 수 있게 도움 부탁드립니다 ㅠㅠ 해당 오류 해결하기 위해 firebase 룰을 변경했는데도 해결되지 않았습니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
병아리222 댓글 1 좋아요 0 조회수 463

자유게시판 로그인일때 (비로그인 유저아닐때)

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강사님 안녕하세요, 혹시 밑에 질문했는데 제가 잘못 말을 전달한것 같아서요 비로그인일때는 피그마에서 작성자, 비밀번호를 입력하게 나타나는데 로그인일때는 작성자, 비밀번호를 입력 못하게 나타나더라고여 근데 playground 가보면 파라미터를 받는곳을 보면 user 정보를 받는 파라미터가 없더라구요 그래서 fetchBoard를 들어가서 user정보를 가져와도 null값이 나옵니다. 그럼 피그마에 있는 저거는 로그인유저도 비로그인유저 화면으로 만들어야하나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
donig1225 댓글 1 좋아요 0 조회수 301

16-02 강의에 잡음이 발생하는 것 같습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

4분 15초경부터 25초까지 잡음이 들려서 강의 소리가 잘 안들리네요 참고하시면 좋을 것 같습니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
Jun 댓글 1 좋아요 0 조회수 461

Next.js13 에서 getStaticProps 관련해서 질문드립니다!

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

안녕하세요! 강의 잘보고있습니다 :) 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, }, }; }

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
simjieun 댓글 1 좋아요 1 조회수 883

자유게시판 로그인 유저 전용 작성하기

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강사님 안녕하세요, 혹시 로그인 유저가 자유게시판 작성하기 할때 작성자, 비밀번호등... 필요하잖아요 근데 비밀번호는 로그인 유저가 한 비밀번호를 가져와야 하는데 이걸 localStorage, session에 해버리면 보안상 문제가 생기지않나요? 지금은 그냥 localStroage, session 이런곳에 유저 비밀번호를 저장해놓을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
donig1225 댓글 1 좋아요 0 조회수 376

밑에도 같은 질문이 있지만..

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

로그인 된 상태가 아닐 때 (로그인하면 안뜸) alert창 : {"response":{"errors":[{"message":"","locations":[{"line":2,"column":3}],"path":["restoreAccessToken"],"extensions":{"code":"INTERNAL_SERVER_ERROR","exception":{"stacktrace":["Error"," at RestoreAccessTokenService.createAccessToken (/codecamp_backend_api/dist/api/token/services/mutation/restoreAccessToken.service.js:45:19)"," at runMicrotasks (<anonymous>)"," at processTicksAndRejections (internal/process/task_queues.js:93:5)"," at async target (/codecamp_backend_api/node_modules/@nestjs/core/helpers/external-context-creator.js:76:28)"," at async /codecamp_backend_api/node_modules/@nestjs/core/helpers/external-proxy.js:9:24"]}}}],"data":null,"status":200,"headers":{"map":{"content-length":"654","content-type":"application/json; charset=utf-8"}}},"request":{"query":"mutation restoreAccessToken {\n restoreAccessToken {\n accessToken\n }\n}"}} 이런 문구가 뜨는데 다른 분 질문에서 프론트딴에서는 무시해도 된다고 하셨는데 화면딴에서 이게 안뜨게는 못하는걸까요? 할 수 있다면 어떻게 해야하나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
임프런 댓글 2 좋아요 0 조회수 385

개발자도구에 payload가 안보여요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강사님이 예시로 보여줄땐 보이는데 왜 제가 하면 payload 탭이 안보일까요ㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
치카치카 댓글 1 좋아요 0 조회수 4159

설치 과정 중 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 선생님 맨 처음 설치 과정에서 막히는 부분이 있어 질문 남깁니다! class 폴더를 만들고, apollo, emotion등 것들을 분명 설치를 했는데 package.json에는 확인되지 않는 이유가 뭘까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
nyang 댓글 1 좋아요 0 조회수 513

git 관련 질문

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

안녕하세요. 최근 강의를 수강을 시작하였는데요. 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.tsx Please 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 rights and the repository exists. 키가 없어서 안되는것 같습니다! 혹시 이런경우에 어떻게 해결해야 할지 알 수 있을까요?

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
류호원 댓글 1 좋아요 2 조회수 426

pagination - next 캐싱문제

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강의 코드를 작성하다가 중간에 잘못 작성한 부분이 있었는지 다음페이지를 눌렀을때 11 , 21, 31페이지로 넘어가지 않고 계속 1 ~ 10페이지만 작동을 해서 좀 이상하길래 재수정을 하고 재빌드를 했는데 코드의 이상이 없음에도 똑같이 작동하길래 .next 폴더를 삭제하고 재빌드를 했더니 정상작동 하는 것을 보았습니다. .next 폴더가 캐싱 정보를 가지고 있어서 그랬던 건가요? 만약에 .next 폴더를 건드리고 싶지 않다면 브라우저에서 캐시된 것들을 지우면 되는 건가요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
Jun 댓글 1 좋아요 0 조회수 342

리액트 17버전을 사용하는 이유가 궁금합니다

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요. 멘토님. 강의를 듣다 보니 react 18이 아닌 17버전을 쓰는 이유가 궁금해져서 질문 드립니다. 18 버전을 사용하게 된다면 다른 라이브러리와 호환이 안되는 이슈가 생겨서 17버전을 쓰는 것일까요? 18버전을 쓸때 어떤 이슈가 생길 수 있는지 궁금해서 질문 드립니다..!

  • react
  • node.js
  • seo
  • graphql
  • next.js
ㄱㄱ 댓글 1 좋아요 0 조회수 576

섹션8 | 데이터 통신 강의는 아무런 반응이없네요.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

다음 수업 > 을 통해서 섹션8 | 데이터 통신 에 도달하였는데 아무 반응이 없네요. 해당 페이지에서 다음 수업 > geolocation 은 정상동작하네요.

  • react
  • node.js
  • seo
  • graphql
  • next.js
gkdlsb1234 댓글 1 좋아요 0 조회수 254

섹션 5 퀴즈 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

질문1:빨간색 부분에 width랑 background가 하얀글씨로 되어있는데 적용이 된건가요? 그리고 강의 중 이 부분에 예시가 없어서 레퍼런스 코드를 참고해버렸는데요 질문2: transition: 제일 앞에 선언할수 있는 속성이 무엇이 있는지 질문3: transition-property: 는 어떤식으로 사용하는지 궁금합니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
전현욱 댓글 2 좋아요 0 조회수 277

CSS 섹션3 퀴즈 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

박스사이즈를 구하라는 문제에서 저는 div의 크기를 생각하고 24*3(폰트사이즈*3em) + 20(가로세로 padding 10+10) =92 생각했는데 93이라는 약간의 오차도 있고 정답은 폰트사이즈인 72네요 ㅠ 1.제가 문제를 잘못이해했는지 2.div크기 구하는데 오차가 발생하는 이유 위 두가지가 궁금합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
전현욱 댓글 2 좋아요 0 조회수 383

브라우저 재 접속 시 로그인 상태 유지

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요. 브라우저 재 접속 시 로그인 상태 유지를 하고 싶습니다. 로그인 후 어플리케이션의 쿠키에 refreshToken이 담긴 것을 확인하였습니다. 브라우저를 재접속하면 refreshToken이 사라져있는데 이것은 브라우저를 종료하면 쿠키가 휘발되는 성질로 인해 사라지는 것이 맞나요? 그렇다면 브라우저 재접속 시 로그인 상태 유지는 어떻게 구현할 수 있는지 궁금합니다. 감사합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
용준 댓글 2 좋아요 1 조회수 1298

CSS파트 claerfix질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강의중 clearfix div를 넣어주는데 제가 그게 왜들어가는지 들어가서 무슨작용을 하는지 원리가 무엇인지 아직 이해가 덜되서요.. 조금만 더 자세하게 설명해주실수 있나요? 못난 제자라 죄송합니당 ㅜㅜ html: <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-02-clear</title> <link rel="stylesheet" href="./index.css"> </head> <body> <div class="box1 box"> 첫번째 박스입니다.<br> float:left가 적용되어 있습니다. </div> <div class="box2 box"> 두번째 박스입니다.<br> float:right가 적용되어 있습니다. </div> <div class="clearfix"></div> <div class="box3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus sapien, facilisis vitae feugiat ut, semper at ligula. Vivamus cursus lectus tincidunt tellus tincidunt pharetra. Donec pharetra dictum malesuada. Fusce non sapien egestas, maximus urna vel, pulvinar magna. Aenean ut dapibus lacus, in blandit ligula. Vestibulum sit amet efficitur tortor. Phasellus id viverra felis. Mauris magna est, luctus sit amet neque et, sagittis ultrices elit. Morbi odio eros, finibus non justo eget, sollicitudin dapibus ante. Nunc maximus eu nunc et finibus. Vivamus viverra feugiat pretium. Sed at tempus enim, et dignissim ante. Mauris vel nisi leo. Nullam vel nibh suscipit, lobortis ex eu, mollis nunc. Fusce in eros blandit, vehicula libero et, euismod enim. </div> </body> </html> css: *{ box-sizing: border-box; margin: 0; padding: 0; } .container { background-color: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px 0px; } .wrapper { width: 620px; padding: 40px 30px; background-color: white; border: 1px solid gray; border-radius: 10px; } .wrapper__head { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed gray; } .wrapper__head__title { font-size: 32px; background-color: orange; color: white; text-align: center; padding: 5px; margin-bottom: 10px; } .wrapper__head__sub-title{ font-size: 18px; padding: 10px 0; } #point { color: orange; font-size: 22px; font-weight: bold; text-decoration: underline; display: block; margin-top: 15px; } .wrapper__body { border: 1px solid #dddddd; padding: 20px 30px; } .diary-title { font-size: 18px; font-weight: 600; background-color: #f4f4f4; margin-bottom: 20px; } .kimchi { color: red; font-weight: 600; } .egg { color: orange; font-weight: 600; } .highlight { font-size: 22px; color: blue; font-weight: 700; font-style: italic; } .diary-date { color: #919191; font-size: 14px; text-align: right; } .header { height: 80px; display: flex; justify-content: center; align-items: center; border: 1px solid gray; } .header-inner { width: 900px; height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .logo { width: 100px; } .logo h1 a{ text-decoration: none; color: orange; } .menu__ul { display: flex; flex-direction: row; } .menu__ul li { list-style: none; } .menu__ul li a{ display: block; /* a 태그는 inline태그여서 상하적용이 안되기 떄문에 block요소를 적용시킴*/ padding: 10px 20px; /*상하에 굳이 시각적 차이 없는 10px을 주는 이유는 마우스 커서클릭 영역이 글자만 되는것 보다 영역을 늘려서 여유를 주기위해서*/ text-decoration: none; color: black; } .menu__ul li a:hover{ color: orange; } .user { width: 100px; }

  • react
  • node.js
  • seo
  • graphql
  • next.js
전현욱 댓글 1 좋아요 0 조회수 323

인기 태그

인프런 TOP Writers

주간 인기글