inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

Error: Illegal url for new iframe

미해결

만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)

강사님 안녕하세요:) 구글 계정 로그인을 구현하다가 제목과 같은 에러가 발생했습니다(구글로그인 버튼 클릭시). 팝업을 열기 위한 url이 잘못되었다고 나오는데 어느 부분이 잘못되었는지 감이 안잡히네요ㅠ .env에 있는 내용을 next.config.js에서 export했고 FirebaseClient에서 FirebaseCredentials로 잘 매칭한 것 같은데 이상하네요.. 어떻게 접근하면 좋을까요.??

  • next.js
  • Next.js
SJ Kim 댓글 1 좋아요 0 조회수 776

list.reverse() 출력에 대해서 질문있습니다.

해결됨

남박사의 파이썬 기초부터 실전 100% 활용

안녕하세요. 남박사님. list() 데이터 구조에서 reverse() 메서드의 결과값이 이해가 안되서 질문을 남기게 되었습니다. a=[4,5,6,1,2,3] a.sort() print(a) b=[4,5,6,1,2,3] b.reverse() print(b) [1, 2, 3, 4, 5, 6] [3, 2, 1, 6, 5, 4] sort()는 정방향 정렬, reverse()는 역방향 정렬이라고 배웠는데요. 역방향 정렬의 결과값이 제가 생각했을 때는 [6,5,4,3,2,1]로 출력되어야 할것 같은데 제 예상과는 반대로 [3,2,1,6,5,4]로 출력되고 있습니다. 왜 그런지 궁금합니다.

  • 웹-크롤링
  • 웹-크롤링
  • python
Hyeongwon Yun 댓글 1 좋아요 1 조회수 457

map 함수를 쓸때

해결됨

따라하며 배우는 리액트 A-Z[19버전 반영]

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 위는 JSX고 아래는 자바스크립트라서 묶어주는 괄호가 다른건가요?? 똑같이 소괄호 또는 중괄호 하면 오류가나는데 이유가 있나요??

  • Next.js
  • redux
  • typescript
  • next.js
  • tdd
  • react
oridori2705 댓글 1 좋아요 0 조회수 2277

수업자료 질문

해결됨

따라하며 배우는 리액트 A-Z[19버전 반영]

안녕하세요 수업에서 보여주는 nextjs13 관련 pdf 문서는 따로 공유 안 되는 걸까요...?

  • typescript
  • tdd
  • react
  • next.js
  • redux
  • Next.js
이은혜 댓글 1 좋아요 2 조회수 505

다이나믹 라우터 7버젼 이상 질문

미해결

[리뉴얼] React로 NodeBird SNS 만들기

다이나믹 라우팅을 할때 next-redux-wrapper 7버전 이상 사용하고 있는데 질문이 2가지가 있습니다! 구동방식에 대해서는 이해했는데 getServerSideProps 에 loadPost에 context.params.id 가 아니라 7버전 이상이여서 req.params.id로 넣어줬는데 백엔드에서 받는 postId가 undefined로 뜹니다 혹시 7버전이상일땐 loadPost에는 어떤 값을 넣어줘야하나요..!? 게시글에 <Link>를 사용해서 다이나믹 라우터를 이용하면 처음에 CSR 방식으로 값을 받아와서 데이터가 없기 때문에 undefined가 뜨기 때문에 그 동안 로딩창을 띄워줘야 된다고 말씀하셨는데 그 말씀 자체에는 이해가 됐는데 그러면 getServerSideProps 에 따로 작업을 해줘야하는건가요!?

  • express
  • react
  • node.js
  • nodejs
  • redux
  • next.js
  • Next.js
CJW 댓글 1 좋아요 0 조회수 344

PostImages 이미지 length 오류

미해결

[리뉴얼] React로 NodeBird SNS 만들기

