inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

d-day 오류

해결됨

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

<!DOCTYPE html> <html lang="ko"> <head> <script src="./js/calculator.js"></script> <link rel="stylesheet" href="./calculator.css"> <title>D-Day</title> </head> <body> <h1>D-day</h1> <div id="d__day__container"> <div class="d__day__child__container"> <span id="days">0</span> <span>일</span> </div> <div class ="d__day__child__container"> <span id="hours">0</span> <span>시간</span> </div> <div class ="d__day__child__container"> <span id="min">0</span> <span>분</span> </div> <div class ="d__day__child__container"> <span id="sec">0</span> <span>초</span> </div> </div> <div id="target-selector"> <input id="year" type="text" placeholder="년도" class="day-caleander" size=5 maxlength="4"> <input id="month" type="text" placeholder="월" class="day-caleander" size=5 maxlength="2"> <input id="day" type="text" placeholder="일" class="day-caleander" size=5 maxlength="2"> </div> <div id="target__selector"> <button onclick="counterMake()" id="start__btn">카운트다운</button> </div> </body> </html> const dateFormMaker = () => { const inputYear = document.getElementById("year").value; const inputMonth = document.getElementById("month").value; const inputDay = document.getElementById("day").value; const dateFormat = `${inputYear} - ${inputMonth} - ${inputDay}`; return dateFormat; } const counterMake = () => { const targetDateInput = dateFormMaker(); const nowDate = new Date() const targetDate = new Date(targetDateInput); const remaining = (targetDate-nowDate) / 1000; if(remaining <=0) { console.log("타이머가 종료되었습니다.") }else if (isNaN(remaining)) { "유효한 시간 형식이 아닙니다" } const reaminingDate = Math.floor(remaining /3600 /24); const remainingHours = Math.floor (remaining/3600) & 24; const remainingMin = Math.floor(remaining/60) % 60; const remainingSec = Math.floor(remaining) & 60; const dDayCounter = `남은 시간 : ${reaminingDate}일 ${remainingHours}시 ${remainingMin}분 ${remainingSec}초`; console.log(dDayCounter) return dDayCounter; } console 하나하나 찍어가며 파악한 결과 targetDate에서 NaN이 뜨는데, 아무리 봐도 이유를 모르겠습니다 ㅠㅠㅠ input 박스에 적은 값들도 잘 읽어오는데 갑자기 저기서 에러가 뜨니까 답답하네요 . 피드백 부탁드립니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
주철민 댓글 1 좋아요 0 조회수 398

(Section 26. Graphql Mutation) ApolloError:Failed to fetch

해결됨

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

useMutation section 에서 해당 소스를 작성하고 Graphql API 요청하기 버튼을 누르면 아래와 같이 오류 메세지가 나옵니다. 설치 오류인가 싶어 package.json 을 봐도 특별히 어떤 문제인지 확인되지 않습니다.

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

Property ' ' has no initializer and is not definitely assigned in the constructor ts 문제해결 방법 문의

해결됨

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

안녕하세요 강사님 클로코딩 진행중 npm run dev 명령 시 정상적으로 런타임 되는데 계속해서 아래 사진과 같이 각 entity가 초기화가 안됐다는 경고 창이 뜨는데 이건 어떻게 해결해야하는지 문의드립니다.

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
junseong Kim 댓글 1 좋아요 0 조회수 378

apoll-cilent 관련된 질문

해결됨

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

apoll-cilent 관련된 질문입니다. 질문1. 지금 강의에서는 api url이 한개만 있을 경우인데, 경로가 다 다른 경우는 어떻게 연결을 하나요?? client를 여러개 만들어서 porivder에 담아줘야하나요?? 질문2. provider는 꼭 app.jsx를 감싸야하나요?? 아니면 내부 컴토넌트안에서 원하는 컴포넌트를 provider로 감싸도 동일하게 사용이 가능한가요??

  • react
  • node.js
  • seo
  • graphql
  • next.js
tamo 댓글 2 좋아요 0 조회수 380

댓글 작성기능중 별점 rating 부분 질문

해결됨

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

31-2 포트폴리오 과제를 진행하다가 막혀서 질문드려요!! 다른기능들은 이미 해봤던내용의 복습인것같아 잘진행을 하고있던 와중에 별점 기능을 구현하는데 어려움이 좀 있네요. 처음 만들어보는 기능이라 혼자 만들어보다가 잘진행이 되지않아 레퍼런스 코드를 한번보고싶은데요 해당 과제 세션에 링크된 레퍼런스코드에는 그기능이 따로 없는것같아서 여쭈어봅니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
김윤원 댓글 1 좋아요 0 조회수 387

