묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
커서 설치 후, 리뷰 셋팅 화면에서 언어를 한국어로 설정 후, 터미널이 인스톨되지 않습니다
open from terminal 에서 인스톨을 누르면 아래와 같은 메시지가 나오고 설치되지 않아요어떻게 해결할 수 있을가요 [Window Title]Cursor[Content]Unable to update the PATH environment variable to include 'c:\Users\새로운 사용자\AppData\Local\Programs\cursor\resources\app\bin'.[OK]
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
graphql 관련 질문입니다
myGraphqlSetting 부분이 문자열로 인식돼서 요청할 때도 문자열로 들어가는 것 같은데 이 부분은 어떻게 수정해야 되나요?
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
vite 설치 관련 문의
npm create vite@latest . --template react 실행시면 설치 옵션에 바닐라랑 리액트가 있는데 리액트를 설치하는 거죠?그 다음에 나오는 옵션에선 타입스크립트랑 자바스크립트가 있는데 그것도 그냥 하나씩만 있는 게 아니고 js+SWC 이런 것도 있는데 뭐 설치해요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
revalidateTag
revalidateTag를 tanstack-query의 쿼리키를 무효화한 것과 비슷하다고 이해해도 될까요?
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
mallapi
mallapi에서 malldb를 연결 했고,apiserver에서 apidb를 연결했습니다.4강 조회기능에서test를 위해 malldb에 테이블 확인을 하시는데 왜 갑자기 테이블이 생긴걸까요?저희는 mallapi는 연결만 하고 구현은 안된거 아닌가요?apiserver에서 구현한 todo는 apidb 안에서 생성되는 걸로 구현이 되어있는데뭘 잘못 한건가요?
-
해결됨Next + React Query로 SNS 서비스 만들기
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
안녕하세요. 먼저, Next.js 를 입문한지 얼마 되지 않아 질문이 서툴 수 있는 점 양해 부탁드립니다..!현재 msw 세팅을 완료 했고, Auth.js는 공식문서를 참고하여 5버전과 동일하게 auth.ts 파일을 아래와 같이 작성하였습니다.// auth.ts import NextAuth from "next-auth"; import Credentials from "next-auth/providers/credentials"; export const { handlers, signIn, signOut, auth } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ Credentials({ authorize: async (credentials) => { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: "POST", body: JSON.stringify({ username: credentials.username, password: credentials.password, }), headers: { "Content-Type": "application/json" }, }, ); if (!response.ok) { return null; } const user = await response.json(); console.log("로그인 정보", user); return { id: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], });// @modal/(.)/i/flow/login/page.tsx const onLogin = async () => { try { await signIn("credentials", { username: id, password, redirect: false, }); router.replace("/home"); } catch (err) { console.error(err); setMessage("아이디와 비밀번호가 일치하지 않습니다."); } };문제는 authorize 함수 내 콘솔이 찍히지 않는 것으로 보아, 해당 함수가 아예 실행되지 않는 것 같습니다.회원가입하지 않은 아이디와 비밀번호를 입력해도 로그인이 되고 /home 으로 이동합니다. home으로 이동 후 session 응답 값은 null이고 쿠키에도 auth 토큰이 저장되지 않습니다.그리고 터미널에는 첫번째 이미지 처럼 에러 메세지가 뜨고, 브라우저 콘솔에는 두번째 이미지와 같은 메세지가 뜹니다. // handlers.ts http.post(`${baseUrl}/api/login`, () => { console.log("로그인"); return HttpResponse.json(User[1], { headers: { "Set-Cookie": "connect.sid=msw-cookie; HttpOnly; Path=/", }, }); }),현재는 MSW가 요청을 제대로 가로채지 못하고 있는 것 같다는 의심이 드는데, 어디를 우선적으로 점검해야 할지 잘 모르겠습니다..초보라 부족한 점이 많지만, 방향을 잡을 수 있도록 힌트나 조언 주시면 정말 감사하겠습니다 ㅠㅠ
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
사전렌더링에서 서버가 렌더링하는방법
csr에서는 번들링된파일을 받으면 브라우저에서 돔트리를 만들어서 화면에그리는데 7강 8분50초에서 next에서 사전렌더링을 할때에는 서버가 직접 js를 실행해서 렌더링을 한다고 하셨는데 그럼 서버에서 직접 돔트리를 그리는건가요? 질문자체가 이상할수 있는데 헷갈려서 질문드립니다ㅠ
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
event객체 전달에 관해서
앞선 강의에서 매개변수가 있는 경우 event객체를 명시적으로 전달하라고 하셨는데 본 강의에서는 매개변수가 있지만 따로 명시하지 않으신 부분이 궁금합니다. event객체를 사용하지 않는 경우에도 매개변수가 있는 경우 명시적으로 지정해줘야 하는지, 혹시 제가 잘못 이해한 것이라면 어느 상황에 명시적으로 event 객체를 전달하는지 알고 싶습니다.
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
bundle analyzer 에 대한 질문이 있습니다.
performance 탭에서 다운로드가 오래걸리는 파일(0.chunk.js)이 bundle analyzer 에서 어떤 파일(static/js/2.4~~~.js)인지 정확히 알기는 어렵고 추측을 할 수밖에 없는 거겠죠? 복잡한 프로그램을 개발할 땐 문제가 있는 파일이 무엇인지 찾기가 어려울 것 같은데, 어쩔 수 없는 걸까요...? ㅜ
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
강의가완전 오래되서 다 틀리네 app.jsx도 tailwind css 다틀림 무책임함
// src/App.jsx import { useState } from 'react' import viteLogo from '/vite.svg' import reactLogo from './assets/react.svg' import './App.css' function App() { const [count, setCount] = useState(0) return ( <div className="App flex items-center justify-center h-screen"> <h1 className="text-3xl font-bold underline"> Hello world </h1> </div> ) } export default App
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
node.js 설치방법
예전에 다운 받을 때랑 달라서 질문 드립니다.도커 방식으로 선택해서 다운로드 하는게 맞을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
개발자도구에 redux란이 없어요
마지막까지 다했는데 크롬 개발자도구에 redux란이 없습니다. 그리고 강의영상에선 아래코드에서 코드를 작성하면 젤 위에 import쪽도 자동 생성되던데 그건 혹시 어떻게 하는건가요
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npx tailwindcss init -p 에서 계속 에러나요
https://github.com/nature1339/react_shoppingmall
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
쇼핑몰기능중 찜하기 기능은 어떻게 구현하나요
쇼핑몰기능중 찜하기 기능은 어떻게 구현하나요
-
미해결코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)
notepad가 없습니다
컴포저도 안보입니다그리개서 컴포저안에 오픈 컨트롤 판넬도 없어요 codebase도 없습니다add new doc도 없어요
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
openai.com 로그인했는데 데시보드가 안보여요. 어디서 봐야하나요?
openai.com 로그인했는데 데시보드가 안보여요. 어디서 봐야하나요?
-
해결됨웹 프론트엔드 포트폴리오의 모든 것 - 주제 선정부터 실전 배포까지 압축 실습 강의!
landscape에 대하여
안녕하세요! 강의 잘 보고 있습니다!저렇게 사과에 적용된 회전을 다시 제거했을때, 유저가 모바일 화면에서 게임을 플레이 하려면 휴대폰을 가로로 뒤집을 수 밖에 없을 텐데, 그러면 OrientationGuide가 활성화가 되어 플레이를 할 수 없지 않나요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
localhost:12345/book 접속 시, 500 에러
안녕하세요 강의 잘 듣고 있습니다. fetch-book.ts를 만든 후, index.tsx에 불러와서 console.log(allBooks) 를 찍어봐도 빈 배열만 나와서 localhost:12345/book 이 api 주소로 들어가보면해당 오류가 떠서 혹시 .env 파일이 잘못 됐나 해서 올바르게 수정을 해도 계속 같은 에러가 떠서 진행을 못 하고 있는 상태입니다 ㅠ
-
미해결실무 중심! FE 입문자를 위한 React
12-2. Recoil -> Jotai 변환 코드 공유합니다.
Recoil 지원 중단 문제로 강의에 나온 Recoil 관련 내용을 Jotai 라이브러리로 대체했습니다.여러 수강생 분들이 같은 문제를 겪는 듯해서 제가 사용한 코드를 공유합니다.recoil 제거 & jotai 설치npm uninstall recoil npm install jotaiatom.js 변환 코드: jotai 의 atom 에선 key 값이 없습니다.import {atom} from "jotai"; const testState = atom(['a', 'b', 'c', 'd']); export default testState;testWithComma.js: 마찬가지로 키 값이 없으며, 좀 더 단순하게 사용 가능합니다.import {atom} from "jotai"; import testState from "./atom.js"; const testWithComma = atom((get) => { const abcdArr = get(testState) return abcdArr.join(','); }) export default testWithComma;CompletionPage.jsx: useRecoilValue -> useAtomValue 로 변경하시면 됩니다.const testValue = useAtomValue(testWithComma); Jotai 와 Zustand 중 고민하다가 Jotai가 Recoil과 더 유사하다고 하여 우선 Jotai로 학습 진행했습니다. 강의 수강에 참고가 되길 바랍니다.
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
Sidebar & Header 컴포넌트 등 레이아웃 설정 방식
강의에서 레이아웃을 담당하는 Sidebar, Header 컴포넌트를 만들때 Props으로 children을 받고 렌더링 하는 방식으로 만들었는데 이렇게 만든 이유가 있을까요?지금까지 진행한걸 계층별로 생각해보면최상위 Root->Sidebar->Header->... 등 형제 노드는 없고 자식 노드 형태로 계속 깊어지는구조.------------아래의 방법과 비교해서 궁금합니다.아래 코드와 동일하지 않더라도,Sidebar, Header 컴포넌트가 children과 분리된 구조.<body> <Sidebar/> <div> <Header/> <main>{children}</main> </div> </body>