PostImages.js import React, { useCallback, useState } from 'react'; import PropTypes from 'prop-types'; import { PlusOutlined } from '@ant-design/icons'; import ImagesZoom from './ImagesZoom'; const PostImages = ({ images }) => { const [showImagesZoom, setShowImagesZoom] = useState(false); const onZoom = useCallback(() => { setShowImagesZoom(true); }, []); const onClose = useCallback(() => { setShowImagesZoom(false); }, []); if (images.length === 1) { return ( <> <img role="presentation" src={images[0].src} alt={images[0].src} onClick={onZoom} /> {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />} </> ); } if (images.length === 2) { return ( <> <div> <img role="presentation" src={images[0].src} alt={images[0].src} width="50%" onClick={onZoom} /> <img role="presentation" src={images[1].src} alt={images[1].src} width="50%" onClick={onZoom} /> </div> {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />} </> ); } return ( <> <div> <img role="presentation" src={images[0].src} alt={images[0].src} width="50%" onClick={onZoom} /> <div role="presentation" style={{ display: 'inline-block', width: '50%', textAlign: 'center', verticalAlign: 'middle' }} onClick={onZoom} > <PlusOutlined /> <br /> {images.length - 1} 개의 사진 더보기 </div> </div> {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />} </> ); }; PostImages.propTypes = { images: PropTypes.arrayOf(PropTypes.shape({ src: PropTypes.string, })).isRequired, }; export default PostImages; Post.js export const initialState = { mainPosts: [{ id: 1, User: { id: 1, nickname: '제로초', }, content: '첫 번째 게시글', Images: [{ src: 'https://bookthumb-phinf.pstatic.net/cover/137/995/13799585.jpg?udate=20180726', }, { src: 'https://gimg.gilbut.co.kr/book/BN001958/rn_view_BN001958.jpg', }, { src: 'https://gimg.gilbut.co.kr/book/BN001998/rn_view_BN001998.jpg', }], Comments: [{ User: { nickname: 'nero', }, content: '우와 개정판이 나왔군요~', }, { User: { nickname: 'hero', }, content: '얼른 사고싶어요~', }] }], imagePaths: [], postAdded: false, }; const ADD_POST = 'ADD_POST'; export const addPost = { type: ADD_POST, }; const dummyPost = { id: 2, content: '더미데이터입니다.', User: { id: 1, nickname: '제로초', }, Images: [], Comments: [], }; export default (state = initialState, action) => { switch (action.type) { case ADD_POST: { return { ...state, mainPosts: [dummyPost, ...state.mainPosts], postAdded: true, }; } default: { return { ...state, }; } } }; 코드에 문제가 없는 것 같은데 위와 같이 에러가 뜹니다. post.js파일도 비교해보면서 찾아봤는데도.. 답이 안보입니다.ㅠㅠ

  • react
  • node.js
  • nodejs
  • redux
  • express
  • next.js
  • Next.js
홍택수 댓글 2 좋아요 0 조회수 416

state 중에 me: null

미해결

[리뉴얼] React로 NodeBird SNS 만들기

강의 진도 : 액션과 상태 정리하기 state(=initialState) 중에 me: null 을 저희가 왜 만들어줬었죠?? 길을 잃었습니다. me가 무슨 정보는 담고 있는 걸까요..??

  • react
  • node.js
  • nodejs
  • redux
  • express
  • next.js
  • Next.js
ea 댓글 1 좋아요 0 조회수 241

곧 mySQL 들어가기전에 질문입니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

서버쪽도 타입스크립트 써도 되나요?? 프론트쪽 타입스크립트로 하고있어가지고요

  • redux
  • node.js
  • nodejs
  • express
  • react
  • next.js
  • Next.js
오일중 댓글 1 좋아요 0 조회수 343

타입스크립트의 컴포넌트 import 절대경로

해결됨

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

안녕하세요 멘토님 항상 좋은 강의 잘 보고 있습니다. 궁금한 점이 생겨서 문의를 드렸는데요, 수업을 하면서는 몰랐는데 타입스크립트와 graphql-codegen에 대하여 강의를 들으면서 09-01 폴더를 10-01로 복사 후, 수업 후반부까지 import 부분에서 계속 빨간줄이 뜨길래 원인을 한참 찾았는데 알고보니 저는 여태까지 컴포넌트를 import 할 때 절대경로를 사용하고 있었습니다. (import 할 때 자동완성 사용) 왜 인지는 모르겠지만 .js 파일까지는 절대 경로를 사용해도 문제가 없었는데 타입스크립트로 변환을 하니까 여태 잘 사용하던 절대경로가 빨간줄이 계속 뜨고 상대경로를 입력하니까 빨간줄이 사라지더라구요. 09-01 .js 실습 파일 (빨간줄 없이 정상작동) 10-01 .tsx 실습 파일 (절대경로 - 빨간줄, 상대경로 - 정상 작동) 이렇게 JS 에서는 되던 절대경로가 TS 에서는 왜 안되는 것인지가 궁금하여 질문드렸습니다. 감사합니다!

  • Next.js
  • node.js
  • nodejs
  • react
  • next.js
  • graphql
  • seo
FRONTEER 댓글 2 좋아요 0 조회수 1485

동적배열 8:23

미해결

코딩테스트 [ ALL IN ONE ]

안녕하세요. 그림부분에서 이해가 가지않아 질문 드립니다. a =[1,2,3] 으로 초기화를하면 array는 0,1,2 즉 배열 그림이 3칸([][][])만 있어야 하는게 아닌가요? 하지만 강의의 그림에서는 [1][2][3][][] 으로 0,1,2,3,4 까지 그려져 있습니다. (size가 3인데 말이죠) a.append(4) 를 했을때, 동적배열은 array로 구현이 돼어있기때문에 random access 가 가능하여 마지막 index를 찾을 수 있다고 하셨는데, 선언및 초기화 a = [1,2,3] // 그림 -> [1][2][3] 접근 a[0] // O(1) 수정 a[1] = 9 // 그림 [1],[9],[3] 추가 a.append(4) // 이때 Resizing 이 일어나 /* 그림 [1][9][3] // 값을 옮긴 후 삭제 [1][9][3][4][][] // 복잡도 O(n) */ 의 모양이 돼야하는게 아닌가요? 즉, 궁굼한 점은 선언 및 초기화 할때 배열의 size 는 3인데그림의 배열 size는 [][][][][] 5칸이냐는 것입니다.

  • 알고리즘
  • python
  • 코테 준비 같이 해요!
  • algorithm