util/produce.js 에서 오류가 납니다

미해결

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

npm run dev를 했는데 아래와 같은 오류가 뜨면서 실행이 안됩니다 어디서 문제가 있는 건가요? util/produce.js 코드 내용 import { enableES5, produce } from 'immer'; export default (...args) => { enableES5(); return produce(...args); }; 터미널 에러 > react-nodebird-front@1.0.0 dev > next -p 3060 ready - started server on 0.0.0.0:3060, url: http://localhost:3060 event - compiled client and server successfully in 668 ms (1830 modules) wait - compiling / (client and server)... event - compiled client and server successfully in 1185 ms (4446 modules) 4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined } {} wait - compiling /_error (client and server)... error - util/produce.js (4:11) @ __WEBPACK_DEFAULT_EXPORT__ error - TypeError: (0 , immer__WEBPACK_IMPORTED_MODULE_0__.enableES5) is not a function at __WEBPACK_DEFAULT_EXPORT__ (webpack-internal:///./util/produce.js:11:53) at reducer (webpack-internal:///./reducers/user.js:115:106) at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:476:24 at Array.forEach (<anonymous>) at assertReducerShape (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:474:25) at combineReducers (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:539:5) at eval (webpack-internal:///./reducers/index.js:19:75) { page: '/' } 2 | 3 | export default (...args) => { > 4 | enableES5(); | ^ 5 | return produce(...args); 6 | }; event - compiled client and server successfully in 315 ms (4447 modules) 4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined } {} TypeError: (0 , immer__WEBPACK_IMPORTED_MODULE_0__.enableES5) is not a function at __WEBPACK_DEFAULT_EXPORT__ (webpack-internal:///./util/produce.js:11:53) at reducer (webpack-internal:///./reducers/user.js:115:106) at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:476:24 at Array.forEach (<anonymous>) at assertReducerShape (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:474:25) at combineReducers (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/redux/lib/redux.js:539:5) at eval (webpack-internal:///./reducers/index.js:19:75) at processTicksAndRejections (node:internal/process/task_queues:96:5) ^C%

  • react
  • redux
  • node.js
  • express
  • next.js
정현영 댓글 1 좋아요 0 조회수 602

섹션 15 페이네이션 서버 에러

해결됨

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

강의에 나온 대로 아무리 해도 계속 서버 에러가 뜨네요. 이전에 질문했던 codegen 까지 설치 완료 해서 제대로 작동이 되는데 이 페이지만 실행시키면 계속 오류가 발생합니다. 저가 뭘 잘못한 걸까요? import { useQuery, gql } from "@apollo/client"; import type { IQuery, IQueryFetchBoardArgs, } from "../../../src/commons/types/generated/types"; const FETCH_BOARDS = gql` query { fetchBoards { _id writer title contents } } `; export default function StaticRoutingMovedPage() { const { data } = useQuery<Pick<IQuery, "fetchBoards">, IQueryFetchBoardArgs>( FETCH_BOARDS ); console.log(data?.fetchBoards); return ( <div> {data?.fetchBoards.map((el) => ( <div key={el._id}> <span style={{ margin: "10px" }}>{el.title}</span> <span style={{ margin: "10px" }}>{el.writer}</span> </div> ))} </div> ); }

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

next.js 설치를 하였는데 디렉토리 구조가 다릅니다.

미해결

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

안녕하세요 강의 영상 잘 보고 있습니다. next.js 설치를 강의영상과 동일하게 명령어로 설치하는데 디렉토리 구조가 영상과 달라서 문의드립니다. 별것 아닌 문제긴 한데 pages 폴더가 제쪽에는 설치가 되지 않아서 경로설정등의 소소한 차이가 생겨서 문의드립니다. 감사합니다

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
이세용 댓글 2 좋아요 0 조회수 1119

npm run dev시 password 다르다고 나옴

미해결

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

에러 종류: 위와 같은 환경에서 error: password authentication failed for user "postgres" 로 추정되는 에러 발생 아마 서버 연결시 인증 문제로 보입니다. 작동 절차: docker-compose up 입력, server 파일로 이동, npm run dev 실행. 에러 발생 +1) POSTGRES_HOST_AUTH_METHOD: trust로 설정하고 서버 새로 만들어도 동일한 에러가 발생하여 무슨 문제일지 잘 모르겠네요.. 도움 주시면 감사하겠습니다. +2) 아래에 터미널의 전체 에러 코드 남깁니다. C:\Users\tukim\Desktop\reddit-clone-app\server>npm run dev > server@1.0.0 dev > nodemon --exec ts-node ./src/server.ts [nodemon] 3.0.1 [nodemon] to restart at any time, enter rs [nodemon] watching path(s): . [nodemon] watching extensions: ts,json [nodemon] starting ts-node ./src/server.ts server running at https://localhost:4000 error: ����� "postgres"�� password ������ �����߽��ϴ� at Parser.parseErrorMessage (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\parser.ts:369:69) at Parser.handlePacket (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\parser.ts:188:21) at Parser.parse (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\parser.ts:103:30) at Socket.<anonymous> (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\index.ts:7:48) at Socket.emit (node:events:513:28) at Socket.emit (node:domain:489:12) at addChunk (node:internal/streams/readable:324:12) at readableAddChunk (node:internal/streams/readable:297:9) at Socket.Readable.push (node:internal/streams/readable:234:10) at TCP.onStreamRead (node:internal/stream_base_commons:190:23) { length: 107, severity: 'ġ��������', code: '28P01', detail: undefined, hint: undefined, position: undefined, internalPosition: undefined, internalQuery: undefined, where: undefined, schema: undefined, table: undefined, column: undefined, dataType: undefined, constraint: undefined, file: 'auth.c', line: '329', routine: 'auth_failed' }

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
지말미 댓글 2 좋아요 0 조회수 716

리액트가 계속 로딩만되고 창이안떠요

미해결

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

강의 다잘따라왔는데 ㅠㅠ 왜이러죠 ? 컴퓨터를껏다켜도이래요 파일에 에러는 없습니다

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
upward070 댓글 1 좋아요 0 조회수 1291

로그인 체크 페이지

해결됨

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

안녕하세요 강사님! 제가 테스트로 boards 페이지는 로그인이 되어 있어야 들어갈 수 있게 만들면서 복습하는 와중에 궁금증이 생겨 글 작성하게 됐습니다. 위 사진처럼 로그인 체크해서 로그인이 안되어있으면 로그인 페이지로 이동하게 만들었는데요. 로그인이 안되어있을 경우 boards 소스에 있는 api 통신 자체를 못하게 막을 수 있는 방법이 있을까요 ? 현재 로그인이 안되어있어서 로그인 페이지로 이동이 되지만 boards 코드에 있는 API 요청이 아래 사진처럼 날라가고 있습니다. 추가로 로그인 성공하고 boards 페이지로 이동하는데 위 사진처럼 refreshToken이 있음에도 getAccressToken 함수 리턴값이 undefined 이고 새로고침을 해야 boards 페이지에 접근이 가능해집니다... ㅠㅠ 왜 이러는지 알려주세요!!

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

FirebaseError: Firebase: Error (auth/invalid-api-key).

미해결

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

안녕하세요! 강의대로 따라하다가 FirebaseError: Firebase: Error (auth/invalid-api-key). 오류가 나왔습니다. model/firebase_client.ts 부분입니다. import { initializeApp, getApps } from 'firebase/app'; import { Auth, getAuth } from 'firebase/auth'; import getConfig from 'next/config'; const { publicRuntimeConfig } = getConfig(); const FirebaseCredentials = { apiKey: publicRuntimeConfig.apiKey, authDomain: publicRuntimeConfig.authDomain, projectId: publicRuntimeConfig.projectId, }; export default class FirebaseAuthClient { public static instance: FirebaseAuthClient; private auth: Auth; public constructor() { const apps = getApps(); if (apps.length === 0) { console.log('firebase initializeApp'); initializeApp(FirebaseCredentials); } this.auth = getAuth(); console.log('firebase auth client constructor'); } public static getInstance(): FirebaseAuthClient { if (!FirebaseAuthClient.instance) { FirebaseAuthClient.instance = new FirebaseAuthClient(); } return FirebaseAuthClient.instance; } public get Auth(): Auth { return this.auth; } } next.config도 확인했습니다ㅠㅠ .env 파일명도 확인했고, firebase일반설정에 들어가 웹 API 키도 확인하였습니다. 혹시몰라 깃허브 예제코드와도 비교했지만 해결하지 못했습니다ㅠㅠ 무슨 문제일까요?

  • next.js
박채연 댓글 3 좋아요 0 조회수 1872

자료 최신화,,,

해결됨

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

강의에서 소개되는 노션(자료)와 실제 노션 링크 구조가 많이 다른데,,,최신화좀 해주시던지,,,정리를 좀 해주세요;;; 깃 소스를 받으려 해도 뭐 찾을 수도 없고;; 강의 아래 설명에 적어주셔도 될거같구요,,, 피그마 이용관련해서도 뭔가 어디에 볼 수 있게 적어놓아주세요;; 필요한 내용만 들으려고 하는데,,, 뭐 전부를 들어야지 해당 내용들을 따라갈수 있는건가요,,,???

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

