묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결프론트엔드 마스터클래스
30강 Map 자막이 이상합니다.
4:16초 부터만 스크립트가 나옵니다.
-
미해결타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
cacheLife에 대한 질문입니다
강의와 다르게 지금은 default 프리셋이 바뀌어서 질문드립니다 default의 경우 expire값이 never던데 그러면 캐시가 만료되지 않고 revalidate값에 따라 주기적으로 갱신된다고 이해하면 될까요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
process.env port key 에러
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. typeorm 강의 듣다가 config 섹션 먼저 듣고 있습니다. parseInt를 붙였는데도 string | undefined에러가 떴는데 뭐가 문제인지 모르겠어요..
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
tailwind 1279부터 768까지 모바일형과 컴퓨터형의 컴포넌트가 같이 보임
노션에 올려주신 8-1의 AdminPost.jsx를 복붙하면 가로화면 1279부터 768까지 모바일형 컴포넌트와 컴퓨터형 컴포넌트가 같이 보입니다
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
notion 수정
notion 링크로 들어가면, 직접 수정할 수 있던데 맞나요? 제가수정하면 수정이되서요 제 노션 페이지에 https://trusting-apparel-eb8.notion.site/MERN-165aac19ed70801dadd3cb7b34dad16f 링크를 복사해서 자주 들어가고 있는데 제가 해당 링크에 들어가면 수정이 가능해서요
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
교육기간을 연장할 수 있는지 문의드립니다.
교육기간을 5월까지 연장이 가능할지 문의드립니다. 3월안에 다 들을 수 있을것 같긴한데 실제 실습을하면서 일부 부족하다고 생각되는 내용들은 다시 공부하고 싶어 교육이용 가능기간 연장이 가능할지 문의드립니다.
-
해결됨Next.js 마스터 클래스: Part 2 - 풀스택 아키텍처와 프레임워크 심화 (Server Actions, 캐시 혁명, 고급 라우팅)
자료파일 압축이 안풀립니다
확인부탁드립니다
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
추상화
현재 인프런 [코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core강의를 수강 중 입니다.초반부를 듣고 있는 와중에@Get() @Get(':id')이런 데코레이터들의 내부로직에 대한 이해 없이 강의를 따라가는게 맞는건지가 궁금합니다.. 예를 들자면 파람, 바디 등 url에 담긴 데이터들은 파싱을 해줘야하고 http모듈을 쓴다면 직접 로직까지 구현을 했어야했고express는 미들웨어로 처리를 해줘야 했었는데 nest에선 데코레이터만으로 모든게 알아서 처리 되는 느낌인것 같습니다. 또한 클라이언트로 보내는 응답 또한return문으로 보내지는 것 또한 너무 추상적으로 느껴집니다.. nest 강의전에 http모듈 및 express를 공부 했던지라 추상화된 코드가 더욱 낯선 것 같습니다. 아직 강의초반이라 데코레이터의 내부로직을 아직 배우지 않는 것인지아님 배울 필요가 없어서 설명이 없는 것인지 궁금합니다 강사님
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
AvailableUsers
시각적 회귀 테스트 강의의 Storybook 코드에서 play 함수 안에 matcher를 넣지 않고 userEvent.click(...)만 사용한 이유가 궁금합니다.import { userEvent, within } from '@storybook/testing-library'; import AvailableUsers from '@/pages/login/components/AvailableUsers'; export default { component: AvailableUsers, title: '로그인/사용자 리스트', }; export const Folded = { name: '접힌 상태', }; export const Expanded = { name: '펼친 상태', play: async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.click(canvas.getByText('⚠️ 사용 가능한 유저 리스트')); }, }; 제가 이해한 바로는, 이 스토리는 storybook에서 아코디언이 펼쳐진 시각적 상태 변화를 보여주기 위한 용도이고, 실제 기능 로직 검증은 Vitest에서 별도의 테스트 코드로 작성하는 방향이라고 생각했습니다. 1. 여기서 play 안에 matcher를 넣지 않은 것은 Storybook을 시각적 상태 확인용으로 사용하려는 의도인가요? 2. 그리고 이 컴포넌트의 동작 검증은 Storybook이 아니라 Vitest에서 담당하도록 역할을 나눈 것으로 이해하면 될까요?3. 실무에서는 보통 storybook을 어디까지 작성하는지 궁금합니다. - 물론 회사마다 다르겠지만, 강의해주시는 강사님 기준으로 의견을 듣고 싶습니다.
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
storybook/ addon react-router-dom
// package.json npm list로 확인 결과 react-router@7.13.1 storybook-addon-remix-react-router@6.1.0 react@19.2.4 storybook@10.2.17강의에 있는 내용을 토대로 typescript로 쇼핑몰 storybook 테스트를 진행 중에 React Router pannel에 로깅이 찍히지 않습니다. github, storybook docs 참고하면서 해봐도 해결이 되지를 않는데... 제 코드는 아래와 같습니다..storybook/main.ts// .storybook/main.ts import type { StorybookConfig } from "@storybook/react-vite"; const config: StorybookConfig = { stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], addons: [ "@chromatic-com/storybook", "@storybook/addon-vitest", "@storybook/addon-a11y", "@storybook/addon-docs", "storybook-addon-remix-react-router", ], framework: "@storybook/react-vite", }; export default config; .storybook/preview.tsximport type { Preview } from "@storybook/react-vite"; import { withRouter } from "storybook-addon-remix-react-router"; const preview: Preview = { tags: ["autodocs"], parameters: { controls: { matchers: { color: /(background|color)$/i, date: /Date$/i, }, }, a11y: { // 'todo' - show a11y violations in the test UI only // 'error' - fail CI on a11y violations // 'off' - skip a11y checks entirely test: "todo", }, }, decorators: [withRouter], }; export default preview; EmptyNotice.tsximport type { MouseEvent } from "react"; import { useNavigate } from "react-router"; const EmptyNotice = () => { const navigate = useNavigate(); const handleClickBack = (event: MouseEvent<HTMLButtonElement>) => { event.preventDefault(); navigate("/"); }; return ( <div style={{ display: "flex", justifyContent: "center", height: 400, alignItems: "center", flexDirection: "column", }} > <p style={{ fontSize: "50px", fontWeight: 300 }}>텅~</p> <button onClick={handleClickBack} style={{ cursor: "pointer" }}> 홈으로 가기 </button> </div> ); }; export default EmptyNotice; EmptyNotice.stories.tsximport type { Meta, StoryObj } from "@storybook/react-vite"; import EmptyNotice from "./EmptyNotice"; const meta = { title: "장바구니/EmptyNotice", component: EmptyNotice, } satisfies Meta<typeof EmptyNotice>; export default meta; type Story = StoryObj<typeof meta>; export const Default: Story = { name: "장바구니가 빈 경우", }; AI하고 문답하면서 디버깅 하는데 좀처럼 원인을 못찾겠어서 질문올립니다.
-
미해결타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
(제보) 쿠키를 브라우저 개발 환경에서 직접 삽입했을 때 나오지 않는 현상
말씀해주신 대로 브라우저의 쿠키 탭에서 데이터를 입력하니, 서버를 재실행했을 때 쿠키가 날라가서 올바르게 테스트를 할 수 없었습니다. Claude 로 확인해보니 headers.set('Set-Cookie', ...) 코드 작성 후 테스트 환경에서 직접 URI 를 입력하여 실행하여 쿠키를 심어보라고 해서 그렇게 했더니 쿠키가 잘 심어집니다! /* src/app/api/test-cookie/route.ts */ // localhost:3000/app/api/test-cookie 로 들어가 직접 쿠키를 입력해야 정상 작동 export async function GET() { const response = new Response('ok'); response.headers.set('Set-Cookie', 'name=kim; HttpOnly; Path=/; Max-Age=3600'); return response; }
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
강의에서는 리턴문 내에 TodoStateContext.Provider 컴포넌트가 상위에 있고 자식으로 TodoDispatchContext.Provider컴포넌트가 아래에 있는데 이유가 무엇인가요? 이 둘의 위치가 바뀌면 안되는건가요? 프로바이더 컴포넌트는 하위에 있는 모든 컴포넌트에서 값을 꺼내 쓸 수 있으면 둘의 위치가 바뀌어도 상관이 없는것 아닌가요? 이유가 궁금합니다!
-
해결됨초당 500,000+건 트래픽을 처리하는 카카오 면접관의 Redis
Redis Hash
강의 내용을 듣고 생각했을때 ,대부분의 경우 Redis String 보다 Redis Hash 사용하는게 대부분 이득일것 같다 생각이 들던데...어떻게 사용하고 계시나요 ?? 사실 저는 Redis String 으로 Json 으로 많이 사용했었습니다. 그리고 큰 장애를 경험하지 못했는데요 아무래도 트래픽에 대한 차이인것 같네요
-
해결됨초당 500,000+건 트래픽을 처리하는 카카오 면접관의 Redis
Redis 큐
강의 잘 들었습니다.Redis 주로 그냥 일반적으로 메모리에 저장하고 호출하는 정도로만 사용을 하고 있는데요BLPOP ,RPUSH job_queue job1 와 같은 기능은 언제 사용하게 되나요 ??
-
미해결타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
디스코드 채널 초대 링크
초대 링크가 유효하지 않아서 확인 한번 다시 부탁드립니다~
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Date 객체에 관련하여 질문드립니다.
🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)제목을 구체적으로 작성해 주세요✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요Date 객체와 날짜안녕하세요. 정환님. Date 객체에 관련해서 질문이 있어 Q&A에 글을 남기게 되었습니다.Date 객체는 자바스크립트가 처음 만들어졌을 당시에, java의 util.date 를 참고해서 만들어졌기에 현재 대체제로 외부 라이브러리를 활용하거나 Intl api, Temporal(현재 stage 3 상태)가 많이 언급되고 있는 부분입니다. 추후에 temporal이 정식으로 도입되면 강의 내용을 변경하실 것인지 질문드립니다.
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
자바스크립트 입문 강의 재생 안됨
임베디드된 강사님 유튜브 계정이 터졌는지 자바스크립트 강의는 안나오고 있어요;
-
미해결AI와 함께 배우는 Next.js
배포된 실습용 서버 상태 확인 부탁드립니다
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
mockZustand
안녕하세요.강의 너무 잘 보고 있습니다. 한 가지 궁금한 점이 있어서 QnA남깁니다.// __mocks__/zustand.js const { create: actualCreate } = await vi.importActual('zustand'); import { act } from '@testing-library/react' const storeResetFns = new Set(); export const create = createState => { const store = actualCreate(createState); const initialState = store.getState(); storeResetFns.add(()=>store.setState(initialState,true)); return store; } beforeEach(() => { act(() => storeResetFns.forEach(resetFn => resetFn())); }); 위의 __mocks__/zustand.js 에서 reset할 때 true를 사용하는 건 이해가 됩니다.그런데 아래의 mockZustandStore 에서 replace:true를 넣었는데 왜 넣어줬는지가 궁금합니다. const mockStore = (hook, state) => { const initStore = hook.getState(); hook.setState({ ...initStore, ...state }, true); }; export const mockUseUserStore = state => { mockStore(useUserStore, state); }; replace:true는 완전히 해당 store에 대한 상태,함수들을 교체 하는것으로 알고 있습니다.넣어준 의도 또는 이유가 있을까요?? 안 넣어주면 생기는 문제들이 있었기 때문에 replace:true로 한건지관례로 넣었던 건지
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 개정판 교재 질문
리액트 개정판 교재 질문이 있습니다. 설치를 예전 책 버전에 CRA로 설치를 했는데 개정판은 VITE로 설치를 하나요 그리고 예제도 책이랑 공유되는지 궁금합니다. 여러가지로 강의랑 비슷하면 책도 구매할겁니다!