아요 댓글 1 좋아요 1 조회수 382

postman

해결됨

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

postman 설치후 빈화면을 보여주라고 하시는데 저는 선생님이랑 다른 화면이 나오는데 어떤메뉴로 들어가야 하나요?

  • Next.js
  • node.js
  • react
  • seo
  • next.js
  • graphql
  • nodejs
김소라 댓글 1 좋아요 1 조회수 651

yarn generate 오류

해결됨

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

강의 보고 따라하는 중인데 yarn generate가 제대로 작동하지 않고 에러가 나옵니다

  • graphql
  • node.js
  • nodejs
  • seo
  • next.js
  • react
  • Next.js
lar888 댓글 2 좋아요 1 조회수 693

로그인 로그아웃 액션을 세세하게 나누는 이유가 궁금합니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요. 노드버드강의 saga 쪼개기 부분 강의 듣고 있습니다. 로그인을 요청, 성공, 실패 이렇게 세세하게 나누시는데 이유가 궁금합니다. 로그인 요청을 보내면 무조건 성공하는게 아닌건가요? 저는 LOG_IN_ACTION 액션에 isLoggedIn 만 true/false 왔다갔다 하면 될거 라고 단순하게 생각하고 있었는데 왜 굳이 이렇게 나눠서 해야 되는지 와닿지가 않습니다. 뒤쪽의 서버 강의 까지 들으면 이해가 갈까요?

  • redux
  • react
  • node.js
  • express
  • nodejs
  • next.js
  • Next.js
ea 댓글 2 좋아요 0 조회수 386

iframe src 흰화면

미해결

파이썬으로 영화 예매 오픈 알리미 만들기

링크를 복사하면 흰화면만 보이는데 이 경우에는 어떻게 해야하나요?

  • python
조윤희(풀스택 2회차) 댓글 0 좋아요 7 조회수 1011

Docker 질문

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

소스코드에 server와 client에도 Dockerfile이 있던데 이걸로 Dockerlize가 되나요?

  • nodejs
  • node.js
  • docker
  • typescript
  • postgresql
  • react
  • 클론코딩
  • next.js
  • 클론코딩
  • Next.js
강창래 댓글 0 좋아요 0 조회수 391

module not found 오류

해결됨

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

타입스크립트 버전을 강의 버전으로 맞춘 후 node_modules와 yarn.lock 지우고 yarn install 후 yarn dev 했습니다. 에러는 그대로입니다. 콘솔 에러메시지구요, 요 문제 해결을 못해서 다음으로 진행을 못하고 있네요 ㅠㅠ 도와주십숑..

  • react
  • node.js
  • nodejs
  • graphql
  • seo
  • next.js
  • Next.js
wodndi0321 댓글 1 좋아요 0 조회수 1022

아래 문제..

해결됨

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

class 폴더에서 했던 작업과 동일하게 타입스크립트 설치를 하였는데 저런 현상이 발생합니다.. vscode 재실행 서버 재실행 해도 같은 현상이구요, 현재는 class 폴더 yarn dev를 해도 같은 현상이 나타납니다.. 따로 건든건 없고 강의에서 하던대로 했습니다. package.lock.json 파일 지우고 yarn.lock 파일 지우고 node_modules 폴더 지우고 yarn install 후 yarn dev 했구요 어떤 문제인지 잘 모르겠습니다..

  • node.js
  • Next.js
  • graphql
  • nodejs
  • next.js
  • react
  • seo
wodndi0321 댓글 1 좋아요 0 조회수 397

강의 진행을 어떻게 하는게 좋을까요?

해결됨

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

안녕하세요 노션에 퀴즈나 포트폴리오를 풀어오는걸 숙제로 내주셨는데 내용이 많더라고요 난이도는 못할 수준은 아니긴한데 시간이 많이 걸리더라고요 시간이 많으면 다 풀어보겠는데 퀴즈는 힘들것같더라고요 ㅠㅠ 수업에 포트폴리오 리뷰가 있어서 포트폴리오 제작은 무조건 해야할것같은데 퀴즈 같은 경우에는 못풀면 수업에 지장이 있을까요? 시간이 없는게 아쉽네요...

  • node.js
  • Next.js
  • seo
  • react
  • nodejs
  • next.js
  • graphql
정익명 댓글 1 좋아요 1 조회수 402

next 13버젼 관한 질문

미해결

[리뉴얼] React로 NodeBird SNS 만들기

제로초쌤 이제 백엔드 로직 끝내고 SSR 적용하기 위해서 next 진행하려하는데 next 13버젼이 기존 12버전 문법에서 새로운 문법이나 터보팩이 등장한걸로 알고 있는데 12버전과 배우면서 13버전의 문법도 같이 병행하면서 진행하는게 좋겠죠..!?

  • redux
  • node.js
  • express
  • nodejs
  • next.js
  • react
  • Next.js
CJW 댓글 1 좋아요 0 조회수 600

인기 태그

인프런 TOP Writers

주간 인기글