묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
질문
[username] 라우터의 page.tsx에 현재 들어온 유저정보를 받아오는 prefetchQuery랑 그 유저의 게시글을 받아오는 infinitePrefetchQuery가 있는데 두 번째 Query의 경우 서버 컴포넌트에서 실행되는 함수라 credential:"include"가 작동하지 않아 Cookie값을 따로 명시해줘야 하는걸로 알고있습니다. 근데 Cookie값을 따로 명시해주지않아도 게시글들이 잘 불러와지는데 이 과정이 궁금합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
완벽한 프론트엔드 강의와 이 강의 차이점
우연찮게 '완벽한' 프론트엔드 강의를 발견하였는데 제가 지금 듣고 있는 강의와 과정이 많이 다른 걸까요? 앱 개발 관련해서도 코드캠프를 통해 공부하고 싶은데 따로 강의가 있진 않은걸까요?
-
해결됨코드로 배우는 React 19 with 스프링부트 API서버
REST 방식 컨트롤러 만들기(2)-LocalDateFormatter ㅠㅠ;
선생님, 안녕하세요~섹션 3. 스프링부트와 API서버 => REST 방식 컨트롤러 만들기(2)에서 4:06분 근처=> LocalDateFormatter에서 오류가 납니다. CustomServletConfig까지 작성하고 실행하면 아래와 같은 오류가 나옵니다.C:\backend2\serverapi\serverapi\src\main\java\org\zerock\serverapi\controller\formatter\LocalDateFormatter.java:12: error: type Formatter does not take parameterspublic class LocalDateFormatter implements Formatter<LocalDate> {^앞.뒤로 돌려보면서 찾아 보려 했는데 잘 모르겠습니다. LocalDateFormatter만드는 부분부터 오류가 납니다.죄송하지만 확인하시면 답변 부탁 드립니다.감사합니다. 코드 첨부합니다.package org.zerock.serverapi.controller.formatter; import org.hibernate.engine.jdbc.internal.Formatter; import java.text.ParseException; import java.time.LocalDate; import java.time.format.DateTimeFormatter; import java.util.Locale; import static java.awt.SystemColor.text; public class LocalDateFormatter implements Formatter<LocalDate> { @Override public LocalDate parse(String Text, Locale locale) throws ParseException { return LocalDate.parse(text, DateTimeFormatter.ofPattern("yyyy-MM-dd")); } @Override public String print(LocalDate object, Locale locale) { return DateTimeFormatter.ofPattern("yyyy-MM-dd").format(object); } }
-
해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
앱 실행 후 오류 질문드립니다.
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, Expo, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.윈도우, 안드로이드 환경에서 실행하였습니다. 홈화면은 잘 보이지만 profile이나 setting 버튼 클릭시 위의 오류화면이 나오게 됩니다. 서버 연결하는 부분까지도 잘 됐는데 어느 순간 이런 오류가 등장하였습니다. 어떻게 수정해야 할까요..?감사합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새 강의 쿠폰과 관련해서 질문드립니다.
귀찮게 해서 죄송합니다. 혹시 저도 기간을 놓쳐 쿠폰을 사용하지 못했는데 새로운 강의를 수강하기 위한 할인 쿠폰을 받을 수 있을지 문의드립니다. 좋은 강의를 제공해주셔서 감사드립니다 :)
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
추천하시는 강의 듣는 방법!
혹시 강의를 처음에는 쭉 보면서 따라하거나 정리하고 다시한번 한입 북스를 스스로 만들어보면서 nextjs흐름을 파악하면서 잘 모르겠거나 막히는 부분 강의 다시 한번 듣고 소스 코드 보고 이렇게 듣는 방식이 젤 괜찮은가요?? 아니면 스타일링이나 단순 리액트 컴포넌트를 구성하는 부분은 혼자서 해보고 강의를 듣는 방식이 더 나을까요?? 감사합니다
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
todolist 새로고침 했을때 추가했던 데이터들 초기화 되지 않게는 어떻게 하나요??
삭제하기 강의 까지 들었는데따로 데이터를 삭제하지 않았어도 새로고침을 하면 기본 mockData들만 다시 화면에 나타납니다. 새로 고침을 해도 이전 데이터들이 그대로 나오게 하려면 어떻게 해야 하나요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
5.2강의에서 header태그 에러
const Header = () => { return { <header> <h1>header</h1> </header> }; }; 위의 코드 작성시속성 할당이 필요합니다.선언 또는 문이 필요합니다.식이 필요합니다.선언 또는 문이 필요합니다.이 4가지 에러가 표시됩니다.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
코드 다시 만져보면서 추가질문입니다.
문의하기에서 접수 완료 후 (현재 기본 로컬~문의완료되었습니다.) 알럿 뜨는거 저번에 배운 게시글 처럼 넣어서 이쁘게 꾸며도 사용상 문제없는거 맞죠?만약에 참고할만한 알럿 다른 라이브러리나 깃허브 같은건 보통 실무에서 어떻게 참조하나요?몽고DB랑 AWS_S3로 저희가 이미지 및 데이터를 저장하잖아요, 그럼 실무에서는 그냥 도메인 및 호스팅만 따로 구매해서 넘겨드리고 사용 하시면 된다고 하면서 넘겨드리고, 몽고DB 및 AWS_S3는 제가 한 계정(제 개발계정)에 같이 폴더만 나눠서 관리하는 식으로 많이하나요? 궁금합니다.
-
해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
[4-6]접근제한 스크린 관리하기+로그아웃 부분에서; 로그인 후, 내정보 스크린이 안뜨는데요,,,
챗지피티와; 강의 다시 보는데도; 해결이 안되어 문의드려요 ㅠㅠ
-
미해결Next + React Query로 SNS 서비스 만들기
회원가입 이후 Session문제
회원가입 후 로그인 된 상태로 home으로 이동하게 되는데 여기서 useSession정보가 업데이트 되지않아서 Props로 session정보를 넘겨주는 방식으로 사용하셨는데 다르게 처리하는 방법도 있을까요 ? 예를 들면 로그인 모달에서 했던 것 처럼 서버액션을 사용하지 말고 클라이언트 컴포넌트에서 fetch 를 처리한 후replace(/home) 시키는 방법이요 !
-
미해결처음 만난 리액트(React)
이름과 코멘트 줄바꿈이 안 됩니다.
Chapter 5 실습을 하고 있습니다. 작성한 코드를 컴파일하면 유저의 이름과 댓글이 한 줄에 출력되고 있는데 코드에서 어디를 잘못 작성한걸까요??여러번 강의 영상을 돌려봤는데 못 찾겠네요 ㅠㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트원 질문입니다
const onClickLoad = async (event: MouseEvent<HTMLDivElement>) => { const IMP = window.IMP; IMP.init("imp00000000"); //실제로는 강의자료에 있는 식별코드 사용했습니다! IMP.request_pay( { pg: "kakaopay", pay_method: "card", name: "아이리버 무선 마우스 외 1개", amount: 10000, buyer_email: "이메일@gmail.com", buyer_name: "홍길동", buyer_tel: "010-4242-4242", buyer_addr: "서울특별시 강남구 신사동", buyer_postcode: "01181", m_redirect_url: "/", }, function (rsp: any) { if (rsp.success) { alert("결제가 성공했습니다."); console.log(rsp); } else { alert("결제에 실패했습니다."); } }, ); };위와 같은 코드로 정상적으로 rsp를 받고, imp_uid 까지 받았습니다. 그런데graphql api 호출을 했더니 _id 가 null이라는 에러가 계속해서 발생하네요. 챗gpt 도움을 받아보니, 백엔드가 impUid를 기반으로 결제 정보를 조회하고 DB에 적립하는 로직이 정상적으로 동작하는지 확인해야한다고 하는데, 에러원인이 무엇이고,어떻게 해결해야 하는지 알려주세요! 포트원 가맹점 식별코드는 강의 자료에 있는 식별코드를 사용했습니다!
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
로그인 문제에 대해서
안녕하세요 선생님강의 잘들었습니다! 마지막 영어 및 다국어 변환만 들으면 벌써 완강이네요 감사합니다 :)전체적으로 코드를 보다가 궁금증이 있어서 문의합니다.코드 정리하면서 기능 하나씩 눌러보니, 1. 회원가입 페이지가 저희 프로젝트에는 없어서 몽고db에 수동으로 등록하면서 진행했잖아요 이부분을 회원가입으로 어떻게 연동하는지 궁금합니다.2. 실무에서 사용하는 강의라고 하셨는데 이부분은 실무에서 저희 프로젝트처럼 진행하면 어떻게 설명하는지도 궁금합니다. "로그인이 다른곳에되어있습니다"이렇게 어드민에 뜨게 되면 지금이야 저희가 몽고db에 들어가서 false로 변경하면 들어가지긴하나, 이걸 온라인에 배포한다고 하면 어떻게 실무적으로 처리하나요??
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
PageResponseDTO 질문이 있습니다.
package com.example.backend.mallapi.dto; import lombok.Builder; import lombok.Data; import java.util.List; import java.util.stream.Collectors; import java.util.stream.IntStream; @Data public class PageResponseDTO<E> { private List<E> dtoList; private List<Integer> pageNumList; private PageRequestDTO pageRequestDTO; private boolean prev, next; private int totalCount, prevPage, nextPage, totalPage, current; @Builder(builderMethodName = "withAll") public PageResponseDTO(List<E> dtoList, PageRequestDTO pageRequestDTO, long totalCount) { this.dtoList = dtoList; this.pageRequestDTO = pageRequestDTO; this.totalCount = (int)totalCount; int end = (int)(Math.ceil( pageRequestDTO.getPage() / 10.0 )) * 10; int start = end - 9; int last = (int)(Math.ceil((totalCount/(double)pageRequestDTO.getSize()))); end = end > last ? last: end; this.prev = start > 1;//1보다 크면 참 밑에 if문 실행. this.next = totalCount > end * pageRequestDTO.getSize(); this.pageNumList = IntStream.rangeClosed(start,end).boxed().collect(Collectors.toList()); // start부터 end까지 연속된 숫자 스트림(IntStream)을 생성 // rangeClosed(a, b): a부터 b까지 포함 // IntStream은 기본형 int 스트림이기 때문에, // 객체형 리스트(List<Integer>)로 변환하기 위해 .boxed()를 사용. // 스트림을 리스트로 변환하는 역할 if(prev) { this.prevPage = start -1; } if(next) { this.nextPage = end + 1; } this.totalPage = this.pageNumList.size(); this.current = pageRequestDTO.getPage(); } }위에 코드를 옆에처럼 디버깅할려면(https://www.youtube.com/watch?v=OHrLRg150As )즉 step over로 사용도 하면서 한 줄 한 줄 씩 어떻게 실행되는 지 보고 싶은데 아래와 같이 에러가 나옵니다.혹시 스프링부트를 사용하면 디버거 모드가 활성화가 안되나요? 아래 사진을 보시면 38번째 줄에 브레이크 포인트 표시 해놨고 우측 상단에 디버그 모드도 실행되어있는데 중앙에 네모박스처럼 step over 모드가 비활성화 되어있습니다. 한 줄 한줄씩 디버깅을 할려면 어떻게 해야하는지 궁금합니다.
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
피그마에서 과제 및 싸이월드 과제를 못찾고 있어요
피그마로 들어갔는데 과제관련한 회원가입을 찾을 수가 없어요. 그리고 섹션을 살펴봤는데요 여긴 섹션3번인데 안보이네요.. 제가 못찾고 있는것 같은데요
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
노션 파일 중에서 contact input내용이 전부 날아가있네요
코드가 조금 다른 것 같습니다.2. 문의하기 누르면 어드민으로 문의하기가 넘어가고 어드민으로 들어왔을때 확인 되어야하는거죠?제가 놓친 것 같아서 깃허브를 찾아서 복사 붙여넣기하니,아래 처럼 뜹니다.저희가 이걸 배운적이 있나요? 있다면 어느 부분인지 궁금합니다.import ContactLocale from "../../Locale/Contact.json"; [plugin:vite:import-analysis] Failed to resolve import "../../Locale/Contact.json" from "src/Page/Contact/Contact.jsx". Does the file exist?C:/Users/shin/Desktop/company_website/frontend/src/Page/Contact/Contact.jsx:4:2619 | import { motion } from "framer-motion"; 20 | import axios from "axios"; 21 | import ContactLocale from "../../Locale/Contact.json"; | ^ 22 | const Contact = () => { 23 | _s();
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
백엔드 서버 수행시 prisma engine을 설치할수가 없습니다.
사내 환경에서 외부 인터넷은 프록시를 통해 접속 가능합니다.백엔드 서버 구축시 npm install 수행시 prisma engine을 다운로드 받을수 없다는 메시지가 나옵니다. Downloading Prisma engines for Node-API for windows [ ] 0%Error: request to https://binaries.prisma.sh/all_commits/acc0b9dd43eb689cbd20c9470515d719db10d0b0/windows/schema-engine.exe.sha256 failed, reason: 엔진을 수작업으로 다운로드 받아 참조 할수 있는 방법이 없을까요
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
12.11 오류 관련
강의 19:07까지 따라하다가 오류가 갑자기 많이 뜨는데 어디에서 잘못된 것인지 모르겠습니다...DiaryList.jsximport "./DiaryList.css"; import Button from "./Button"; import DiaryItem from "./DiaryItem"; const DiaryList=({data})=>{ return <div className="DiaryList"> <div className="menu_bar"> <select> <option value={"latest"}>Newest</option> <option value={"oldest"}>Oldest</option> </select> <Button text={"write new diary"} type={"POSITIVE"} /> </div> <div className="list_wrapper"> {data.map((item)=><DiaryItem key={item.id} {...item}/>)} </div> </div>; }; export default DiaryList;DiaryItem.jsximport {getEmotionImage} from "../util/get-emotion-image"; import Button from "./Button"; import "./DiaryItem.css"; const DiaryItem=({id,emotionId,createdDate,content})=>{ return (<div className="DiaryItem"> <div className={`img_section img_section_${emotionId}`}> <img src={getEmotionImage(emotionId)}/> </div> <div className="info_section"> <div className="created_date"> {new Date(createdDate).toLocaleDateString()}; </div> <div className="content">{content}</div> </div> <div className="button_section"> <Button text={"수정하기"} /> </div> </div> ); }; export default DiaryItem;App.jsximport './App.css' import{useReducer,useRef,createContext} from "react"; import {Routes,Route} from "react-router-dom"; import Home from "./pages/Home"; import Diary from "./pages/Diary"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Notfound from "./pages/Notfound"; const mockData=[ { id:1, createdDate:new Date("2025-02-18").getTime(), emotionId:1, content:"1번 일기 내용", }, { id:2, createdDate:new Date("2025-02-17").getTime(), emotionId:2, content:"2번 일기 내용", }, { id:3, createdDate:new Date("2025-01-15").getTime(), emotionId:3, content:"3번 일기 내용", }, ]; function reducer(state,action){ switch(action.type){ case "CREATE": return [action.data,...state]; case "UPDATE": return state.map((item)=> String(item.id)===String(action.data.id) ?action.data : item ); case "DELETE": return state.filter( (item)=>String(item.id)!==String(action.id) ); default: return state; } } export const DiaryStateContext=createContext(); export const DiaryDispatchContext=createContext(); function App() { const [data,dispatch]=useReducer(reducer,mockData); const idRef=useRef(3); //새로운 일기 추가 const onCreate=(createdDate,emotionId,content)=>{ dispatch({ type:"CREATE", data:{ id: idRef.current++, createdDate, emotionId, content, }, }); }; //기존 일기 수정 const onUpdate =(id,createdDate,emotionId,content)=>{ dispatch({ type:"UPDATE", data: { id, createdDate, emotionId, content, }, }); }; //기존 일기 삭제 const onDelete=(id)=>{ dispatch({ type:"DELETE", id, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete, }} > <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
매번 새로운 프로젝트를 실행할 때 cmd 설정문의
저희가 수업진행하면서 프론트엔드,백엔드에 많은 npm으로 설치하잖아요. 이런 라이브러리들을 매번 새로운 프로젝트마다설정해야할까요??비슷한 작업을 뽑아낸다고할때 기존 지금 폴더를 다시 연 다음에 이미지 및 텍스트 수정할때말고 다시 비슷한 프로젝트 폴더를 만들어서 한다고 하면 반드시 다시 전부 깔아야하는거죠? ㅠㅠ