그대로 넣으면 map을 찾지 못한다는 오류가 나옵니다
미해결
처음 만난 리액트(React)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이런 오류가 나오면서 따로 실행이 되지 않습니다
- HTML/CSS
- javascript
- react
173만명의 커뮤니티!! 함께 토론해봐요.
미해결
처음 만난 리액트(React)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이런 오류가 나오면서 따로 실행이 되지 않습니다
미해결
CloudNet@ - Amazon EKS 기본 강의
안녕하세요 myeks.yaml을 수정해봤는데 노드 구성 중에 롤백 됩니다 2차 시도때 넷 게이트웨이를 생성하는 부분도 추가해봤는데 클러스터까지 생성 후 노드 구성에서 오류가 발생합니다 수정이 곤란한 부분인지, 해결 방법이 있는지 궁금합니다 감사합니다 eksctl create cluster --name $CLUSTER_NAME --region=$AWS_DEFAULT_REGION --nodegroup-name=ng1 --node-type=${WorkerNodeInstanceType} --nodes ${WorkerNodeCount} --node-volume-size=${WorkerNodeVolumesize} --vpc-private-subnets "$PrivateSubnet1","$PrivateSubnet2" --version ${KubernetesVersion} --ssh-access --ssh-public-key /root/.ssh/id_rsa.pub --with-oidc --external-dns-access --full-ecr-access --dry-run > myeks.yaml
해결됨
Next + React Query로 SNS 서비스 만들기
기본적으로 캐싱된 데이터가 있으면, 그 데이터를 가지고 오는 것으로 알고 있는데, const { data} = useQuery({ queryKey: ['posts', 'recommends'], queryFn: getPostRecommends}); const data = queryClient.getQueryData(['posts', 'recommends']); 두 가지 차이점이 있는지 궁금합니다.
해결됨
CloudNet@ - Amazon EKS 기본 강의
안녕하세요! 멋진 강의 잘 듣고있습니다! 문득 강의를 보다 든 생각인데, 파드가 다른 노드에 재 생성되었을 때 다시 해당 hostPath로 생성된 볼륨을 사용하기 위해 hostpath간에 마운트하는 것이 일반적인 상황인지 궁금합니다. 제 생각으로 노드의 생명주기에 종속적으로 만들어진 hostPath가 A노드의 hostPath 볼륨을 B노드가 마운트해서 사용하는 것이 일반적이지 않다는 생각이 들었습니다. 말 그대로 hostPath인데 이렇게 되면 결국 그냥 노드하나 볼륨으로 희생시키고, 각 host의 스토리지간에는 독립적이지 못한 상황인 것 같이 보였습니다. 차라리 nodeAffinty를 써서 해당 노드에 다시 배포되도록 하는 게 맞지 않을까 생각이 들기도 하고요,, 생 초보라 이런 상황을 안 겪어봐서 어떤 경우에 hostPath간 마운트하는 지 잘 이해가 안가서 질문드립니다!
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님 강의 잘 보고 있습니다. 다름아니라 무한스크롤 부분 구현중(개인 프로젝트에 해당 부분만 먼저 적용중이라 jsonplaceholder API로 호출하고 있습니다) fetchNextPage가 2번씩호출이 되어서 delay도 조정해보았는데 계속 2번씩호출이 되서 로직에 혹시 문제가 있는지 봐주실수 있을지부탁드립니다. 0. 콘솔에 확인한 결과 처음 화면에 ref가 렌더되고 그 이후 data fetching이 완료되어 isFetcing이 false가 되었는데, data를 map으로 div로 뿌리는 렌더링 과정에 시간이 소모되어 inView는 true && isFetching도 false가 되어서 div가 화면에 나타나고 ref div를 가리기 전에 data fetching을 한번씩 더 하고 있는 상황입니다. 감사합니다
해결됨
CloudNet@ - Amazon EKS 기본 강의
[root@myeks-host ~]# aws ec2 describe-instances | jq An error occurred (UnauthorizedOperation) when calling the DescribeInstances operation: You are not authorized to perform this operation. User: arn:aws:iam::788105032848: user/cheonho.shin@ahnlab.com is not authorized to perform: ec2:DescribeInstances with an explicit deny in an identity-based policy
미해결
[React 1부] 만들고 비교하며 학습하는 React
package.json에서 "scripts": { "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack serve", "build": "webpack" }, 를 추가해주면 open-ssl 관련 에러가 사라집니다.
미해결
2시간으로 끝내는 프론트엔드 테스트 기본기
안녕하세요 jest 테스트코드 작성을 위한 사전세팅중 위와 같이 코드를 작성 후 실행하였더니 이러한 에러가 발생하였습니다. jest를 사용하며 import라는 구문을 사용하지 못한다는 에러같은데 해결 방법이 있을까요??
미해결
CloudNet@ - Amazon EKS 기본 강의
안녕하세요. 강의 스크립트(자막)을 받을 수 있을까요? 제공되는 노트는(pdf)는 온라인 강의 목차정도만 있고 실제 내용은 강의에서 말로 설명으로 지나가서, 노트 정리를 다시 하려고 하니 영상을 계속 앞뒤로 돌리면서 자막을 보고 있습니다. 챕터별 강의스크립트를 별도로 받을 수 없을까요? 스크립트를 읽고 영상 강의를 듣는 게 정리하는 데 도움이 될 것 같아 문의 드립니다.
미해결
2시간으로 끝내는 프론트엔드 테스트 기본기
공유해주신 프로젝트 clone해서 수정 없이 npm run unit-test 명령어 실행 시, 아래 이미지와 같이 export().toBeInTheDocument() 를 찾지 못해 진도를 나가지 못하고 있습니다.. 혹시 해결방안을 알려주실 수 있으실까요? 구글링 검색 시, import "@testing-library/jest-dom"; 을 테스트 파일 가장 상위에 두라고 하는데 이미 되어 있고 다른 해결책들도 실행해보았지만 해결하지 못했습니다. 노드 버전은 20.10.0 , 18.19.0 , 18.14.0 에서 실행했을 때, 모두 실패했습니다..
미해결
장고 설계철학으로 시작하는 파이썬 장고 입문
화면과같이 include 부분 강좌와 다르게 저절로 세팅이 되고 서버 실행하면 계속 오류가나는데 어떻게해야하나요ㅜㅜ
미해결
CloudNet@ - Amazon EKS 기본 강의
eksctl로 생성하기 첫 번째 과정을 보면, 가용영역을 두개로 만들어서 api서버가 두 가용 영역에만 생성 되는 것으로 나오는데...... api 서버는 3개 이상 구성 되어야하지 않는지요? 그리고 etcd는 몇개 생성 되는지요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
섹션 3. 리액트와 API서버 통신 - 목록처리(1) 학습중인데요. serverData를 console.log로 찍어보면 current가 항상 0입니다. 어디서 확인해야할까요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
productRepository.selectList 호출시 이미지 리스트를 List객체로 반환되는 방법을 알고 싶습니다. 아래의 코드를 보면 이미지리스트는 한개(pi.ord=0)만 가져오는데요. imageList의 모든값이 List객체에 담겨 Page<Object[]>에 포함되는 방법을 알고 싶습니다. Page<Object[]> result = productRepository.selectList(pageable); @Query("select p, pi from Product p left join p.imageList pi where pi.ord = 0 and p.delFlag = false") Page<Object[]> selectList(Pageable pageable);
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
mocking과 spy함수가 조금 헷갈립니다. 아래와 같이 정리하면 될까요? - spy 함수 : 빈 함수인데, vitest에서 이 함수를 감지하고 있고 함수가 call 되었는지, 인자는 무엇이었는지 검증하는 가짜 함수. - mocking : 종속성이 있는 라이브러리를 복사해두고, 그 중 사용해야 할 함수나 기능을 spy 함수로 대체하여 call 했는지 검사할 수 있는 프로세스. 그러면 mocking 자체는 spy 함수 없이 사용하는 것은 의미가 없다고 보면 될까요?
미해결
Next + React Query로 SNS 서비스 만들기
아이디, 비밀번호를 입력하고 로그인 버튼을 누르면 500에러가 발생합니다. 9090 서버 포트는 잘 켜져있다고 뜨고, 코드 올리겠습니다. <auth.ts> import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; import KakaoProvider from "next-auth/providers/kakao"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { // credentials 안에 id창에서 입력하는 정보다 담겨있음 const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, //next-auth의 credentials에는 username, password로 고정되어 있어서 이를 바꿔줌 }), }); //로그인 실패시 if (!authResponse.ok) { return null; } const user = await authResponse.json(); return user; }, }), //kakao로그인을 사용할때 // KakaoProvider(), ], }); <LoginModal.tsx> "use client"; import style from "@/app/(beforeLogin)/_component/login.module.css"; import { signIn } from "next-auth/react"; import { useRouter } from "next/navigation"; import { ChangeEventHandler, FormEventHandler, useState } from "react"; export default function LoginModal() { const [id, setId] = useState(""); const [password, setPassword] = useState(""); const [message, setMessage] = useState(""); const router = useRouter(); const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => { e.preventDefault(); setMessage(""); try { await signIn("credentials", { username: id, password, redirect: false, }); //kakao, naver로 바꿀 수 있음 //client 일때는 next-auth/react의 signIn을 사용 //server 일때는 @/auth의 signIn을 사용 router.replace("/home"); } catch (error) { console.log(error); setMessage("아이디와 비밀번호가 일치하지 않습니다."); } }; const onClickClose = () => { router.back(); }; const onChangeId: ChangeEventHandler<HTMLInputElement> = (e) => { setId(e.target.value); }; const onChangePassword: ChangeEventHandler<HTMLInputElement> = (e) => { setPassword(e.target.value); }; return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <button className={style.closeButton} onClick={onClickClose}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true" className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03" > <g> <path d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"></path> </g> </svg> </button> <div>로그인하세요.</div> </div> <form onSubmit={onSubmit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" className={style.input} value={id} onChange={onChangeId} type="text" placeholder="" /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" className={style.input} value={password} onChange={onChangePassword} type="password" placeholder="" /> </div> </div> <div className={style.message}>{message}</div> <div className={style.modalFooter}> <button className={style.actionButton} disabled={!id && !password}> 로그인하기 </button> </div> </form> </div> </div> ); } <middleware.ts> export { auth as middleware } from "./auth"; export const config = { matcher: ["/compose/tweet", "/home", "/explore", "/messages", "/search"], }; <route.ts> export { GET, POST } from "@/auth"; 에러 내용 : TypeError: next_dist_server_web_exports_next_request__WEBPACK_IMPORTED_MODULE_0__ is not a constructor at reqWithEnvURL (webpack-internal:///(rsc)/./node_modules/next-auth/lib/env.js:15:12) at httpHandler (webpack-internal:///(rsc)/./node_modules/next-auth/index.js:139:139) at /Users/imhwarang/projects/zerocho/z-com/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:63815 at /Users/imhwarang/projects/zerocho/z-com/node_modules/next/dist/server/lib/trace/tracer.js:133:36 at NoopContextManager.with (/Users/imhwarang/projects/zerocho/z-com/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062) 너무 길어서 다 올릴수는 없네요 에러내용을
미해결
CloudNet@ - Amazon EKS 기본 강의
안녕하세요 강의 잘 음미하고 있습니다. " Core DNS파드 배포시에 ENI slot에 Secondary IP가 전부 차 있는 것을 확인하고(실제로 파드가 사용은 안하고 있지만 L-IPAM의 warm pool에서 할당만 받은 상태) 이후 slot이 가득 차 있으므로 새로운 ENI를 생성한다. 따라서 2개의 ENI가 생긴다. " 라고 말씀해 주셨습니다. 그래서 노드 셀렉터걸어서 Core DNS 있는 노드에 배포해 봤는데, 첫 파드 생성 시에만 저 규칙(ENI 생성)이 적용되고, 계속해서 규칙대로 ENI가 생성되는 것은 아니고 기존 ENI 2개에 있는 Secondary IP를 가져다 쓰더라구요. 당연히 계속 ENI를 생성하는 건 비용 측면이나 네트워크 측면이나 비효율적이니 그러려니 싶겠는데 , 노드에 첫 파드 생성 시 에(aws-node, kube-proxy 제외)는 왜 항상 ENI가 1개는 추가로 생성되면서 시작하게 되는건가요? 그냥 ENI에 남은 IP가 있는데 쓰면 되지 않을까요? 감사합니다. 수업 내용이 꽤나 딥다이브해서 이게 이거구나 할 때가 많아서 좋습니다. ㅎㅎ
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 디렉토리 구조를 afterlogin과 beforelogin구조로 나누어서 로그인을 분기치고 있고 auth.ts에서 서버로 부터 전달받은 토근값을 넣고 미들웨어에서 세션을 유무를 확인하여 login페이지로 리다이렉트 시키고 있습니다. afterlogin과 beforelogin으로 디렉토리가 어떤방식으로 나뉘는지 로직이 궁금합니다. 관련된 훅이 있는것인지?? 2. 실제 상용화된 서비스라고하면 로그인이 풀리는것을 방지하기 위해 BE로 토근값을 요청할텐데, 관련 로직은 어떤방식으로 구현하는게 좋은방법인지 요청드립니다.
해결됨
5분빨리 퇴근하자! 파이썬 데이터 분석, 시각화, 웹 대시보드 제작하기
버튼과 체크박스 모두 조건문을 사용할 때는 바로 아래에 텍스트가 출력되는데, 함수를 사용하면 대시보드 맨 위에 텍스트가 호출되는 것은 왜 그런건가요?(맨 위에 텍스트가 호출되어 출력된 부분이 전부 다 한 칸 씩 밀리게 됨)
해결됨
CloudNet@ - Amazon EKS 기본 강의
Grafana 계정 및 비번을 모르겠어요