묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
메타 데이터 질문
랜더링 되는 layout.tsx에도 metadata를 명시하고, page.tsx에도 metadata를 명시한다면 page.tsx의 메타 데이터로 오버라이딩 되는 것인가요?
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
검색어로 노래 목록 필터링이 안되는 문제
안녕하세요, 진석 님. '01-03 검색 지원' 강의를 듣다가 문제가 생겨 질문을 올립니다. 검색어 입력폼을 구현한 후,검색어로 '악뮤'를 입력하고 검색하면 필터링이 되지 않고 song_list 전체 목록이 뜹니다. 쿼리 값을 사용해서 song_list 필터링을 못하는 것 같은데... 원인을 파악하지 못한채 진석 님 코드로 덮어 쓰기에는 제가 너무 답답해서, 진석 님 코드랑 제 코드도 비교를 해보았는데 코드 까막눈이라 어디서 잘못된지 못 찾겠습니다... 우선 제 코드들과 검색 창을 캡처한 이미지를 같이 첨부했습니다. 도움 부탁 드립니다! <mydjango.py># mydjango.py import sys import django import requests from django.conf import settings from django.core.management import execute_from_command_line # from django.http import HttpResponse from django.shortcuts import render from django.urls import path settings.configure( ROOT_URLCONF=__name__, DEBUG=True, SECRET_KEY="secret", TEMPLATES=[ { "BACKEND": "django.template.backends.django.DjangoTemplates", "DIRS": ["templates"], } ], ) django.setup() def index(request): # qurery 있으면 가져오고, 없으면 빈 문자열로 가져오기 # => 사전에 지정 키가 없더라도 KeyError 예외를 발생시키지 않고 디폴트값 반환 query = request.GET.get("query", "").strip() # 검색어 json_url = "https://raw.githubusercontent.com/pyhub-kr/dump-data/main/melon/melon-20230906.json" response = requests.get(json_url) ''' #예외 발생 처리 코드 .ok 속성이 내부에서 raise_for status 함수를 사용하지만. 예외 발생이 아닌 True/False를 반환 - True: 서버 응답의 상태코드가 400 미만일 경우 - False: 서버 응답 상태코드가 400 이상, 600 미만일 경우 ''' if response.ok: song_list = response.json() else: song_list = [] if query: song_list = filter( lambda song: query in song["가수"], song_list, ) response.raise_for_status() song_list = response.json() return render(request, "index.html", {"song_list": song_list}) urlpatterns = [ path("", index), ] execute_from_command_line(sys.argv) <index.html>{# 장고 템플릿 엔진 주석 문법 : templates/index.html 경로의 파일 #} <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>Melon List</title> <style> body { width: 400px; margin: 0 auto; } table { width: 100%; border-collapse: collapse; } table, th, td { border: 1px solid black; } form { margin-bottom: 10px; } form input { width: 100% } </style> </head> <body> <h1>Melon List</h1> <form action="" method="get" autocomplete="off"> <input type="text" name = "query" placeholder="검색어를 입력해주세요." autofocus/> </form> <table> <thead> <tr><th>곡명</th><th>가수</th></tr> </thead> <tbody> {% for song in song_list %} <tr> <td>{{ song.곡명 }}</td> <td>{{ song.가수 }}</td> </tr> {% endfor %} </tbody> </table> </body> </html> <main01.py># 더 많은 노래를 보여주고 싶어요. import requests # pip install requests from pprint import pprint # 가독성좋게 출력하기 위한 모듈 json_url = "https://raw.githubusercontent.com/pyhub-kr/dump-data/main/melon/melon-20230906.json" response = requests.get(json_url) response.raise_for_status() # 비정상 응답을 받았다면, HTTPError를 발생시킵니다. song_list = response.json() print(type(song_list), len(song_list), type(song_list[0])) pprint(song_list) <검색어에 '악뮤' 입력 시, 나오는 화면>
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
예시 이메일 수정
안녕하세요 혹시 이 부분에서 이메일이 예시 이메일로 들어갔는데 수정하는 방법있나요
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
강의 코드 질문이 있습니다!
안녕하세요 nock을 활용한 HTTP request mocking강의를 듣던 도중 계속 테스트 실패가 일어나 확인하니axios 400 에러가 나고 있는데 isError 가 true 로 오지 않아 테스트가 실패하고 있는 것 같습니다. LoginPage의 isError 를 !isError 로 변경하니 테스트가 통과 되었습니다.원래 isError 가 false로 오는게 맞는 건가요??
-
미해결따라하며 배우는 리액트 네이티브 기초
React Native CLI 환경 대신 expo에서 개발가능할까요?
커리큘럼 내용상 cli 환경에서 인스타그램 클론 개발이 진행되는데혹시 expo 환경에서 개발이 가능할까요?
-
미해결[React 1부] 만들고 비교하며 학습하는 React
node 20이상 쓸때 꿀팁
package.json에서 "scripts": { "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack serve", "build": "webpack" },를 추가해주면 open-ssl 관련 에러가 사라집니다.
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
테스트 코드의 흐름에 관해 질문이 있습니다!
안녕하세요섹션 2의 nock을 활용한 HTTP request mocking 강의 1:31초 부분에 질문이 있습니다.fireEvent.change(emailInput,{target:{value:"wrong@email.com}}); fireEvent.change(passwordInput,{target:{value:"wrongPassword}}); 를 적으시는 부분에서 잘못된 패스워드와 잘못된 이메일을 입력할 때 라고 말씀하셨는데value 부분은 string이어서 "wrong@email.com" 이 틀린 이메일을 말한다는걸 코드가 이해하는 부분도 아닐 것 같은데 어떻게 에러 코드를 던져주는건지 궁금합니다!( 로그인에 실패한다. 라는 상황이 코드상에 보이지 않는 것 같은데 코드가 어떻게 이해하는지를 모르겠습니다! )
-
미해결Next + React Query로 SNS 서비스 만들기
회원가입이 되지 않습니다.
안녕하세요. 회원가입을 하려고 할 때 이상한 점이 몇 가지 있어 질문을 남겨봅니다. 삽질을 하다가 다른 분의 질문을 보고 npm i next-auth@5.0.0-beta.3 이건 적용을 해본 상태입니다. [auth][error] UnknownAction: Cannot parse action at /api/auth/session localhost:3000으로 접속하고 나면 잠시 뒤에 콘솔에 이런 에러가 뜹니다. 회원가입이 되지 않는 문제아이디, 닉네임, 비밀번호, 이미지를 넣고 회원가입을 하면 [auth][error] UnknownAction: Cannot parse action at //callback/credentials .Read more at https://errors.authjs.dev#unknownaction at parseActionAndProviderId (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/utils/web.js:87:27) at toInternalRequest (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/utils/web.js:32:40) at Auth (webpack-internal:///(action-browser)/./node_modules/@auth/core/index.js:82:103) at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:55:71) at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/index.js:82:75) at $$ACTION_0 (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:53:60) at async /Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:406 at async t0 (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:5773) at async rh (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:23636) at async doRender (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1391:30) at async cacheEntry.responseCache.get.routeKind (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1552:28) at async DevServer.renderToResponseWithComponentsImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1460:28) at async DevServer.renderPageComponent (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1843:24) at async DevServer.renderToResponseImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1881:32) at async DevServer.pipeImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:909:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/next-server.js:266:17) at async DevServer.handleRequestImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:805:17)TypeError: Invalid URL at new URL (node:internal/url:775:36) at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:61:19) at async $$ACTION_0 (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:53:9) at async /Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:406 at async t0 (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:5773) at async rh (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:23636) at async doRender (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1391:30) at async cacheEntry.responseCache.get.routeKind (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1552:28) at async DevServer.renderToResponseWithComponentsImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1460:28) at async DevServer.renderPageComponent (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1843:24) at async DevServer.renderToResponseImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1881:32) at async DevServer.pipeImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:909:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/next-server.js:266:17) at async DevServer.handleRequestImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:805:17) { code: 'ERR_INVALID_URL', input: 'undefined'}이런 에러가 뜨며 회원가입이 되지 않습니다. 그런데 npm i next-auth@5.0.0-beta.3 이걸 적용하기 전에는 1번에서 언급한 에러는 떠 있어도 회원가입은 정상적으로 됐었는데 beta.3 버전을 설치한 이후에는 회원가입이 아예 안 되네요. 회원가입 후 로그아웃 버튼이 보이지 않는 문제이건 회원가입이 정상적으로 됐을 때 궁금했던 부분입니다.회원가입이 되면 /home으로 리다이렉트가 됐었는데 그런데 전 로그아웃 버튼이 보이지가 않더라구요.useSession() 으로 데이터를 받아오지 못 해 null 을 리턴해서 그랬던 것이 맞을까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
해시태그 가공해보고 싶습니다 ㅠ
해시태그를 가져오려 include: [{ model: Hashtag, attributes: ["hashtag"], through: { attributes: [] } }],이런식으로 코드를 짯는데 프론트로 데이터를 보내는게Hashtags: [1:{hashtag: "ㅁㄴㄴ"}2: {hashtag: "ㅇㅇㅇ"}3: {hashtag: "ㅂㅂㅂ"}4: {hashtag: "ㅁㅁㅋㅋ"}]이런식으로 데이터가 가더라구요 여기서 hashtag 라는 이름 없이Hashtags: [ 1 : "ㅁㄴㄴ"2:"ㅇㅇㅇ"3:"ㅂㅂㅂ"]이런식으로 보내고 싶은데 방법 없을까요...
-
미해결Next + React Query로 SNS 서비스 만들기
vercel에 배포후의 public 폴더 문제
안녕하세요. 이번에 nextjs 14 로 배포후에 public 폴더의 mp3 나 obj 파일들은 로드가 잘되는데, jpeg 는 404 에러가 나는 이유가 어떤걸까요? Image next 태그를 사용했습니다.
-
미해결2시간으로 끝내는 프론트엔드 테스트 기본기
jest 테스트코드 작성을 위한 사전세팅 중 문제가 발생했습니다.
안녕하세요 jest 테스트코드 작성을 위한 사전세팅중위와 같이 코드를 작성 후 실행하였더니이러한 에러가 발생하였습니다.jest를 사용하며 import라는 구문을 사용하지 못한다는 에러같은데 해결 방법이 있을까요??
-
해결됨Next + React Query로 SNS 서비스 만들기
next-auth 사용 로그인 관련 질문
안녕하세요 강의 보면서 다른 프로젝트 진행 중 입니다. login을 msw로 구현하는곳에서 막혀서 질문드립니다. 로그인 버튼을 누르면 http://localhost:3000/api/auth/error 이쪽으로 이동하며 404페이지가 뜹니다서버에서 에러를 떨궈주면 유추라도 하겠지만 9090번 3000번 둘 다 에러를 떨궈주지 않습니다..다른 질문글 중에 @auth/core와 next-auth의 버전을 변경해서 해결됬다는 글도 참고했지만 저는 해결되지않았습니다.그리고 강의 중에 api/auth/signin 으로 들어가면 next-auth에서 제공하는 버튼이 뜨던데 저는 뜨지 않습니다.. 답변 부탁드립니다 감사합니다.추가) 로그인시 api/login에 요청할때 네트워크 탭에서 localhost:3000/api/login이 아닌 localhost:3000/api/auth/error로 떨구는지도 궁금합니다.-----------------------------------감사합니다-------------------------
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Next.js
안녕하세요 제가 급히 Next.js에 관련하여 업무에 필요한데, 어느 강의부터 수강하면 될까요?😅
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
더미데이터가 아닌 localstorage 사용후 최신순 오래된순 작동이 안되네요
더미데이터가 아닌 localstorage 사용후 최신순 오래된순 작동이 안되네요 이유를 모르겠습니다깃허브 링크 남기겠습니다!!https://github.com/Sonseongoh/emotion-diary 추기)리액트 디밸로퍼툴 로 확인해보니 모든일기의 date 값이 같게 나옵니다
-
미해결2시간으로 끝내는 프론트엔드 테스트 기본기
테스트 실행이 안되는 문제..
공유해주신 프로젝트 clone해서 수정 없이 npm run unit-test 명령어 실행 시, 아래 이미지와 같이 export().toBeInTheDocument()를 찾지 못해 진도를 나가지 못하고 있습니다.. 혹시 해결방안을 알려주실 수 있으실까요?구글링 검색 시, import "@testing-library/jest-dom"; 을 테스트 파일 가장 상위에 두라고 하는데 이미 되어 있고 다른 해결책들도 실행해보았지만 해결하지 못했습니다.노드 버전은 20.10.0 , 18.19.0 , 18.14.0 에서 실행했을 때, 모두 실패했습니다..
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
렌더링이 2번 되는 이유
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 강사님props 강의 9분 질문드립니다.console.log("RENDER!") 를 찍어보니 2번씩 렌더링이 일어나는 것 같아서 그 이유에 대해 질문드리고 싶습니다.state 변수가 변할 때, 부모 컴포넌트가 변할 때, 부모 컴포넌트로부터 자식 컴포넌트가 props를 받을 때 리렌더링이 되는 것으로 이해하고 있는데, 새로고침만 해도 2번씩 렌더링이 되는 것 같아서요 질문을 받아주셔서 감사합니다.
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
3.4. 타이머 테스트의 마지막 테스트 질문입니다.
it('연이어 호출해도 마지막 호출 기준으로 지정된 타이머 시간이 지난 경우에만 함수가 호출된다.', () => { const spy = vi.fn(); const debouncedFn = debounce(spy, 300); // 최초 호출 debouncedFn(); // 최초 호출 후 0.2초 후 호출 vi.advanceTimersByTime(200); debouncedFn(); // 두번째 호출 후 0.1초 후 호출 vi.advanceTimersByTime(100); debouncedFn(); // 세번째 호출 후 0.2초 후 호출 vi.advanceTimersByTime(200); debouncedFn(); // 👈 4번째 호출 // 네번째 호출 후 0.3초 후 호출 // 최초 호출 후에 함수 호출 간격이 0.3초 이상 -> 다섯번째 호출이 유일 vi.advanceTimersByTime(300); debouncedFn(); // 👈 5번째 호출 // 다섯번을 호출했지만 실제 spy함수는 단 한 번만 호출 expect(spy).toHaveBeenCalledTimes(1); }); 안녕하세요. 새해 복 많이 받으세요 :)다름이 아니라 위 코드에서 4번째 호출 후 바로 뒤, vi.advanceTimersByTime(300);로 인해 0.3초가 흘렀고 이로 인해 expect(spy).toHaveBeenCalledTimes(1); 이 맞다고 나온 것이 아닌지 궁금해서 질문드립니다.강의에서는 4번째 호출이 아닌 5번째 호출로 인해 호출된다고 하셨는데(최초 호출 후에 함수 호출 간격이 0.3초 이상인 경우는 다섯번째 호출이 유일하다고 하신 것 같아요) 5번째 호출 후에는 0.3초가 흘렀다는 가정 (vi.advanceTimersByTime(300);)이 없고 제가 혼자 테스트 해보며 5번째 호출 후에 vi.advanceTimersByTime(300);를 넣어 0.3초가 흘렀다고 가정을 하니 호출이 2번 되었다고 떠서요.제가 debounce를 헷갈려 했는데 제가 아직 잘 이해하지 못한 부분이 있는 건지 아니면 실제로 잘못 설명된 부분이 있는 건지 모르겠어서 질문 드립니다. 감사합니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
route 오류
route 오류가 떠서요 라우터를 깔았는데 왜이럴까요 ??
-
미해결처음 만난 리액트(React)
챕터03 화면에 아무것도 안 나와요.
영상보고 코드 똑같이 작성했는데 화면에 아무것도 안 나와요.리액트 버전 18에서 17로 다운그레이드도 했는데 여전히 아무것도 안 나오네요.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman에서 오류가 있습니다
눈동자 모양no enviorment에서 grab-market-mock-server로 전환이 안됩니다
