🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이 계층 구조 화면에서 TodoStateContext.Provider 컴포넌트와 TodoDispatchContext.Provider는 동등한 위치에 있는 것인가요? 아니면 화살표대로 TodoStateContext.Provider 컴포넌트의 자식 컴포넌트가 TodoDispatchContext.Provider 컴포넌트 인건가요?

안녕하세요. 포모도로 앱만드는 첫번째 부터 막히네요 ㅠㅠ일단 insert버튼이 생기지 않는데 뭐가 문제인걸까요? 이런식으로만 뜨네요 계속해봐도 ㅠㅠ PS C:\Users\your_\OneDrive\바탕 화면\다시> npx create-react-app . --template typescript && npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -pPS C:\Users\your_\OneDrive\바탕 화면\다시> npx create-react-app . --template typescript && npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p위치 줄:1 문자:46+ npx create-react-app . --template typescript && npm install -D tailwi ...+ ~~'&&' 토큰은 이 버전에서 올바른 문 구분 기호가 아닙니다.위치 줄:1 문자:97+ ... escript && npm install -D tailwindcss postcss autoprefixer && npx ta i ...+ ~~ '&&' 토큰은 이 버전에서 올바른 문 구분 기호가 아닙니다.위치 줄:1 문자:205+ ... ive\바탕 화면\다시> npx create-react-app . --template typescript && npm ins ...+ ~~ '&&' 토큰은 이 버전에서 올바른 문 구분 기호가 아닙니다.위치 줄:1 문자:256+ ... escript && npm install -D tailwindcss postcss autoprefixer && npx ta i ...+ ~~ '&&' 토큰은 이 버전에서 올바른 문 구분 기호가 아닙니다. + CategoryInfo : ParserError: (:) [], ParentContainsErrorRec ordException + FullyQualifiedErrorId : InvalidEndOfLinePS C:\Users\your_\OneDrive\바탕 화면\다시> 어떤 프로그램을 어디서 어떻게 깔아야 하는지부터, 어떻게 설정을 하는지물론 정리를 해주셨지만 순서도 모르겠고 적용하는것도 어려운 거 같아요. 처음 강의부터 아예 같이 시작을 하고 설명을 들었으면, 오류가 안났을거같은데수업관련 파일은 또 따로 봐서 공부를 해야하고, 알아서 다 설치하고 공부한다음에강의를 들어야해서그런지 잘 이해가 안가는거같아요..ㅠㅠ오류가 난게 제가 뭐 프로그램을 잘못설치해서그런건지, 아니면 설정을 뭔가 잘못해서 그런건지잘모르겠네요 답변주시면 감사하겠습니다..

