묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
장바구니 담기 버튼 누르면 404에러가 뜹니다
강의 여러번 돌려보고 커뮤니티 질문에도 찾아보고 구글링도 해봤는데 어디서 뭐가 잘못된 건지도 모르겠어서 질문 올립니다! 대체 어디서 잘못 된 걸까요,,,queryClient.tsimport request, { RequestDocument } from "graphql-request"; import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider, } from "react-query"; // any 타입 미리 만들어줌 type AnyOBJ = { [key: string]: any }; // Create a client export const getClient = (() => { let client: QueryClient | null = null; return () => { if (!client) client = new QueryClient({ defaultOptions: { queries: { // 캐시타임 : 이 시간 안에는 다시 상세페이지 들어가도 요청 안 함 cacheTime: 1000 * 60 * 60 * 24, staleTime: 1000 * 60, refetchOnMount: false, refetchOnReconnect: false, refetchOnWindowFocus: false, }, }, }); return client; }; })(); // 기본 url const BASE_URL = "/"; // restFetcher async로 요청 export const restFetcher = async ({ method, path, body, params, }: { // 메소드 타입 정의 method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH"; // url대신 path를 받음 path: string; // post나 put의 경우엔 body가 필요하므로 body?: AnyOBJ; // 파라미터 params?: AnyOBJ; }) => { try { // 기본 url + path let url = `${BASE_URL}${path}`; // RequestInit은 node에 기본적으로 정의되어 있음 const fetchOptions: RequestInit = { method, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": BASE_URL, }, }; // param이 오면 if (params) { const searchParams = new URLSearchParams(params); url += "?" + searchParams.toString(); } // body가 오면 if (body) fetchOptions.body = JSON.stringify(body); // url와 옵션들 요청 // 메서드와 path를 받아서 완성 const res = await fetch(url, fetchOptions); // 받은 것을 json으로 바꾸기 const json = await res.json(); return json; // 에러 출력 } catch (err) { console.error(err); } }; // graphqlFetcher export const graphqlFetcher = <T>(query: RequestDocument, variables = {}) => request<T>(BASE_URL, query, variables); // 쿼리 키 만들기 export const QueryKeys = { PRODUCTS: "PRODUCTS", CART: "CART", }; product/item.tsx 컴포넌트import { Link } from "react-router-dom"; import { Product } from "../../../graphql/products"; import { useMutation } from "react-query"; import { graphqlFetcher } from "../../../queryClient"; import { ADD_CART, Cart } from "../../../graphql/cart"; const ProductItem = ({ imageUrl, price, title, id }: Product) => { const { mutate: addCart } = useMutation(({ id }: { id: string }) => graphqlFetcher(ADD_CART, { id }) ); return ( <li className="products-item"> <Link to={`/products/${id}`}> <p className="products-item__title">{title}</p> <img className="products-item__image" src={imageUrl} /> <span className="products-item__price">${price}</span> </Link> <button className="product-item__add-cart" onClick={() => { addCart({ id }); }} > 장바구니 담기 </button> </li> ); }; export default ProductItem; 콘솔에 뜨는 오류나는 파일 올려드립니다..
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
미들웨어 확장 패턴 적용 이후 api 제한이 안되는 이슈가 있습니다
미들웨어 확장 패턴 적용 이전에는 api호출 횟수를 넘어서면 handler()함수에 적어넣은 부분이 잘 동작합니다하지만 적용 이후에는 왜 인지 동작하지 않습니다.어떤 이유일까요?
-
미해결자바 동시성 프로그래밍 [리액티브 프로그래밍 Part.1]
다음 강의는 언제 출시되는지 알 수 있을까요?
다음 강의가 너무 기대되는데 출시 예정은 언제인지 알 수 있을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
localhost 충돌문제
diaryediter.jsonCreate(state.author, state.content, state.emotion);넣는 순간 충돌이 일어납니다. 주석 처리하면 저장 성공은 확인되지만 일기리스트에 추가가 안됩니다.넣으면 이런현상이 발생합니다
-
미해결비전공 기획자 및 관리자를 위한 IT 필수 지식
강의 너무 좋습니다 정말 ㅠㅠ
강의가 정말 좋습니다... 특히 캠이 있으니까 집중이 더욱 잘됩니다. 너무좋아요 ... 그리고 파일 공유 받고싶은데 시간 여유되실때 한번만 부탁드려도 될까요!?diding0222@naver.com 입니다 !
-
미해결스프링 MVC 2편 - 백엔드 웹 개발 활용 기술
오류 처리 컨트롤러 직접 접근
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용]여기에 질문 내용을 남겨주세요.sendError 나 Exception 발생 시 내부적으로 호출될 컨트롤러 (/error-page/404, /error-page/500) 을브라우저에서 url 을 직접 입력해서도 호출할 수 있는데이러한 접근은 보안 상에 큰 문제가 없을 것 같은데 굳이 막지 않아도 되는 걸까요?
-
해결됨웹플로우(Webflow) 시작하기 - 코딩 없이 자유도 높은 프로토타입 만들기
웹플로우로 게시판 구현 가능할까요?
안녕하세요 장피엠님!웹플로우를 활용해서 고객들이 게시판에 문의 사항을 남길 수 있는 페이지를 만들고 싶은데, 어떻게 하면 좋을까요? 간단한 로직 알려주시면 정말 감사하겠습니다. 도와주세요ㅠㅠ
-
미해결김영한의 실전 자바 - 기본편
자바 중급,고급편 내용
자바 중급, 고급편 강의는 대략적으로 어떤 내용의 강의인가요??
-
미해결프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
안녕하세요 선생님 질문드립니다.
나름 복습한다고 했는데 갑자기 기어가다가 걸음마 혼자 하라는 느낌입니다.. while(3-1) 강의 #예제 5번 중 i = 1while i <= 10:print('i : ', i)if i == 6:breaki += 1우리말로 옮겨 적으면..(선언) i는 1이다. (출력) 10 이하라면 i를 출력해라.{조건1} i에 1을 더했을 때(조건2) i가 6인 경우에는 출력에서 빠져나온다.(break){조건1} 을 빼고 이해 했습니다. 문제는i += 1 를 이해 못하겠습니다.{조건1} i 에 1을 더했을 때 로 읽는거 같은데#i += 1 코드를 적는 위치가 헷갈립니다.#i = 1while i <= 10:print('i : ', i)if i == 6:breaki += 1 예제와 같이 적으면i : 1i : 2i : 3i : 4i : 5i : 6으로 출력되고i = 1while i <= 10:print('i : ', i)i += 1if i == 6:break 이렇게 적으면i : 1i : 2i : 3i : 4i : 5 까지로 6이 비게 되는데1이 출력되는 이유와 출력시 6이 없는..이유가 궁금합니다.또 이렇게 적게 되면 우리말로 해석하게 되면 어떻게 되는지도 궁금합니다.순서대로 쭉쭉 읽을 수 있으면 좋겠는데 여기봤다가 저기봤다가 하니까 혼동스럽습니다 ㅜㅜ
-
미해결스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
@ModelAttribute에 대해서 궁금한점이 있습니다.
@GetMapping("/nonModelAttribute") public void getList(Page page) { } @GetMapping("/modelAttribute") public void getList(Model model,@ModelAttribute Page page) { }@Slf4j @Component public class PageArgumentResolver implements HandlerMethodArgumentResolver{ @Override public boolean supportsParameter(MethodParameter parameter) { // TODO Auto-generated method stub return parameter.getParameterType().equals(Page.class); } @Override public Object resolveArgument(MethodParameter parameter, ModelAndViewContainer mavContainer, NativeWebRequest webRequest, WebDataBinderFactory binderFactory) throws Exception { return null; } } 강의에서 위 두개가 같다고 하셨는데 위의 /nonModelAttribute의 요청의 경우 Page 객체의 경우에는 Argument에서 객체를 만들지않으면 아예 null이 들어오기때문에 ArgumentResolver를 통해서 객체가 생성이 된다는것을 알수있는데 /modelAttribute의 경우에는 해당 부분에서 객체를 생성하지않아도 객체가 생성이 되던데 두개의 차이점이 있는건가요?? 그리고 만약에 차이가 있다면 ModelAttribute의 객체는 어디서 생성이 되는건가요?
-
미해결실습으로 배우는 선착순 이벤트 시스템
코드 볼 수 있을까요?
코드 부탁드립니당 ㅜ
-
미해결10주완성 C++ 코딩테스트 | 알고리즘 코딩테스트
m1 세팅 확인 부탁드립니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.이렇게 진행했는데 오류가 계속 뜹니다.visual studio code는 세팅을 하고 설치하면 될까요?추가로 터미널에서 줄바꿈 기능은 따로 없는걸까요?
-
미해결지금 당장 데브옵스 AWS
front end 배포
지금 배포하는 방식이 csr 배포방식이라고 하셨는데, ssg 배포와 어떤 차이가 있나요 ?? ssg 배포도 결국 정적 파일로 생성해서 dist 폴더 안에있는 파일들을 s3 에 올려서 배포하는 방식이라고 알고있습니다. 그러면 결국 csr 과 ssg 는 차이가 없는게 아닌가요 ??
-
미해결자바 기초부터 마스터하기 with 은종쌤 (Do it 자바 프로그래밍 입문) - Part 1(기초편)
문제답안
자바 기초부터 마스터하기 강의의 ‘나 혼자 코딩!’ 문제 답안은 강의 자료를 통해 확인하실 수 있습니다.강의실 진입 후 우측 상단의 다운로드 버튼이나 커리큘럼에서 각 수업 옆에 위치한 구름모양 다운로드 버튼 아이콘을 통해 자료실에 접근하실 수 있어요. 위에 다른분께서 질문에 대한 답변을 해주셨는데요..구름모양 다운로드 버튼 아이콘이 보이지 않아서 문의 드립니다.
-
해결됨독하게 시작하는 C 프로그래밍
정수형 - char
기초적인 질문이지만..char의 음수부분 어떤때에 사용하는지 궁금합니다.char 의 양수 번호같은 경우는 ascii코드 베이스로 사용하는걸 알겠는데 음수부호를 가지고 char를 사용하게 되는 경우는 어떨때 사용하는걸까요? 그리고 어떤때에 unsigned char를 사용해야하는가도 궁금하네요..ㅎ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
날짜 함수 타입 질문
안녕하세요. 선생님.코드젠이 업데이트 되면서 보드의 날짜 타입이 에러가 아래의 사진처럼 오류가 나는 것 같습니다그래서 선생님께서 올려주시는 포폴 예시 파일에 있는 버전의 타입으로 해도 동일하게 eslint에서 에러가 잡히는 것 같아요.createAt 값이 들어가는 곳마다 저렇게 에러가 잡히는데 어떻게 해결해야할까요??
-
미해결김영한의 자바 입문 - 코드로 시작하는 자바 첫걸음
ScannerWhileEx4를 새로운 switch문으로 풀어보려고 하는데 break를 어떻게 걸어야하는지 잘 모르겠습니다.
일단 이렇게 해서 기본적인 작동은 잘 됐는데 문제는 case 3에서 break가 안걸려서 프로그램이 종료가 안되고 계속 실행이 되는데 어디서 잘못된 걸까요혹시나 해서 옛날 switch로도 해봤는데 똑같이 무한실행이 되네요....
-
미해결스프링부트 시큐리티 & JWT 강의
코틀린 시큐리티 컨피그 설정방법 참고하세요
코틀린에서 이번강의 설정할땐 import org.springframework.context.annotation.Bean import org.springframework.context.annotation.Configuration import org.springframework.security.config.annotation.web.builders.HttpSecurity import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity import org.springframework.security.config.annotation.web.configurers.CsrfConfigurer import org.springframework.security.web.SecurityFilterChain @Configuration @EnableWebSecurity class SecurityConfig { @Bean fun filterChain(http:HttpSecurity):SecurityFilterChain{ http.csrf(CsrfConfigurer<HttpSecurity>::disable) http.authorizeHttpRequests{ it.requestMatchers("/user/**").authenticated() it.requestMatchers("/manager/**").hasAnyRole("MANAGER","ADMIN") it.requestMatchers("/admin/**").hasRole("ADMIN") it.anyRequest().permitAll() } http.formLogin{ it.loginPage("/login") it.permitAll() } return http.build() } } 이런식으로 하시면됩니다WebSecurityConfigurerAdapter는 사라졌고 대신 빈을 생성해서 등록하는식으로 바뀐거같고기본적으로 직렬로 메서드체이닝하던게 다 람다식으로 빠졌고(자기자신을 설정하는건 다 내부람다식으로 동작하게 바뀐듯)authorizeRequests->authorizeHttpRequestsantMatcher->requestMatchersand().formLogin()->http.formLogin{...}이렇게 이름이 변경된친구들도 있습니다
-
미해결데브옵스(DevOps)를 위한 쿠버네티스 마스터
worker에서 join할 때 오류발생
로그를 읽어보니 컨테이너 런타임이 running 상태가 아니라는데, containerd를 시작한 다음에 해도 오류가 발생하며 join이 안됩니다. 나름 구글링해봤는데 해결을 못해서 질문드립니다..wjddndla1013@worker-2:~$ sudo systemctl start containerd wjddndla1013@worker-2:~$ sudo kubeadm join 10.138.0.2:6443 --token 6b4i88.fu2iiiipo41ldiww --discovery-token-ca-cert-hash sha256:232f88032469356177301165974b023033cde407848858921ddcdda262aee2c7 [preflight] Running pre-flight checkserror execution phase preflight: [preflight] Some fatal errors occurred: [ERROR CRI]: container runtime is not running: output: time="2024-01-16T09:30:11Z" level=fatal msg="validate service connection: CRI v1 runtime API is not implemented for endpoint \"unix:///var/run/containerd/containerd.sock\": rpc error: code = Unimplemented desc = unknown service runtime.v1.RuntimeService", error: exit status 1[preflight] If you know what you are doing, you can make a check non-fatal with --ignore-preflight-errors=...To see the stack trace of this error execute with --v=5 or higher
-
미해결스프링 핵심 원리 - 기본편
Qulifier을 위한 어노테이션 사용시 유지보수 비용
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용]여기에 질문 내용을 남겨주세요. 강의 내용 중 나온 애노테이션을 만들게 되면 Qualifier("mainDiscountPolicy") 부분을 제외한 다른 코드는 스프링의 Qualifier 코드를 복붙하여 어노테이션들(@Target, @Retention 등)을 참조해서 사용하게 되는데요. spring의 Qualifier 어노테이션이 변경될 때 선언해놓았던 모든 코드를 수정해야하고, 코드 중복이 많이 발생할 것으로 생각했씁니다. 즉, 이런 어노테이션이 수십개 된다면 유지보수 비용이 올라갈 것으로 생각이 되었습니다@Target({ElementType.FIELD, ElementType.METHOD, ElementType.PARAMETER, ElementType.TYPE, ElementType.ANNOTATION_TYPE}) @Retention(RetentionPolicy.RUNTIME) @Inherited @Documented @Qualifier("mainDiscountPolicy") public @interface MainDiscountPolicy { } @Target({ElementType.FIELD, ElementType.METHOD, ElementType.PARAMETER, ElementType.TYPE, ElementType.ANNOTATION_TYPE}) @Retention(RetentionPolicy.RUNTIME) @Inherited @Documented @Qualifier("QualifierAnnotation1") public @interface QualifierAnnotation1 { } @Target({ElementType.FIELD, ElementType.METHOD, ElementType.PARAMETER, ElementType.TYPE, ElementType.ANNOTATION_TYPE}) @Retention(RetentionPolicy.RUNTIME) @Inherited @Documented @Qualifier("QualifierAnnotation2") public @interface QualifierAnnotation2 { } ... 사용해야하는 이유로 두 가지를 들어주셨는데요.해당 어노테이션이 참조되는 곳을 알 수 있다.mainDiscountPolicy 는 문자열이라 직접 치는 거보다 어노태이션이 낫다.위와 같은 이유라면 아래와 같은 Qualifier 전용 상수를 제공하여 해당 값을 사용하도록 하면, 언급한 두가지 이유도 동일하고 어노태이션 생성을 위한 불필요한 코드 중복 및 유지보수가 줄어들 거 같은데요.public class QualifierConst { public static final String MAIN_DISCOUNT_POLICY = "mainDiscountPolicy"; } // 사용하는 곳에서 @Qualifier(QualifierConst.MAIN_DISCOUNT_POLICY) 강의 중에 이야기하신 부분 외에 어노테이션을 실무에서 사용하는 다른 이유가 있을까요? 언급하신 이유와 어노테이션의 유지보수성을 고려했을때 Qualifier value들을 상수로 관리하는 것이 유지보수 비용이 더 적을 것으로 생각되어 질문 남깁니다.