cosnt is not defined

미해결

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

npm run dev 시 cosnt is not defined 가 뜹니다 제 코드는 import React from 'react'; import propTypes from 'prop-types'; import Link from 'next/link'; import { Menu, Input, Row, Col } from 'antd'; import 'antd/dist/antd.css' import UserProfile from '../components/UserProfile'; import LoginForm from '../components/LoginForm'; const AppLayout = ({ children }) => { cosnt [IsLoggedIn, setIsLoggedIn] = useState(false); return ( <div> <Menu mode="horizontal"> <Menu.Item> <Link href="/"><a>노드버드</a></Link> </Menu.Item> <Menu.Item> <Link href="/profile"><a>프로필</a></Link> </Menu.Item> <Menu.Item> <Input.Search enterButton style={{verticalAlign: 'middle' }}/> </Menu.Item> <Menu.Item> <Link href="/signup"><a>회원가입</a></Link> </Menu.Item> </Menu> <Row gutter={8}> <Col xs={24} md={6}> {isLoggedIn ? <Userprofile /> : <LoginForm />} </Col> <Col xs={24} md={12}> {children} </Col> <Col xs={24} md={6}> <a href="" target='_blank' rel='noreferrer noopener'>Made by 0880</a> </Col> </Row> </div> ); }; AppLayout.propTypes = { children: propTypes.node.isRequired, } export default AppLayout; 입니다 무엇이 문제 일까요

  • react
  • redux
  • node.js
  • express
  • next.js
lsw0810222 댓글 2 좋아요 0 조회수 368

App is not defined

미해결

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

npm run dev를 했을 시 ReferenceError: App is not defined 이렇게 뜹니다 제 코드는 import React from 'react'; import PropTypes from 'prop-types'; import Head from 'next/head'; import 'antd/dist/antd.css' const NodeBird = ({Component}) => { return ( <> <Head> <meta charset='utf-8' /> <title>NodeBird</title> </Head> <Component /> </> ) }; App.PropTypes = { Component: PropTypes.elementType.isRequired, } export default App; 입니다 어떻게 해야 하나요?

  • react
  • redux
  • node.js
  • express
  • next.js
lsw0810222 댓글 1 좋아요 0 조회수 586

Banner.css가 안보이네요!

미해결

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

css가 전체적으로 안보여줘서 작성을 못했네요ㅜㅜ 파일 부탁드립니다.

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
손민정 댓글 1 좋아요 0 조회수 402

error Command failed with exit code 1. 해당 에러에 대한 질문드립니다.

해결됨

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

에러 메세지 입니다. 01-02-emotion 폴더를 생성하여 강의 내용과 똑같이 작성하여 yarn dev로 실행하였는데 오류가 발생이 되어서 질문을 드립니다 .ㅠㅠ 해당 오류로 구글 검색을 해보니 공유캐시 파일을 지우고 다시 설치해보라는 글이 있어서 해보았는데도 오류가 고쳐지지 않아서 질문을 드립니다. ㅠㅠ 해당 오류는 링크의 블로그를 보고 시도해보았습니다. https://chlolisher.tistory.com/174 ㅠㅠ 도와주세요

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

null 속성을 읽을 수 없음.

미해결

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

npm run dev를 할 시 Cannot read properties of null (reading 'prefixCls') 이렇게 뜹니다.. 제 코드는 이렇게 되어 있는데 무엇이 문제일까요?

  • react
  • redux
  • node.js
  • express
  • next.js
lsw0810222 댓글 2 좋아요 0 조회수 538

17298 오큰수 구하기 질문있습니다.

미해결

Do it! 알고리즘 코딩테스트 with Python

올려주신 코드로 공부하고 백준에 업로드 해 본 결과 시간 초과가 뜨는데, 시간 초과가 되지 않게 하려면 어떻게 수정할 수 있을까요 ?

  • python
  • 코딩-테스트
  • 알고리즘
스탑수 댓글 2 좋아요 1 조회수 707

데이터베이스 연결 부분 오류

미해결

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

이 오류때문에 지금 다음으로 넘어가지를 못하고있습니다... 환경변수 쪽 문제인거같은데 어떻게 해도 해결이 안되네요 ㅠㅠ

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
wodndi0321 댓글 1 좋아요 0 조회수 424

인기 태그

인프런 TOP Writers

주간 인기글