학습 링크
미해결
실무 중심! FE 입문자를 위한 React
학습 링크 어디에서 확인할 수 있나요?
- react
- redux
- node.js
- sass
- swr
씸플레이_
댓글 1
좋아요 0
조회수 391
묻고 답해요
172만명의 커뮤니티!! 함께 토론해봐요.
tsconfig.json 파일에 대해 질문있습니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 타입스크립트 강의를 보고 있는 중인데 영상대로 tsconfig.json 파일에 { "$schema": " https://json.schemastore.org/tsconfig ", "_version": "2.0.0", "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "module": "esnext", "moduleResolution": "bundler", "target": "es2015", "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "jsx": "react-jsx", "noEmit": true, "noFallthroughCasesInSwitch": true, "resolveJsonModule": true, "skipLibCheck": true, "strict": true } } 이렇게 넣으니 아래 이미지처럼 오류가 뜨는데 찾아봐도 왜 오류가 뜨는지 잘 모르겠습니다.
- react
- react-native
- 하이브리드-앱
- graphql
- next.js
부드러운 족제비
댓글 2
좋아요 0
조회수 162
5.4) Props로 데이터 전달하기 에서 toUpperCase() 오류
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Button.jsx?t=1739152459356:22 Uncaught TypeError: Cannot read properties of undefined (reading 'to') at Button ( Button.jsx?t=1739152459356:22:17 ) An error occurred in the <Button> component. Consider adding an error boundary to your tree to customize error handling behavior. Visit https://react.dev/link/error-boundaries to learn more about error boundaries. Error Component Stack at Button ( Button.jsx?t=1739152290133:19:112 ) at App (<anonymous>)
- javascript
- react
- node.js
댓글 4
좋아요 0
조회수 317
로그인과 인증 관련 질문드립니다!
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 강의를 마치고 혼자 구현을 해보고 있는데, 로그인과 인증 관련해서 궁금한 부분이 있습니다. 프론트에 로그인한 유저인지의 판단을 미들웨어에서 auth함수로 next 서버를 통해 하고있는데,로그인 후에 접속 가능한 페이지를 이동할때마다 무조건 서버에 체크를 해주어야 하나요? 데이터 페칭은 리액트 쿼리를 설명하며 말씀해주신것 처럼 컨텐츠에 따라 판단해서 캐싱하고 새로 받아오고의 개념이 이해가 되었는데, 세션체크라고 해야 할까요? 로그인 후에 이 유저가 로그인이 되어있는지에 대한 체크를 서버에 얼마나 자주 해주어야 하는지 모르겠습니다. 현재는 미들웨어에서 로그인이 필요한 페이지에 auth함수를 호출하여 프론트 서버에서 체크를 하고, api를 호출할때는 쿠키에 next-auth의 세션 토큰과 서버에서 발급한 세션 아이디를 담아서 서버에서 로그인과 인증 확인을 하고있는것으로 이해를 했습니다. 현재는 혼자서 nestjs를 통해 jwt 토큰 2개 (access,refresh)을 발급해서 구현을 해보고있는데, 로그인이 필요한 페이지로 이동한다면 무조건 미들웨어에서 토큰 확인을 서버를 통해 해주어야 하는건가 잘 모르겠어서 질문 드립니다.. 강의 정말 잘 듣고 도움이 많이 됐습니다. 감사합니다.
- react
- next.js
- react-query
- next-auth
- msw
JunWoo Kim
댓글 1
좋아요 0
조회수 96
오픈채팅방 참여 인원수
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 오픈 채팅방에 참여하려 하는데 인원수가 꽉 찬 거 같습니다ㅜㅜ
- javascript
- react
- node.js
유성원
댓글 2
좋아요 0
조회수 176
Counter 컴포넌트 전부 리렌더링 되는 현상
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
<Counter onTotal={handleTotal} /> <hr/> <Counter onTotal={handleTotal}/> <hr/> <Counter onTotal={handleTotal}/> 여기서 Counter.jsx에서 console.log 를 추가했고 버튼 세 개 중 하나만 눌러도 <Counter /> 세 개 전체가 리렌더링 됩니다. (log 가 세번찍힘) 왜그런건가요 ?
- react
- React-Context
- react-router
- tailwindcss
- react-query
rookiezin
댓글 2
좋아요 0
조회수 144
Suspense질문
해결됨
한 입 크기로 잘라먹는 Next.js
선생님 Suspense는 그러면 언제언제 써야하는건가요?? 어떤 함수일때 빌드시 오류나는지 다 알수는 없으니 빌드시 마다 확인을 해야할까요? 기존 page router와 다른게 뭔가 CSR SSR SSG ISR 이렇게 배우다가 갑자기 정적페이지 동적페이지 하는게 나오는데 랜더링 방식이랑 같은의미인건지... 궁금합니다.
- react
- typescript
- next.js
uphoon
댓글 2
좋아요 0
조회수 295
12-2 질문
미해결
실무 중심! FE 입문자를 위한 React
Uncaught TypeError: Cannot destructure property 'ReactCurrentDispatcher' of 'react__WEBPACK_IMPORTED_MODULE_0___default(...).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined. at currentRendererSupportsUseSyncExternalStore (index.js:505:1) at useRecoilValueLoadable (index.js:5353:1) at useRecoilValue (index.js:5372:1) at CompletionPage (index.js:6:1) at react-stack-bottom-frame (react-dom-client.development.js:22428:1) at renderWithHooks (react-dom-client.development.js:5757:1) at updateFunctionComponent (react-dom-client.development.js:8018:1) at beginWork (react-dom-client.development.js:9683:1) at runWithFiberInDEV (react-dom-client.development.js:543:1) at performUnitOfWork (react-dom-client.development.js:15042:1) 이거 오류뜨는데 리엑트 recoil 지원 중단되서 안되는건가요? 해결방법이 있나요?
- react
- redux
- node.js
- sass
- swr
정지현
댓글 3
좋아요 0
조회수 693
잘못된 책 정보 요청이 들어왔을 때
미해결
한 입 크기로 잘라먹는 Next.js
안녕하세요! 수업 잘 듣고 있습니다. 수업 듣던 중 http://localhost:3000/book/34 와 같이 존재하지 않는 책의 상세 정보에 대한 요청에 대한 페이지까지 구현해보고 싶어 혼자 작성하다 문제가 생겨 질문 드립니다. http://localhost:12345/book/333 에서 자동적으로 오류 api 를 주는 것을 보고 해당 객체를 활용하려고 하였으나, id가 13 이상일 때부터는 [id].tsx 파일의 context.parms.id 가 undefiend로 반환되는 문제가 있습니다. 서버측의 문제인지, 제가 설정을 잘못한 건지 잘 모르겠어 질문 드립니다!
- react
- typescript
- next.js
이원현
댓글 2
좋아요 0
조회수 182
오류 제보합니다 깃헙!
미해결
한 입 크기로 잘라먹는 Next.js
.cover_img_container::before { position: absolute; top: 0px; left: 0p; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); content: ""; } .cover_img_container::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); content: ""; } left: 0p -> left: 0px
- react
- typescript
- next.js
강프로그래머
댓글 1
좋아요 0
조회수 142
App router 랜더링 방식에 대해 질문 드립니다.
해결됨
한 입 크기로 잘라먹는 Next.js
선생님 데이터 캐시부분 보고 있는데요 page router의 SSG, ISR처럼은 app router에서 동작이 일어나지 않는걸까요? 아니면 동일한건지 궁금합니다. SSG의 경우는 페이지를 build타임에 페이지를 만드는데 app router는 fetching 한 데이터만 캐시하는것 같아 질문 드립니다.
- react
- typescript
- next.js
uphoon
댓글 2
좋아요 0
조회수 194
여행자 게시판 '트립토크'와 숙박상품에관련한 강의는
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의는 하이브리드앱에 포함 되어있나요? 아니면 중급 웹프론트엔드앱에 포함되어있나요? 중급 듣고 있는데 언제쯤 나오는지 궁금해서 여쭤봅니다...
- react
- react-native
- 하이브리드-앱
- graphql
- next.js
이 규성
댓글 2
좋아요 0
조회수 87
렌더링에서 말하는 서버란 무엇인가요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 예전부터 궁금했던게 있습니다. 이번 사전렌더링 강의에서 계속 설명하는 유저-브라우저-서버 개념 에서 서버란 무엇인가요? 단순히 csr은 서버에서 빈껍데기를 먼저주고, 초기접속속도가 느리고, ssr은 빈껍데기가아니라 이미 렌더링된 html을 서버에서 받아서 그대로 렌더링하고... 이런 개념들은 CSR과 SSR 차이만 검색해도 수많은 블로그와 개념이 나오고, 항상 많이 들어왔고 면접준비했을때도 수없이 외워서 알겠습니다만 여기서 항상 의문이 있었는데요. 여기서 말하는 서버란 대체 무엇인가요? 제가 알고있던 서버라는것은 백엔드서버였는데, 이 서버라는 개념이 어려웠습니다.
- react
- typescript
- next.js
타루
댓글 2
좋아요 3
조회수 254
navigation쓸때 오류
미해결
따라하며 배우는 리액트 네이티브 기초
Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager. 이런 오류가 나. 아마 호환성문제인거 같은데 어떻게 해결해?
- react
- react-native
- expo
장우진
댓글 1
좋아요 0
조회수 183
'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)
해결됨
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. login, singup, workspace 페이지에서 data 가 있는 경우, Redirect 하려는 함수에서 다음과 같은 에러가 공통으로 나타납니다. => 'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345) 어떻게 해야 할까요?
- react
- 웹팩
- typescript
- socket.io
- babel
- 클론코딩
민유
댓글 2
좋아요 0
조회수 174
리액트 state에 대해 질문있습니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 강의 너무 잘 보고 있습니다. 너무 이해하기 쉽게 알려주셔서 열심히 듣고 있는데 state부분에 대해 궁금해서 질문을 드립니다. state는 그럼 글자가 변한다거나 어떤한 것이 변경되는것처럼 이런 상태들이 변하게 할때 state를 사용한다라고 이해하고 이럴때 state를 사용하면 되는건가요?
- react
- react-native
- 하이브리드-앱
- graphql
- next.js
부드러운 족제비
댓글 2
좋아요 0
조회수 109
빌드 과정에서의 오류
미해결
한 입 크기로 잘라먹는 Next.js
Type error: Type '{ params: { id: string | string[]; }; }' does not satisfy the constraint 'PageProps'. Types of property 'params' are incompatible. Type '{ id: string | string[]; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] 평소에는 잘 빌드되었는데 '라우트 세그먼트 옵션'을 학습하던 도중 빌드를 진행하니 해당 오류가 발생하였습니다. 원인을 찾아보려 시간을 사용하였는데도 해결하지 못해 질문 남깁니다. ㅠㅠ .next/type/app/book\[id]/page.ts 코드 import { notFound } from "next/navigation"; import style from "./page.module.css"; export default async function Page({ params, }: { params: { id: string | string[] }; }) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${params.id}` ); if (!response.ok) { if (response.status === 404) { notFound(); } return <div>오류가 발생했습니다...</div>; } const book = await response.json(); const { id, title, subTitle, description, author, publisher, coverImgUrl, } = book; return ( <div className={style.container}> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <img src={coverImgUrl} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </div> ); }
- react
- typescript
- next.js
리꼬
댓글 2
좋아요 1
조회수 194
css 선택자에 대해 질문있습니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 css를 공부중인데 선택자에 대해 질문이 있습니다 * {color: white}, body {color: white} 이렇게 전체선택자와 body선택자 둘다 글자 색상을 흰색으로 했는데 전체선택자도 모든 태그의 글자색이 흰색이 되고 body도 모든 글자색이 흰색이 되는데 이 두개의 차이점이 헷갈립니다.
- react
- react-native
- 하이브리드-앱
- graphql
- next.js
부드러운 족제비
댓글 2
좋아요 0
조회수 83
"사전 렌더링에서 해당 페이지의 HTML을 반환한다"의 의미
해결됨
한 입 크기로 잘라먹는 Next.js
다른 분들의 질문에 대한 답변에서 "사전 렌더링 방식에서 서버가 주는 것은 전체 HTML이 아닌 그 페이지의 HTML이다"와 같은 표현이 많이 보여서 질문 드립니다. 페이지 이동 시 시뮬레이션을 설명하면서 사용하신 컴포넌트 교체 , 컨텐츠 렌더링 과 같은 표현들을 미루어 보았을 때, 아래와 같은 작업이 이루어질 것이라고 생각했는데요, 접속 요청 -> 웹 서버가 HTML을 반환 페이지 이동 -> 해당 HTML의 돔 트리 수정 수화 과정 역시 HTML을 리액트가 핸들링할 수 있도록 하는 작업(리액트 문서 참고)이기 때문에 초기 렌더링 시에만 일어난다고 이해했습니다. 페이지 이동 시마다 HTML을 새로 생성하는 것인지, 또 수화의 정확한 의미는 무엇인지 공부할수록 헷갈리게 되어 질문 남기게 되었습니다. 제가 잘 이해한 것이 맞을까요?
- react
- typescript
- next.js
현수
댓글 2
좋아요 0
조회수 170
Edit페이지 구현 강의 부분 질문있습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 Edit페이지 구현하기 강의 부분에서 16:52 부분에 아직 Edit 컴포넌트가 return하기 전인 상태이다. 그래서 마운트 되기 전이기 때문에 nav("/", {replace: true}) 동작할 수 가없다 라는 게 무슨 말인가요? 이 Edit 즉 이 수정페이지로 처음에 화면이 나타난다(마운트)는 이해가 가는데 왜 nav가 실행을 할 수 가없나요? 조금 쉽게 설명을 부탁드리겠습니다 ㅜㅜ
- javascript
- react
- node.js
부드러운 족제비
댓글 2
좋아요 0
조회수 179
인기 태그
인프런 TOP Writers
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv