묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
더 배우고 싶은데
수업 모두 완강했습니다. 근데 좀 더 배우고 싶어서 강사님 강의를 찾아봤더니 우데미쪽에 <<프로젝트로 배우는 React.js & Next.js 마스터리 클래스>>있던데 혹시 할인 행사는 언제쯤 하실 생각인지요.. 아무리 기다려 봐도 다른건 다 할인을 하는데 이 강의만 행사를 안하시더라구요..^^혹시 알림이나 할인행사하시면 꼭 좀 알려주시면 감사하겠습니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
2:56 src/app/page.tsx 파일을 이동 후 not-found 페이지만 뜹니다.
다른 분 질문 내용과 강의에 따르면 (beforeLogin)으로 옮겨진 page.tsx가 잘 떠야 하는데 저는 not-found.tsx만 뜨네요.왜 이러는지 제가 뭘 놓친건지 살펴보고 있는데 아직 못찾았습니다.. ( 혹시 저와 같은 경험이 있으신 분 / 해결하신 분 계신가요? )
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
어느 순간부터 vs코드에서 저장한 내용이 브라우저에서 적용이 안되고있습니다.
안녕하세요 제로초님어느 순간부터 vs코드에서 저장한 내용이 브라우저에서 적용이 안되고있습니다.새로고침해도 수정한 로직이 적용되지 않은채여서,처음에는 일시적인 에러인가 해서 그냥 ctr + c 로 껐다가다시 npm run dev로 켜서 수정된것 브라우저에서 확인하고 했는데 이게 지속적으로 진행되다보니 어떤 문제가 있는건지도 모르겠고 답답해서 여쭤봅니다.ㅠ노드모듈, .next파일 을 지웠다 다시 설치해보기도 해도 여전히 그대로라 문의 올려봅니다 ㅠ어떤것 때문인지 짐작도 안가서 코드를 못 올리는점 참고부탁드립니다. 제로초님 코딩으 따라가면서 잘됐는데 이부분만 왜 갑자기 이러는지..;;
-
미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Vercel Manifest.json 오류
�🔍 Inspect: https://vercel.com/joyoungmins-projects/emotional-diary/brcp442kbNqQCg6KRhhkkQWEiam8 [3s]✅ Preview: https://emotional-diary-g7gk4rl0a-joyoungmins-projects.vercel.app [3s]Error: The file "/vercel/path0/.next/routes-manifest.json" couldn't be found. This is often caused by a misconfiguration in your project강사님 vercel 배포 과정에서 이러한 오류가 나오네요 ㅠㅠ...
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
django htmx 외에 몇 가지 질문 있습니다.
@login_required_hx def note_delete(request, pk): note = get_object_or_404(Note, pk=pk, author=request.user) if request.htmx: note.delete() messages.success(request, "기록을 삭제했습니다.") return HttpResponseClientRedirect(redirect_to=reverse_lazy("photolog:index")) photolog 삭제 기능은 다루시지 않으셨길래 htmx로 구현해보고 있었습니다. 여기서 get_object_or_404를 설정하면 해당하는 쿼리셋 결과가 없을때 404오류를 반환해야하는데 htmx때문에 404 오류를 발생시키지 않습니다. 이 경우엔 어떻게 에러를 해결해야하나요?HttpResponseClientRedirect을 통한 리다이렉트 요청은 함수기반뷰에서는 작동하지만 클래스 기반뷰에서는 작동하지 않았습니다. 이유가 무엇일까요? (form_valid 메서드에 HttpResponseClientRedirect만 추가해서 재정의 했습니다) 여러 파일을 등록해보았는데 같은 png 파일이지만 특정 파일은 등록할 수 없었습니다.OSError at /new/ cannot write mode P as JPEG 오류가 발생하길래 기존 RGBA를 RGB로 변환하는 부분을 아래와 같이 수정했습니다.if pil_image.mode != "RGB": pil_image = pil_image.convert("RGB") jpeg로 변환시에는 모든 타입에 대해서 RGB로 변환을 하는게 일반적인건가요?
-
미해결코드로 배우는 React with 스프링부트 API서버
Entity에 ElementCollection이 두 개 있는 경우
안녕하세요! 하나의 엔티티에 @ElementCollection 붙은 필드가 두 개 있는 경우를 시험해 보고 있습니다. @EntityGraph(attributePaths = {"a", "b"}) 이런 식으로 해서 테스트를 돌리면 org.hibernate.loader.MultipleBagFetchException: cannot simultaneously fetch multiple bags 과 같은 오류가 나는데 ElementCollection 두 개가 있는 경우는 하나의 쿼리로 모두 가져오는 방법은 없나요?
-
해결됨Next + React Query로 SNS 서비스 만들기
"Validation failed (numeric string is expected)" 400 에러와 함께 유저 프로필 / 게시글을 불러오지 못합니다
해당 오류와 함께 유저 프로필 페이지 접속시 게시글을 불러오지 못합니다...!! 콘솔창에서는 해당 메시지와 함께 오류가 출력되는데 맨 밑에 d는 UserPosts.tsx 컴포넌트에서 찍어본 useQuery로 패칭한 데이터 찍어본것 입니다. getUserPosts.ts에서 받아온 res 값을 콘솔에 찍어봤습니다제로초님 코드와 동일한데 어떤 이유에선지 유저 프로필 페이지 게시글을 못불러오는지 잘 모르겠어서 낑낑대다가 질문 드렸습니다...ㅠㅠ 감사합니다
-
미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
express response 타입
type JsonBody = { success: boolean; data: any; }; declare global { namespace Express { export interface Response { json: (body: JsonBody) => this; test: (body: JsonBody) => this; } } } export {};라이브러리 버전express 4.18.2@types/express 1.17.17 get, post 등 모든 요청에서 응답으로 res.status(200).json({success:true, data: []}) 이런 형식으로 코드 자동완성 기능 이용하려고 위와 같이 Express Response에 json 타입을 오버로딩 했는데 res.status(200).json 코드를 입력하면 오버로딩한 타입은 자동완성추천에 뜨지않고 express 자체에서 작성해둔 타입 json(body?: any): Response<any, Record<string, any>, number> 이런 타입만 뜹니다.json 아래에 작성한 test는 res.status(200).test 작성시 자동완성 추천도 잘되고 객체에 success랑 data 입력하게 자동완성 기능이 잘 동작하는데 json만 동작이 안됩니다. 어떻게하면 해결할 수 있을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
jwt의 payload에 넣는 정보
안녕하세요 강사님 좋은 강의를 제공해주셔서 감사합니다.JWT는 header, payload는 base64 방식으로 인코딩 되는데 이 방식은 쉽게 복호화가 가능한 것으로 알고 있습니다.그렇기 때문에 JWT를 클라이언트로 보내줄 때 payload에 mongodb의 _id, rdb의 primary key를 넣어주는 것은 좋지 않다고 생각합니다. 물론 강의는 학습을 위한 프로젝트이기 때문에 payload에 그런 것들을 노출 시킨 것은 알고있습니다.그렇다면 실무에서는 payload에 어떤 값을 넣어주는 것이 적절한지 궁금해서 질문을 남깁니다.
-
미해결2시간으로 끝내는 프론트엔드 테스트 기본기
test 폴더
테스트 모음 폴더명을 "test" 아닌 "__test__"로 정의하신이유가있을까요??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Encountered two children with the same key
Multer 이용하여 이미지 업로드 하면 다음 오류가 뜹니다 import React from 'react' import Dropzone from 'react-dropzone' import axiosInstance from '../utils/axios'; import PropTypes from 'prop-types'; const FileUpload = ({ onImageChange, images }) => { const handleDrop = async (files) => { let formData = new FormData(); const config = { header: { 'content-type': 'multipart/form-data' } } formData.append('file', files[0]); try { const response = await axiosInstance.post('/products/image', formData, config); onImageChange([...images, response.data.fileName]); } catch (error) { console.error(error); } } return ( <div className='flex gap-4'> <Dropzone onDrop={handleDrop}> {({ getRootProps, getInputProps }) => ( <section className='min-w-[300px] h-[300px] border flex items-center justify-center' > <div {...getRootProps()}> <input {...getInputProps()} /> <p className='text-3xl'>+</p> </div> </section> )} </Dropzone> {images.map((image, index) => ( <div key={image+index}> {/* image 이름과 index를 조합하여 고유한 키를 생성 */} <img className='min-w-[300px] h-[300px]' src={`${import.meta.env.VITE_SERVER_URL}/${image}`} alt={image} /> </div> ))} </div> ) } FileUpload.propTypes = { // onImagesChnage: PropTypes.bool.isRequired, onImageChange: PropTypes.any, images: PropTypes.any, }; export default FileUpload
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
[오류] Each child in a list should have a unique
Multer 이용하여 파일 업로드할떄Each child in a list should have a unique 오류가자꾸 뜹니다.. import React from 'react' import Dropzone from 'react-dropzone' import axiosInstance from '../utils/axios'; import PropTypes from 'prop-types'; const FileUpload = ({ onImageChange, images }) => { const handleDrop = async (files) => { let formData = new FormData(); const config = { header: { 'content-type': 'multipart/form-data' } } formData.append('file', files[0]); try { const response = await axiosInstance.post('/products/image', formData, config); onImageChange([...images, response.data.fileName]); } catch (error) { console.error(error); } } return ( <div className='flex gap-4'> <Dropzone onDrop={handleDrop}> {({ getRootProps, getInputProps }) => ( <section className='min-w-[300px] h-[300px] border flex items-center justify-center' > <div {...getRootProps()}> <input {...getInputProps()} /> <p className='text-3xl'>+</p> </div> </section> )} </Dropzone> <div className='flex-grow h-[300px] border flex items-center justify-center overflow-x-scroll overflow-y-hidden'> {images.map(image => ( <div key={image}> <img className='min-w-[300px] h-[300px]' src={`${import.meta.env.VITE_SERVER_URL}/${image}`} alt={image} /> </div> ))} </div> </div> ) } FileUpload.propTypes = { // onImagesChnage: PropTypes.bool.isRequired, onImageChange: PropTypes.any, images: PropTypes.any, }; export default FileUpload
-
미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
8.5)Array.prototype.filter() 의 콜백함수에 대한 의문점이 있어요
// it works return todos.filter((todo)=> todo.content.includes(search) ) // do not work :( return todos.filter((todo)=>{ todo.content.includes(search) }) 8.5) Read- Todolist Rendering 실습 중에 오타를 내서 좀 헤맸는데요 저는 화살표함수를 정의할 때 하듯이callback = (para)=>{body}형태로 썼는데Array.prototype.filter()의 콜백함수에는 함수 바디를 정의하듯이 중괄호를 쓰지않고 callback = (para)=>body 처럼 쓰는데 그 이유가 무엇인가요?제가 생각하는 가설은 중괄호에 들어간 순간 Evaluation이 되서라고 들어본 거 같긴한데 자세히 모르겠습니다
-
미해결기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
컴포넌트 만들때에는 jsx를 사용하는 이유?
안녕하세요. 강의를 수강중인 수강생입니다.혹시 컴포넌트들을 만들때엔 타입스크립트 tsx가 아닌 jsx를 사용하시는데, 이러한 이유가 있을까요? 추가적으로 React.FC에 대해 공부하다보니 지양한다는 글들이 많은데, 어떻게 생각하시는지 궁금합니다. 감사합니다.
-
해결됨코드로 배우는 React with 스프링부트 API서버
JWT 페이로드 안에 데이터는 어느 것이 포함되어야 하는지 질문드립니다
JWT 페이로드 안에 비밀번호가 저장되어 있는데, 주로 JWT 를 사용한다고 가정하면 어느 데이터를 페이로드 안에 넣어야 하고, 넣지 말아야 할 데이터는 어떤 것들인지 알 수 있을까요?!
-
미해결Next + React Query로 SNS 서비스 만들기
포토 모달의 인터셉팅 라우터
안녕하세요, 제로초님.사진 크게보기 modal을 보던 중 궁금한게 있어서 질문 드립니다.사진을 크게 보기 위해 페러렐 라우터와 인터셉팅 라우터를 사용한다고 하셨는데인터셉팅 라우터를 사용하기 위해선@modal/[username]이 아니라@modal/(.)[username] 이 되어야 하는게 아닌지 질문 드려요! 뿐만 아니라 위에 같이 (.)을 붙이지 않았을 경우에 http://localhost:3000/elonmusk/status/1/photo/1위 URL에서 새로고침을 하게되면인터셉팅 되지 않은(afterLogin)/[username]/status/[id]/photo/[photoId]/page.tsx가 나타나야 하고 이는 Home 화면을 보여주기로 하였는데이 부분도 동작하고 있는 것 같지 않습니다. 혹시 원래 동작하는데 제가 놓친 부분이 있는걸까요?
-
미해결iOS/Android 앱 개발을 위한 실전 React Native - Basic
RN 자동완성 기능 질문
ActivityIndicator 같은 라이브러리를 import할때 자동완성 기능은 어떤 플러그인을 쓰신건가요?저는 자동완성이 되는게 View, Text 컴포넌트말고는 없어서요..RN용 플러그인을 따로 쓰신건가요?
-
미해결코드로 배우는 React with 스프링부트 API서버
포스트맨에서 회원 권한이 출력되지 않습니다.ㅠㅠ
강의 내용와 다르게 포스트맨 수행 결과 권한이 함께 출력되지 않고 있습니다. 어느 부분이 문제인가요 ..? 콘솔창에서는 정상적으로 모두 출력된 것을 확인했습니다 ㅠㅠ 그래서 더 모르겠습니다..
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
ERROR
App.js파일을 refresh 하면 이렇게 error가 뜨네요 ㅜㅜ 해결책을 아무리 찾아봐도 나오질 않습니다 . .
-
미해결Next + React Query로 SNS 서비스 만들기
Arrow Function vs Regular Function
안녕하세요!React 와 Next 의 component 선언 방식에 대한 convention 이 궁금하여 질문드립니다.Arrow Function vs Regular FunctionComponent 는 사실 하나의 함수입니다. 그리고 JavaScript 에서는 2가지 방식으로 함수를 선언할 수 있습니다. 하나는 화살표 함수이고 또 다른 하나는 function keyword 를 사용하는 것입니다.이 두 함수 선언 방식의 차이에는 크게 hoisting 과 this keyword 가 있습니다. 궁금하신 분들은 Arrow Functions vs Regular Functions in JavaScript – What's the Difference? (freecodecamp.org) 를 읽어보시면 좋을 것 같습니다. 이번 질문은 기능상의 차이 보다는 "일반적으로" 무엇을 사용하느냐 에 대한 질문입니다.Q. React 에서는 component 를 선언할 때 arrow function 을 일반적(많은 개발자들이 사용)으로 사용하는 것으로 알고 있습니다. Next 는 arrow function 를 일반적으로 사용하나요 아니면 regular function 을 사용하나요?Arrow Function Componentinterface ComponentProps { ... } const Component = ({ ... }: ComponentProps) => { ... } export default Component;Regular Function Componentinterface ComponentProps { ... } export default function Component({ ... }: ComponentProps) { ... }제가 생각했을 때는 export default 를 한번에 사용하기 위해서 regular function 으로 공식 문서나 강의 자료가 작성되어 있는 것으로 생각이 되어지는데, 더 일반적인 선언 방식은 무엇일까요? 물론 convention 이라는 게 없을 수도 있고 사실 프로젝트마다 다르게 정할 수는 있겠지만, 더 일반적인 방식이 무엇인지 궁금하여 질문드립니다.