묻고 답해요

API 구축시 인텔리제이

미해결

코드로 배우는 React 19 with 스프링부트 API서버

안녕하세요 이제 시작해보려구하는데 ㅎㅎ API 구축시 인텔리제이 사용해도 문제없나요??

• react
• spring-boot
• jpa
• jwt
• redux-toolkit

NEXT에서 모든 컴포넌트는 서버에서 한번, 하이드레이션 이후에 클라이언트에서 한번 총 두번씩 실행된다는 말씀이신가요??

해결됨

한 입 크기로 잘라먹는 Next.js

제목 그대로입니다.

• react
• typescript
• next.js

상태관리 도구 추천 부탁드려도 될까요?

미해결

한 입 크기로 잘라먹는 Next.js

강의 너무 잘 듣고 있습니다. 현업에서 next.js 15 기반으로 큰규모의 프로젝트인 wms (창고관리 시스템)을 구현 예정중에 있습니다. mssql react18 / next14 typescript material UI 사용예정중에 있습니다. 혹시 위와 같은 프로젝트에서 추천해주실만한 상태관리 도구 가 있으실까요? redux, zustand, recoil 등 선택지가 많은데 선뜻 선택하기가 쉽지 않네요 ㅠ

• react
• typescript
• next.js

코드 오류시 참고하시면 될듯합니다.

미해결

처음 만난 리액트(React)

영상에 제시한 코드를 사용하면 아래와같은 오류가뜹니다 React 18에서는 ReactDOM.render 를 지원하지 않는다고 하네요.. 아래 코드로 수정하니 잘 됩니다 참고 하세요~

• HTML/CSS
• javascript
• react

프로젝트 진행중 발생한 모듈 불러오기 오류

미해결

안녕하세요 프로젝트를 진행하다 모듈 불러오기 관련 오류가 발생하여 질문 남겨봅니다. 문제상황 > 모듈 불러오기중 not found react + typescript + yarn berry 를 사용했고 zero install과 pnp 를 사용해 모듈들을 캐싱했습니다. 이 과정에서 모듈들을 import 할때아래와 같은 오류가 발생합니다. 예시 // main.tsx import * as ReactDOM from "react-dom/client"; // Cannot find module 'react-dom/client' or its corresponding type declarations import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; // Cannot find module '@tanstack/react-query' or its corresponding type declarations. import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; // Cannot find module '@tanstack/react-query-devtools' or its corresponding type declarations. import { BrowserRouter } from "react-router-dom"; // Cannot find module 'react-router-dom' or its corresponding type declarations import App from "./App"; import { GlobalStyle } from "./themes/globalStyle"; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: true, refetchOnMount: true, staleTime: 60_000, retry: 2, }, }, }); ReactDOM.createRoot(document.getElementById("root")!).render( <QueryClientProvider client={queryClient}> // Cannot find module 'react/jsx-runtime' or its corresponding type declarations. <BrowserRouter> <ReactQueryDevtools /> <App /> <GlobalStyle /> </BrowserRouter> </QueryClientProvider> ); 기대효과 > 모든 모듈들이 정상적으로 불러와짐 참고자료 // package.json { "name": "fe", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@tanstack/react-query": "^5.59.0", "@types/react-router-dom": "^5.3.3", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.26.2", "styled-components": "^6.1.13", "zustand": "^5.0.0-rc.2" }, "devDependencies": { "@eslint/js": "^9.11.1", "@tanstack/react-query-devtools": "^5.59.0", "@types/node": "^22.7.4", "@types/react": "^18.3.10", "@types/react-dom": "^18.3.0", "@types/styled-components": "^5.1.34", "@vitejs/plugin-react-swc": "^3.5.0", "eslint": "^9.11.1", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.12", "globals": "^15.9.0", "typescript": "^5.6.2", "typescript-eslint": "^8.7.0", "vite": "^5.4.8" }, "packageManager": "yarn@4.5.0" } // tsconfig.json { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "node", "allowImportingTsExtensions": true, "allowSyntheticDefaultImports": true, "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "jsx": "react-jsx", "noEmit": true, /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "include": ["src", "**/*.ts", "**/*.tsx"] } 타입스크립트 버전 : 5.6.2 vsc 버전 : September 2024 (version 1.94) 시도한 것 > vsc 재시작, 재설치

• yarn
• react
• typescript

소괄호 자동 생성

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요 강사님, 강의 잘 듣고 있어요!! 다름이 아니라, 강사님 화면에서는 return 뒤에 작성하시고 소괄호가 자동으로 생성되면서 작성한 내용을 감싸주던데, 어떻게 하는건가요? ESLint, Prettier등 설치는 했어요 ㅠ.ㅠ 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

