12%
24,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
코드 샌드박스 안되는거같습니다
코드 샌드박스들어가면 이런식으로 뜨는데 어떻게 해결하나요?
- 해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
공유소스 실행시 에러 문의 드립니다~
안녕하세요 다름이 아니라 공유해 주신 소스를 기반으로 코드 리포지토리: https://github.com/things-not-learn-from-bootcamp/form-practice/tree/use-reducer-fancy-typing 의 소스를 실행 시켜 보았는데요 위 와 같은 에러가 계속 발생해서요 아무리 구글 검색을 해도 해결이 안되어 문의 드립니다.또 한가지 더 문의 부탁드립니다 위 동일한 레파지토리 소스를 실행시켰을 빌드해서 실행시켰을 때 위 처럼 빨간줄이 생겨서요 좀처럼 이해가 안되어서 같이 문의 드립니다.바쁘신데 죄송하면 문의 부탁드립니다.감사합니다.
- 해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
[섹션 3. Form 컴포넌트로 배우는 실전 기술] 강좌의 소스를 부탁드립니다.
안녕하세요 저는 리액트만 4년차 개발자인데요.. 기존에 리액트 강좌를 무지 많이 수강했음에도 아직도 많이 부족하다 싶어서 강사님의 강좌를 듣게 되었는데 많은 도움이 되고 있어서 너무 감사합니다. 참고로 아래와 같은 과정을 수상신청을 아래와 같이 했습니다. 부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편부트캠프에서 알려주지 않는 것들 (리액트) 1편클론코딩에서 알려주지 않는 것들 (시스템 이론과 DB) 1편실전 연습으로 익히는 고급 타입스크립트 기술 다만 부탁이 있어서요 다름이 아니라 좀더 세심하게 코드를 보구 싶어서요혹시 강좌중 부트캠프에서 알려주지 않는 것들 (리액트) 1편 에서 섹션 3. Form 컴포넌트로 배우는 실전 기술 강좌의 소스를 과정별로 브랜치로 구분한 레파지토리는 없는지 해서요..강좌별로 들으면서 분석하면 많은 도움이 될거 같아서 문의 드립니다.정 안되면 최종 소스라도 부탁드립니다. 위에 강좌 신청을 좋게 봐 주셔서 부탁드립니다.공개가 힘드시면 메일이라도 부탁드리면 안될런지요? manhattansky73@gmail.com 입니다.감사합니다.
- 해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
마지막 onSubmit 에러체크 문제
에러체크할 때 나머지값이 없어도 submit이 되는 문제가 있습니다.<InfoContext.Provider value={{ value: info, setValue: setInfo, error, setError: (e) => setError({...error, ...e}) }}> <Form onSubmit={onSubmit}> <TextField source="name" label="이름" validate={[minLength(3), maxLength(6)]} /> <TextField source="password" label="패스워드" validate={[minLength(6), maxLength(12)]} /> <CheckboxField source="confirm" label="위 내용이 제출됩니다 동의하십니까?" validate={[checked]} /> </Form> </InfoContext.Provider>위 코드에서 setError update해주는 로직을 // before setError: (e) => setError({...error, ...e}) // after setError: (e) => setError(prev => ({...prev, ...e}))아래와 같은 형식으로 바꿔주면, 리팩토링 이전과 같이 동작을 하게됩니다.batch의 문제인지, 불변성의 문제인지 정확히 모르겠네요. 설명해주시면 감사감사!
- 해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
코드샌드박스 주소
강의하시는 예제를 코드샌드박스에서 열고싶은데 링크가 어디있나요??
- 해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
test 코드 작성시 질문
vite를 사용하고 있으며 현재 촐더 구조입니다.현재 jest.setup.ts 파일내용입니다. (챗 gpt에게 물어본 결과 setupTest.ts로 바꿔야한다는 답변을 받았지만 꼭 바꿔야하는지 잘모르겠습니다.)import "@testing-library/jest-dom" import { server } from "./src/mocks/server" beforeAll(() => server.listen()) afterEach(() => server.resetHandlers()) afterAll(() => server.close()) msw를 사용 하기위해 필요한 설정을 해놓았습니다.다음은 테스팅을 위한 컴포넌트 입니다.import axios from "axios" import React, { useEffect, useState } from "react" const Direction: React.FC = () => { const [data, setData] = useState<any>({}) const [isLoading, setIsLoading] = useState(true) useEffect(() => { void (async () => setData(await (await axios("https://jsonplaceholder.typicode.com/todos/1")).data))() setIsLoading(false) }, []) return ( <> {isLoading ? ( <div>loading...</div> ) : ( <ul> <li>{data.id} / </li> <li>{data.title} /</li> <li>{data.userId} /</li> </ul> )} </> ) } export default Direction 보시는 것처럼 데이터를 불러와서 화면에 표시하는 컴포넌트 입니다. 다음은 테스트 케이스 입니다.import { render, screen } from "@testing-library/react" import Direction from "." test("Direction 컴포넌트가 정상적으로 렌더링되는지 테스트", async () => { render(<Direction />) const result = await screen.findAllByRole("listitem") expect(result).toHaveLength(3) })해당 코드를보시면 간단해서 에러없이 깔끔하게 성공합니다.하지만 프로젝트에서 swr을 사용하기로 했는데 여기서 문제가 발생합니다.import React from "react" import useSWR from "swr" const Direction: React.FC = () => { const { isLoading, data } = useSWR("https://jsonplaceholder.typicode.com/todos/1") return ( <> {isLoading ? ( <div>loading...</div> ) : ( <ul> <li>{data.id} / </li> <li>{data.title} /</li> <li>{data.userId} /</li> </ul> )} </> ) } export default Direction 컴포넌트를 swr을 사용하는 방식으로 바꾸고 테스트를 실행해보면 findAllByRole에서 listitem을 찾을수 없다는 에러가 발생합니다.swr의 특성인거같긴한데 도무지 해결방안이 떠오르지 않습니다.react-query나 swr같은 캐싱라이브러리를 사용하면서 msw를 사용하여 테스트를 하고 싶은데 따로 설정해야하는 것들이나 권장되는 코드 작성 방식이 따로 있나요?그것이아니라면 어떤부분을 수정해야 제대로 작동할까요?
- 해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
TDD - Green, Red, Refactor
안녕하세요. TDD의 Green, Red, Refactor 파트(9:40)에서리팩터링을 진행하시면서 onPageNumberClick 함수를 useCallback으로 감싸서 렌더링이 다시 될때 이 함수가 두번 생성되지 않도록 한다고 하셨는데이 부분이 잘 이해가 가지 않아서요. 설명해주신걸로 유추해보면 useCallback으로 감싸면 함수가 한번만 생성되는 것 같은데 useCallback을 사용했을때와 사용하지 않았을 때 차이에 대해서 조금 더 설명해주실 수 있을까요?