inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

DAY11 영상에 오타있네요

미해결

기초 알고리즘 코딩테스트 40일 완성 (by 하루코딩)

최댓값 문제 2566번인데 2556번(별 찍기 - 14)로 숫자가 잘못되어있습니다. 수정 부탁드립니다.

  • python
  • java
  • 코딩-테스트
kairs294702 댓글 2 좋아요 0 조회수 292

그대로 넣으면 map을 찾지 못한다는 오류가 나옵니다

미해결

처음 만난 리액트(React)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이런 오류가 나오면서 따로 실행이 되지 않습니다

  • HTML/CSS
  • javascript
  • react
rkrdh727 댓글 2 좋아요 1 조회수 484

useQuery랑 queryClient.getQueryData랑 차이점이 있을까요??

해결됨

Next + React Query로 SNS 서비스 만들기

기본적으로 캐싱된 데이터가 있으면, 그 데이터를 가지고 오는 것으로 알고 있는데, const { data} = useQuery({ queryKey: ['posts', 'recommends'], queryFn: getPostRecommends}); const data = queryClient.getQueryData(['posts', 'recommends']); 두 가지 차이점이 있는지 궁금합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
oct.wanga 댓글 2 좋아요 -1 조회수 1871

react-intersection-observer 무한스크롤페이지 중복호출문제

미해결

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을 한번씩 더 하고 있는 상황입니다. 감사합니다

  • react
  • next.js
  • react-query
  • next-auth
  • msw
나무아르볼 댓글 3 좋아요 0 조회수 1369

node 20이상 쓸때 꿀팁

미해결

[React 1부] 만들고 비교하며 학습하는 React

package.json에서 "scripts": { "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack serve", "build": "webpack" }, 를 추가해주면 open-ssl 관련 에러가 사라집니다.

  • react
  • mvc
dohyun_lim 댓글 3 좋아요 4 조회수 789

jest 테스트코드 작성을 위한 사전세팅 중 문제가 발생했습니다.

미해결

2시간으로 끝내는 프론트엔드 테스트 기본기

안녕하세요 jest 테스트코드 작성을 위한 사전세팅중 위와 같이 코드를 작성 후 실행하였더니 이러한 에러가 발생하였습니다. jest를 사용하며 import라는 구문을 사용하지 못한다는 에러같은데 해결 방법이 있을까요??

  • react
  • jest
  • 소프트웨어-테스트
  • Cypress
  • storybook
  • chatgpt
swoo1429 댓글 3 좋아요 0 조회수 841

테스트 실행이 안되는 문제..

미해결

2시간으로 끝내는 프론트엔드 테스트 기본기

공유해주신 프로젝트 clone해서 수정 없이 npm run unit-test 명령어 실행 시, 아래 이미지와 같이 export().toBeInTheDocument() 를 찾지 못해 진도를 나가지 못하고 있습니다.. 혹시 해결방안을 알려주실 수 있으실까요? 구글링 검색 시, import "@testing-library/jest-dom"; 을 테스트 파일 가장 상위에 두라고 하는데 이미 되어 있고 다른 해결책들도 실행해보았지만 해결하지 못했습니다. 노드 버전은 20.10.0 , 18.19.0 , 18.14.0 에서 실행했을 때, 모두 실패했습니다..

  • react
  • jest
  • 소프트웨어-테스트
  • Cypress
  • storybook
  • chatgpt
mktae 댓글 1 좋아요 0 조회수 650

LRU 알고리즘 질문

미해결

백엔드 개발자 성능 개선 초석 다지기

memoryStoreEvictionPolicy 에 가장 최근에 액세스된 항목을 먼저 제거하는 LRU 알고리즘 을 사용했습니다. 라고 자료에 나와있는데, 제가 알기로 LRU 알고리즘은 가장 오랫동안 사용되지 않은 데이터를 삭제하는 것으로 알고 있습니다. 자료에서 설명하신 의미가 잘 이해가 되지 않아서 질문 드립니다.

  • java
  • mysql
  • spring-boot
  • cache
  • index
나무 댓글 2 좋아요 1 조회수 385

모니터링 관련 질문

미해결

백엔드 개발자 성능 개선 초석 다지기

스카우터를 사용하면 트랜잭션 마다, 소요시간을 볼 수 있고, 로그도 확인이 가능한 것이 굉장히 매력적으로 느껴졌는데요 실무에서도 많이 사용하는 툴 인가요? AWS 환경에서도 한 번 적용을 해보고 싶은데, AWS와도 같이 사용하는 편인가요? 그리고 서버가 여러 대 있는, 스케일 아웃 환경에서는 어떤 식으로 사용되나요? 인스턴스마다 스카우터를 설치를 하고, 모니터링을 하는건가요?

  • java
  • mysql
  • spring-boot
  • cache
  • index
나무 댓글 1 좋아요 0 조회수 432

accounts/url 질의

미해결

장고 설계철학으로 시작하는 파이썬 장고 입문

화면과같이 include 부분 강좌와 다르게 저절로 세팅이 되고 서버 실행하면 계속 오류가나는데 어떻게해야하나요ㅜㅜ

  • python
  • django
동휘김 댓글 2 좋아요 0 조회수 260

리스트 번호 클릭시 current가 항상 0입니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

