CKE Editor 관련 버전 질문
미해결
인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
이런 문제가 발생되어 버전이 일치하지 않아 설치가 안되어 진도를 나가지 못하고 있습니다..
- aws
- docker
- next.js
- nestjs
- prisma
172만명의 커뮤니티!! 함께 토론해봐요.
미해결
인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
이런 문제가 발생되어 버전이 일치하지 않아 설치가 안되어 진도를 나가지 못하고 있습니다..
미해결
인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
인프런 자체 자막은 아니라서 영상속에 포함이 된거 같은데 제거 가능할까요 보이는 자막은 후반 부에 대부분 보이며 지금 보이는 부분은 [FE] 커리큘럼 관리 구현 부분 입니다. 관련 이미지 첨부합니다 .
미해결
뉴비를 위한 자바스크립트
안녕하세요. 저는 이제 막 프로그래밍을 완전 처음 접하는 직장인입니다. 개인적으로 어떤 앱을 스스로 개발 해보고 싶어서 처음부터 웹의 모든것들을 혼자서 공부할 계획입니다. 현재 저의 상황은, chatGPT로 부터 받은 총 1200줄의 Todo list 코드들을( 완전히 암기한 상태입니다. . , , HTML,CSS,JS 코드 모두 합친) HTM,CSS 는 어느 정도 알고있는 상태입니다. 그런데 이게 웃기는 상황인게 정작 암기를 하였지만 코드의 각 기능과 의미, 각 코드들간에 연관성이 무엇인지는 단 하나도 모른다는 것입니다 ㅡㅡ;; 예를들어 화살표 함수, async/await, reduce, map,filter, API 호출 이런 함수들을 암기했지만 뭔지도 모르는 상태입니다. ;; 다시 처음부터 강의를 들으며 무식하게 암기하였지만 몰랐던 부분들을 하나씩 배워갈려고 합니다. 가장 궁금한 부분은 이 강의를 수강하고, 선생님의 더욱 집중된 JS 유료 강의를 모두 수강 후 바로 React, node.JS로 넘어가도 되는지도 궁금합니다!! 저의 질문을 읽어 주셔서 감사합니다 ^^
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
"6. 1. (최신 버전) 자바스크립트 코딩 환경 설정"의 화면이 정상적으로 출력되지 않습니다. Chrome과 Safari에서 각각 테스트했으나 결과는 같았습니다. 문제 해결 부탁드립니다.
해결됨
한 입 크기로 잘라먹는 Next.js
이전 챕터에서 클라이언트 컴포넌트에 대해 다뤘을때 서버에서 사용할 수 없는 훅을 사용할 경우 클라이언트 컴포넌트를 사용해야한다고 이해하였습니다. 그 중 하나가 useEffect이고 그 이유는 useEffect는 컴포넌트가 마운트 되었을 때 즉, 브라우저에 렌더링 되었을 때 실행되기 때문이라고 이해하였습니다. 제가 생각했을 때에는 useActionState 훅은 서버에서 실행되어도 상관 없는 훅이라고 생각하는데 맞는지 궁금합니다. 만약 맞다면 useEffect 훅을 사용하지 않고 useActionState만 사용한다면 서버 컴포넌트로 사용할 수 있는 것인지도 궁금합니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요, 선생님. 수업 잘 듣고 있습니다! 동물 앨범 만들기-3 수업을 듣다가 pushState메서드 사용할 때 가장 첫번째 값에 null을 넣는 이유가 궁금합니다! 감사합니다! const tabBar = new TabBar({ $app, initialState: "", onClick: async (name) => { history.pushState(null, `${name}`, name); this.setState({ ...this.state, currentTab: name, photos: await request(name === "all" ? "" : name), }); }, }); ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다. ⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
해결됨
비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
start medium phone api 36 디바이스를 추가하고 실행시키면 첨부한 이미지처럼 검은 화면이 나오거나 안드로이드 폰 배경화면만 나오는데 이건 왜 그런걸까요? 우측하단 디바이스 선택하는 곳에서 웹으로는 잘 실행이 됩니다. flutter doctor로 검사해도 별다른 문제가 없는데 커서로 물어보면 주구장창 flutter doctor -v 테스트만 하네요~ ㅜㅜ
해결됨
떠먹는 Three.js
아직 초반부지만 열심히 듣고 있는데요, 섹션3에서 각각의 명령어를 설명하시면서 직접 마우스로 움직이면서 하시더라구요 강사님 설명을 들으면서 입력해보고는 있는데 그렇게 움직이면서는 확인이 안되어서요.... 따로 코딩을 더 넣어야 하는건지 아님 제가 놓친 부분이 있는지 해서요
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
javascript prettier 패키지 visual studio code 에 설치 하고 설정부분에서도 format on save 부분 editor 체크했는데 적용이 안되네요
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
안녕하세요. 강사님. 강의를 보고 개인 웹사이트를 만들었는데요. https://mirihomepage.com/ 로그인이 안됩니다;;; superuser도 있고, 카테고리/google 사이트 등록까지 분명 다 했는데, https인증 받고, 도메인 연결하고 그러는 사이에 뭔가 달라진건가싶습니다...
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이 강의를 이전에 구입했었고 이제 들으려 하니 코드도 강의도 옛날 그대로고 업데이트도 끝난것 같네요
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
백앤드 서버랑 연동하는 실습은없나요? 저도 잘 모르지만 axios?이걸로 api보내는 형식으로 백앤드서버랑 통신하는 그런 실습은업을까여ㅛ?
해결됨
비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
현재 백엔드 개발자로써 근무중인 직장인 입니다. 추후 1인 창업을 목표로 이 강의를 구매하였는데요. 개발자가 이 강의를 통해 좀 더 시너지를 극대화시킬 수 있는 방법이 있는지 궁금합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 실습 준비하기에서 npm install 까지 마치고 라이브 서버로 열려고 하는데 빈 공백만이 뜹니다. 브라우저의 개발자용 콘솔에는 Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec. 라고 떠있어요. 제미니한테 물어보니까 브라우저가 jsx를 못 읽어서라고 하네요. 열심히 여러가지 시도 해봤으나 잘 안되서 도움 요청드립니다ㅠㅠ
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요. 게시물 업로드 요청 시 500 Internal Server Error 에러가 발생합니다. 현재 코드에는 쿠키도 함께 전달되고, 네트워크 탭에서 확인해보면 formData 값도 정상적으로 전송되는 것으로 보입니다. const onSubmit: FormEventHandler = (e) => { e.preventDefault(); // formData 객체에 값 넣기 const formData = new FormData(); formData.append("content", content); preview.forEach((item) => { if (item) { formData.append("images", item.file); } }); // 전송 fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts`, { method: "post", credentials: "include", body: formData, }); }; 그런데 서버에서는 userId가 undefined로 들어가고 User 정보가 없다(?)는 오류가 발생합니다. 다른 분들의 Internal server error 관련 질문을 살펴봐도, 이 문 제가 프론트에서 확인할 수 있는 부분인지 잘 구분이 되지 않아 질문드립니다. 제가 어디를 중점적으로 확인해보면 좋을까요?
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요! 강의 5:15초 부터의 설명에 조금만 더 자세히 설명해주시면 감사할것 같아서요! "이러한 파람즈도 프라미스로 가져와야겠죠 우리가 최신을 사용하고 있기 때문에 다시 generateMetadata 함수를"라고 스크립트(영상자막)는 나와 있는데, 이유를 설명하는 파트가 잘 안 와닿아서 혹시 설명해주실 수 있나요? 직관적으로 생각하면 export generateStaticParams에서 slug 를 params으로 가져오는데 시간이 걸리니까, 기다려야 하니까 await 으로 params를 기다리는건 알겠는데, 'params'가 왜, 어떻게 해서 Promise 타입인지 궁금합니다. 너무 두서없었네요. 정리하자면 1.왜 params 가 Promise 객체 타입인지, 코드 어디에서, 어떻게 해서 Promise 객체 타입이 되었는지 궁금합니다. 2. 혹시 params 가 Promise 객체 타입인 이유는, 그저, [slug]폴더로 동적페이지로 정의되었으니, 컴포넌트로 들어오는 입력값 {params}는 [] 안에 들어간 변수값이 들어오는 건가요? 그래서 그냥 nextjs 스펙상 무조건promise 로 params 가 주어지게 되는건가요? 너무너무 헷갈려서 그런데, 동적라우팅/정적 라우팅 별, 그리고 Clientside /serverside 별로 4가지로 나누어서 params 가져오는 방법을 설명해주실수 있나요? 너무너무 헷갈리네요.... 동적/정적라우팅에 따라 나뉘나요, client/server 에 따라 나뉘나요? 후자인걸로 생각하고 있긴 한데 맞는지 너무 헷갈리네요.. 감사합니다! 좋은 하루 되세요!
해결됨
프론트엔드 마스터클래스
103강 메모이제이션과 104강 가상화가 매끄럽게 이어지지 않고 끊긴 느낌이라 질문드립니다!
미해결
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
유저의 상품을 다른 사용자가 구매할 시 '거래 후 잔액'과 '포인트'의 값이 일치해야 되는 게 아닌지 궁금합니다!
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요, 잘 학습하고 있는 학생입니다. 강의 따라가면서, streaming 파트는 다 적용을 했습니다. 소개 탭에서 홈 탭으로 이동 시에 태그목록과 포스트리스트도 skeleton 로딩페이지 잘 적용됩니다. '홈'을 눌렀을때, 기존의 '로딩 되는 중에 아무 변화 없이 사용자를 마냥 기다리게 함'에서 현재의 '로딩 되는 중에 skeleton 보여줌으로써 로딩되고 있음을 나타내줌'으로의 개선은 사용자 경험에 있어서, 정말 효과적인 방법이라고 느꼈습니다. 다만, 문제가 있습니다. '홈' 을 눌러 이동하는 경우말고, 태그 목록에서 나머지 'css'태그, 'git'태그 등등 이를 직접 클릭해서 이동하는 경우에는 streaming 이 적용되지 않습니다. 예를 들어, 홈을 클릭한 상황에서는 skeleton ui가 잘 나타나지만, 그렇게 홈으로 이동한 상황에서 다른 태그(css,Git 등)로 다시 이동하는 상황에서는 적용되지 않고 그대로입니다. 이를 해결하기 위해선 어떻게 해야 하나요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 강사님 좋은 강의 잘 듣고 있습니다! useSuspenseQuery를 사용 중에 고민이 생겨서 질문 드립니다. 제가 구현하고 있는 프로젝트의 대부분 API는 인증이 필요합니다. refresh token 은 http only 쿠키로 관리하고, access token 은 쿠키에 저장하고, 요청 헤더에 넣어 인증을 하고 있습니다. useSuspenseQuery 를 사용하는 페이지에서 SSR 단계에 401 에러가 발생합니다. 이후 CSR 전환 시에는 정상적으로 데이터를 불러와 화면은 최종적으로 렌더링됩니다. 해당 페이지를 dynamic import 로 CSR 강제하면 401이 발생하지 않습니다. 제가 추정한 원인은 클라이언트 컴포넌트 내부라도 초기 렌더링 시 SSR 패스에서 useSuspenseQuery 가 실행되어 서버에서 API 요청이 발생. 이때 공통 axios 인스턴스가 클라이언트 전용 방식으로 쿠키를 읽어 헤더에 토큰을 주입하도록 구현되어 있어, 서버 환경에서는 토큰을 읽지 못해 401이 발생하는 것으로 판단했습니다. 해결을 위해 시도한 방법 prefetchQuery + useSuspenseQuery 조합으로, prefetchQuery 단계에서 next/headers 를 통해 서버 환경에서 토큰을 읽어 주입하면 401이 사라졌습니다. 다만, 모든 useSuspenseQuery 호출 지점마다 prefetchQuery 를 추가하는 것은 과도하다고 느껴 대안을 모색 중입니다. 질문 사항 왜 SSR에서 실행되나요? 클라이언트 컴포넌트 내부에서 호출하는데도 useSuspenseQuery 가 SSR 렌더링 단계에서 동작하는 메커니즘을 정확히 이해하고 싶습니다. useSuspenseQuery 의 단점/주의점 강의에서는 주 사용을 권장해 주셨는데, 모든 데이터 관리에 useQuery 대신 useSuspenseQuery 사용하는게 좋은건지 실제 서비스에서 고려해야 할 단점이나 주의사항이 궁금합니다. 401을 피하는 권장 패턴 제 환경처럼 서버에서 토큰을 읽지 못해 401이 나는 경우, 제가 시도한 방법 인 prefetchQuery 적용 외에 권장되는 표준 패턴이 있을까요? prefetchQuery 를 여러 곳에서 사용할 때의 리스크 여러 페이지/쿼리에서 prefetchQuery 를 널리 적용하면 TTFB 지연, 직렬화된 캐시의 HTML 페이로드 증가, 중복 호출 등의 문제가 커질 수 있을까요? 그렇다면 적절한 적용 기준이나 완화 전략이 궁금합니다. 그리고 어떤 기준으로 prefetchQuery 를 적용하면 좋을지도 궁금합니다. 문서와 블로그, GPT 등을 찾아봤지만 명확히 정리하기 어렵고, 제가 질문을 드릴 수 있는 최고 전문가라고 생각하여 의견을 여쭙니다. 긴글 읽어주셔서 감사합니다! 아래 에러가 발생하는 예시 코드 첨부 드립니다. (APage를 CSR로 강제하면 에러 미발생) import Spinner from "@/components/common/spinner/Spinner"; import A from "@/components/pages/A"; import { Suspense } from "react"; import { ErrorBoundary } from "react-error-boundary"; interface APageProps { params: { id: string; }; } export default async function APage({ params, }: APageProps) { const { id } = params; const parsedId = parseInt(id); return ( <ErrorBoundary fallback={<div>에러가 발생했습니다</div>}> <Suspense fallback={<Spinner fullscreen />}> <A id={parsedId} /> </Suspense> </ErrorBoundary> ); } "use client"; import { useGetAList } from "@/api/A/queries/useGetAList"; interface AProps { id: number; } export default function A ({ id }: AProps) { const { data: probiomeList } = useGetAList(id); // 생략 import { queryKeys } from "@/constants/queryKeys"; import { UseSuspenseQueryCustomOptions } from "@/types"; import { useSuspenseQuery } from "@tanstack/react-query"; import { getAList } from "../A"; import { AList } from "@/types/A"; export function useGetAList( id: number, queryOptions?: UseSuspenseQueryCustomOptions<AList> ) { return useSuspenseQuery({ queryFn: () => getAList(id), queryKey: [ queryKeys.A.BASE, queryKeys.A.GET_A_LIST, id, ], ...queryOptions, }); }