172만명의 커뮤니티!! 함께 토론해봐요.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
섹션2 영상에선 TodoSearch랑 TodoSearchImpl 작성한건 어떻게 해야하나요 Todo 삭제하고 이번 수업에 있는 ProductSearch, ProductSearchImpl로 다 바꿔야 하는건가요 ?
해결됨
포트폴리오 초간단 배포하기
우선 좋은강의 감사드립니다. 타사이트나 *투브에서도 강의 들었는데 좋아서 인프런에서도 구매하게 됐습니다. CORS 강의를 들으면서 질문이 있어서 문의드립니다. 아래와 같이 api 서버나 dev 서버 도메인을 다르게 구성하려고 하는데, 도메인이 다르기 때문에 CORS 이슈가 하위도메인의 경우에도 적용되나요? www.domain.com : 프론트엔드 애플리케이션(프론트엔드), port : 3000 api.domain.com : 백엔드 api 애플리케이션 , port : 8080 dev-api.domain.com : 개발 테스트용 서버, port : 8081 실제 현업에서는 백엔드의 api, auth 등을 도메인을 어떻게 구성하는지 궁금하고 어떻게 조치하는지도 궁금합니다. 감사합니다.
미해결
html/css, jQuery, Java Script, react까지 3년전에 배웠었어요. 현재는 html/css 코드를 보고 읽고 간단한 건 수정할 수 있는 정도의 수준입니다. 개인적인 흥미로 취미로 개발을 배워보고 싶은데 시작하면 앱 개발, 유지/보수 할 수 있는 수준으로는 배우고 싶어요. 과외로 배울 예정인데 2분의 선생님을 소개받았는데 어떤 분의 루트가 더 나을지 판단이 어려워 전문가분들의 의견 구합니다. html/css > Java > react > react native까지 차근히 배우는 선생님 React native와 Java Script를 병행으로 배우는 선생님 1번 선생님의 경우, 현직자이신 것 같진 않고 강의를 위주로 하시는 분 같고 2번 선생님은 현직 개발자로 7년차이세요. 2번 선생님의 경우 함수선언을 영어로 치면 숙어라고 생각하고 배울 수 있을 것 같다고 설명해주셨어요. 리엑트 네이티브에서 사용했던 언어들이 java Script에서 조금 변형된 것들이라고 기억하고 있어서 2번 선생님이 더 속성으로 배울 수 있을 것 같긴 한데(기간은 1년정도 생각합니다) 나중에 혼자 앱 개발을 하는 상황을 생각하면 처음부터 꼼꼼히 배우는게 나을까요?
해결됨
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
안녕하세요 강사님 강의 정말 잘 듣고있습니다. 다름이 아니라 프롬프트의 내용이 꽤 긴데 혹시 복붙할 수 있는 페이지는 따로 없는지 궁금합니다..! 제가 못찾은것일수도 있어서 조심스럽게 문의드립니다
해결됨
깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!
제가 새로운 파일을 만들고 이미지에 이상이 없는데 계속해서 오류가 나서 그 파일을 삭제하고 다시 하려고 했는데 실행이 안됩니다. 혹시 도와 주실수 있나요? ( https://github.com/everythingstore/everythingstore.github.io.git ) 이것은 제 주소 입니다....
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 2.14 비동기작업처리하기, 5:59 비동기는 프로세스의 병렬 처리를 위해 사용하는 것인데 비동기 함수를 await 키워드를 통해서 값이 반환되기를 기다렸다가 사용하면 동기 와 다른 점이 뭔지 궁금합니다. 어떤 경우에 await가 비동기 함수를 사용하면서 중요한 역할을 담당하는지도 궁금합니다.
해결됨
Next + React Query로 SNS 서비스 만들기
먼저 강의와 상관없는 질문 죄송합니다. Next 13 Page Router + React Query v3 사용해서 프로젝트 진행했었고, 이후에 강사님 강의를 수강하고 있습니다. 이전 프로젝트 진행 시 문제를 해결은 했지만 찝찝함이 남아있어 궁금증을 해소하기 위해 질문 남깁니다. getServerSideProps 사용해서 서버사이드에서 데이터를 불러오려고 했습니다. 서버(Spring)에서 쿠키 읽기에 실패해서 클라이언트에서 accessToken을 전달해야만 했습니다. 로그인시 accessToken을 클라이언트에서 쿠키에 직접 저장하고 axios 통신시 쿠키에 저장한 토큰을 꺼내서 header에 추가하여 요청하는 방식으로 구현하였는데, 서버 사이드에서는 브라우저 스토리지에 접근하지 못하므로 토큰을 읽지 못하는 문제가 발생했습니다. 모든 통신에서 토큰이 필요했던 프로젝트였어서 SSR을 포기해야하는건가? 하던 중에 React Query 의 Dehydration 방식을 적용하였더니 getServerSideProps 에서도 토큰을 읽고 전달하는것이 가능해졌습니다. 이러한 경우에도 SSR이 제대로 적용된 것이 맞는지, 그렇다면 React Query는 어떻게 브라우저 스토리지에 저장된 값을 읽을 수 있게 된건지 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
[auth][error] UntrustedHost: Host must be trusted. URL was: http://localhost:3000/api/auth/session .Read more at https://errors.authjs.dev#untrustedhost 백엔드를 로컬에서 돌리고 Next를 build 후 npm start 로 서버를 돌렸을 경우 발생하는 Next-Auth.js(Auth.js) 에러입니다. 신뢰되지 않은 호스트라 발생하는 에러라고 해서 찾아봤습니다. 방법 1. AUTH_TRUST_HOST=http://localhost:3000 .env 파일에 AUTH_TRUST_HOST 추가하기 [참고] https://github.com/nextauthjs/next-auth/discussions/6071 방법 2. export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ trustHost: true, // ... src\auth.ts 파일에 NextAuth 옵션에서 trustHost: true 옵션 추가하기 [참고] https://github.com/nextauthjs/next-auth/issues/6113
미해결
깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!
선생님 안녕하세요! 먼저 강의 잘 듣고 있고, 좋은 강의 해주셔서 감사합니다. 다름이 아니라 제가 업데이트 내역 실시간 확인하기(로컬 환경 설정) 강의를 듣고 있었는데, 원래는 localhost:4000 했을 때 바로 저의 블로그가 나왔었는데, typora를 통해 바로 반영이 되는지 확인하기 위해 다시 localhost:4000 을 작성했는데 사이트에 연결할 수 없다고 뜹니다! cmd, powershell을 껐는데 위의 이유일까요? 감사합니다.
미해결
쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS
컨트롤러(Api) 패키지 안에 만드신 dto(request, response)는 private final로 선언하셔서 데이터가 변경되지 않도록 선언하셨고, 서비스단 패키지 안에 만드신 ReviewDto는 private으로만 선언하여 데이터가 언제든 변경이 되게끔 선언하셨는데 이 차이가 서비스단 로직의 데이터는 비즈니스 로직을 통해 언제든 변할 수 있기 때문이고 컨트롤러단 로직은 받아온 데이터와, 응답하는 데이터이기 때문에 변할 일이 없기에 선언 방식이 다른 것이 맞을까요? 너무 기초적인 부분일 수 있지만 제가 이해한 바가 맞는지 궁금하여 질문드립니다.
해결됨
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
15개 장소db가 있는데 5개만 조회 됩니다. 코드가 잘못된 부분이 있을까요? 아무리 찾아도 잘 모르겠습니다;; function getContent(data) { // 유튜브 섬네일 id 가져오기 console.log(data); let replaceUrl = data.videoUrl; let finUrl = ""; replaceUrl = replaceUrl.replace("https://youtu.be/", ""); replaceUrl = replaceUrl.replace("https://youtube.com/embed", ""); replaceUrl = replaceUrl.replace("https://youtube.com/watch?v=", ""); finUrl = replaceUrl.split("&")[0]; // 인포윈도우 가공하기 return ` <div class="infowindow"> <div class="infowindow-img-container"> <img src="https://img.youtube.com/vi/${finUrl}/mqdefault.jpg" class="infowindow-img" /> </div> <div class="infowindow-body"> <h5 class="infowindow-title">${data.title}</h5> <p class="infowindow-address">${data.address}</p> <a href="${data.videoUrl}" class="infowindow-btn" target="_blank">영상이동</a> </div> </div> `; } // HTML 코드로 바꾸는 함수 function getContent(data) { let videoId = ""; let replaceUrl = data.videoUrl; replaceUrl = replaceUrl.replace("https://youtu.be/", ""); replaceUrl = replaceUrl.replace("https://www.youtube.com/embed/", ""); replaceUrl = replaceUrl.replace("https://www.youtube.com/watch?v=", ""); videoId = replaceUrl.split("&")[0]; const result = `<div class="infowindow"> <div class="infowindow-img-container"> <img src="https://img.youtube.com/vi/${videoId}/mqdefault.jpg" class="infowindow-img" alt="..."> </div> <div class="infowindow-body"> <h5 class="infowindow-title">${data.title}</h5> <p class="infowindow-text">${data.address}</p> <a href="https://youtu.be/${videoId}" target="_blank" class="infowindow-btn">영상이동</a> </div> </div>`; return result; } async function setMap(dataSet) { markerArray = []; infowindowArray = []; for (var i = 0; i < dataSet.length; i ++) { // 마커를 생성합니다 let coords = await getCoordsByAddress(dataSet[i].address) var marker = new kakao.maps.Marker({ map: map, // 마커를 표시할 지도 position: coords, // 마커를 표시할 위치 }); markerArray.push(marker); // 마커에 표시할 인포윈도우를 생성합니다 var infowindow = new kakao.maps.InfoWindow({ content: getContent(dataSet[i]), // 인포윈도우에 표시할 내용 }); infowindowArray.push(infowindow); // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다 // 이벤트 리스너로는 클로저를 만들어 등록합니다 // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다 kakao.maps.event.addListener( marker, "click", makeOverListener(map, marker, infowindow, coords)); kakao.maps.event.addListener( map, "click", makeOutListener(infowindow)); } } // 인포윈도우를 표시하는 클로저를 만드는 함수입니다W // 1. 클릭시 다른 인포윈도우 닫기 // 2. 클릭한 곳으로 지도 중심 옮기기 function makeOverListener(map, marker, infowindow, coords) { return function() { // 1. 클릭시 다른 인포윈도우 닫기 closeInfoWindow(); infowindow.open(map, marker); // 2. 클릭한 곳으로 지도 중심 옮기기 map.panTo(coords) }; } let infowindowArray = []; function closeInfoWindow(){ for (let infowindow of infowindowArray) { infowindow.close(); } } // 인포윈도우를 닫는 클로저를 만드는 함수입니다 function makeOutListener(infowindow) { return function() { infowindow.close(); }; } /* ********************************************** 5. 카테고리 분류 */ // 카테고리 const categoryMap = { korea: "한식", china: "중식", japan: "일식", america: "양식", wheat: "분식", meat: "구이", sushi: "회/초밥", etc: "기타", }; const categoryList = document.querySelector(".category-list"); categoryList.addEventListener("click", categoryHandler); async function categoryHandler(event) { const categoryId = event.target.id; const category = categoryMap[categoryId]; try { // 데이터 분류 let categorizedDataSet = await getDataSet(category); // 기존 마커 삭제 closeMarker(); // 기존 인포윈도우 닫기 closeInfoWindow(); setMap(categorizedDataSet) } catch (error) { console.error(error); } } let markerArray = []; function closeMarker() { for (marker of markerArray) { marker.setMap(null) } } async function setting() { try { const dataSet = await getDataSet(); setMap(dataSet); } catch (error) { console.error(error); } } setting();
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
안녕하세요 00-06 black 설치과정에 질문입니다. 라이브러리에 추가하고 black 패키지 추가하려고 하니깐 활성화가 안되어있습니다.. 어떻게 조치해야 될까요?
미해결
쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS
[4-5 맛집 정보 가져오기 API 개발하기] 맛집 정보 가져오기 API 부분 코드 작성해 주시는 부분에서 (2분 34초쯤부터) 메뉴 클래스를 하나 더 만드실지 고민하시는듯 하다가 이너 클래스로 만드신 것처럼 보이는데요, 이전에 request 만드실때는 메뉴 클래스를 분리하셨는데 해당 부분에서는 고민하시다가 이너 클래스로 만드신 이유가 무엇인지 그리고 어떤 경우에 이너 클래스를 쓰고 분리를 하는지 궁금해서 문의드립니다.
해결됨
깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!
카테고리 설정하는 수업 들으면서 하고 있는데 저의 개인 이메일로 메시지가 왔습니다. 어떻게 해결할수 있을까요?
해결됨
깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!
이거 bundle install 이 안됩니다 해결방안 좀 알려 주실 수 있나요?
미해결
게임처럼 공부하는 git 던전
feature에서 작업이 끝난 경우 코드리뷰를 위해 develop에 pull request 날리고, 리뷰가 끝나면 develop에 머지가 되잖아요. 그 후에 main 브랜치에 develop 브랜치를 가지고 pull requet로 머지를 해주나요? 아니면 그냥 merge 해줘도 되나요? hotfix에서 작업이 끝난 경우는 리뷰를 위해 develop에 pull request를 날리고, 리뷰가 끝나면 hotfix 브랜치를 main 브랜치에 리뷰는 없이 pull request를 날려야 되나요? 아님 그냥 hotfix -> main으로 머지 하나요? 답변 부탁드립니다. 감사합니다.
미해결
Git 그리고 VS Code
예제로 실행하는 html 이나, js 파일은 직접 다 작성해야 하나요? 강사님은 복붙하시는데, 수강하는 사람은 직접 다 만들어야 하나요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
모달창이 안떠서 settimeout으로 처리 하니 Modal에 result 값이 true로 적용됩니다 코드는 깃으로 올리겠습니다 선생님 강의에 올라와있는 ch06 파일 코드 넣어서 해봐도 모달창이 안뜨네요 ㅜㅜ https://github.com/hyeonbin03/webstromhub
해결됨
[React 2부] 고급 주제와 훅
강의를 듣다가 의문이 생겨서 질문 드립니다. const OrderPage = () => ( <div className="OrderPage"> <Page header={<Title>주문내역</Title>} footer={<Navbar />}> <OrderStatusCard order={fakeOrder} /> <OrderPaymentCard order={fakeOrder} /> <OrderDeliveryCard order={fakeOrder} /> </Page> </div> ); 위 코드는 수업중 강사님이 작성하신 코드 입니다. 제가 의문인 부분은 OrderStatusCard, OrderPaymentCard, OrderDeliveryCard 모두 같은 fakeOrder를 파라미터로 넘기는 점 입니다. fakeOrder는 Order가 발생될 때 생기는 모든 데이터를 저장하고 있습니다. 이때 OrderStatusCard 관점에서 보면 Status와 상관 없는 데이터들도 fakeOrder를 받으면서 같이 파라미터로 넘어가게 됩니다.(예를 들어 deliveryPrice, discountPrice 등 배달에 관련 데이터가 같이 넘어갑니다.) 해당 실습 예제 코드는 적은 데이터를 사용해서 문제가 없겠지만 만약 수 많은 데이터가 한번에 오고 갈때 성능적인 이슈가 발생하는 문제와 status와 상관없는 데이터들이 넘어가 컴포넌트들이 완벽하게 분리 되지 않는 느낌이 있습니다. 제가 생각한 방법은 조금 귀찮더라도 Order정보를 가지고 있는 OrderPage에서 데이터를 분리해서 넘겨주는 것이 좋다고 생각합니다. 아래는 제가 작성한 코드입니다. const OrderPage = () => ( <div className="OrderPage"> <Page header={<Title>주문내역</Title>} footer={<Navbar />}> <OrderStatusCard status={fakeOrder.status} orderDate={fakeOrder.orderDate} name={fakeOrder.name} id={fakeOrder.id} /> <OrderPaymentCard totalPrice={fakeOrder.totalPrice} paymentMethod={fakeOrder.paymentMethod} productPrice={fakeOrder.productPrice} deliveryPrice={fakeOrder.deliveryPrice} discountPrice={fakeOrder.discountPrice} /> <OrderDeliveryCard deliveryAddress={fakeOrder.deliveryAddress} deliveryContact={fakeOrder.deliveryContact} messageToRider={fakeOrder.messageToRider} messageToShop={fakeOrder.messageToShop} /> </Page> </div> ); 현업에서는 어떤 방식을 사용하는지 강사님의 의견을 듣고 싶습니다. 좋은 강의 잘 듣고 있습니다. 긴글 읽어주셔서 감사합니다 ㅎㅎ
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 선생님강의 잘 듣고 있습니다! 다름이 아니라 선생님 강의 중 'JSX로 UI 표현하기' 편을 듣고 있는데import를 이용해서 CSS파일을 연결하는 부분에서 막혔습니다 강의와 똑같이 작성했는데 스타일 적용이 안되는 이유가 뭘까요?화면에 오류 표시도 안뜨는데 코드에 문제가 있는지 궁금합니다