섹션 3. 리액트와 API서버 통신 - 목록처리(1) 학습중인데요. serverData를 console.log로 찍어보면 current가 항상 0입니다. 어디서 확인해야할까요?

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
이재윤 댓글 2 좋아요 2 조회수 439

productRepository.selectList 호출시 이미지 리스트를 List객체로 반환되는 방법을 알고 싶습니다.

미해결

코드로 배우는 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);

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
심정진 댓글 1 좋아요 0 조회수 257

mocking과 spy함수가 헷갈립니다.

해결됨

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

mocking과 spy함수가 조금 헷갈립니다. 아래와 같이 정리하면 될까요? - spy 함수 : 빈 함수인데, vitest에서 이 함수를 감지하고 있고 함수가 call 되었는지, 인자는 무엇이었는지 검증하는 가짜 함수. - mocking : 종속성이 있는 라이브러리를 복사해두고, 그 중 사용해야 할 함수나 기능을 spy 함수로 대체하여 call 했는지 검사할 수 있는 프로세스. 그러면 mocking 자체는 spy 함수 없이 사용하는 것은 의미가 없다고 보면 될까요?

  • javascript
  • react
  • 소프트웨어-테스트
  • vitest
회수 댓글 2 좋아요 1 조회수 906

Stale cahe invalidation 예시

해결됨

실전! Redis 활용

구체적인 방법 예시가 없어 잘 와 닿지 않는데 많이 사용하는 컨벤션 예시가 있을까요?

  • redis
  • nosql
  • cache
동해안청새치 댓글 1 좋아요 0 조회수 343

블룸필터-중복이벤트 제거 예시

해결됨

실전! Redis 활용

레디스가 데이터베이스가 받게 될 부하를 분산시켜준다면 데이터베이스를 쓰는 모든 서비스에 이 기능이 있으면 좋은가요? 특히 더 활용성이 있는 산업, 도메인, 기능이 있을까요? ex. 쓰기 처리가 많은 서비스, 읽기 처리가 많은 서비스.. 등 어떤 상황에서 실무에 적용할 수 있을지 예시가 더 있으면 좀 더 이해하기 좋을 거 같습니다..!

  • redis
  • nosql
  • cache
동해안청새치 댓글 1 좋아요 0 조회수 305

온라인 상태 표시

해결됨

실전! Redis 활용

온라인 상태를 비트맵으로 사용했을 때의 특히 좋은 점이 무엇 일까요? 보통 인스타나 페북 활동중도 비트맵을 쓰나요? 비트맵 데이터타입의 장점은 적은 메모리를 사용하여 바이너리 상태값을 저장한다. 로 강의에서 배웠는데 상태값이 0, 1로 표현될 수 있어서 인가요? 프로세스가 1분 단위에 상태만 볼수있는거로 이해했는데 맞을까요? 예를 들어, 1분동안 이전에 요청이 없었으면 -> 오프라인 1분동안 요청이 있었으면 키에대한 데이터가 1이므로 -> 온라인 으로 처리된다.

  • redis
  • nosql
  • cache
동해안청새치 댓글 1 좋아요 0 조회수 282

로그인 버튼 클릭시 500에러 발생

미해결

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) 너무 길어서 다 올릴수는 없네요 에러내용을

  • react
  • next.js
  • react-query
  • next-auth
  • msw
화랑 댓글 3 좋아요 0 조회수 1236

afterlogin beforelogin 로그인 분기처리 질문

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요. 디렉토리 구조를 afterlogin과 beforelogin구조로 나누어서 로그인을 분기치고 있고 auth.ts에서 서버로 부터 전달받은 토근값을 넣고 미들웨어에서 세션을 유무를 확인하여 login페이지로 리다이렉트 시키고 있습니다. afterlogin과 beforelogin으로 디렉토리가 어떤방식으로 나뉘는지 로직이 궁금합니다. 관련된 훅이 있는것인지?? 2. 실제 상용화된 서비스라고하면 로그인이 풀리는것을 방지하기 위해 BE로 토근값을 요청할텐데, 관련 로직은 어떤방식으로 구현하는게 좋은방법인지 요청드립니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
댓글 1 좋아요 0 조회수 424

button과 checkbox 조건문과 함수

해결됨

5분빨리 퇴근하자! 파이썬 데이터 분석, 시각화, 웹 대시보드 제작하기

버튼과 체크박스 모두 조건문을 사용할 때는 바로 아래에 텍스트가 출력되는데, 함수를 사용하면 대시보드 맨 위에 텍스트가 호출되는 것은 왜 그런건가요?(맨 위에 텍스트가 호출되어 출력된 부분이 전부 다 한 칸 씩 밀리게 됨)

  • python
  • pandas
  • seaborn
  • plotly
  • matplotlib
  • data-visualization
  • streamlit
TEW_교육관리자 댓글 1 좋아요 0 조회수 329

해시-로그인세션 꼭 해시를 쓰는 이유가 무엇인가요?

해결됨

실전! Redis 활용

다른 데이터 타입이 아닌 해시를 쓰는 이유가 무엇인가요? string도 있고 json도 있는데 선정하신 이유가 궁금합니다.

  • redis
  • nosql
  • cache
동해안청새치 댓글 2 좋아요 0 조회수 344

인기 태그

인프런 TOP Writers

주간 인기글