묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
2.19 파비콘이 안보여요
import { Html, Head, Main, NextScript } from "next/document"; export default function Document() { return ( <Html lang="kr"> <Head /> {/* favicon 설정 */} <link rel="icon" href="/public/favicon.ico" /> <body> <Main /> <NextScript /> </body> </Html> ); } 파비콘 설정 설명이 없어서 chatgpt가 알려줘서 이렇게 했는데 안보이네요
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useEffect 의존성배열
의존성 배열에 보통 배열이나 객체를 넣지 않는 게 좋다고 어디서 본거 같은데 useState으로 만든 객체나 배열은 상관이 없고 const a = {a: 1, b:2} 이런 거나 const b = []; 이렇게 초기화 된 것들만 넣지 말라고 하는 것인가요? 맞다면 이유는 const a 랑 const b는 리렌더 될 때마다 참조 값이 바뀌고 useState으로 만든 것은 리렌더링이 되어도 set 함수가 쓰이지 않는 이상 참조 값이 바뀌지 않아서 그런 건가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[12.6) 폰트, 이미지, 레이아웃 설정하기] 이미지 설정 관련해서 질문 있습니다.
제 얕은 지식으로는 svg 파일이 png 파일보다 용량이 더 적어서 좋다고 알고 있는데어떤 이유로 이미지를 svg 파일 말고 png 파일로 진행하시는 이유가 있는지 궁금합니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[12.6) 폰트, 이미지, 레이아웃 설정하기] 이미지 설정 관련해서 질문 있습니다.
제 얕은 지식으로는 svg 파일이 png 파일보다 용량이 더 적어서 좋다고 알고 있는데어떤 이유로 이미지를 svg 파일 말고 png 파일로 진행하시는 이유가 있는지 궁금합니다!
-
해결됨(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>
마지막 강의에서 다음 강의가 있다고 하셨는데 곧 올라오나요?
안녕하세요 완강했습니다!!마지막 강의에서 다음 강의가 있다고 하셨는데 곧 올라오나요?
-
해결됨코드로 배우는 React 19 with 스프링부트 API서버
access Token 만료 후 todo/list 접속시도 에러 처리
안녕하세요.access Token 정보 만료 후에 서버에서 보내는 메시지가 401 메시지로 옵니다.그래서인지 jwtUtil.js 파일에서 처리를 못하는 문제가 있는 것이 맞을까요?responseFail 을 아래와 같이 수정하는게 맞는지 무엇을 놓치고 있는 것인지 모르겠습니다.http://localhost:3000/todo/list 를 10분 이상 경과후 실행했을 때 에러 메시지를 출력했었습니다.import axios from "axios"; import {getCookie, setCookie} from "./cookieUtil"; import {API_SERVER_HOST} from "../api/hostApi"; const jwtAxios = axios.create() const refreshJWT = async (accessToken, refreshToken) => { const host = API_SERVER_HOST const header = {headers: {"Authorization": `Bearer ${accessToken}`}} const res = await axios.get(`${host}/api/member/refresh?refreshToken=${refreshToken}`, header) console.log("----------------------") console.log(res.data) return res.data } //before request const beforeReq = (config) => { console.log("before request.............") const memberInfo = getCookie("member") if (!memberInfo) { console.log("Member NOT FOUND") return Promise.reject( { response: { data: {error: "REQUIRE_LOGIN"} } } ) } const {accessToken} = memberInfo // Authorization 헤더 처리 config.headers.Authorization = `Bearer ${accessToken}` return config } //fail request const requestFail = (err) => { console.log("request error............") return Promise.reject(err) } //before return response const beforeRes = async (res) => { console.log("before return response...........") console.log(res) //'ERROR_ACCESS_TOKEN' const data = res.data if (data && data.error === 'ERROR_ACCESS_TOKEN') { const memberCookieValue = getCookie("member") const result = await refreshJWT(memberCookieValue.accessToken, memberCookieValue.refreshToken) console.log("refreshJWT RESULT", result) memberCookieValue.accessToken = result.accessToken memberCookieValue.refreshToken = result.refreshToken setCookie("member", JSON.stringify(memberCookieValue), 1) //원래의 호출 const originalRequest = res.config originalRequest.headers.Authorization = `Bearer ${result.accessToken}` return await axios(originalRequest) } return res } //fail response const responseFail = async (err) => { console.log("response fail error.............") console.log(err) const originalRequest = err.config; // 토큰 만료로 인한 401 응답이라면 → refresh 시도 if ( err.response && err.response.status === 401 && !originalRequest._retry // 무한 루프 방지 ) { originalRequest._retry = true; const memberCookieValue = getCookie("member"); try { const result = await refreshJWT( memberCookieValue.accessToken, memberCookieValue.refreshToken ); // 토큰 저장 memberCookieValue.accessToken = result.accessToken; memberCookieValue.refreshToken = result.refreshToken; setCookie("member", JSON.stringify(memberCookieValue), 1); // 원래 요청 재시도 originalRequest.headers.Authorization = `Bearer ${result.accessToken}`; return await axios(originalRequest); } catch (refreshError) { console.error("Refresh 실패, 로그아웃 처리 필요"); // 로그아웃 로직 연결 가능 localStorage.removeItem("token"); return Promise.reject(refreshError); } } return Promise.reject(err); } jwtAxios.interceptors.request.use(beforeReq, requestFail) jwtAxios.interceptors.response.use(beforeRes, responseFail) export default jwtAxios
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
출력 결과가 이해되지 않습니다.
const promise = new Promise((resolve, reject) => { // 비동기 작업을 실행하는 함수 // executor setTimeout(() => { console.log("안녕"); // resolve(); reject(); }, 2000); }); console.log(promise); setTimeout(() => { console.log(promise); }, 3000);첫 번째 console.log와 setTimeout에서의 두 번째 console.log는 promise객체의 상태가 달라야 한다고 생각하는데 왜 같은지가 궁금합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
react-query enabled 옵션
react-query 사용 시enabled 옵션이 true인 경우queryFn을 실행하지는 않지만queryKey는 생성되는데 queryKey가 안 생기게 하자니 Hook을 조건부로 작성할 수 없어서 이런 방법은 불가능하고 queryFn은 실행하지 않으니 괜찮다는 생각도 드는데예를 들면 ["post", id]가 있고 id가 null인 경우queryKey는 ["post", null]로 무조건 생성이 되더군요. Observe도 많은 곳에서 쓸 수록 2 or 3 이런 식으로 증가하고요. 이게 성능에 문제가 없을지 아니면 queryKey 생성까지 막을 수 있는 방법이 있는지 궁금합니다.
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
"업로드 및 배포" 후 에러 메시지가 뜨지 않네요..
교재 561페이지를 따라가면서, 위의 메시지까지 받았습니다. 그리고 나서 10여분이 지났는 데도, 교재에서 얘기하는 것처럼 에러 메시지가 출력되지 않네요. 에러 메시지가 없어도 정상적으로 진행이 된 것인가요?
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
django-csp 4.0 migration 관련
질문을 온전히 이해할 수 있도록, 모든 맥락을 전달해주세요.질문은 질문자가 번거로워야 보다 좋은 답변을 얻으실 수 있습니다.시행착오를 알려주시면 곧바로 원하는 문제에 집중할 수 있습니다.오류 메시지는 일부만 알려주시기보다 전체 오류 메시지를 캡처해서 주시면, 오류 파악에 도움이 됩니다. 당신의 파이썬/장고 페이스메이커가 되겠습니다. ;-)인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. django-csp 4.0 Migration Guide — Django-CSP 4.0 documentationcsp 4.0 이 나왔는데 다음과 같이 강의 내용을 변경하면 될까요?## config/settings.py from csp.constants import SELF INSTALLED_APPS = [ # ... "csp", # ... ] frame_addition = env.list("CSP_FRAME_ANCESTOS". default=[]) CONTENT_SECURITY_POLICY = { "EXCLUDE_URL_PREFIXES": ["/admin"], "DIRECTIVES": { "default-src": [SELF, "*.example.com"]+ frame_addition , "script-src": [SELF, "js.cdn.com/example/"]+ frame_addition , "img-src": [SELF, "data:", "example.com"]+ frame_addition , "csp_frame_ancestors": [SELF] + frame_addition }, } 이런식으로 변경 해주면 충분할까요?
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
bootJar가 어디에 있지요?
교재 560페이지에서 "API 서버 프로젝트에서는 Gradle의 'bootJar'를 실행합니다'라고 되어 있는데, bootJar가 어디에 있지요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
쿠폰 다시 부탁드려도 될가여?
기존강의 업데이트 된 정보를 이제 봐서 쿠폰 정보를 놓쳤는데 혹시 쿠폰 다시 보내주실 수 있으신가여?
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
메모 추가 및 제거UI 부분 질문있습니다.
안녕하세요 메모 추가 및 제거UI 강의를 듣다가 조금 헷갈리는 부분이 있어 질문을 드립니다.import { useEffect, useRef, useState } from 'react'; import { AiOutlineClose, AiOutlineCheck } from 'react-icons/ai'; const Note = ({ id, onRemoveNote }) => { const colorOptions = [ 'bg-yellow-300', 'bg-pink-300', 'bg-blue-300', 'bg-green-300', ]; const [isEditing, setIsEditing] = useState(false); const textareaRef = useRef(null); const [content, setContent] = useState(''); useEffect(() => { if (textareaRef.current) { textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'; } }, [content]); return ( <div className={`p-4 bg-yellow-300 relative max-h-[32rem] overflow-hidden`} onClick={() => setIsEditing(true)} > <div className="absolute top-2 right-2"> {isEditing ? ( <button aria-label="Check Note" className="text-gray-700" onClick={e => { e.stopPropagation(); setIsEditing(false); }} > <AiOutlineCheck size={20} /> </button> ) : ( <button aria-label="Close Note" className="text-gray-700" onClick={() => onRemoveNote(id)} > <AiOutlineClose size={20} /> </button> )} </div> <textarea ref={textareaRef} value={content} onChange={e => setContent(e.target.value)} className={`w-full h-full bg-transparent resize-none border-none focus:outline-none text-gray-900 overflow-hidden`} aria-label="Edit Note" placeholder="메모를 작성하세요." style={{ height: 'auto', minHeight: '8rem' }} readOnly={!isEditing} /> {isEditing && ( <div className="flex space-x-2"> {colorOptions.map((option, index) => ( <button key={index} className={`w-6 h-6 rounded-full cursor-pointer outline outline-gray-50 ${option}`} aria-label={`Change color to ${option}`} /> ))} </div> )} </div> ); }; export default Note; 이 코드에서 useEffect(() => { if (textareaRef.current) { textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'; } }, [content]);이렇게 useEffect를 사용했는데 useEffect는 컴포넌트가 마운트 될 때 먼저 실행이 되고 또 의존성배열이 빈배열이면 한번만 실행이 된다로 알고 있습니다. 그럼 여기서는 빈 배열이 아닌 content가 있으니 메모장에 작성할 때마다 메모장을 늘어나게 하기 위해서 useEffect를 사용했다라고 이해하면 될까요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
npx webpack 후 에러
강의를 클론 받은 후, /sleact/setting/ts 경로에서 npm i 후 npx webpack을 입력하면 아래와 같이 에러가 나옵니다.다른 컴퓨터로 했을때는 작동 되지만, 제가 사용중인 컴퓨터에서는 작동되지 않습니다.npm i 입력 후 터미널 메세지ㅡup to date, audited 643 packages in 4s74 packages are looking for funding run npm fund for details26 vulnerabilities (3 low, 8 moderate, 12 high, 3 critical)To address issues that do not require attention, run: npm audit fixTo address all issues (including breaking changes), run: npm audit fix --forceRun npm audit for details. npx webpack 명령후 입력후 터미널 메세지[webpack-cli] Failed to load '/Users/kanghyun/Desktop/study/React/zerocho/sleact/setting/ts/webpack.config.ts' config[webpack-cli] SyntaxError: The requested module 'webpack' does not provide an export named 'Configuration' at ModuleJobSync.runSync (node:internal/modules/esm/module_job:387:37) at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:427:47) at loadESMFromCJS (node:internal/modules/cjs/loader:1565:24) at Module._compile (node:internal/modules/cjs/loader:1716:5) at Object.loadTS [as .ts] (node:internal/modules/cjs/loader:1826:10) at Module.load (node:internal/modules/cjs/loader:1469:32) at Function._load (node:internal/modules/cjs/loader:1286:12) at TracingChannel.traceSync (node:diagnostics_channel:322:14) at wrapModuleLoad (node:internal/modules/cjs/loader:235:24) at Module.require (node:internal/modules/cjs/loader:1491:12)
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
prefetch 속성 질문
강사님의 강의를 들으면서 test 페이지가 프로그래메틱하게 이동하기 때문에 따로 useEffect를 사용해 프리페칭되도록 만드는 것과, Link 컴포넌트에 prefetch 속성을 false로 하여 프리페칭되지 않게 만들 수 있다고 이해했습니다! 그런데 직접 코드를 작성하고 npm run start로 재실행한 뒤 새로고침을 했는데도 search 페이지에 필요한 js번들이 남아있고 test 페이지의 번들은 프리페칭되지 않았는데 어디가 문제인지 알 수 있을까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
서버 에러가 납니다.
const { id } = await params; const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${id}}`); const book = await response.json();book { statusCode: 500, message: 'Internal server error' }nest가 실행중인곳에는 Argument id is missing.PrismaClientValidationError: Invalid this.prisma.book.findUnique() invocation in/Users/leecho/dev/onebite-books-server/src/book/book.service.ts:55:41 52 } 53 54 async findOneBook(id: number) {→ 55 const book = await this.prisma.book.findUnique({ select: { id: true, title: true, subTitle: true, description: true, author: true, publisher: true, coverImgUrl: true }, where: { + id: Int } })Argument id is missing. 이런 에러가 나는데 왜 이럴까요..?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
ssg와 프리패칭에 대해 질문이 있습니다.
안녕하세요. 강의 잘 듣고 있습니다.Next.js는 오직 초기 접속시에만 HTML 파일을 불러와 Hydration 하고 그 이후의 페이지 이동은 리액트의 CSR(Client Side Rendering) 방식으로 처리하게 됩니다. 따라서 새롭게 HTML이 요청되지 않고 오직 브라우저측에서 JS Bundle을 실행해 컴포넌트를 교체하는 방식으로만 페이지 이동이 처리됩니다.라고 설명주셨는데요. 하지만 ssg 파트에서는 페이지 요청시 이미 빌드된 html 을 반환한다고 하셨는데 이 부분이 잘 이해가 되지 않습니다. 빌드를 하면 SSR를 설정하지 않은 페이지는 기본적으로 SSG로 작동하고, 그렇다면 굳이 프리페칭을 하지 않더라도 이미 완성된 페이지를 반환해주는게 아닌가 싶어서 질문드립니다. 라우터를 이용하여 페이지를 이동할때는 CSR로 작동하고 url에 직접 경로로 접속 요청을 할때 SSG로 작동하는건가요??두 가지 개념이 헷갈립니다
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
프리패칭에 관한 간단한 질문이 있습니다
prefetch를 명시적으로 false로 설정하면, 예상대로 해당 링크에 대한 프리패칭이 발생하지 않는 것이 확인되었습니다.<Link href={"/search"} prefetch={false}>Search</Link>그런데 신기한 점은, 해당 링크에 마우스를 호버했을 때 네트워크 탭에서 /search 관련 리소스들이 프리패칭되는 현상이 보였다는 것입니다. 혹시 이러한 동작은 Next.js에서 어떻게 정의되거나 불리고 있는지 궁금합니다!
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
SSG의 fallback 옵션
SSG의 fallback 옵션에 따른 렌더링 방식에 대해 좀 더 구체적으로 알고 싶습니다.fallback: "blocking"일 때, 빌드 타임에 사전 생성하지 않았던 경로에 대해서, 이후 접속 요청이 들어와 사전 렌더링되고, .next 서버에 저장되는 걸 확인했는데요.1) 저장되는 걸 캐싱이라고 이해해도 될까요?2) 그러면 그 이후의 요청에서는 더이상 재생성되지 않고, 이 페이지를 클라이언트에게 전달하나요?fallback: true 일 때, 빌드 타임에 사전 생성하지 않았던 경로의 접속이 들어왔습니다. 그 때, getStaticProps로 불러오는 데이터를 제외하고, 먼저 레이아웃을 내려준다고 이해했습니다. 그리고 추후에 Props만 따로 반환받아 페이지를 렌더링한다고 했는데, 그럼 받은 데이터를 가지고, CSR이 되는 건가요?위 상황에서 CSR이 맞다면, 해당 내용은 검색 크롤러가 알아내지 못해 SEO에 불리할 것 같은데요. 아니면 검색 크롤러가 getStaticProps 데이터가 올때까지 기다리고 해당 내용도 반영해서 문제가 없나요?감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
수업내용의문
안녕하세요 [CSS 09-2-3] 폰트 - 폰트와 크로스브라우징 강의 마지막에 다음강의에 안내된 그림,차트 모달 관련 강의가 없습니다.섹션 09 => [JS 09-1-1] 수업내용이 [ CSS 09-1-1] 과 같습니다. 중복업로드된것이 아닌지요 ?
