묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[리액트 2부] 고급 주제와 훅
ProductPage import 할 때, from index.jsx가 아닌 이유
안녕하세요. 강의 재밌게 듣고 있습니다! App.jsx에서 import ProductPage from "./pages/ProductPage" 부분에서 실제 코드는 index.jsx에 작성되어 있는데 디렉터리명인 ProductPage로 경로를 지정해도 동작하는 이유가 궁금합니다.
-
미해결[리액트 2부] 고급 주제와 훅
useMemo내에서 사용되는 window.location.search 를 deps에서 제외한 이유
안녕하세요. 정환님 드디어 강의도 마무리되어가는데살짝 이해가 안된 부분이 있습니다. URLSearchPrarms 를 통해 query param를 파싱하는 부분을 캐싱하는 부분에서 window.location.search 는 딱 한번만 바뀌고 거의 바뀌지않을 것이라고 이야기하셨는데 같은 페이지에서 navigate가 흔히 있는 요구사항이 아닌가요? 저희가 사용하는 Router의 useNavigate를 통해 화면간에 이동할 때마다 변하는 값으로 알아서 넣어두는게 더 이상적이라고 생각하고 실습을 진행했습니다. 저희 예제에서는 cart 페이지에서 cart로 이동할 비지니스 요구사항은 없어서 괜찮지만 예를들어 다른 상품이 담겨있는 장바구니로 이동하는 요구사항이 있다면 /cart?productId=CACDA421 => /cart?productId=CACDA423deps에 window.location.search를 넣어두는게 안전해보이는데 최적화가 필요한 부분이었을까요?
-
미해결[리액트 2부] 고급 주제와 훅
MyReact.useReducer로 Validate를 구현한 부분을 이상적으로 처리하려면?
안녕하세요. Reducer는 ReactJS에서 제공하는것을 거의 잘 안써왔었는데 한번 활용해봐야겠다는 마음이들었던 강의였습니다. 이번 4.3장(리듀서 훅) 수강하고 궁금한 부분은 Validate처리가 일반적으로 dispatch만으로 해소가 안되는 부분을 직접 reducer를 호출해줘서 처리하는 부분을 봤습니다. 직접 리듀서를 호출하는 형태가 조금 리듀서를 만든 의도와 다른 방향같기도한데. 이전상태를 이용해서 앞으로의 상태를 업데이트하고 싶을때 dispatch를 사용해야한다면 어떻게 처리되야 조금 더 이상적인 방향이라고 생각하시나요?
-
미해결[리액트 2부] 고급 주제와 훅
2장에서 React Context를 구현하는 방식이 실제 Context가 동작하는 방식이라고 생각해도 무방할가요?
Context 내부 원리를 알 수 있어서 도움이 많이 되었습니다.궁금한건 Context가 이렇게 동작하구나하고 이해해도 되겠죠?" EventEmitter 패턴이 Context의 원리이다 " 라고 이해하고 넘어가고 싶은데 정환님은 이러한 정보를 어떻게 알 수 있었을까요? 리액트 공식 홈페이지에 이러한 내용이 있을까요?
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
test was not wrapped in act관련 질문
안녕하세요. 리액트 테스트 관련 좋은 강의를 제공해주셔서 감사합니다.수업 듣고 테스트 코드를 작성 시에 console.error로 wrapped in act 오류가 표시되어 문의드리게 되었습니다.여러 질문들도 찾아보고... 구글링도 해보며 방안을 찾아서 테스트코드가 성공하는 것 까지는 봤으나, 로그에 첨부드리는 이미지와 같이 표시되어지고 있습니다... useEffect에서 state변경시에 발생되는 것 같은데.. 이부분은 어떻게 처리해야할가요..?ㅠ 며칠을 찾아보고.. 제공해주신 소스코드도 확인해봤지만... 다른 부분이 없어 문의드립니다.(추가로.. 첨부 주신 코드의 리액트버전을 제가 구성하는 버전으로 구성 후 테스트 진행 시에 저와 동일한 결과가 나오는 것을 확인했습니다.)감사합니다.
-
미해결[리액트 2부] 고급 주제와 훅
강의 잘 듣고 있습니다.
안녕하세요. 유선 강의 잘 보고 있습니다. ^^다름이 아니라, 3장쪽 강의중에 몇개가 예전 강의가 들어 있는 경우가 있는거 같습니다.저도 다 보진 않아서 몇 강, 몇 강 다 말씀 못드릴거 같은데, 2개 이상이네요강의 영상 한번 확인 부탁드립니다~
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 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 입니다.감사합니다.
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
강의 관련 내용 github 업로드 질문
안녕하세요 이번에 '따라하며 배우는 React Testing' 강의를 수강중인 박동준이라고 합니다. 이번 강의에서 여행상품 앱 만들기 파트에서 진행하는 방법들을 정리하여 개인 포트폴리오로서 활용하고 싶습니다.모든 소스코드를 올리는것이 아니라, 방법적인 부분들을 정리하고 회원가입 또는 게시글 작성 및 댓글 등 간단한 CRUD 로직으로 배운 개념을 적용하여 코드 및 방법들에 대해서 올리고자 합니다.혹시 이런 방법으로 제 개인 github에 업로드 해도 되는지 궁금합니다!
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
Test Fail이 발생합니다 ㅠㅠ
현재 섹션5까지 수강 완료한 상태인데 계속 Fail이 발생합니다 ㅠㅠ처음엔 됐었는데 갑자기 안되더라구영 ㅠㅠ 검색을 해봐도 뭐가 문제인지 파악하기 힘들어서 질문 드립니다!어떻게 해결하면 좋을까요?
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 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편
코드샌드박스 주소
강의하시는 예제를 코드샌드박스에서 열고싶은데 링크가 어디있나요??
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
스타일 컴포넌트 테스트 방법
강의에선 일반 html/css를 사용하고 data-testid를 사용해 엘리먼트를 선택하는데styled-component를 사용한다면 어떤 방식으로 선택하고 테스트하는게 권장되는 방법일까요?
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
TDD - Green, Red, Refactor
안녕하세요. TDD의 Green, Red, Refactor 파트(9:40)에서리팩터링을 진행하시면서 onPageNumberClick 함수를 useCallback으로 감싸서 렌더링이 다시 될때 이 함수가 두번 생성되지 않도록 한다고 하셨는데이 부분이 잘 이해가 가지 않아서요. 설명해주신걸로 유추해보면 useCallback으로 감싸면 함수가 한번만 생성되는 것 같은데 useCallback을 사용했을때와 사용하지 않았을 때 차이에 대해서 조금 더 설명해주실 수 있을까요?
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
msw안돼는사람
https://junhyunny.github.io/react/jest/module-import-error-on-jest/ 여기랑https://velog.io/@noyo0123/jest-test%EC%97%90%EC%84%9C-import-%EB%A5%BC-%EB%AA%BB-%EC%93%B0%EB%84%A4%EC%9A%94-pik230v1hp이거참고하세요