inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

section27 퀴즈 질문입니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

등록 시 화면 페이지는 바뀌는데 바뀌자마자 위와 같은 오류가 떠서 계속 찾아보는데 혼자는 해결하기 어려워 여쭤봅니다 ㅠㅠ 어디가 틀린 걸까요? mutation은 제대로 된 걸 확인했는데 fetch가 안 되네요. 폴더 구조는 05/boards/new index.js 05/boards/products/[productId] index.js import { useState } from "react"; import { useMutation, gql } from "@apollo/client"; import { useRouter } from "next/router"; const CREATE_PRODUCT = gql` mutation createProduct( $seller: String $createProductInput: CreateProductInput! ) { createProduct(seller: $seller, createProductInput: $createProductInput) { _id number message } } `; export default function ProductRegPage() { const router = useRouter(); const [seller, setSeller] = useState(); const [name, setName] = useState(); const [detail, setDetail] = useState(); const [price, setPrice] = useState(); const [createProduct] = useMutation(CREATE_PRODUCT); const onClickRegister = async () => { try { const result = await createProduct({ variables: { seller, createProductInput: { name, detail, price, }, }, }); console.log(result); router.push(`/05/boards/products/${result.data.createProduct._id}`); } catch (error) { alert(error.message); } }; const onChangeSeller = (event) => { setSeller(event.target.value); }; const onChangeName = (event) => { setName(event.target.value); }; const onChangeDetail = (event) => { setDetail(event.target.value); }; const onChangePrice = (event) => { setPrice(parseInt(event.target.value)); }; return ( <div> 판매자: <input type="text" onChange={onChangeSeller} /> 상품명: <input type="text" onChange={onChangeName} /> 상품내용: <input type="text" onChange={onChangeDetail} /> 상품가격: <input type="text" onChange={onChangePrice} /> <button onClick={onClickRegister}>상품 등록</button> </div> ); } import { useQuery, gql } from "@apollo/client"; import { useRouter } from "next/router"; const FETCH_PRODUCT = gql` query fetchProduct($productId: ID) { fetchProduct(productId: $productId) { seller name detail price } } `; export default function ProductDetailPage() { const router = useRouter(); console.log(router); const { data } = useQuery(FETCH_PRODUCT, { variables: { productId: router.query.productId }, }); console.log(data); return ( <div> <div>판매자:{data ? fetchProduct?.seller : "loading..."}</div> <div>상품명:{data ? fetchProduct?.name : "loading..."}</div> <div>상품내용:{data ? fetchProduct?.detail : "loading..."}</div> <div>상품가격:{data ? fetchProduct?.price : "loading..."}</div> </div> ); }

  • react
  • node.js
  • graphql
  • next.js
희주 댓글 1 좋아요 0 조회수 257

.eslintrc.js module 키워드에 빨간밑줄

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

위와 같은 에러가 생기는데 규칙을 검사하는 건 문제가 없긴합니다. 에러 내용을 번역해서 봤는데도 무슨 말인지 잘 모르겠고 어떻게 해결해야하는지 감도 안옵니다..

  • react
  • node.js
  • seo
  • graphql
  • next.js
joka 댓글 1 좋아요 0 조회수 295

버퍼가 비워지는 시점

미해결

Kevin의 알기 쉬운 Spring Reactive Web Applications: Reactor 1부

안녕하세요. Backpressure의 Drop 전략에서 버퍼가 비워질 때까지 Emit된 데이터가 Drop이 된다는 것은 이해했습니다. 그런데 1번 데이터가 subscriber에게 전달되어서 처리가 되면 버퍼에 자리가 한 자리 비게 되는데 왜 데이터가 계속 Drop이 되는건가요? (코드 실습에서 onNext()함수가 호출이 되어도 255,256,257 ~ 1024까지 모두 드랍됨) | 1, 2 | <-------- 3 듣랍 | 2, |. <-------- 4 드랍 (여기서 왜 4번 데이터는 안들어가나요?) | 5, 6 | Buffer DROP-LATEST를 보면 | 1, 2 | <---- 3들어오는 중 버퍼 가득 차서 drop | 2, 4 | <------ 1번이 버퍼에서 나가고 한 자리가 비어서 4번이 들어와짐 이런식으로 동작을 하는데 Drop은 이렇게 동작하지 않는 것 같아 버퍼가 어떻게 동작하는지 궁금하여 질문드립니다.

  • java
  • spring
  • project-reactor
  • webflux