• javascript
• react
• node.js

특정 상황에서 상세페이지에 적합한 렌더링 방식은 무엇인가요?

해결됨

한 입 크기로 잘라먹는 Next.js

현재 페이지 라우터 강의까지 듣고 궁금한 점이 생겨서 질문드립니다! Q1. 다음과 같은 상황일 때, book페이지는 어떤 렌더링 방식이 적합한가요? SSG, SSR, ISR 모두 완벽히 맞아 떨어진다는 생각이 들지 않아 질문드립니다 데이터 변경 가능성이 적고, 관리자 서비스를 통해 데이터가 변경되나, 변경 시점이 명확하지 않은 경우 on-demand revalidation 사용이 안되는 경우 (next12) Q2. 만약 on-demand revalidation을 사용할 때, 별도의 서비스에서 일어난 요청을 기준으로 렌더링을 해야한다면 그 요청이 일어났음을 알 수 있는 방법이 있나요?

• react
• typescript
• next.js

빌드 배포

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

안녕하세요 강사님 ! 쇼핑몰 만들기 강의 빌드 배포과정에서 헤매는 수강생들이(저 포함) 많은 것 같은데 혹시 빌드 배포과정까지 영상으로 올려주실 계획은 없으실까요??

• react
• redux
• node.js
• 웹앱
• mongodb

getLayout이 받는 page라는 인자는 왜 "현재 페이지"인가요??

해결됨

한 입 크기로 잘라먹는 Next.js

각 페이지에 레이아웃을 덮어씌워 보내는 함수인 getLayout이라는 메소드는 저희가 정의한 커스텀 메소드인데 이 메소드가 받는 page라는 인자는 어떻게 현재 페이지가 되는지 모르겠습니다. 떄문에 app.tsx에서 해당하는 Component(접속한 페이지)의 getLayout이라는 메소드가 없을 경우에 (page)=> page라는 함수를 리턴시켜 기본의 페이지를 리턴한다는 맥락도 또한 이해가 가지 않습니다. page라는 인자는 도대체 왜 현재페이지라고 인식해서 오는지요ㅠㅜ

• react
• typescript
• next.js

module CSS 말고 Styled-Component로 css를 작성하는 방법은 어떤가요??

해결됨

한 입 크기로 잘라먹는 Next.js

동료들과 협업할때 CSS를 작성하는 방법을 module로 할지 Styled-Component로 할지 고민인데요. module로 하면 className에 계속 "style." 접두사를 넣어주어야 한다는 불편함이 있고 Styled-Component를 쓰게 되면 하나의 파일에 줄이 길어지는 단점과, 스타일링을 코드 한줄 넣고싶어도 하나의 스타일 컴포넌트를 만들어야 한다는 단점이 있더라고요. 강사님꼐서는 module을 추천하시기에 module을 강의에 넣으신걸까요??

• react
• typescript
• next.js

<Editor onCreate={onCreate} />인 이유가 뭘까요

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

• javascript
• react
• node.js

섹션8 라이프 사이클 unmount 관련 질문

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

