묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Vue 3 시작하기
target[prop] 질문
target[prop] = newValue; 를 하지 않고 render(newValue)를 해도 값이 바껴서 출력되는걸 확인할 수 있는데, target[prop]에 newValue 값을 넣어주는 이유가 있을까요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
미로 탐색 문제 질문 있습니다.
미로 탐색에서 재귀에 진입하기 전 board에 표시를 할 때,boarr[nx][ny] = 1이 맞나요?해당 자리에 1로 표시를 해놓고 다음으로 넘어가는 개념이니까arr[x][y] = 1이렇게 하는게 맞지않나라는 생각이 드는데혹시 제가 잘못 이해를 한 걸까요?결과는 똑같이 나와서 의문이네요.// 강사님의 답 if(nx >= 0 && nx <= 6 && ny >= 0 && ny <= 6 && board[nx][ny] === 0){ board[x][y] = 1 DFS(nx,ny) board[x][y] = 0 } // 저의 답 if(nx >= 0 && nx <= 6 && ny >= 0 && ny <= 6 && board[nx][ny] === 0){ board[x][y] = 1 ★★★ DFS(nx,ny) board[x][y] = 0 ★★★ }
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 환불관련 문의드립니다.
안녕하세요. 선생님 제가 해당 강의를 유데미에서 수강중인 것을 모르고 실수로 또 구매를 했습니다. 현재 환불 기간이 지나 환불이 불가능한 것으로 확인되어 혹시 해당 강의를 한입 크기로 잘라먹는 타입 스크립트로 변경이 가능한지 문의드립니다. 해당 강의는 아직 수강하지 않았습니다. 제가 아마 할인 기간에 여러 강의 신청할때 같이 신청한거 같은데, 지금 보니 유데미에도 동일 강의를 신청했었네요. 필요시 유데미 강의 결제한 내역 인증도 가능합니다. 동일한 강의를 듣기에는 좀 부담이 있어서 혹시 넓으신 아량으로 강의 변경 또는 환불이 가능한지 문의드리겠습니다.환불이 될 경우 다시 한입 크기 타입 스크립트 강의를 신청하겠습니다.감사합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
expo-cil 설치
안녕하세요. 문의남깁니다.맥에서 expo-cil 설치가 안됩니다." zsh: command not found: npm " 요런 메세지가 나오는데 어떤 방법으로 진행해야하나요?
-
해결됨풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
white-space: pre 사용할때 왼쪽에 생기는 공백을 없앨수 있는 방법이 있을까요?
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 4:53분에 나오는 예시에서 pre로 설정한 부분들은 default랑 다르게 좌측이 띄어져서 나오는데 그 부분을 없애려면 어떤걸 바꿔줘야 하나요?
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
4.3. 강의와 깃헙 소스코드가 다른 부분
안녕하세요. 강의 잘 듣고 있습니다.다름이 아니라 강의와 깃헙 소스코드가 달라서 문의드려요. mocks/zustand.js의 코드인데요.const { create: actualCreate } = await vi.importActual('zustand'); import { act } from '@testing-library/react'; // 앱에 선언된 모든 스토어에 대해 재설정 함수를 저장 const storeResetFns = new Set(); // 스토어를 생성할 때 초기 상태를 가져와 리셋 함수를 생성하고 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())); });깃헙 소스코드는 위와 같이 beforeEach를 사용하지만 강의에서는 afterEach로 설명해주시고 있습니다.주석도 마찬가지로 다릅니다.무엇이 맞는 걸까요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
마지막 followee 감소 강의 누락
안녕하세요. 코드팩토리님강의 너무나 잘 들었습니다.허나 마지막 강의 followee 부분이 누락되었습니다.이 부분 추가 해주시면 감사하겠습니다. 이전에 질문이 된 기록을 확인해봤는데 11월 달에 같은 질문을 받으시고 바쁘셔서 잊어버리신것 같아요.
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
공용 컴포넌트 유닛 테스트 관하여 질문이 있습니다!
안녕하세요! 강의를 듣고 테스트 코드를 연습중에 질문이 있어서 글을 작성하게 되었습니다.제가 테스트 코드를 작성하려는 프로젝트에서 공용 컴포넌트 중 Pagination 컴포넌트에 유닛 테스트 코드를 작성하려고 합니다.제가 생각한 테스트 흐름은 실제 유저가 Pagination 컴포넌트의 화살표 버튼 클릭시 현재 페이지가 1이 증가하는 것처럼 테스트 코드를 구현하려고 했습니다.하지만 Pagination 컴포넌트에는 setCurrentPage 함수를 주입 받아서 처리하기 때문에 유닛 테스트에서는 클릭으로 current page 값이 증가하는 것을 확인할 수는 없고 spy 함수를 통해 setCurrentPage가 실행되는 것까지만 확인하는게 맞는건가요?? 두서없는 글 읽어주셔서 감사합니다!
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
react-cookie로 쿠키값 테스트코드로 가져오는 방법
describe('로그인이 성공했을 경우', () => { it('"아이디 저장" 체크박스를 체크했을 시 쿠키에 itall_admin 객체의 id key로 유저가 입력한 아이디를 저장한다.', async () => { const { user } = await render(<LoginPage />); const rememberIdCheckbox = screen.getByLabelText('아이디 저장'); const idInput = screen.getByPlaceholderText('아이디(이메일)'); const submitButton = screen.getByRole('button', { name: '로그인' }); const setCookies = vi.fn(); setCookies.mockReturnValueOnce('center.test@itall.com'); const cookieValue = setCookies(); await user.click(rememberIdCheckbox); await user.type(idInput, 'center.test@itall.com'); await user.click(submitButton); expect(cookieValue).toBe('center.test@itall.com'); }) })Forms.spec.ts파일에서 js-cookie 라이브러리 모킹해서 하시는 예시를 보고 react-cookie 사용한 프로젝트의 테스트코드를 작성중인데요. 혹시 라이브러리에서 제공하는 함수를 이렇게 setCookies라는 함수를 임의로 모킹해서 return값을 지정해서 저렇게 처리해도 되는걸까요..? 테스트는 당연히 통과되었습니다..
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
노션 링크는 어디에 있는지 문의 드립니다~
노션 링크는 어디에 있는지 문의 드립니다~
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
14-04 Redis에서 cacheModule을 위한 @nestjs/common버전 업데이트
다른분이 질문주셨던 'app.module.ts에서 redis연결하는데 @nestjs/common에 CacheModule이 없습니다' 에 대한 답변대로 "@nestjs/common": "^9.0.0" 버전으로 업데이트해서 node_modules도 yarn install 해서 설치했습니다. yarn.lock 확인했는데 버전이 바뀌지 않아 "@nestjs/common": "9.0.0" 로 바꿔서 다시 yarn install 했구요.그런데 @nestjs/common 버전을 9.0으로 바꾸면 계속 mybackend-1(백엔드컴퓨터)에서 오류가 생깁니다. 기존버전 10.0.0이었을 때는 오류가 발생하지 않았었습니다. 실은 강의를 들으며 코드를 따라 치다 마지막에 docker-compose build후 up 했을 때 어디서 오류가 발생하는지 모르겠어서 처음부터 yarn add로 redis랑 cache-manager라이브러리 설치하는 것 부터 docker-compose build,up 하면서 확인을 해봤었는데 @nestjs/common 버전을 9.0으로 바꿨을 때 위 사진처럼 오류가 발생했습니다. package.json파일도 올려보내드립니다.@nestjs/common 버전을 바꿔야 될까요? 아님 다른 오류 원인이 있을까요..?
-
미해결Vue.js 시작하기 - Age of Vue.js
다음 단계 강의는...?
완전 초보입니다. vue3 레벨1을 들어야했는데..ㅠㅠ잘 모르고 현재 강의인 vue2 레벨1을 들었네요...업데이트 된 내용이 많아도...뭐 기본적으로 동작원리는 비슷할거라 생각해서 우선 들었는데요.문제는 이 강의를 듣고나서 레벨2는 어떤걸 들어야하나 해서요.vue3의 레벨2를 들어도 상관없을지..아니면 vue3의 레벨1을 다시 듣고 vue3 레벨2를 들어야할까요? 바뀐 부분의 내용을 모르고는 vue3레벨2 강의 따라가기가 많이 힘들까요..?
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
4.4 통합테스트에서 정적 데이터로 테스트하는 대신 role 값을 미리 설정해 직접 돔에 접근하는 방식은 어떤가요?
안녕하세요우선 좋은 강의를 제작해주셔서 감사드립니다공식 문서만으로 테스트 코드 작성을 공부했다면 훨씬 시간이 많이 들었을 텐데한글로 설명을 듣고 문서를 보니 좀 더 빠르게 이해할 수 있는 것 같습니다. // answer 브랜치 코드 it('특정 아이템의 수량이 변경되었을 때 값이 재계산되어 올바르게 업데이트 된다', async () => { const { user } = await render(<ProductInfoTable />); const [firstItem] = screen.getAllByRole('row'); const input = within(firstItem).getByRole('textbox'); await user.clear(input); await user.type(input, '5'); // 2427 + 809 * 2 = 4045 expect(screen.getByText('$4,045.00')).toBeInTheDocument(); });궁금한 점은 현재 제공해주신 정답 코드에서는모킹 데이터의 결과 포맷을 알기 때문에 '$4,045.00' 이라는 텍스트 값이 dom에 마운트 되어야 테스트를 통과 시키는 방식인데요 it('특정 아이템의 수량이 변경되었을 때 값이 재계산되어 올바르게 업데이트 된다', async () => { const { user } = await render(<ProductInfoTable />); const [firstItem] = screen.getAllByRole('row'); const input = within(firstItem).getByRole('textbox'); // role은 price를 담는 div에 미리 추가했다고 가정 const price = Number(within(firstItem).getByRole('price').textContent); const value = 5; await user.clear(input); await user.type(input, value.toString()); const pricedResult = within(firstItem).getByRole('price').textContent; // 2427 + 809 * 2 = 4045 expect(priceResult.includes((value*price).toLocaleString())).toBe(true); });제가 작성한 방식은엘리먼트마다 role을 미리 지정해 둔 다음에테스트할 때마다 element들의 값에 접근해서 테스트를 진행하는 방식입니다.제가 생각했을 때에는 이 방식을 사용하면 element마다 role을 직접 설정해주어 element의 용도를 파악하기 더 쉽고 getAllBy... 메소드로 가져온 요소들에 대해 순회하여 테스트할 때 테스트 결과 값을 동적으로 생성하기 때문에 더 유연하지 않을까 라는 생각이 들었습니다. 궁금한 점은 제가 작성한 방식을 현업에서도 사용하는지잘 사용되지 않는 방식이라면 어떤 이유에서 잘 사용되지 않는지가 궁금합니다
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
import에서 확장자 질문
[ React에서 배열 사용하기1 - 리스트 렌더링(조회) ] 사소한 질문이라 죄송한데, import DiaryEditor from './DiaryEdittor'는 확장자 .js를 붙이지 않고, 왜 import DiaryList from './DiaryList.js'는 확장자 .js를 붙이나요? .js를 없애보니까 오류가 나더라고요...서치를 해보니 그 이유가 나오진 않아서 질문해봅니다. 만약 답을 찾으면 이 질문은 지우도록 하겠습니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
typeorm primary key 커스텀 질문드립니다!
import { nanoid } from 'nanoid'; import { PrimaryColumn, CreateDateColumn, UpdateDateColumn, DeleteDateColumn, } from 'typeorm'; export abstract class BaseModel { @PrimaryColumn({ length: 21 }) id: string = nanoid(10); @CreateDateColumn({ name: 'created_at', type: 'timestamp' }) createdAt: Date; @UpdateDateColumn({ name: 'updated_at', type: 'timestamp', nullable: true }) updatedAt: Date | null; @DeleteDateColumn({ name: 'deleted_at', type: 'timestamp', nullable: true }) deletedAt: Date | null; } 기존 express 플젝이 pk가 nanoid라서 nest에서 똑같이 적용하려고 했지만 유저 생성 (save)까지는 nanoid가 잘 들어가지만 외래키로 연결된 role 테이블에 user id를 주입시키는 순간 Field 'id' doesn't have a default value 에러가 발생합니다. user 테이블 role 테이블 둘다 baseModel을 상속받아 구성했고 @PrimaryGeneratedColumn() 으로 변경하면 해결이 되긴 하는데... nanoid를 저렇게 주입시켜서 생기는 문제일까요?
-
미해결React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
물질을 클릭했을 때 이벤트
물질에게 클릭이벤트를 주어 보이는 시점이 바뀌거나 물체가 이동할수있게 하고싶습니다.
-
미해결처음 만난 리액트(React)
[미니블로그] MainPage.jsx의 PostList 컴포넌트 prop관련질문
안녕하세요. 질 높은 강의 덕분에 많은 도움 받고 있습니다. 다름이아니라 미니블로그를 학습하며 이해가 되지 않는 부분이 있어서 질문드립니다. 44번째줄의 navigate(`/post/${item.id}`) 에 대한 질문입니다.item.id값으로 data.id의 값이 들어가는 것으로 확인했습니다. 제가 궁금한 것은 어떠한 방식으로 data.id의 값이 item.id값으로 들어가는지 도무지 이해가 되질 않습니다. 관련해서 답변주실 수 있으실까요?
-
미해결처음 만난 리액트(React)
React 18에서 ReactDOM.render()를 지원하지 않는 문제
Chapter 06 실습 문제에서 다음과 같은 경고와 함께 콘솔 로그가 나오지 않았습니다. Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot React 18버전에서는 ReactDOM에 렌더링하는 방식이 아니라 root를 먼저 만들고 root의 렌더링을 하는 방식으로 바뀌었다고 합니다.. 먼저, 실습 자료에서 따라 작성했던 코드입니다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import reportWebVitals from './reportWebVitals'; import NotificationList from "./chapter_06/NotificationList"; ReactDOM.render( <React.StrictMode> <NotificationList /> </React.StrictMode>, document.getElementById('root') ) reportWebVitals(); Notification element는 순서대로 제대로 출력되는걸 보아서 JSX element는 제대로 작성한 것 같았고 콘솔 로그가 나오지 않으며 위에 작성한 오류만 나와 react 버전 문제인가 해서 공식문서를 참조해 다음과 같이 변경했습니다. import React from 'react'; import { createRoot } from 'react-dom/client'; import './index.css'; import reportWebVitals from './reportWebVitals'; import NotificationList from "./chapter_06/NotificationList"; const container = document.getElementById('root'); const root = createRoot(container); root.render( <NotificationList /> ); reportWebVitals(); ReactDOM을 직접 사용하지 않고, root를 만든 다음 root에서 렌더링을 하는 방식으로 변경하라고 해서 이렇게 했더니 콘솔 로그가 제대로 나왔습니다. 그런데 문제가 있는게 이전에는 Notification element가 1, 2, 3 순서대로 출력이 되었는데 root에 직접 렌더를 하니 1번과 2번 element가 동시에 출력되는 문제가 생깁니다.. 로그를 확인해보니 1번 2번 element는 componentDidMount() 이후 Update()를 실행하지 않고 WillUnmount()가 되어버립니다. WillUnmount() 이후에 한 번 더 DidMount()가 되고, Update()로 넘어가지만, 이 이후에도 1번 2번이 같이 호출되고, 그 다음에 3번이 호출됩니다. 3번 역시 DidMount() 이후 Update() 없이 WillUnmount()되고 다시 DidMount()가 됩니다 3번은 Update()되지 않습니다.. 이 이후에는 공식문서에서 해결책을 찾을수가 없어서 문의드립니다..
-
미해결처음 만난 리액트(React)
styled-components 안에 스타일 색상이 선생님과 다르게 뜨는데 이유를 알고 싶습니다!
styled-component를 사용해서 코드를 작성했을 때 제 코드는 위와 같이 다 초록색으로 뜨는데 선생님 코드를 보면 CSS코드처럼 색상이 구분되어있습니다. 혹시 어떻게 해야지 색상이 구분이 되는건지 알 수 있을까요?!
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
yarn install이 안 되는 문제가 있어 남겨봅니다.
Node.js v20.11.1NestJS 10.3.2npm 10.4.0 Yarn 4.1.0강의와 같이 폴더 생성 후 nest new . 로 생성했을 때 yarn install --silent 가 실패했습니다.모두 삭제 후 프로젝트를 만들 폴더에서 nest n cf_sns 로 시도했으나 동일하게 yarn install --silent 가 실패했습니다.nest 로 새 application을 생성 후 해당 폴더 내 yarn.lock 을 만들고 yarn install 을 실행한 후 yarn start:dev 를 실행할 수 있었습니다.저만 그런 건지 모르겠지만 혹시 몰라 기록을 남겨봅니다.---폴더 구성은 이렇게 되던데 최근 뭔가 달라진 걸까요? yarn을 처음 써봐서 잘 모르겠습니다. 🤔---https://yarnpkg.com/features/pnpPnP 때문인가 봅니다.---https://yarnpkg.com/getting-started/editor-sdksPnP 사용 시 VSCode에서 TypeScript가 제대로 작동하지 않는 문제는 이 문서를 통해 해결했습니다.