Chapter6 질문 드립니다
미해결
처음 만난 리액트(React)
학습을 잘 따라가는 중 아무 오류나 에러는 없는데 콘솔에는 에러가 나네요 ㅜㅜ 분명 코드도 똑같은데 이유를 잘 모르겠어 코드와 오류 사진 캡처 드립니다!
- HTML/CSS
- javascript
- react
댓글 2
좋아요 1
조회수 238
묻고 답해요
173만명의 커뮤니티!! 함께 토론해봐요.
roughness이 안 먹혀요 ㅜ
미해결
떠먹는 Three.js
Material 수업강의 중 2:44초에 roughness이 안먹힙니다.. 빛반사가 안되는데 확인 부탁드려요 ㅜ <script async src="https://ga.jspm.io/npm:es-module-shims@2.0.10/dist/es-module-shims.js"></script> <script type="importmap"> { "imports":{ "three" : "https://cdn.jsdelivr.net/npm/three@0.174.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.174.0/examples/jsm/" } } import * as THREE from "three"; const $result = document.querySelector("#result"); // 1. Scene : 화면에서 보여주려는 객체를 담는 공간 const scene = new THREE.Scene(); // scene.add(요소) scene.background = new THREE.Color(0xffe287); // 2. Camera : 신을 바라볼 시점을 결정 const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(2, 2, 2); camera.lookAt(0, 0, 0); // 3. Renderer : Scene+Camera, 화면을 그려주는 역할 const renderer = new THREE.WebGLRenderer({ canvas: $result, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); // console.log(renderer); // document.body.appendChild(renderer.domElement) const light = new THREE.DirectionalLight(0xffffff); light.position.set(2, 4, 3); scene.add(light); const geometry = new THREE.BoxGeometry(1, 1, 1) const basic = new THREE.MeshBasicMaterial({ color: 0x2e6ff2, // wireframe: true, transparent: true, opacity: 0.5 }); // 가장 일반적으로 사용 됨. const standard = new THREE.MeshStandardMaterial({ color: 0xffaaaa, roughness: 0.2, }); const mesh = new THREE.Mesh(geometry, standard); scene.add(mesh); function animate() { // box.rotation.y += 0.01; // box.rotation.x += 0.01; // console.log(box.rotation.y); renderer.render(scene, camera); requestAnimationFrame(animate); } animate(); // 반응형을 위한 함수 window.addEventListener("resize", () => { // 1. 카메라의 종횡비 camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); //카메라 업데이트 // 2. renderer의 크기 renderer.setSize(window.innerWidth, window.innerHeight); });
- HTML/CSS
- javascript
- three.js
댓글 1
좋아요 0
조회수 144
상태관리
해결됨
한 입 크기로 잘라먹는 Next.js
next는 자동적으로 캐시 저장기능이 있고 next에서도 DB 데이터가 필요한 페이지에서 직접 불러와서 사용하는 것을 권장한다 라고 말씀해주셨는데요 그러면 next는 보통 zustand, recoli, redux와 같은 상태관리 라이브러리를 사용하지 않는 것을 추천하시나요? 아니면 사용하는 것을 추천하시나요??
- react
- typescript
- next.js
Full Stack 개발자
댓글 2
좋아요 0
조회수 91
member.self-ex 코드 업로드요청
해결됨
[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]
깃허브 url에 member.self-ex 코드가 없습니다. 확인 후 업로드 부탁드려요 그리고, useEffect 제대로 써보기: 반복 작업 제거와 효과적인 클린업 3:43 이부분부터 몇초간 화면이 안보입니다..
- javascript
- react
- jquery
- typescript
- es6
- vanilla-javascript
희원
댓글 2
좋아요 0
조회수 136
Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
공익을 위해 첨부합니다... Windows의 경우 Mac과 다른 방식으로 경로가 설정되는 탓인지 상품 업로드 후 홈화면에서 상품이미지가 엑박으로 보이는 오류가 발생합니다. 그동안 질문&답변 게시판에 올라온 모든 질문 및 답변을 참고해 해결을 해보고자 하였는데요, 그 어느 답변을 참고해도 해결이 되지 않아 눈물을 머금고 10분짜리 강의에 몇시간동안 매달려있었습니다. 그렇게 알게된 방법은... 저의 경우 (1) 상품 업로드 화면에서 사진을 첨부한 후 개발자 도구의 Network에서 첨부한 사진의 링크를 보면 http://localhost:8080/upload/(상품이름).jpg 이런 식으로 뜹니다. (2) 업로드 버튼을 누른 후 홈 화면으로 이동 (3) 개발자 도구의 Network에서 새롭게 업로드된 사진의 링크를 보면 http://localhost:3000/upload/(상품이름).jpg 이런 식으로 뜹니다. 이를 해결하기 위해, grab-market-web 폴더 (사용자에 따라 폴더 이름은 다를 수 있음) → src → main → index.js에서 product-card 의 product-img 부분을 확인합니다. <div> <img className="product-img" src={`${API_URL}/${product.imageUrl}`} ></img> </div> src 링크를 다음과 같이 변경합니다. 그럼 상품 업로드 화면에서의 이미지와 홈화면에서의 이미지가 localhost:8080로 동일해지기 때문에 상품 사진이 정상적으로 보입니다. 물론 이렇게 코드를 수정하고 나면 기존에 저장해놨던 상품들의 이미지에 엑박이 뜹니다. (images/products/__ 이런 식으로 폴더 내 이미지와 연결해둔 링크들이 http://localhost:8080/images/products/__ 처럼 변경되니 엑박이 뜨는 것으로 추정됩니다.) 어차피 이제 사진을 서버에 직접 업로드하는 방법으로 진행될 예정이니 그냥 기존의 상품들은 삭제하시면 될 것 같습니다. (DB Browser → 데이터 탐색 → 기존 상품 레코드 선택 → 현재 레코드 삭제하기 → 변경사항 저장하기 이용하면 삭제 가능합니다.) 저와 동일한 이유로 엑박 뜨는게 아니라면... 저도 모르겠습니다. 방법을 찾으시면 공유해주세요. 파이팅! +) 상품 상세페이지를 들어가면 다시 엑박이 뜹니다. <div id="image-box"> <img src={`${API_URL}/${product.imageUrl}`} /> {console.log(product.imageUrl)} </div> 이때는 product 폴더의 index.js에 들어가여 image-box 부분을 다음과 같이 변경해주세요. 원리는 위와 동일합니다. 그러면 상세페이지에서도 정상적으로 작동합니다.
- HTML/CSS
- javascript
- react
- node.js
- react-native
- 머신러닝
- express
- tensorflow
sugi0jubak
댓글 1
좋아요 0
조회수 225
useEffect의 의존성 배열에 fetchNextPage를 넣는 이유가 궁금합니다
미해결
Next + React Query로 SNS 서비스 만들기
useEffect(() => { if (inView) { hasNextPage &&fetchNextPage(); } }, [inView, hasNextPage, fetchNextPage]); 이렇게 useEffect를 작성하셨는데 fetchNextPage를 useEffect의 의존성배열에 넣는 이유가 궁금합니다
- react
- next.js
- react-query
- next-auth
- msw
i1004gy
댓글 2
좋아요 0
조회수 147
page를 클라이언트 컴포넌트로 작성해도 rsc_payload가 생성되는 이유는 무엇인가요??
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 덕분에 nextjs에 대해 깊에 알아가고 있습니다. 제목처럼 page 컴포넌트에 'use client'를 명시하고 빌드 해도 해당 페이지에 대한 rsc_payload가 생성되어서 .next 빌드 파일을 살펴 보았습니다. 페이지를 클라이언트 컴포넌트로 작성하던 서버 컴포넌트로 작성하던 .next 빌드 파일 server, static/chunk/app 폴더에 모두 page.js 파일이 생성되는 것을 확인했습니다. 1. server 폴더에 있는 page.js는 해당 페이지에 필요한 번들 파일에 대한 내용인 거고, static 폴더에 있는 page.js는 해당 페이지에 그려질 내용에 대한 파일인 건가요?? 2. 그래서 page컴포넌트를 클라이언트 컴포넌트로 만들어도 페이지에서 사용할 번들 파일의 주소를 알아야 하기 때문에 rsc_payload를 만들어서 내려주는 건가요??
- react
- typescript
- next.js
dl_audgh
댓글 2
좋아요 0
조회수 108
레이아웃은 서버 데이터에 변경사항이 있을 때는 렌더링을 해주나요?
미해결
Next + React Query로 SNS 서비스 만들기
레이아웃은 네비게이션을 해도 상태를 유지하고 렌더링을 하지 않는다라고 이해했습니다. 그런데, 오른쪽 레이아웃을 만들면서 패러렐 라우트라던지 template를 쓰지 않고 (비록 컴포넌트를 분리하긴 했으나) 서버에서 데이터를 뿌려주는 미래를 상상하고 쭉 코드를 짜고 계시는 모습을 보면서, 레이아웃이 서버 데이터는 변경사항을 화면에 반영해주는 것처럼 이해가 되었습니다. 뒷부분은 수강하지 않았습니다. 제가 잘못 이해 중인가요?
- react
- next.js
- react-query
- next-auth
- msw
y_rzzz
댓글 2
좋아요 0
조회수 117
개인 깃허브에 코드 업로드 관련
해결됨
이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의
안녕하세요, 우선 좋은 강의 업로드해주셔서 감사합니다. 다름이 아니라 강의를 보면서 공부하며 친 코드들을 깃허브나 블로그에 개인 공부 기록용으로 공개 업로드해도 될지 질문드리고 싶습니다.
- HTML/CSS
- javascript
- jsp
- spring
- spring-boot
- spring-security
abc123
댓글 2
좋아요 0
조회수 392
2-14.else,else if,switch 관련 질문입니다.
미해결
[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
안녕하세요 선생님 자바스크립트 처음 입문한 학생인데 선생님 강좌로 많은 도움을 받고 있습니다. 감사합니다. 오늘 2-14.else,else if,switch 를 듣던 중 선생님께서 알려주신 예제를 실행시키고 switch 문을 변형하여 입력을 하였는데 예제는 무사히 실행되었지만 변형한 switch문은 콘솔도 나오지 않고 오류도 나오지 않아 어떤 부분으로 인한 문제인지 전혀 몰라 질문 남깁니다...ㅠ 뭐가 문제였는지 알 수 있을까요? .
- javascript
가연
댓글 2
좋아요 0
조회수 140
padding 과 box-sizing 질문
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
14분 부터 css 전체선택자 box-sizing 이 border-box 라서 padding 을 하게되면 a 태그의 크기가 줄어들어야 하는 것 아닌가요? 왜 padding을 통해 크기를 키운다고 말씀하시나요?
- react
- node.js
- seo
- graphql
- next.js
김트랙
댓글 2
좋아요 0
조회수 126
주석처리한 buttons가 작동하는 이유
미해결
따라하며 배우는 자바스크립트 A-Z
8분즈음에 buttons 선언한 것을 주석처리하고 buttonList만 남겼는데 왜 buttons.addEventListener가 작동하는지 궁금해요
- javascript
hotsunny
댓글 1
좋아요 0
조회수 119
async&await에서 reject시 처리 방법이 궁금합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
채찍피티에게 물어보니 try/catch로 처리하라고 하는데 이게 최선일까요..?
- javascript
- react
- node.js
박성민
댓글 2
좋아요 0
조회수 212
스트리밍으로 받은 <script />내부의 데이터가 SEO에 영향이 가는지 알고 싶어요
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 ! 강의를 듣기전부터 궁금했던 내용인데 강의를 듣고나서도 답을 찾지 못해서 질문을 남깁니다..! 개발자도구 > Network 탭 > 문서 > 응답 이나 소스보기 에 서버사이드에서 불러온 데이터가 HTML 로 만들어져있으면 SEO 에 영향을 주는 데이터라고 알고 있어요 제가 혼자 테스트해보려고 만든 스트리밍에서는 <script /> 내부에만 서버 사이드에서 패치한 데이터가 들어가있고 HTML 로 만들어지지는 않았더라고요 ( 아마 <script /> 에 있는 정보가 RSC Payload 겠죠..? ) 그래서 이게 SEO 에 영향이 가는 데이터일지 궁금해서 여기저기 찾다가 발견한 Next Playground 에서는 HTML 로도 만들어지고 <script /> 에도 들어가있더라고요 최종적으로 궁금한것은 <script /> 에만 들어있는 스트리밍된 데이터도 SEO 에 영향을 주는지 가 궁금해요 그리고 영향을 주든 안주든 이런 정보는 어디서 찾아봐야하는지 어떻게 검증하는지 알고 싶습니다..! ( 참고로 Playground 에서 패치하는 첫번째 리스트의 이름인 Fusce commodo porta 로 확인해봤습니다! )
- react
- typescript
- next.js
- streaming
- seo
1-blue
댓글 2
좋아요 0
조회수 147
강의 내용을 어느 정도로 파악하고 있는 것이 좋을까요?
해결됨
백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편
안녕하세요. 백엔드 개발자를 목표로 공부하면서, 최소한의 프론트엔드 지식도 익히고 싶어 강의를 수강 중인 학생입니다:) 이번 Ajax 강의를 듣고 처음에는 잘 이해되지 않아 여러 번 반복해서 학습했습니다. 그 결과 왜 직렬화와 역직렬화를 하는지, 그리고 Ajax가 전체적으로 어떤 원리로 동작하는지에 대한 감은 조금 잡을 수 있었습니다. 하지만 코드를 보면 해석은 가능하지만, 직접 작성해보라고 하면 아직 어려운 상태입니다. 강의의 예제 정도는 직접 구현할 수 있을 정도로 습득하는 것이 가장 좋겠지만, 익히는 데 시간이 꽤 걸릴 것 같아 동작 방식만 이해하고 넘어가도 괜찮을지 고민이 됩니다.
- HTML/CSS
- javascript
- bootstrap
형씌
댓글 2
좋아요 1
조회수 150
7.7 리뷰 삭제 실습
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 등록되어 있는 리뷰를 삭제하기를 누르게 되면 "Error: Internal Server Error" 에러가 발생합니다 백엔드 로컬 서버 콘솔에서는 아래의 사진과 에러 메세지가 뜹니다 해결했습니다!
- next.js
shim
댓글 1
좋아요 0
조회수 154
React 환경에서 클래스형 디자인 패턴 활용에 관한 질문
미해결
TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기
안녕하세요, React 환경에서 다음 강의를 보며 예제연습중인 수강생입니다. 먼저, 함수형 컴포넌트가 주류가 된 현대 React 생태계에서도 클래스형 디자인 패턴이 많이 활용되는지 궁금합니다. 특히 싱글톤, 팩토리, 빌더와 같은 클래스 기반 디자인 패턴들이 여전히 실무에서 많이 사용되고 있는지 알고 싶습니다. 또한 이러한 클래스 기반의 디자인 패턴 사용 시, React의 재렌더링 측면에서 성능 이슈가 발생하지는 않는지, 실제 개발 경험에서 어떤 장단점이 있는지 궁금합니다.
- javascript
- typescript
- 객체지향
- 디자인-패턴
- canvas
김태건
댓글 2
좋아요 0
조회수 216
타입스크립트/next.js 추가학습 관련해서 문의 드립니다
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
최근 취업시장이 리액트와 스프링부트나 넥스트같은 백엔드 기술을 모두 할줄아는 사람을 뽑는 추세가 강해져 저도 리액트 관련기술을 익히고자 강의를 신청했고 현재 수강중입니다. 백엔드쪽은 스프링부트로 확고히 가져가서 만약 이후에 둘을 연동할때 DB의 데이터를 가져오거나 서버와 연동해서 데이터를 가져오거나 통신할때 next.js 기술이 필수인지 아닌지 궁금해서 질문 남깁니다. 필수가 아니라면 도움이 되는 지 궁금합니다. 제가 강사님 next,js 소개글을 봤는데 node.js가 필요기술에 있어서 node.js만을 위한 ssr기술인지 궁금합니다.
- javascript
- react
- node.js
이동건
댓글 2
좋아요 0
조회수 133
jsbundle의 이름이 도중에 변경 되어도 nextjs가 인지하고 받아올 수 있나요??
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 덕분에 next.js를 깊게 공부할 수 있었습니다. next.js는 기존 리액트와 다르게 jsbundle(청크) 파일을 나누어 받아 옵니다. 강의에서 본 것처럼 청크 파일들이 각각의 유니크한 해쉬 값을 가지는 것도 확인했습니다. 시나리오 next 프로젝트를 빌드 배포 된 웹페이지를 오픈 next 프로젝트를 다시 빌드 기존의 웹페이지를 새로고침 하지 않고, 페이지 이동 기존 리액트 프로젝트에서는 하나의 청크 파일을 처음 한 번에 받아서 새로고침 전까지 1번의 이전 빌드된 웹페이지로 동작이 되는 것으로 알겠는데요. next프로젝트에서는 jsbundle과 rsc_payload를 필요한 시점에 받으니까 새로 빌드한 파일엔 기존 청크해시 값과 달라서 문제가 생기지 않을까? 라는 생각이 들었습니다. 그런데 테스트 해보니 별다른 문제가 생기지 않는 것 같더라구요.. jsbundle과 rsc_payload의 유니크한(해쉬) 파일 이름이 도중에 변경 되더라도 next 서버측에서 찾을 수 있게 조치가 되어 있는 걸까요?
- react
- typescript
- next.js
dl_audgh
댓글 2
좋아요 0
조회수 79
강의 3-1 인증 스크린 마크업중에 ..
해결됨
아바타 커뮤니티앱 만들기 (React Native Expo)
안드로이드 버전 14 해당 강의 자료를 받아서 실행해봤는데, 로그인 텍스트가 왼쪽으로 쏠려있고 홈화면 버튼이 동작하지 않습니다. 왜이러는걸까요 ???
- javascript
- react
- react-native
- typescript
- react-query
김지환
댓글 2
좋아요 0
조회수 171
인기 태그
인프런 TOP Writers
- 정현섭 7
- eggmun(문성진) 4
- hush park 4
- 꿈이 있는 자유 4
- 박효정 3
- morneau 3
- Like me black 3
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚨[월 최소 650만원+] AI/Bigdata 데이터 분석·머신러닝 강사 구합니다🚨 NoFe