그랩 선생님, 좋은 강의 만들어 주셔서 잘 듣고 있습니다. 그런데 아무리 해도 에러가 나는 것을 해결하지 못하고 있어 2주 이상 진도를 나가지 못하고 있어 부득이하게 질문을 여러번 올리게 됩니다. 현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요 , 1. 그랩 선생님 소스 코드와 동일 하게 아래 작성한 index.js 소스 첨부 하는데요, 실행 하면 , 1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이 에러가 발생 합니다. 이 에러는 어떻게 해결 할 수 있을까요? -------- 2. index.js 소스 아래에 작성 첨부 합니다. import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 mock 목 서버 주소를 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage; 그리고, 추가적으로 아래 그랩님 답변 본 뒤 다시 시도해 본 후 질문이 있어 추가적으로 글을 적습니다. 현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지 하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결해야 하는지 단계별로 친절한 설명 부탁 드립니다 위에는 mock 서버인 postman(포스트맨) 화면이고요, 아래는 크롬 브라우저 에러 메시지를 첨부합니다. 참고> app.js 소스 첨부합니다. import logo from './logo.svg'; import './App.css'; import MainPage from "./main/index.js" function App() { return ( <div> <MainPage /> </div> ); } export default App; 또한 만약 그랩님께서 제 소스를 보시고 수정하여 에러가 해결된 완성된 index.js 소스가 있다면요, 최종 완성 된 수십 줄의 소스 코드 를 아래 답변 댓글에 길더라도 다 첨부해주시면 완성된 소스 코드를 그대로 복사하여 vs code에 붙여 넣기 하고 싶은데요 , 아래 답변 글에 남겨주시면 감사하겠습니다. ------------------------------------------------------------------------------------------------- 그리고, 아래 글에 나와 있는 답변데로, TypeError: Cannot read properties of undefined (reading ‘map’) 해결 방법 서버 데이터 문제로 인한 map 함수 에러 고치기 React 데이터 바인딩과 undefined 에러 처리 위 해결책의 코멘트와 답변 대로 수정해 보아도 에러가 해결 되지 않았습니다. 어떻게 해결 해야 하는지요? 빠른 답변 부탁 드립니다.
실습 중에 댓글 작성하려고 하는데 오류가 발생해서 오류 로그를 보다가 sqlMessage 로 "Unknown column 'commenter' in 'field list'", 라는 문구를 봤습니다. 따로 commenter 라는 필드를 만드신건 못본거같은데 제가 강의를 흘려 들은건지 잘 모르겠습니다. 근데 이상한건, 맨 처음에 실행하고 댓글을 작성할땐 댓글이 작성이 되고, MySQL 에 들어가서 comment 테이블을 확인해보면 댓글이 들어가긴 했습니다. 근데 두번째 댓글 작성시도부터 오류가 발생했습니다.
안녕하세요. 수업 중 막히는 것이 있어서 질문 글 올립니다. 수업을 다 따라가고 연결테스트를 하려고 했는데, 이렇게 에러가 생겼습니다. 분명히 config폴더가 있고 그안에 config.json 파일이 존재하는데 없다고 하길래, 일단 npx sequelize init 을 했더니 이번에는 config 파일이 이미 존재한다는 소리를 하길래 --force 를 하긴했습니다. 그런 다음에 다시 실행하니까, 이렇게 오류메시지가 생겼어요. 강의에는 models 폴더에 user라는 파일을 만들라는 건 듣도보도 못했는데, 뭐가 잘못된건지 잘 모르겠습니다.
현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요 , 1. 그랩 선생님 소스 코드와 동일 하게 아래 작성한 index.js 소스 첨부 하는데요, 실행 하면 , 1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이 에러가 발생 합니다. 이 에러는 어떻게 해결 할 수 있을까요? -------- 2. index.js 소스 아래에 작성 첨부 합니다. import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 목 mock 서버 주소를 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage; 그리고, 추가적으로 아래 그랩님 답변 본 뒤 다시 시도해 본 후 질문이 있어 추가적으로 글을 적습니다. 현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지 하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결해야 하는지 단계별로 친절한 설명 부탁 드립니다.
무한 스크롤에서 추가 데이터가 load되는 순간, 스크롤 영역이 늘어나게 되는데요. 이 때 유저가 보고 있던 스크롤 위치를 잃고 튀는 현상이 있습니다 당장 생각나는 방법은 이전 scrollY를 갖고 있다가 useLayoutEffect 걸어서 data가 변경될 때 scrollTo 해주는 것인데요, 혹시 더 나은 방법 고민해보셨는지 궁금합니다
강의에서 프로필 페이지 접근을 막기 위해 useEffect + redirect 패턴을 사용해주셨는데요, 특정 페이지 접근을 막는 좀 더 고차원적인 방법을 고민해보신 경험이 있는지 궁금합니다 현재 방식은 useEffect라 해당 페이지 한번은 렌더링되다보니, 접근 자체를 막는게 아니라 한번 갔다가 돌아오는 식이라 아쉬운 부분이 있습니다 최적화 관점 : 해당 페이지 js를 불러와야 함 등 보안 관점 : 명확치 않으나 왠지 hole이 있을 것 같음
createGlobalStyle이 컴포넌트 형태로 적용되다보니 마치 현재 컴포넌트 하위만 적용될 것 같은 느낌이 있는데요 실제 영향범위는 class 수정이므로 페이지 전체에 영향을 끼치다보니 개인적으로 비직관성이 느껴집니다 createGlobalStyle을 실제로 사용하신 경험이 있는지와 사용하셨다면 _app 외에 다른 위치에서도 쓰셨는지 궁금합니다
인라인 스타일 사용 시 style이라는 객체 prop이 매번 달라져 리렌더링이 발생한다고 해주신 부분 관련하여 질문드립니다 부모가 리렌더링되는 상황이라 이와 무관하게 자식의 리렌더링도 유발하게 될텐데요 자식 컴포넌트 자체에 memo를 적용하는 경우가 아니라면, useMemo를 쓰더라도 최적화 효과가 없을 것으로 보이는데 맞을까요?
현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요 , 1. 그랩 선생님 소스 코드와 동일 하게 아래 작성한 index.js 소스 첨부 하는데요, 실행 하면 , 1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이 에러가 발생 합니다. 이 에러는 어떻게 해결 할 수 있을까요? -------- 2. index.js 소스 아래에 작성 첨부 합니다. import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 mock 목 서버 주소를 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage; 질문 하기 전 , 인프런 질문 올라와서 답변 올라온 것 다 적용해 보아도 해결이 안되어 이렇게 여쭈어 보게 되었습니다. 무엇이 문제인지, 그리고 해결 방법은 무엇인지 알려 주시면 고맙겠습니다.
수업에서 보여주신 코드와 nest.js 공식 문서에서 제공하는 스키마 파일의 구조가 살짝 다른 이유가 궁금합니다. 1. xtyatDocument = HydratedDocument<Cat>; 수업 코드에서는 이 부분이 없습니다. 무슨 차이인가요? export class Cat { 공식 문서 제공 파일에서는 아무것도 extends하지 않는데, 수업에서는 다릅니다. 무슨 차이인가요? [공식 문서 제공 코드] ``` import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose'; import { HydratedDocument } from 'mongoose'; export type CatDocument = HydratedDocument<Cat>; @Schema() export class Cat { @Prop() name: string; @Prop() age: number; @Prop() breed: string; } export const CatSchema = SchemaFactory.createForClass(Cat); ```
강의 잘 듣고 있습니다. 질문이 있는데요, 일반적인 css 꾸미기 에서 width와 height의 값 은 개발자가 아닌 웹디자이너가 항상 알려주기도 하나요 ? 즉 만약 vs code에서 파일이 index.html이 있고 index.css가 있다고 한다면, index.html에서 작성한 내용에 index.css에서 꾸며줄 시에 width 값과 height 값이 몇 픽셀인지, 혹은 몇 퍼센트인지 정할 때 잘 모르겠다면 어떻게 해야 하나요? 개발자가 width 값과 height 값을 잘 모른다면 감으로 크기를 늘렸다가 줄였다가 반복 하면서 적당한 width값과 height값을 찾아나가는 건가요? 피그마에서는 보통 디자인이 다 된 결과 값을 보고 vs code에 코딩한다면 상세 정보를 보고 width크기,height크기,폰트 크기, 폰트 weight 등등 다양하게 그대로 css에 적어주기만 하면 되는데요, 그랩 선생님 강의에서는 피그마로 볼 수 있게 추가 안내가 없어서, 스스로 강의 들은 이후 강의 없이 복습 할 시에(그랩마켓 웹화면 구현하기 1~3) 혹시나 각각 css로 꾸밀 때 width, height은 외우거나 혹은 보고 css에 적용하는 방식의 공부법 밖에 없는걸까요? 아니면 실무에서는 웹디자이너가 이미지등등의 경우에 width,height,기타 등등을 알려주기 에 그대로 css에 코딩해주면 되는 것인지요? 그랩님, 답변 부탁드립니다.
저는 .eslint 파일이 안생기고 eslint.config.mjs 파일이 생기네요. 그리고 각 ts 파일에 들어가 보니 줄마다 끝에 에러 표시가 나있더군요. 동작에는 문제가 없으나 구글링 해보니 아래를 추가라하고 해서 일단 해결은 했습니다. rules: { 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ],
제로초님 깃헙 소스코드 복사해서 실행한 파일로 크롬에서 실행했는데, input 폼에 id 넣고 등록을 누르면 404 에러 페이지가 뜹니다. 사파리 브라우저는 문제 없이 돌아가고 크롬브라우저에서만 이렇게 됩니다. 어떤 문제인가요? 에러 메세지도 안떠서 당황스러운데 이런건 구글링 해봐도 잘 안찾아지는데 앞으로 이런 문제는 어떻게 검색해야 찾을 수 있을까요 ?
PS C:\Users\user\Documents\prepare\front> npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See npm help init for definitive documentation on these fields and exactly what they do. Use npm install <pkg> afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (front) PS C:\Users\user\Documents\prepare\front> 터미널을열고 저도 패키지 네임 다음 react-nodebird-front를 작성하고 싶은데 어떤방법이 있을까요?
안녕하세요! 캡슐화 추가 설명 강의 중 궁금한 것이 있어 질문 드립니다. 상위 모듈인 app 모듈의 providers에서 하위 모듈들의 service나 repository를 주입 받아 사용하게 되면 다음과 같은 문제가 있다고 하셨습니다. 모듈들의 관리가 힘들어진다. 단일책임원칙이 깨진다. 추가적인 학습으로 알게된 1번에서 발생할 수 있는 문제는 다음과 같습니다. -상위 모듈의 providers에서 인덱스 순서대로 service를 불러 오기 때문에 만약 하위 클래스끼리의 의존성이 존재한다면, 그 순서를 관리해줘야 되는 복잡성이 발생한다 . 순환참조 또한 일어날 수 있다. 하지만 2번 단일책임원칙이 깨진다는 문제점이 발생한다는 것은 아직 이해하지 못했습니다. app 모듈안에서 다른 클래스들의 기능을 사용할 때 참조하는 방식이 잘못된 것이지, 해당 클래스의 기능의 책임이 확장된 것은 아니라는 생각이 듭니다. 여전히 기능의 변경이 일어났을 때 해당 클래스만 수정하면 된다고 생각하기 때문입니다. 제 이해가 잘못된 것인지, 강사님께서 SRP원칙의 의미를 조금 더 확장해서 말씀해주신 것인지 궁금합니다!
supertest 를 통해서 다른 라우터도 테스트 코드를 생성하려고 했는데요 각각의 supertest 파일에서 sequelize.sync({force:true})가 병렬로 실행되니까 전체적인 테스트가 끝나지 않았는데 위 코드로 인해 DB가 초기화 되어버려 테스트를 실패하는 케이스가 발생했습니다. 이게 항상 발생하는 것도 아니고 테스트 수행 시간이 달라짐에 따라 결과가 매번 다르더라구요. 그래서 이 부분을 어떻게 해결해야하는지 찾아보려고 했으나 검색 키워드를 잘몰라서 도움이 될만한 정보를 찾지 못했습니다. 혹시 이런 부분은 어떻게 해야하나요? [제로초 강좌 질문 필독 사항입니다] 질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다. 도움이 되는 질문을 하는 방법을 알려드립니다. https://www.youtube.com/watch?v=PUKOWrOuC0c 0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다. 1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다. 2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다. 3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요. 4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요. 5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다. 6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
npm i express 로 express 를 설치 후 강의와 같이 코드를 작성했지만 .. app.get('/*', (req, res) => {...}); 에서 오류가 발생합니다. TypeError : Missing parameter name at 2: https://git.new /pathToRegexpError 가 발생합니다. 구글에서 검색하여 보니 Express v5에서 '/*' 형식은 맞지 않는 것으로 보입니다. 따라서 아래와 같이 코드를 정규식으로 변환하니 제대로 실행 되었습니다. app.get(/^\/(.*)/, (req, res) => { res.sendFile(path.join(__dirname, '..', 'index.html')); }); 혹시 정규식 말고 다른 수정 방법이 있는지 알고 싶습니다. ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다. ⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
