테스트 오류
해결됨
실전 프론트엔드 테스트 시작하기
테스트가 안됩니다 못찾는다는거 같은데 오류 떠서 그런가요?? 오류 해결 어떻게 하나요
- javascript
- react
- next.js
- 소프트웨어-테스트
- Cypress
- e2e
br
댓글 2
좋아요 1
조회수 261
묻고 답해요
172만명의 커뮤니티!! 함께 토론해봐요.
eslint 다운로드하면서
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
eslint다운로드하면서 자꾸 정렬이 안돼요 코드 작성하면 하나하나 띄워쓰기랑 스페이스바 눌러야되고 정렬 정리가 안돼요 ㅠㅠ
- javascript
- react
- node.js
1028oob
댓글 1
좋아요 0
조회수 240
ant-design/icon 적용 시 에러
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import { UpCircleOutlined } from "@ant-design/icons"; export default function LibraryIconPage() { return ( <> <UpCircleOutlined /> </> ); } ant-design/icons 5.0.1 버전 다운로드 받고 실행하니까 이런 에러가 뜨는데 어떤 문제일까요..?
- react
- node.js
- seo
- graphql
- next.js
임성균
댓글 2
좋아요 0
조회수 234
uncaught runtime error 해결
미해결
처음 만난 리액트(React)
패키지도 새로 설치해보고 챗지피티가 하라는데로 다 해봤는데도 해결이 안되네요 ㅠㅜㅜ 최신 버전맞아요 react랑 react dom 어쩌고랑 create어쩌고에서 문제가 있는 것 같다고 했습니다 ㅠ 어떻게 해결해야하나요
- HTML/CSS
- javascript
- react
ohci0022
댓글 2
좋아요 1
조회수 713
포트폴리오 리뷰 강의 관련이요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 리뷰 강의는 먼저 혼자 포트폴리오를 만들고 보는게 좋나요? 아니면 git clone으로 다운받고 어떻게 만들었는지 보고 그냥 넘어가도 되나요?? 리뷰 강의에서 clone으로 설명하는 이유가 궁금해서 여쭤봅니다!
- react
- node.js
- seo
- graphql
- next.js
민선
댓글 2
좋아요 0
조회수 244
ReactQuery와 Next를 공부하다가 궁금한 점이 생겼습니다.
해결됨
Next + React Query로 SNS 서비스 만들기
React Query가 사실 데이터를 불러오고 캐싱하는 이유가 가장 큰 것으로 알고있습니다. 하지만, Next14부터는 fatch에 store 기능이 생기면서 캐싱이 되는걸로 알고 있는데, 그러면 데이터 캐싱만을 사용하며 굳이 React Query를 사용하지 않아도 되는건가요?
- react
- next.js
- react-query
- next-auth
- msw
이상연
댓글 3
좋아요 0
조회수 629
msw/node의 setupServer를 사용하면 안되나요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님, 강의 잘 보던 중 궁금한 점이 생겨 질문 올립니다. 구글링해보면 서버 컴포넌트에 msw를 적용하는 방법으로 msw/node의 setupServer를 많이 사용하는 것 같습니다. msw/node의 setupServer을 사용해도 이슈가 없을지 궁금합니다!
- react
- next.js
- msw
프론터
댓글 2
좋아요 0
조회수 355
StoryBook 관련 궁금 사항입니다.
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
Next.js를 사용하는 경우 이미지 최적화를 위해 next/image 에서 제공하는 Image 컴포넌트를 사용합니다! 이를 활용해서, 스토리북 컴포넌트를 만들 경우, React에서 이를 활용할 수 있을지 궁금합니다. 현재, React-Native-Cli에서 프로젝트를 진행하고 있습니다. React-Native-Cli(View, Text, Pressable)와, React, Next에서 모두 활용 가능한, 공용 스토리북 컴포넌트를 현실적으로 만들 수 있는지, 실무에서는 각각 따로 분리해서 개발을 진행하는지 여부가 궁금합니다! 타입스크립트로 만든 스토리북 패키지를, 자바스크립트를 활용한 (타입스크립트를 사용하지 않는) 프로젝트에서 활용가능한지도 궁금합니다! 프로젝트를 진행하면, 스토리북과 함께 한개의 레포지토리로 관리하는 것이 좋은지, 아니면, 따로 분리해서 두개의 레포지토리로 관리하는 것이 좋은지 궁금합니다! 개발 시작시, 먼저 스토리북으로 컴포넌트를 제작 후, 개발을 진행하는 것이 좋은지, 아니면, 개발을 진행해가며, 그때 그떄 공용 컴포넌트로 쓰일 만한 것들을 스토리북으로 만들어나가는 것이 좋은지 강사님의 경험상 괜찮은 방법을 알려주시면 감사하겠습니다!!
- react
- typescript
- tailwind-css
- storybook
- ui-testing
김용민
댓글 1
좋아요 1
조회수 278
Checkbox를 누르는데 왜 Editor가 리렌더링되나요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
10.4의 useCallback 강의를 듣는 중에 궁금한 점이 생겼습니다. 하나의 checkbox를 누르면 그에 해당하는 item과 그의 부모 컴포넌트인 List , App 컴포넌트가 리렌더링 되는 것은 이해가 되었습니다.그런데, Editor 컴포넌트는 왜 리렌더링이 되는것인가요?Editor가 props로 받은 onCreate는 App에서 useCallBack으로 선언하였으므로, onCreate의 이전 주소값과 이후 주소값은 동일한 것이라 생각됩니다.
- javascript
- react
- node.js
swghj
댓글 2
좋아요 0
조회수 341
프록시 잘 설정했는데도 404 오류 뜨는 분들
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
혹시 다른분들께서 올려주신대로 수정하고 링크도 잘 설정했고 오타도 없는데 콘솔에 계속 "AxiosError: Request failed with status code 404" 에러 나는 분들 계시나요? 404 에러는 보통 페이지가 없기 때문에 나오는 에러로 알고 있는데요 링크 매핑을 잘 했고 보낼때 get 으로도 잘 보냈는데 계속 같은 오류가 나서 끙끙 앓던 중에 네트워크에 cannot get /hello 로 보이더라구요.. 그래서 혹시나 index.js에서 /api/hello 를 /hello 로 수정해서 실행해보니 오류 없이 response 해주더라구요... 결국 링크 문제였습니다...! 혹시나 저같은 분들이 계실까 싶어 해결된 부분 이렇게 남겨봅니다..
- react
- node.js
종이상자
댓글 6
좋아요 5
조회수 935
javascript에서 에러가 있어도 렌더링 시키는 방법
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
현재 9.2) 투두리스트 업그레이드 3:30 쯤 useState를 useReducer로 변경을 하며 생긴 문제입니다. onCreate함수는 액션 객체로 변경을 하고 화면에서 렌더링되는 것을 보고 있는데, 강의에서는 onUpdate 함수에 setTodos 상태함수가 정의되어 있지 않다는 에러가 있더라도 잘 렌더링이 되고 있습니다. 하지만 제 코드에서는 렌더링이 되지 않고 에러만 발생하게 됩니다. 확장프로그램을 설치했던 걸로 기억하는데 안 되는 이유를 알 수 있을까요? 추가로, 이 때 생기는 에러는 List 컴포넌트에서 map이 정의되지 않았다고 합니다.
- javascript
- react
- node.js
swghj
댓글 1
좋아요 0
조회수 254
원본이 제대로 작동하려면 현재 컴퓨터의 두 글자 지리적 지역을 백 엔드 서비스로 보내야 합니다(예: "미국"). 의 뜻을 알고 싶습니다.
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
말씀주신 명령프롬프트에서 올려주신 winget install 명령어들을 쳐서 진행하는중 처음부터 문제가 생겼습니다. 원본이 제대로 작동하려면 현재 컴퓨터의 두 글자 지리적 지역을 백 엔드 서비스로 보내야 합니다(예: "미국"). 라는 문구가 뜨며 Y or N 으로 결정 해야하는데 Y를 눌렀다가 어떤식으로 될지 몰라서 질문 올립니다.
- react
- python
- django
- web-api
- htmx
메모장
댓글 1
좋아요 0
조회수 652
로컬에서는 카카오 로그인이 되는데 vercel 배포했더니 안되네요 혹시 알려주실 수 있을까요..?
미해결
Next + React Query로 SNS 서비스 만들기
/src/middleware.ts import { auth } from './auth'; import { NextResponse, NextRequest } from 'next/server'; export async function middleware(request: NextRequest) { const session = await auth(); if (request.nextUrl.pathname.startsWith('/login')) { if (session) { return NextResponse.redirect(new URL('/', request.url)); } } if (request.nextUrl.pathname.startsWith('/mypage')) { if (!session) { return NextResponse.redirect(new URL('/login', request.url)); } } if (request.nextUrl.pathname.startsWith('/admin')) { if (session?.user?.name !== 'admin') { return NextResponse.redirect(new URL('/', request.url)); } } } export const config = { matcher: ['/mypage/:path*', '/admin/:path*', '/login'], }; /src/auth.ts import NextAuth from 'next-auth'; import KakaoProvider from 'next-auth/providers/kakao'; export const { handlers: { GET, POST }, auth, } = NextAuth({ pages: { signIn: '/login', }, providers: [ KakaoProvider({ clientId: process.env.KAKAO_CLIENT_ID!, clientSecret: process.env.KAKAO_CLIENT_SECRET!, }), ], secret: process.env.NEXTAUTH_SECRET, }); /src/app/api/auth/[...nextauth]/route.ts export { GET, POST } from '@/auth'; 로컬에서는 되는데 vercel 로 배포 하니까 안되네요.. api/auth/error 로 가지고 Failed to load resource: the server responded with a status of 500 () /api/auth/session 이렇게 오류가 나네요 "next-auth": "^5.0.0-beta.19", 입니다
- react
- next.js
- react-query
- next-auth
- msw
kukhyun4
댓글 2
좋아요 0
조회수 829
Next App Route Framer 도입 문의 !
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요! 클론하다가 React에서 Framer로 레이아웃을 이전 이후로 나누어서 페이지 전환을 스무스하게 animation을 줬던 기억이 있어서 반영해봤는데요. 위의 페이지 전환 효과를 next 프로젝트에도 반영해보려고 하는데 App Router의 특성? 때문인지 {children} 으로 라우팅을 전달 받기 때문에 이전, 이후가 아닌 공통적인 레이아웃으로 취급되고 명확한 구분(id)가 없기 때문에 부드러운 전환이 잘 안되는 걸까요.. 유추한 내용이 맞을까요..? 타 라이브러리 질문 안받으신다면 죄송함다 ㅠ const Framer = ({ children }: { children: ReactNode }) => { const pathName = usePathname(); return ( <> <AnimatePresence mode="wait" initial={false}> <motion.div key={pathName} initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} transition={{ duration: 0.5 }} > {children} </motion.div>{" "} </AnimatePresence> </> ); };
- react
- next.js
- react-query
- next-auth
- msw
squirrel PARK
댓글 1
좋아요 1
조회수 256
로컬 스토리지 로딩 관련질문
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 선생님 오류는 아니고 쫌 엉뚱한질문인데 다이어리 로컬스토리지 로딩 기능 구현중에 function App () { const [IsLoading, setIsLoading] = useState(true); 이 state가 true 이면 if (IsLoading) { return <div>로딩 중</div>; } 화면에 로딩중으로 렌더링 하게 코딩을 했는데 아무리 새로고침 해봐도 화면에 로딩 중 찍히는 걸 볼 수 가 없는데 이유는 너무 빨리 지나가서 제가 볼 수가 없는건가요? 그렇다면 유즈이팩트 사용 여부에따라 마운트 할 때 화면을 두번 그리게 되는건가요?
- javascript
- react
- node.js
댓글 2
좋아요 0
조회수 348
파일명 명명 규칙에 대해서 묻고 싶습니다
해결됨
Next.js 시작하기
안녕하세요 강의 잘 보고 있습니다. Layout.jsx 에서는 대문자를 사용하고, pages 안에 파일들은 carts.jsx 소문자로 사용하는것 같은데 관례상 그런건지 규칙이 있는건지 궁금합니다. 감사합니다.
- javascript
- react
- next.js
풀스택개발자
댓글 2
좋아요 1
조회수 907
Diary 페이지 구현하기 23분 30초에 useEffect is not defined 에러가 나요
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
해당 코드 커스텀 훅스로 만들어서 Edit이랑 Diary 컴포넌트에서 useDiary 임포트해서 const curDiaryItem = useDiary(params.id); 이 코드 넣자마자 해당 Diary 화면이 나오지않고 useEffect is not defined 만 나와요.. 코드 자세히 찾아봤는데 의미를 알수가 없어요.. ㅠ이해할 수가없어서 더이상 진도를 나갈수가 없습니다. 도와주세요 .. ㅠㅠ
- javascript
- react
- node.js
장세희
댓글 1
좋아요 0
조회수 303
inline block 을 사용하시는 의미가 궁금합니다 :)
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 섹션 2 > 레이아웃 클론 강의를 수강 중에 로고에 inline-block 을 사용하신 부분이 있어서요 block 으로 해도 비슷한 노출이 되는 듯해서, 어떤 의도가 있으셨을지 또는 다른 효과가 있는지 궁금합니다 :) .logo { display: inline-block; height: 56px; margin-top: 2px; }
- react
- next.js
- react-query
- next-auth
- msw
femaster1
댓글 1
좋아요 0
조회수 163
제네릭 질문
해결됨
Slack 클론 코딩[실시간 채팅 with React]
커스텀 훅에서 사용된 제네릭에 대해서 공부하다가 궁금한게 생겨서요. 아래 테스트 코드 에서 '+' 연산자는 'T' 및 'T' 유형에 적용할 수 없습니다. 라는 에러 코드가 발생하는 이유가 이해가 안 가서요 위 함수는 사용한다면 아래 처럼 숫자 또는 문자인 타입으로 쓰일텐데, 그러면 return 값에서 + 연산자가 number + number 또는 문자열 + 문자열로 실행되어 문제가 없을 것 같은데 에러가 뜨는 이유가 모르겠어서요 add<number>(1, 2); add<string>('1', '2'); 지피티에 질문해보니 함수 오버로드를 쓰거나 return 값에 any를 쓰라곤 하는데 잘못된 방법 같고 extends로 타입 제한을 걸어도 같은 에러가 뜹니다 function add<T extends number | string>(x: T, y: T): T { return x + y; } 제가 참고한 제네릭 레퍼런스 자료입니다 https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Generic-%ED%83%80%EC%9E%85-%EC%A0%95%EB%B3%B5%ED%95%98%EA%B8%B0#%EC%A0%9C%EB%84%A4%EB%A6%ADgenerics_%EC%86%8C%EA%B0%9C
- react
- 웹팩
- typescript
- socket.io
- babel
- 클론코딩
루룸
댓글 2
좋아요 0
조회수 246
시간 index.js 오류가 나요 ㅠ
미해결
처음 만난 리액트(React)
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; //import App from './App'; //import reportWebVitals from './reportWebVitals'; import Clock from './chapter_04/clock'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(() => { root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); }, 1000); import React from "react"; const Clock = () => { return( <div> <h1>안녕, 리엑스</h1> <h2>현재 시간: {new Date().toLocaleTimeString}</h2> </div> ) } export default Clock; Failed to compile. Module not found: Error: Can't resolve './chapter_03/Library' in 'C:\reactdeveloper\reactcoding\my-app\src' WARNING in [eslint] src\index.js Line 4:8: 'App' is defined but never used no-unused-vars Line 5:8: 'reportWebVitals' is defined but never used no-unused-vars Line 7:8: 'Library' is defined but never used no-unused-vars Failed to compile. Module not found: Error: Can't resolve './chapter_03/Library' in 'C:\reactdeveloper\reactcoding\my-app\src' WARNING in [eslint] src\index.js Line 4:8: 'App' is defined but never used no-unused-vars Line 5:8: 'reportWebVitals' is defined but never used no-unused-vars Line 7:8: 'Library' is defined but never used no-unused-vars Failed to compile. Module not found: Error: Cannot find file: 'clock.jsx' does not match the corresponding name on disk: '.\src\chapter_04\Clock.jsx'. ERROR in ./src/index.js 10:0-39 Module not found: Error: Cannot find file: 'clock.jsx' does not match the corresponding name on disk: '.\src\chapter_04\Clock.jsx'. webpack compiled with 1 error 이렇게 오류가 나고 있는데 해결 방법이 있을까요
- HTML/CSS
- javascript
- react
장진웅
댓글 1
좋아요 0
조회수 428
인기 태그
인프런 TOP Writers
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv