172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요! useProfileData 훅에서 프로필 데이터를 조회하는 로직이 궁금해서 질문드립니다. useProfileData에서 PGRST116 에러 코드를 확인해서 프로필을 생성하는 로직이 있는데요, fetchProfile에서 .single() 대신 .maybeSingle()을 사용하고, null이면 createProfile을 호출하는 방식이 더 직관적인 것 같은데 에러 코드를 확인하는 방식으로 구현하신 특별한 이유가 있을까요? 실무에서는 어떤 방식을 선호하시는지도 궁금합니다!
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
따로 몽고 DB URL로 하는 connect는 잘됬습니다만, 백엔드 소스를 동작 시켯을때에는 그 URL 로 연결시에 저렇게 failed가 뜨는데... 이미 몽고DB에 아이피도 0.0.0.0/0해준상태입니다. 혹시 뭐가 문제일가요?...
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
React Router에는 대표적으로 선언적 모드와 데이터 모드 두 가지 방식이 있는 것으로 알고 있습니다. 강의에서는 선언적 모드(Declarative)로 라우팅을 구현하셨는데, 실제 실무에서는 선언적 모드와 데이터 모드 중 어떤 방식을 더 많이 사용하는지 궁금합니다. ps. 강의 너무 잘 듣고 있습니다! 강사님 최고!
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
예제 코드는 한 강좌 후 최종 소스가 아니라 강좌시작 하기전 기초 소스 일까요? 예를 들어 134강의 경우 10-10 소스인데 예제코드 소스를 보면 jsx 정보 정도만 들어 있습니다. 다른 강좌도 마찬가지로 기본 틀만 있고 강좌에 나온 파일 조차 만들어 지지 않은 경우가 많습니다. 수업후 최종 소스도 받을수 있을까요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
최신버전으로 강의 업그레이드 하셔야 할거같아요.. 도저히 진행이 안되네요. 버전 차이가 너무 커서 환경 맞추는 거 자체가 고통스러워요. 강의 게시일: 2020. 04. 22. 마지막 업데이트일: 2025. 05. 13. 난 마지막 업데이트일 보고 최신꺼인줄 ㅋㅋ 1.강의 내용은 훌륭하지만, 환경 설정 오류로 진도를 나갈 수 없음. 2." ESLint 9.x / Vite 5.x 버전 충돌 문제 해결에만 수십 시간 소요" 의존성 문제 "현재 강의에서 사용하는 ** eslint-config-react-app@7.0.1 **이 최신 Node.js 환경에서 ** eslint@9.x.x **와 충돌하여 ERESOLVE 오류가 발생합니다." "수강생들은 Hooks 규칙을 활성화하기 위해 강제로 ESLint를 8.x.x 버전으로 다운그레이드해야 하는 번거로움을 겪고 있습니다." "Tailwind CSS 설치 시 npx tailwindcss init -p 명령어가 환경 문제로 작동하지 않고, could not determine executable 오류가 반복됩니다." "CSS 전처리 설정, 특히 PostCSS 설정 방법이 현재 Vite 환경에 맞지 않아 추가적인 검색과 수정이 필요합니다." * tailwind **라는 잘못된 이름의 패키지를 설치하도록 안내된 부분을 지적하여 강사가 코드를 확인하도록 유도합니다. 포함할 내용: "강의에서 안내하는 tailwind 패키지(비공식/폐기됨)가 아니라 tailwindcss (공식 패키지)를 사용해야 설치가 진행됩니다. 강의 코드와 명칭 수정이 필요합니다." " Node.js 20.x, React 18+, ESLint 8.x 또는 9.x 를 기준으로 환경 설정 부분을 재녹화 하여 제공해 주시길 간곡히 요청드립니다." "기존 수강생을 위해 최신 버전 환경 설정에 대한 가이드 문서(ReadMe) 라도 제공되면 큰 도움이 될 것입니다."
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
강의 소스 코드를 다운로드 받아 압축 풀기를 하는데 99% 끝부분에서 특정 파일이 에러가 발생해 넘어가지지를 않습니다. 건너띄기로 100% 완료하기는 했지만 찜찜해서 문의 드립니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 강의 나름 열심히 듣고있는 수강생입니다..! 정환님 강의 React.js, typescript,다 수강하고 이어서 next.js 수강중입니다. 지금은 2.10) 사전 렌더링와 데이터페칭 보고있는데요. 리액트에서의 데이터 페칭 설명해주시면서 기억나시나요?? 물어보셨는데 혹시 정환님 React.js 강의에서 데이터페칭 설명해주신 부분이 있었나요?? ㅠㅠㅠ 제가 놓친건지.. 다시 찾아봐도 찾기가 힘들어서요.. 답변 부탁 드립니다.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
todo리스트 구현중 TodoItem.jsx에서 memo에 대해 강의를 보며 공부중입니다. 이렇게 console.log로 찍었는데 체크박스를 한 개만 찍어도 3가지 모두 다 console로 찍히는데 제대로 적용된 것 맞나요? 하이라이트를 켜도 색상이 비슷해서 구분이 잘 가지않습니다. 로그는 이렇게 찍힙니다. prev next = {"id":0,"isDone":false,"content":"React 공부하기","date":1764731042079}{"id":0,"isDone":true,"content":"React 공부하기","date":1764731042079} TodoItem.jsx?t=1764729548020:40 prev next = {"id":1,"isDone":false,"content":"빨래하기","date":1764731042079}{"id":1,"isDone":false,"content":"빨래하기","date":1764731042079} TodoItem.jsx?t=1764729548020:40 prev next = {"id":2,"isDone":false,"content":"노래 연습하기","date":1764731042079}{"id":2,"isDone":false,"content":"노래 연습하기","date":1764731042079} import { memo } from 'react'; import './TodoItem.css' function TodoItem({id, isDone, content, date, onUpdate, onDelete}) { const onChangeCheckbox = () => { onUpdate(id); } const onClickDeleteButton = () => { onDelete(id) } return ( <div className="TodoItem"> <input onChange={onChangeCheckbox} readOnly checked={isDone} type="checkbox"/> <div className="content">{content}</div> <div className="date">{new Date(date).toLocaleDateString()}</div> <button onClick={onClickDeleteButton}> 삭제 </button> </div> ); } export default memo(TodoItem, (prevProps, nextProps) => { console.log("prev next = " + JSON.stringify(prevProps) + JSON.stringify(nextProps)) if(prevProps.id !== nextProps.id) return false if(prevProps.isDone !== nextProps.isDone) return false if(prevProps.content !== nextProps.content) return false if(prevProps.date !== nextProps.date) return false return true });
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 Tailwind CSS IntelliSense 작동이 안되서 그러는데 확인해 본 결과로 index.css에서 @import "tw-animate-css"; 이거와 @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } 이 코드가 들어가면 작동을 하지 않습니다 혹시 이게 왜 그럴까요...?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강사님이 사용하시는 코드에서 오류가 났을때 빨간문자로 보이는 도움말? 은 무슨 플러그인을 사용하시는건가요?
해결됨
한 입 크기로 잘라먹는 Next.js
next.js 는 핸드북 없나요?
미해결
만들면서 배우는 리액트 : 기초
API 스펙이 변경되었네요! 제보 감사합니다. https://github.com/milooy/cat-jjal-maker/blob/main/answers/29-useEffect.html#L48 위 코드를 참고해서 fetchCat 함수를 변경해주세요. 위 답변해주신대로 소스를 변경해도 고양이 이미지가 엑박으로 뜨질 않습니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
강의중에는 private long tno; private String title; private String content; private boolean complete; private LocalDate dueDate; 위와같은 설정인데, 왜 갑자기 private long tno; private String title; private String writer; private boolean complete; private LocalDate dueDate; 로 바뀌는 건가요? 이것에 대한 설명은 어디에 있는거죠? 몇강 몇분대에 있는지에 대해서 알려주시면 감사하겠습니다.
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
const [count,setCount] = useState(0); 선언되어 있을때 ()=>setCount(count+1); (count)=>setCount(count +1); 강의에서는 2번 처럼 사용 하던데 1번 처럼 사용해도 상관없나요? 차이가 있나요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요, 소개 영상에서는 디스코드 채널이 있는거 같은데요. 관련 링크가 없네요. 어디서 확인가능할까요?
해결됨
(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>
안녕하세요. avif 변환중인데, ESFP 영어버전이 없네요. img를 구할 수 있을까요?
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 선생님! 낙관적 업데이트(2) 강의 마지막에 onSettled를 통해 update가 종료된 후 기존 캐시 무효화 후 db에서 다시 받아와서 갱신시켜주는 로직을 작성한걸로 알고있는데 이때 onMutate 내부에서 setQueryData를 통해 별도의 업데이트된 정보를 캐시에 세팅시켜주는 로직은 필요가 없어지게 되는건가용? export function useUpdateTodoMutation() { const queryClient = useQueryClient(); return useMutation({ mutationFn: updateTodo, onMutate: async (updatedTodo) => { await queryClient.cancelQueries({ queryKey: QUERY_KEY.todo.list, }); const prevTodos = queryClient.getQueryData<Todo[]>(QUERY_KEY.todo.list); /* 이부분 */ queryClient.setQueryData<Todo[]>(QUERY_KEY.todo.list, (prevTodo) => { if (!prevTodo) return []; return prevTodo.map((item) => item.id === updatedTodo.id ? { ...item, ...updatedTodo } : item, ); }); /* //이부분 */ return { prevTodos, }; }, onError: (error, variable, context) => { if (context && context.prevTodos) { queryClient.setQueryData<Todo[]>( QUERY_KEY.todo.list, context.prevTodos, ); } }, onSettled: () => { queryClient.invalidateQueries({ queryKey: QUERY_KEY.todo.list, }); }, }); }
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
sm : 640 이상 md : 768 이상 lg : 1024 이상 2xl : 1536 이상 은 설정하신건가요? 기본 설정인가요?
미해결
[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
좋은 강의 해주셔서 너무 감사드립니다. 바이브 코딩 과정 너무 신기하고 재밌는데, 다만 컴포넌트 생성, provider, 스토리북 등 잘 만들어지긴 하던데 중간에 잘 만들어진건지 확인하는 과정이 없다보니 문제 생겼을때 어디서부터 어디까지 잘못 되었는지 잘 모르겠더라구요. 중간과정 확인 방법이 궁금합니다. 현재는 스토리북에서 버튼 스토리 생성했는데, 완성은 했는데 컴포넌트가 안보이고 빈 페이지로만 나옵니다. 기능은 스토리에 보입니다. page.tsx에서 컴포넌트 불러서 보면 잘 보이구요.
미해결
1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)
Vercel에 연동하고 나니 다음과 같은 창이 뜹니다. 404 Not Found 에러가 떠서 해결을 하고싶은데, 어떤 것이 문제인지 잘 모르겠습니다. 우선 웹사이트를 따로 열어서 실행시키면 정상작동 됩니다.