jhjikhsdsdw 댓글 1 좋아요 1 조회수 364

다음 영상에서는 메뉴좀 크게보이게 해주세요.

해결됨

손에 익는 Next.js - 공식 문서 훑어보기

노트북에서 보면 프로젝트 디렉토리 폴더/파일들이 너무 작아서 안보이네요.

  • react
  • typescript
  • next.js
  • next.js13
doonee 댓글 2 좋아요 1 조회수 484

27:25초에 나의그래프큐엘셋팅 파일로 이동하는방법

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

27:25초에 나의그래프큐엘셋팅 파일로 바로 이동해지는데 어떻게 하는걸까요

  • react
  • node.js
  • seo
  • graphql
  • next.js
손성오 댓글 1 좋아요 0 조회수 233

mac 환경에서 실습할 경우

해결됨

Airflow 마스터 클래스

안녕하세요 mac 환경에서 강의를 수강하려고 합니다. 이러한 경우 wsl 설치 없이 다음 강의로 넘어가면 될까요??

  • python
  • 데이터-엔지니어링
  • airflow
lucli 댓글 1 좋아요 0 조회수 533

안녕하세요. 게시글 필터링 관련해서 질문이있습니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요. 현재 여러개의 select - option으로 게시된 게시글을 필터링을 해보려고 하고 있고 잘 작동하는데 코드가 너무 지저분합니다. 혹시 좀더 효율적으로 짤 수 있는 팁주실수 있으면 감사하겠습니다. ㅠㅠ const coursePosts = useSelector((state) => state.coursePost.coursePosts); const [group, setGroup] = useState("all"); const [subject, setSubject] = useState("all"); const [level, setLevel] = useState("all"); const fillteredCoursePosts = coursePosts.filter((post) => ( //문제의 부분 start group === 'all' && subject === 'all' && level === "all" ? post : subject === 'all' && level === "all" ? (post.group === group) : group === 'all' && level === "all" ? (post.subject === subject) : group === 'all' && subject === "all" ? (post.level === level) : group === "all" ? (post.subject === subject) && (post.level === level) : subject === "all" ? (post.group === group) && (post.level === level) : level === "all" ? (post.group === group) && (post.subject === subject) : (post.group === group) && (post.subject === subject) && (post.level === level) ) //문제의 부분 End ) const handleGroupChange = (e) => { setGroup(e.target.value); } const handleSubjectChange = (e) => { setSubject(e.target.value); } const handleLevelChange = (e) => { setLevel(e.target.value); } return ( <> <main className="width_content"> <div className={styles.course_box_wrap}> <div className={styles.filter_header}> <div className={styles.ft_select}> <select onChange={handleGroupChange}> <option value="all">ALL</option> <option value="Group1">Group 1</option> <option value="Group2">Group 2</option> <option value="Group3">Group 3</option> </select> <select onChange={handleSubjectChange}> <option value="all">ALL</option> <option value="English">English</option> <option value="Korean">Korean</option> </select> <select onChange={handleLevelChange}> <option value="all">ALL</option> <option value="Core">Core</option> <option value="test1">Embed</option> <option value="test2">Test</option> </select> </div> </div> </div> </main> </> ) }

  • react
  • redux
  • node.js
  • express
  • next.js
귀여운 수달 댓글 1 좋아요 0 조회수 235

코틀린에서 builder 패턴은 사용하지 않나요?

미해결

실전! 코틀린과 스프링 부트로 도서관리 애플리케이션 개발하기 (Java 프로젝트 리팩토링)

강사 님께서는 객체를 인스턴스화 하실 때, 생성자를 사용하거나, 정적 팩토리 메서드를 사용하는 방식 2가지를 이용하셨는데 혹시 코틀린에서 builder 패턴을 사용하는건 어떻게 생각하시나요?? defalut 파라미터를 이용하고 naming을 통해 builder패턴 처럼 사용할 수 는 있겠지만 java에서 builder패턴을 통해 객체를 만들었던 것에 비하면 불편하다는 생각이듭니다. 조언 해주시면 감사하겠습니다.

  • java
  • spring
  • kotlin
  • spring-boot
  • 리팩토링
백엔드 주니어 개발자 댓글 2 좋아요 2 조회수 2379

theme 적용이 되지 않습니다.

해결됨

실전 프로젝트로 배우는 데이터 앱 만들기 with Python & Streamlit

theme 적용시, 강사님께서 말씀해주신 것처럼 작업 폴더에 .streamlit 폴더를 만들고, 그 안에 config.toml 파일을 만들어 테마 적용을 했지만, 아래의 문구가 발생하며, 태마가 적용이 되지 않습니다. The page that you have requested does not seem to exist. Running the app's main page. 어떤 이유 인지 알려주세요.

  • python
  • streamlit
동현고 댓글 1 좋아요 0 조회수 495

레디스에서 락이 필요한 상황에 대하여

미해결

재고시스템으로 알아보는 동시성이슈 해결방법

안녕하세요, 강의를 보고 공부를하다 궁금한 점이 생겨 질문드립니다. 제가 예측한 강의 내용으로는, "경쟁 상태 예시(재고 수량)에 대하여 레디스 를 활용한다." 라고 예측 했습니다. 이에 대하여, "레디스는 싱글 스레드 기반이니깐, 락킹 없이 해당 작업이 가능할 것" 이라고 추측하였는데요, 그러나 제가 생각지 못한 레디스 lock 과 관련된 내용을 접하게 되어 신기하면서도 또 궁금한 부분이 생겨 질문드립니다. 레디스 락 전략이 사용되는 이유와 예시를 조금더 들어볼 수 있을까요? 혹은 이와 관련하여 추가적으로 공부해볼 수 있는 자료를추천해주시면 감사하겠습니다.

  • java
  • spring
  • 동시성
성연 댓글 1 좋아요 0 조회수 500

포트폴리오 31-1 과제 중 오류, password is not defined

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

포트폴리오 과제 중, 게시물을 등록하고 수정할 때 비밀번호를 똑같이 입력했는데 저런 오류가 뜹니다 ....ㅠ 해결방법을 잘 모르겠습니다!

  • react
  • node.js
  • seo
  • graphql
  • next.js
naeun 댓글 1 좋아요 0 조회수 231

newAccessToken 이 바로 적용되지 않습니다

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

const errorLink = onError(({ graphQLErrors, operation, forward }) => { //1. 에러 캐치 if (typeof graphQLErrors !== "undefined") { for (const err of graphQLErrors) { //1-2. 해당 에러가 토큰만료 에러인지 체크 if (err.extensions.code === "UNAUTHENTICATED") { return fromPromise( //2. refreshtoken으로 accessToken을 재발급 받기 getAccessToken().then((newAccessToken) => { setAccessToken(newAccessToken ?? ""); //3. 재발급 받은 accesstoken 으로 방금 실패한 쿼리 실행하기 operation.setContext({ header: { ...operation.getContext().headers, //기존의 authorization: Bearer '만료된 토큰' Authorization: `Bearer ${newAccessToken}`, //3-2 authorization 만 바꿔치기 }, }); }) ).flatMap(() => forward(operation)); //3-3 방금 수정한 쿼리 재요청하기 } } } }); 수업이랑 동일하게 코드를 작성하였으나 버튼을 눌러도 재발급된 accessToken 이 들어가지 않아 error 가 발생하고 2번이상 눌러야지만 accesstoken 이 제대로 수정되서 정상적으로 실행됩니다. 어디가 문제일까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
kyb1208tg 댓글 3 좋아요 0 조회수 448

PageableExecutionUtils.getPage 의 최적화 로직만 따로 뺀 count 메소드입니다.

해결됨

실전! Querydsl

갱신된 강의자료에도 나와 있듯이, fetchResult, fetchCount 등의 메소드는 deprecated 예정입니다. 또한 해당 메소드는 Page 타입을 반환하기 때문에 Page 타입을 직접적으로 조작해야 한다는 제약이 있습니다. 이걸 잘 쓰면 되는데, Page 의 시작번호 등 제약도 있어서 저는 회사에서 Page 를 따로 만들어서 사용하거든요. 그래서 search 메소드와 count 메소드는 항상 분리하고 있습니다. 2. 그런 점에서 count 만 최적화하는 로직만 베껴서 만든 최적화 메소드입니다. 실제로 count 구문을 실행하기 위한 메소드입니다. 필요에 따라서 public 으로 만들어도 될 것 같네요. // count 실행 메소드 private Long countByCond(MemberSearchCond cond) { return query .select(member.countDistinct()) .from(member) .where( usernameEq(cond.getUsername()), teamNameEq(cond.getTeamName()), ageGoe(cond.getAgeGoe()), ageLoe(cond.getAgeLoe()) ) .fetchOne(); } 최적화 로직을 베낀 메소드입니다. 스프링 데이터 JPA 는 아래 코드와 같이 page, size 값이 null 이 아니고, 적절한 범위에 있는지를 판단하여 isPaged 라는 분기를 만듭니다. 참고로 코드를 분석하면서 내린 뇌피셜이니 혹시 틀리다면 말씀해주세요. page 가 0 이 아니라 1 부터 시작하는 건 제 취향입니다. 회사에서 그렇게 쓰고 있거든요. 필요에 따라 0 부터 시작하도록 바꾸는 건 어렵지 않을 것 같습니다. public Long countByCondOptimization(List<?> content, MemberSearchCond cond, Long page, Long size) { boolean isPaged = page != null && size != null && page > 0 && size > 0; long offset = isPaged ? (page - 1) * size : 0L; long contentSize = content.size(); if (!isPaged || offset == 0) { if (!isPaged || size > contentSize) { return contentSize; } return this.countByCond(cond); } if (contentSize != 0 && size > contentSize) { return offset + contentSize; } return this.countByCond(cond); } 이렇게 하여 count 쿼리를 리스트 조회 쿼리와 분리하여 재사용성을 높이면서, 성능도 최적화할 수 있습니다. 감사합니다.

  • java
  • jpa
psam1017 댓글 1 좋아요 3 조회수 807

동적으로 Order 절 만드는 코드 공유합니다

해결됨

실전! Querydsl

강의에서는 Query DSL 4.x 버전이어서 제네릭 없는 예제 코드인 것 같은데, 제가 올리는 버전은 5.0 버전이어서 차이가 있음을 감안해주세요. 정렬 조건을 하나만 추가하는 코드입니다. 정렬 조건을 여러 개 추가하려면 반복문을 돌면서 JPAQuery 를 동적으로 확장해나가면 됩니다. // 페이징하는 메소드에서 사용 private Expression<? extends Comparable<?>> specifyMemberProperty(String prop) { prop = prop == null ? "" : prop.toLowerCase(); if (prop.equals("username")) { return member.username; } if (prop.equals("age")) { return member.age; } return member.id; } // 페이징하는 메소드 // ... .orderBy(new OrderSpecifier<>("desc".equalsIgnoreCase(dir) ? Order.DESC : Order.ASC, specifyMemberProperty(prop))) .fetch(); -- 저는 일단 이렇게 만들어봤는데, 다른 분께서 더 나은 코드, 더 빠른 코드가 있다면 저한테도 알려주세요. 감사합니다.

  • java
  • jpa
psam1017 댓글 0 좋아요 2 조회수 362

@ManyToOne Category parent 질문 있습니다.

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

@ManyToOne @JoinColumn(name = "parent_id") private Category parent; @OneToMany(mappedBy = "parent") private List<Category> child = new ArrayList<>(); 안녕하세요. 위 코드에서 부모 쪽에 다대일 매핑 한 이유를 알고 싶습니다. 아니면 DB 테이블 안에서 부모 셀프 외래 키를 만들어서 조회할 때 이 외래 키를 참조하여 자식 카테고리들까지 같이 조회하게 만들었기 때문에 테이블에서 다는 parent_id니까 jpa에도 parent에 다를 준 건 가 싶기도 해서요 필드 명에 부모 자식이 있어서 부모는 하나고 자식은 여러 개인데 부모 쪽에 다로 돼있어서 헷갈리네요..

  • java
  • jpa
hoonseung 댓글 2 좋아요 0 조회수 569

완전탐색 1090번 시간초과

미해결

2주만에 통과하는 알고리즘 코딩테스트 (2024년)

예제 문제는 잘 풀리는데 백준에 제출하니까 시간초과가 뜹니다 강의 자료랑 큰 차이는 없어 보이는데 어느 부분을 고쳐야 시간 안에 계산 가능할까요? #include <iostream> #include <cstdlib> using namespace std; int main(int argc, char **argv) { int n; int minX, minY, maxX, maxY; cin >> n; int arr[n][2]; for(int i=0; i<n; i++){ cin >> arr[i][0] >> arr[i][1]; } minX = arr[0][0]; maxX = arr[0][0]; minY = arr[0][1]; maxY = arr[0][1]; for(int i=1; i<n; i++){ if(arr[i][0]>maxX){ maxX = arr[i][0]; } else if(arr[i][0]<minX){ minX = arr[i][0]; } if(arr[i][1]>maxY){ maxY = arr[i][1]; } else if(arr[i][1]<minY){ minY = arr[i][1]; } } int arr_answer[n]; int arr_dis[n]; for(int i=minY; i<=maxY; i++){ for(int j=minX; j<= maxX; j++){ for(int l=0; l<n; l++){ int subY= 0, subX=0; subY = i-arr[l][1]; subX = j-arr[l][0]; arr_dis[l] = abs(subX) + abs(subY); } int sum = 0; for(int k=0; k<n; k++){ sum+=arr_dis[k]; if(i==minY && j ==minX){ arr_answer[k] =sum; } else if(sum < arr_answer[k]){ arr_answer[k] = sum; } } } } for(int i=0; i<n; i++){ cout << arr_answer[i] << " "; } return 0; }

  • python
  • 코딩-테스트
  • 알고리즘
yongyong213 댓글 2 좋아요 1 조회수 616

쿠키 저장이 되지 않습니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

res.set("Set-Cookie", cookie.serialize("token", token, { httpOnly: true, maxAge: 60 * 60 * 24 * 7, path: "/", })) 프론트에 credentials을 true로 하고 cors 부분에도 credentials를 true로 했지만 application/cookie에 저장이 되지 않습니다. header에 response로 토큰은 잘 들어오는데 뭐가 문제일까요?

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
dalim508 댓글 1 좋아요 0 조회수 819

리액트 깃허프

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

리액트 작업을 컴퓨터 이동하면서 하고싶은데 usb론 너무오래걸려서 깃헙으로 하고싶은데 깃헙에 빌드해서 올리면 다시 받을때 어떻게 받아서 작업해야할까요

  • react
  • node.js
  • seo
  • graphql
  • next.js
주재 댓글 1 좋아요 0 조회수 241

동시성 부분 추가 공부하면서 헷갈리는 부분 질문 드립니다.

해결됨

넓고 얕게 외워서 컴공 전공자 되기

안녕하세요 선생님! 동시성과 병렬성 관련해 기초가 약해 해당 강의를 들으면서 OS 부족한 부분을 많이 알게되어 도움이 많이되고 있습니다. 다름이 아니라 해당 강좌 범위는 벗어나지만.. 구글링해도 명확하게 해결되지 않아 질문 드립니다. 동시성을 구현하는 방법으로 멀티쓰레드 나 코루틴 방법으로 구현을 할 수있고 멀티쓰레드 방법에서 쓰레드 전환 간 context switch가 많기 때문에 오버헤드도 많아 Coroutine 방법을 많이 쓰고 또한 유저가 이벤트루프(스케쥴링)을 app에서 관리한다는 측면에서 디버그가 유용하다 정도로 이해하고 있습니다. 많은 블로그에서 멀티쓰레드보다 코루틴을 소개하면서 동시성 구현시 코루틴을 더 상위(혹은 좋은) 방법으로 서술이 많이 되어 있더라구요. I/O작업이 빈번할 경우 코루틴이 더 유리하다는 이해가 됩니다. 싱글스레드 + async 싱글스레드 멀티스레드 + async 멀티스레드 2개의 구현방법이 레이어가 다르다(thread와 task)보니 4가지 경우의 수를 적용할 수 있는데 실제 동시성을 적용해야되는 상황이면 어떻게 판단하고 최적의 구현방법(4가지 중 선택)을 적용할 수 있을까요? (파이썬 스택을 쓰고 있으며 GIL도 이해하고 있는 상태입니다.) 다시한번 해당 강의와 조금 벗어난 질문드려 죄송합니다. ( _ _ )

  • python
  • 동시성
  • 병렬성
권설민 댓글 1 좋아요 0 조회수 431

스터디 관련 질문

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요! 해당 강의를 통해 프론트엔드 기술을 학습 중인 취준생입니다. 본 학습 자료의 저작권은 코드캠프에 있어 무단 도용, 배포, 복제를 금지한다고 적혀있는데 그럼 혹시 개인 블로그에 내용을 공부한 내용을 정리하는 것이 문제가 되는 사항인지 여쭤봅니다!

  • react
  • node.js
  • seo
  • graphql
  • next.js
현정 댓글 3 좋아요 0 조회수 542

인기 태그

인프런 TOP Writers

주간 인기글