질문을 온전히 이해할 수 있도록, 모든 맥락을 전달해주세요.질문은 질문자가 번거로워야 보다 좋은 답변을 얻으실 수 있습니다.시행착오를 알려주시면 곧바로 원하는 문제에 집중할 수 있습니다.오류 메시지는 일부만 알려주시기보다 전체 오류 메시지를 캡처해서 주시면, 오류 파악에 도움이 됩니다. 당신의 파이썬/장고 페이스메이커가 되겠습니다. ;-)인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. postgresql 을 다른 서버에 연결하여 사용중인데요.runserver 시에는 정상 작동하나 강사님이 올려주신 pytest를 똑같이 설정하고 실행하면, schema가 없어서 table을 생성할 수 없다는 오류가 발생합니다.MigrationSchemaMissing("Unable to create the django_migrations table 일단은 settings.py를 sqlite3로 변경하여 정상 작동은 시켰는데요 어떻게 수정할 수 있을까요?  또한 올려주신 소스코드에서import factory from accounts.models import User class UserFactory(factory.django.DjangoModelFactory): class Meta: model = User django_get_or_create = ("username",) username = factory.Sequence(lambda n: f"user{n}") email = factory.LazyAttribute(lambda user: f"{user.username}@example.com") # UserFactory 인스턴스 생성 시에, 암호 입력을 지원하기 위함 # raw_password 필드가 아니라 password 필드로 지정하면, 암호화없이 입력값 그대로 저장됩니다. raw_password = factory.Faker("password") @classmethod def _create(cls, model_class, *args, **kwargs): # raw_password 필드값을 암호화하여 password 필드에 저장합니다. # User 모델에는 raw_password 이름의 필드가 없으므로 kwargs 사전에서 제거해줘야만 합니다. raw_password = kwargs.pop("raw_password", None) if raw_password: kwargs["password"] = make_password(raw_password) return super()._create(model_class, *args, **kwargs)make_password 부분이 import 되어 있지 않습니다. git에서는 수정되어 있는 모양인데 참고 부탁드립니다.

const onClickDelete = () => { if (window.confirm("일기를 정말 삭제할까요? 다시 복구되지 않아요!")) { onDelete(params.id); nav("/", { replace: true }); } };  useDiary.jsx 커스텀 훅 작업하고 나서,삭제하기 하면 '존재하지 않는 일기입니다' alert이 발생합니다. data가 변화가 되어서 그런거 같은데.. 어떻게 해결하면 좋을까요? 삭제 후, 리렌더링 되면서 nav("/") 되기 전에,  const curDiaryItem = useDiary(params.id); 커스텀훅에서 체크가 되는거 같은데, 뭘 확인을 해봐야할까요?ㅎ const useDiary = (id) => { const nav = useNavigate(); const data = useContext(DiaryStateContext); const [curDiaryItem, setCurDiaryItem] = useState(); useEffect(() => { const currentDiaryItem = data.find( (item) => String(item.id) === String(id) ); if (!currentDiaryItem) { window.alert("존재하지 않는 일기입니다."); nav("/", { replace: true }); } setCurDiaryItem(currentDiaryItem); }, [id, data]); return curDiaryItem; }; 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

제목그대로, MyReact를 IIFE(즉시실행함수)로 설계하신 이유가 무엇일까요???이걸 끌어다 쓰는 곳에서MyReact.creacteContext()MyReact().createContext() 이렇게 쓰는것이 아니라, 위의 코드처럼 쓰려고 그런것일까요????

첫번째는 3000이고 2번째는 3000/search인데프리패칭이 된지 어떻게 확인 하는건가요?

강의에서 설명하지 않으신 내용인데요 가능한지 궁금하여 여쭈어봅니다.Conda-forge 내에 postgresql package가 있습니다. (Postgresql | Anaconda.org)물론 서비스 시에는 database 서버를 따로 두는게 좋다는건 수업 때 설명으로 이해하였습니다. 그러나 실 서비스 시 postgresql를 사용할 것이라면 개발 시에 sqlite 대신 위 package를 사용하는게 만약 더 적합할까요?배포 과정 설명 시에 로드 밸런서가 작업을 서버에 할당해준다고 설명해 주셨는데, 보아하니 각 작업을 싱글 쓰레드로 할당하는 것 처럼 보였습니다. 장고의 경우 View 단에 multithread로 작업할 내용이 있다면, 어떻게 처리해야 하나요?

카카오로 access토큰 받아오고 나서api서버에서 kakao로 사용자 정보 호출 시 오류가 나네요..어떤 부분을 수정해야 할지 잘 감이 안오네요. Not injecting HSTS header since it did not match request to [Is Secure]--아래 로그1-28T17:15:42.369+09:00 TRACE 26452 --- [apiserver] [nio-8080-exec-2] o.s.security.web.FilterChainProxy : Invoking ExceptionTranslationFilter (13/13)2024-11-28T17:15:42.369+09:00 DEBUG 26452 --- [apiserver] [nio-8080-exec-2] o.s.security.web.FilterChainProxy : Secured GET /api/member/kakao?accessToken=s0KvFDK1upVad8mdV-4lSc8WG_NwqUV7AAAAAQoqJVAAAAGTcdcZj6ew61y3DOUZ2024-11-28T17:15:42.370+09:00 INFO 26452 --- [apiserver] [nio-8080-exec-2] o.z.a.controller.SocialController : accessToken : s0KvFDK1upVad8mdV-4lSc8WG_NwqUV7AAAAAQoqJVAAAAGTcdcZj6ew61y3DOUZ2024-11-28T17:15:42.372+09:00 INFO 26452 --- [apiserver] [nio-8080-exec-2] o.z.apiserver.service.MemberServiceImpl : response 1------------------------------2024-11-28T17:15:42.405+09:00 TRACE 26452 --- [apiserver] [nio-8080-exec-2] o.s.s.w.header.writers.HstsHeaderWriter : Not injecting HSTS header since it did not match request to [Is Secure]2024-11-28T17:15:42.405+09:00 ERROR 26452 --- [apiserver] [nio-8080-exec-2] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed: org.springframework.web.client.ResourceAccessException: I/O error on GET request for "https://kapi.kakao.com/v2/user/me": PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target] with root causesun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested targetat java.base/sun.security.provider.certpath.SunCertPathBuilder.build(SunCertPathBuilder.java:148) ~[na:na]at java.base/sun.security.provider.certpath.SunCertPathBuilder.engineBuild(SunCertPathBuilder.java:129) ~[na:na]at java.base/java.security.cert.CertPathBuilder.build(CertPathBuilder.java:297) ~[na:na]  -- 소스코드private void getEmailFromAccessToken(String accessToken) { String kakaoGetUserURL = "https://kapi.kakao.com/v2/user/me"; if(accessToken == null){ throw new RuntimeException("Access Token is null"); } RestTemplate restTemplate = new RestTemplate(); HttpHeaders headers = new HttpHeaders(); headers.add("Authorization", "Bearer " + accessToken); headers.add("Content-Type","application/x-www-form-urlencoded"); HttpEntity<String> entity = new HttpEntity<>(headers); UriComponents uriBuilder = UriComponentsBuilder.fromHttpUrl(kakaoGetUserURL).build(); log.info("uriBuilder " + uriBuilder); log.info("response 1------------------------------"); ResponseEntity<LinkedHashMap> response = restTemplate.exchange( uriBuilder.toString(), HttpMethod.GET, entity, LinkedHashMap.class); log.info("response 2------------------------------"); log.info(response);

해당 사진과 같이 index.js 가 실행되지 않습니다. node 버전을 확인 했을 경우에는 v22.11.0 로 정상적으로 설치된 것으로 나오는데... 어떤 부분이 문제일까요? 강의시간 5분 28초 입니다.

안녕하세요 선생님 강의 잘 듣고 있습니다.직접 구현한 atom 컴포넌트들의 테스트 범위에 대하여 질문드립니다.Typography, Badge, Divider와 같이 별도의 로직이 존재하지 않는 컴포넌트들은 ProductInfoArea처럼 스토리북으로 확인만 해도 되는 것인지 궁금합니다.아니면 atom 컴포넌트의 경우에는 props로 전달 받은 값이 잘 반영되는지 검증이 필요할까요? ( className 값이 잘 적용되는지, Typography의 경우 children 값이 화면에 잘 노출되는지 등등)

npm run dev로 프로젝트 시작할 때 보면 하이드레이션 오류가 자주 뜨거든요.페이지 이동했다가 다시 오면 에러가 사라지길래 그냥 강의 들었었는데.빠트린 코드가 있는가 싶어서 새로 프로젝트를 새로 만들었거든요.  근데. 처음부터 같은 에러가 발생하네요!!!!!!!!!!!!!!!!!! 제 컴퓨터가 이상한건지....다른 분들은 에러가 안나는걸까요>??ㅜ_ㅜ 어떻게 했더니 에러가 났다. 이걸 말씀드려야 하는데ㅎㅎ허허허..... 어디서 왜 에러가 났는지 감이 안오네요 < 에러 >Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used- A server/client branch if (typeof window !== 'undefined'). - Variable input such as Date.now() or Math.random() which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.See more info here: https://nextjs.org/docs/messages/react-hydration-error  검색해보니까. 뭐 버전차이 이런것도 있는 것 같아서 제 의존성 버전을 봤는데.. 최신 버전으로 설치된건데. 음...이거 말고 next 15.0.3 react 19.0.0은 설치가 안되더라고영 ㅎㅎ....원인을 밝히기가 어렵네영. "dependencies": { "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106", "next": "15.0.3" }, 혹시나 해서 강사님 패키지 봤는데 next가 15.0.0버전이더라고요 이거로 설치했더니하이드레이션 에러는 안뜨네요!!! 험......... 버전 문ㅈㅔ였나봐요.. "dependencies": { "react": "19.0.0-rc-f994737d14-20240522", "react-dom": "19.0.0-rc-f994737d14-20240522", "next": "15.0.0-rc.0" }, 나름 해결한 것 같긴한데, 뭔가 찜찜해서 ㅎㅎ버전 차이로도 저와 같은 에러가 발생할 수 있는건가요??버전을 바꿔서 install 했는데, 이 상태로 강의를 계속 들어도 되겠죠???  주저리주저리... 고민의 글을 적어봤습니다ㅎㅎ  

섹션 13강의 중 "폰트, 이미지, 레이아웃 설정하기" 강의를 보면,이미지 가져오는 것을 컴포넌트화 하는 부분이 나옵니다.util폴더 아래에 get-emotion- image라는 파일을 만드는 부분인데,해당 파일을 jsx가 아닌 js로 만드는 이유가 궁금합니다.제가 해당 파일을 jsx로 해도 정상 작동이 되던데, 리액트에서 js로 하신 이유가 뭘까요?문의드립니다.

강의를 잘 듣던 도중에 궁금증이 생겨 질문드립니다. #9.1 이미지 최적화 강의를 듣고 나서 생긴 궁금증입니다. 여러 img태그를 next에서 제공하는 Image 태그로 교체함으로써 웹사이트의 이미지를 최적화시킬 수 있다는 점은 잘 이해했습니다. 하지만 이렇게 된다면 이전 강의에서 배운 도서 상세 페이지에서 도서의 표지를 검은색 배경으로 깔기 위해 사용했던 div 태그 내의 css ( BackgroundImage: url(...) ) 부분이 가져오는 이미지는 최적화가 전혀 되지 않을 것 같다는 생각이 들었습니다. 열심히 최적화를 해 봐야 저 부분에서 풀 사이즈의 이미지를 중복해서 가져온다면 성능에 다시 악영향이 갈 것 같다고 생각하였고, 나름의 답을 생각해 보았는데, 어떤 답이 맞는 것인지 잘 모르겠어 이렇게 질문드립니다. 배경 부분도 Image 태그로 불러운 다음 css를 적절하게 사용해 똑같이 배경 느낌으로 만들어 준다.css url로 가져온 이미지는 자주 가져오지 않으므로 최적화하지 않아도 큰 영향은 없다.사실 고민을 해 보아도 이 두가지 밖에 떠오르지 않아 둘 중에 답이 있는 것인지, 아니라면 어떤 방법을 적용하는 것이 좋은 방법일지 질분드립니다.

안녕하세요!보일러플레이트 코드를 다운받아 npm install 을 하면,route 관련 코드가 작성되어 있고,http://localhost:3000으로 브라우저를 들어가면좌측 메뉴가 disabled 되어 클릭이 안되는 상태입니다. route 설정 코드가 보일러플레이트 코드에 일부 작성되어 있는데, route 설정 강좌를 시청 해야하는지 혹은 강좌 내용대로 코드를 다시 작성해야하는지 궁금합니다. routes.ts를 보면,children의 값이 null 인 부분이 확인됩니다. 아코디언 강좌를 예로 든다면,아코디언 컴포넌트를 만들고, 여기 null 인 부분에 값을 넣는거 아닐까 생각이 드는데요 첨부된 보일러플레이트 코드를 어떻게 사용해야하는지 질문 드립니다.  감사합니다! :]   

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강사님과 동일하게 index.js를 수정하고 terminal - new terminal을 하면 저는 경로가 계속 my-app의 상위 경로로 되어있어서 cd my-app을 해주고 npm start를 하는데 (이부분도 저는 왜 계속 이렇게 뜨는지 궁금합니다..my-app을 우클릭 후 터미널을 열면 되긴합니다만..) 이렇게 떠서 계속 새로운 포트를 추가해서 사용하게 됩니다..저도 강사님처럼 실습하고 싶은데 어떻게 하면 될까요..?

안녕하세요! 강의 듣다가 에러가 발생해서 문의드립니다.어디가 정확히 에러가 나는지 잘 모르겠어서, 어떻게 해결을 해야할지 모르겟네용... 클라이언트와 서버컴포넌트의 하이드레이션 과정에서 에러가 발생한다고 하는데요ㅠㅠ...4ch 앱라우터 데이터 패칭 할 때 에러난건데, 서버 에러도 같이 뜹니다!! 아니면 서버의 문제라서 클라이언트-서버컴포넌트 하이드레이션까지 문제가 생긴걸까요??( 서버는 건드린 적이 없는데 ㅠㅠ )  < 에러 발생 내용 >hook.js:608 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.  아래 사진은 서버 vscode 터미널 사진입니당 ㅠInvalid this.prisma.book.findMany() invocation inC:\Users\82106\Desktop\06_onebite-server-main\src\book\book.service.ts:27:35 24 } 25 26 async findAllBooks() {→ 27 return await this.prisma.book.findMany(Error querying the database: FATAL: Tenant or user not foundPrismaClientInitializationError:Invalid this.prisma.book.findMany() invocation inC:\Users\82106\Desktop\06_onebite-server-main\src\book\book.service.ts:27:35 at In.handleRequestError (C:\Users\82106\Desktop\06_onebite-server-main\node_modules\@prisma\client\runtime\library.js:122:7154) at In.handleAndLogRequestError (C:\Users\82106\Desktop\06_onebite-server-main\node_modules\@prisma\client\runtime\library.js:122:6188)

안녕하세요.  강의영상의 코드를 다운받을수 있는곳이 있나요?강사님 네이버 카페 가보니 코드로배우는리액트 자료실에 타입스크립트 추가되어 있는 yes24 링크인가요?들어가봤는데 아닌것 같아서 여쭤봅니다..  

안녕하세요. 리액트 강좌를 아주 잘듣고 있는 학생입니다.죄송하지만 이전 강좌를 다시 볼수 없을까요? 글내용을 수정하는 부분이 막혀서요 ㅠㅠ

안녕하세요!setup, teardown 강의를 보며 실습하고 있습니다.beforeAll 내에 console이 첫번째로 찍히다가 afterAll과 함께 사용할 경우에는 afterAll 바로 직전(마지막 바로 앞)에 찍히고 있습니다. (afterAll을 지울 경우에는 첫번째로 찍히고 있습니다.) beforeEach는 it을 실행하는 횟수만큼 실행되는거 같은데요. describe내에 선언한 beforeEach는 describe내에 호출한 it의 횟수만큼 실행되는게 맞는거 같은데 root의 beforeEach, afterEach도 it의 횟수만큼 실행되는게 맞을까요?제가 사용한 코드와 출력화면 입니다.import { screen } from '@testing-library/react'; import React from 'react'; import TextField from '@/components/TextField'; import render from '@/utils/test/render'; beforeEach(() => { console.log('2. root - beforeEach'); }); beforeAll(() => { console.log('1. root - beforeAll'); }); afterEach(() => { console.log('5. root - afterEach'); }); afterAll(() => { console.log('6. root - afterAll'); }); describe('placeholder', () => { beforeEach(() => { console.log('3. placeholder - beforeEach'); }); afterEach(() => { console.log('4. placeholder - afterEach'); }); it('기본 placeholder "텍스트를 입력해 주세요."가 노출된다.', async () => { await render(<TextField />); const textInput = screen.getByPlaceholderText('텍스트를 입력해 주세요.'); expect(textInput).toBeInTheDocument(); }); it('placeholder prop에 따라 placeholder가 변경된다.', async () => { await render(<TextField placeholder="상품명을 입력해 주세요." />); const textInput = screen.getByPlaceholderText('상품명을 입력해 주세요.'); expect(textInput).toBeInTheDocument(); }); }); /** 실행 결과 2. root - beforeEach 3. placeholder - beforeEach 4. placeholder - afterEach 5. root - afterEach 2. root - beforeEach 3. placeholder - beforeEach 4. placeholder - afterEach 5. root - afterEach 1. root - beforeAll 6. root - afterAll */ 

2.3) 구조분해할당 강의의 배열의 구조 분해 할당과 객체의 구조 분해 할당 모두 아래 코드의 four와 extra와 같이 추가적으로 존재하지 않는 변수를 만드셨는데요.이렇게 할당 받을 값보다 할당 받을 변수가 더 많은 경우가 실제로도 사용이 되나요?? 사용이 된다면 어떤 목적으로 사용이 되나요?let arr = [1, 2, 3]; let [one, two, three] = arr;let person = { name: "이름", age: 24, }; let { name, age, extra, } = person;