import { useState } from 'react' import Viewer from './components/Viewer' import Controller from './components/Controller' import { useEffect } from 'react' import { useRef } from 'react' import Even from './components/Even' import './App.css' function App() { const [count, setCount] = useState(0); const [input, setInput] = useState(""); const isMount = useRef(false); //1. 마운트 : 탄생 useEffect(()=>{ console.log("mount") },[]) //2. 업데이터 : 변화, 리렌더링 useEffect(()=>{ if(!isMount.current){ isMount.current = true; return; } console.log("update") }) //3. 언마운트 : 죽음 //useEffect(()=>{console.log(count)},[count, input]) // 의존성 배열, dependency array, deps const onClickButton = (value)=>{ setCount(count + value); } return ( <div className='App'> <h1>Simple Counter</h1> <section> <input value={input} onChange={(e)=>{ setInput(e.target.value) }}/> </section> <section> <Viewer count={count}/> {count % 2 === 0 ? <Even/> : null} </section> <section> <Controller onClickButton = {onClickButton}/> </section> </div> ); } export default App import { useEffect } from "react"; const Even = () => { useEffect(() => { //클린업, 정리함수 return () => { console.log("unmount") }; }, []); return <div>짝수입니다</div>; }; export default Even; 새로고침이나 초기 호출시에도 unmount가 출력되고 홀수로 카운팅이 올라가 컴포넌트가 삭제되는 경우는 update이후 unmount가 정상적으로 출력되는 것을 확인할 수 있는데 짝수로 카운팅이 올라가 컴포넌트가 생성되는 경우는 unmount 이후 update가 됩니다. 컴포넌트가 삭제되는 경우에만 unmount가 진행되는 것으로 알고 있는데 혹시 코드에 문제가 있을까 질문드립니다.

• javascript
• react
• node.js

Cannot read properties of undefined (reading 'substring')

미해결

Next + React Query로 SNS 서비스 만들기

강의를 따라하는 도중 이런 에러를 만났습니다 에러 경로를 보고 찾을려고 하는데 node_modules\oidc-token-hash\lib\shake256.js (3:1) 가 어딘지를 잘 못찾겠습니다

• react
• next.js
• react-query
• next-auth
• msw

28-01-payment

해결됨

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

포트원 사이트에 나와있는 내용이랑 인강내용이랑 코드가 전혀다릅니다. 인증 결제 연동하기 (portone.io) 바뀐거 같은데 어떤것으로 공부해야 하나요

• react
• node.js
• seo
• graphql
• next.js

notification 관련 질문에 AI가 엉뚱하게 대답하여 다시 질문합니다.

미해결

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

선생님~ 안녕하세요 :) 강의 유익하게 잘 듣고 있습니다. 새로 리뉴얼된 섹션 1~12까지 강의 중에, notification 부분이 없어서 질문 드립니다. notification 부분을 들으려면, 이전 강의인 섹션 20으로 대체해야 하는 걸까요? 섹션 13부터는 예전 강의로, Deprecated라고 써져 있는데, notification 사용방법은 그것을 따라하면 되는지 궁금해서 글을 씁니다. 혹시, 달라졌다면 어느 부분을 참고해서 공부하면 좋을지 조언도 조금만 부탁드립니다. ^^

• react
• 웹앱
• firebase

풀 라우트 캐시1 질문

해결됨

한 입 크기로 잘라먹는 Next.js

Dynamic Page로 설정되는 기준 중에서 동적 함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 있을때가 있다고 말씀해주셨습니다. 그리고 웬만하면 Static Page로 만드는 것이 성능 측면에서 좋다고 하셨습니다. 하지만 예를 들어, 거의 모든 페이지에서 header나 footer 컴포넌트를 공통 컴포넌트로 쓰고있고, 그 컴포넌트에서 쿠키를 통해 어떤 값을 세팅한다면 Static Page는 거의 없을 것으로 판단이 되는데 따로 해결방안이 있을까요? Dynamic Page로 설정되는 기준 중에서 아래와 같이 캐시되지 않는 data fetching을 사용하는 경우가 있다고 하셨는데 async function Comp() { const response = await fetch('...') return <div>...</div> } async function Comp() { const response = await fetch('...', {cache : "no-store"}) return <div>...</div> } 아래와 같이 revalidate로 캐시 옵션이 세팅되었을때는 Static Page로써 적용이 되는 것이지요? 그 이유가 해당 time이 지났을때는 데이터캐시에 있는 값이 stale되었다고 판단이 되어 캐싱되어있는 값을 가져오지않고 새로운 값을 가져오기 때문이라고 보면 되는걸까요? async function Comp() { const response = await fetch('...', { next: { revalidate: 3 } }) return <div>...</div> }

• react
• typescript
• next.js

섹션 4 npm start 하면 빈 화면만 나옵니다

미해결

처음 만난 리액트(React)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요 다 바꿨는데도 npm start하면 빈 화면만 나와요

• HTML/CSS
• javascript
• react

섹션 4 jsx 코드 실습 부분 index.js에서 자꾸 오류납니다

미해결

처음 만난 리액트(React)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요 .돌겠네요 진짜

• HTML/CSS
• javascript
• react

코드는 제대로 입력한거같은데 버튼이 생성이 되지 않습니다.

미해결

처음 만난 리액트(React)

(사진)

• HTML/CSS
• javascript
• react

getServerSideProps 함수 내부에서 context 객체 활용에 대해서 질문드립니다.

해결됨

한 입 크기로 잘라먹는 Next.js

getServerSideProps 함수 내부에서 context.query.q로 데이터를 불러오는데, 이러한 querystring을 활용하는 요청 또한 사전 렌더링으로 처리를 할 수가 있나요? 초기 접속 요청(인덱스 페이지)에서 서버는 유저가 querystring을 입력하기 전까지는 querystring의 값을 모르지 않나요? 어떻게 context.query.q도 사전 렌더링의 SSR 방식으로 처리를 할 수가 있나요?

• react
• typescript
• next.js