묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
tailwindcss 적용이 안 됩니다
따라 치면서 실습하는데 적용이 안 되길래 삽질 하다가혹시나 싶어서 강의 자료를 다운 받아 npm run start 해 보았는데요그것도 이렇게 적용이 안 되게 보이네요...뭐가 문제일까요? ㅜ.ㅜ
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
여러번 계속 돌려보고했는데 오류를 못찾겠습니다 ㅜㅜ
이거는 reple 입니다.리플 모델입니다. 이거는 댓글 입력했을때 들어오는 값이랑 맨위에 사진17번째줄 콘솔입니다.포스트아이디가 없습니다..포스트 area 에서 postInfo 를 콘솔한것이 이것 이며 여기서 props.postID 를 가져오지를 못해서.. 값이 안들어가는것 같습니다. 혹시 강의가 업데이트 되거나 제가 잘못한 부분이있을까요..?PostArea.js 에서 댓글지역으로 프롭이렇게 보냈습니다 영상과같이.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
CommandError: You must set settings.ALLOWED_HOSTS if DEBUG is False. 오류가 뜹니다.
강의내용대로 쭉 따라가면서askcomapny경로에서 settings 폴더를생성cd askcompany로 경로 이동후 git add .를 한뒤 git mv settings.py settings/common.py 로 파일이동그 상태로 runserver를 해봤더니 CommandError: You must set settings.ALLOWED_HOSTS if DEBUG is False. 오류가 뜸원래 경로에 settings.py파일을 다시 만들어 보고 runserver를 해봤더니 오류가 사라짐옮기는 과정에서 문제가 있는건지는 모르겠네요 DEBUG = True 이고 ALLOWED_HOSTS = ['*'] 설정까지도 해봤는데 왜 저런 오류가 뜨는걸까요?
-
미해결만들면서 배우는 리액트 : 기초
ReactDom is not defined
안녕하세요~ 수업 잘 듣고 있습니다.처음 react, reactdom script 및 babel script 를 추가하고 서버를 보니 ReactDom 오류가 나네요. 추가해야 할 부분이 있을까요?Uncaught ReferenceError: ReactDom is not defined at <anonymous>:13:1 at i (babel.min.js:24:29679) at r (babel.min.js:24:30188) at o (babel.min.js:24:30596) at u (babel.min.js:24:30969) at f (babel.min.js:1:1812) at babel.min.js:1:6287
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
Invalid href passed to next/router
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 94강 13:55초를 보면 콘솔 창에 next-dev.js?3515:20 Invalid href passed to next/router: /u//r/test02/043hzrH/test44, repeated forward-slashes (//) or backslashes \ are not valid in the hre와 같은 에러가 떠있습니다. [username].tsx에서 <Link href={`/u/${comment.post?.url}`}>을 불러 올때 url에 '/r/test02/043hzrH/test44'가 담겨 오면서 슬래쉬(//)가 2번 입력되어 생기는 에러 같습니다. 제공된 소스코드에도 위와 같이 입력되어 있어요. 아래와 같이 '/'를 지우고 링크를 href에 넣어주면 에러가 사라지는데 이게 맞을까요?<Link href={`/u${comment.post?.url}`}>
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
import { User } from "../entities/User"
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.백엔드 entities에서 Post, Sub, Comment는 아래와 같이import Post from "../entities/Post" import Sub from "../entities/Sub" import Comment from "../entities/Comment"처럼 불러올 수 있게 작성하셨는데 User만import {User} from "../entities/User"중괄호를 넣어서 불러와야 합니다. export default class User extends BaseEntity 가 아닌export class User extends BaseEntity 로 작성한 이유가 있을까요?
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
post?.voteScore undefined
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 81강을 수강중입니다.src/pages/r/[slug]/[identifier]/[slug].tsx 작성중{post.voteScore} 를 콘솔로 찍어보면 undefined가 나와서 페이지에 노출되지 않습니다.타입을 voteScore? : number 로 한게 문제인가해서 ?를 지워보았지만, 증상은 동일했고 api를 불러오면서 voteScore는 0으로 초기화되지 않은채 받는것 같아요.그러던 중 백엔드의 Post.ts를 살펴보았더니 get voteScore()를 get VoteScore()로 오타 아닌 오타를 가져가서 초기화 되지 않았단걸 알아내었습니다. 누군가에게 도움이 되시길 바라며
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
css font-face unicode-range
안녕하세요 선생님, 정말 좋은 강의 감사합니다.선생님이 설명해주신 폰트 사이즈 줄이기 (Unicode Range) 를 테스트 해보려고 했습니다. 제가 진행한 Nextjs, React 두가지 프로젝트 환경에서 Unicode range없이 네트워크를 살펴보았는데요, 알아서 그 페이지에서 사용하는 폰트만 불러오는 것을 확인했습니다. 혹시 react 프로젝트는 Unicode-range 를 해주지도 않았는데 알아서 최적화를 해주는 것인가요...??.....
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
woff2 포멧 IE에서 사용가능 여부
안녕하세요 선생님.이번에 폰트 포멧에 대해서 공부를 해봤는데, woff2 가 인터넷 익스플로러에서 사용불가하다고 알고 있었는데 사용이 가능한가요?!https://caniuse.com/?search=woff2
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
3-3 이미지 지연 로딩 코드 어디서 보나요?
3-3 이미지 지연 로딩을 하면서 밑에 TwoColumns의 이미지도 지연 로딩하는걸 적용했습니다.강사님 코드와 비교하고 싶은데 어디에서 코드를 확인할 수 있나요?
-
미해결
React에서 오픈API 사용 시 CORS 에러
안녕하세요.과제로 공공데이터 오픈API를 사용해서 웹을 하나 만들게 되었습니다.api에서 자료를 받아오는 과정에서 cors에러가 발생해 해결하려다가 결국 혼자서 해결이 안되어 질문 드립니다. package.json에 { ... "proxy": "http://openapi.molit.go.kr" ... }를 작성하고 실행했을 때이런 에러코드가 발생하며 npm start가 진행되지 않습니다.터미널에서 npm install http-proxy-middleware 설치 후/src/setupProxy.js file 생성, 다음과 같이 코드 작성npm start 시 접속이 불가능도대체 어떻게 해야 cors에러를 해결가능할까요...아무리 찾아봐도 이 두가지 방법밖에 안나오는데 두가지 다 적용이 안되니 답답해 죽겠습니다..
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
이미지 최적화 활용
안녕하세요.이번 이미지 사이즈 최적화 강의를 보고 질문 드립니다.강의에서 제공되는 이미지 데이터로는 getParametersForUnsplash()함수가 적용이 되는데 이미지 데이터를 다른 링크에 있는 이미지 주소 같은 거로 변경을 해서 진행을 해보면 변경이 안되는데 혹시 이런 경우에는 다른 방법을 사용해서 진행을 해야 하는 부분인가요??이미지 링크 주소https://t1.daumcdn.net/cfile/tistory/2408DD3658A648B12C
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
카드 만드는거 질문있습니다
렌딩페이지만들기 - 카드만들기 강의 3분40분에컴포넌트 return 안에 Products.map을 돌리는게 아니고 따로 함수를 빼서 renderCards를 처리하셨는데따로 빼는 이유가 있나요?실무에선 return에서 map으로 거의 돌렸어서 궁금해졌습니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
토큰생성 오류, 무한로딩나시는분들 이거 해보세요
userSchema.methods.comparePassword=function(plainPassword, cbfn){ //암호화된 비밀번호와 plain패스워드가 같은가? //plain패스워드를 암호화 후 체크 console.log("user.jsmethod") bcrypt.compare(plainPassword, this.password, function(err, isMatch){ if(err) return cbfn(err) cbfn(null, isMatch)//ismatch=true }) }if(err) return cbfn(err), 에서 ,빼니까 잘 되네요console.log는 필요없으니 빼시면 됩니다 강의보니까 ,에서 ;로 수정하셨던데 이걸 빼먹으신거 같아요
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
강력 새로고침
6분33초에 있는 강력 새로고침은 어떻게 뛰우나요? 우클릭은 안되네요
-
미해결(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
reducer는 함수라고 해서 function을 넣으셨는데...
1. reducer는 함수라고 해서 function을 넣으셨는데...화살표 함수는 안쓰는 이유가 따로있는건가요??아니면 써도 상관없나요?? 2.dispath에 type은 늘 대문자로 쓰시던데...그것도 또한 어느정도 약속이 되어있는 문법인가요??
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build가 되지 않습니다..
Windows PowerShellCopyright (C) Microsoft Corporation. All rights reserved.PS C:\Users\PC\Desktop\emotion diary> npm install -g servechanged 89 packages, and audited 90 packages in 10s23 packages are looking for funding run npm fund for detailsPS C:\Users\PC\Desktop\emotion diary> cd helloPS C:\Users\PC\Desktop\emotion diary\hello> serve -g buildserve : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\PC\AppData\Roaming\npm\ser ve.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.mic rosoft.com/fwlink/?LinkID=135170)를 참조하십시오.위치 줄:1 문자:1+ serve -g build+ ~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccessPS C:\Users\PC\Desktop\emotion diary\hello> npm run build> hello@0.1.0 build> react-scripts buildCreating an optimized production build...Compiled with warnings.[eslint] src\components\DiaryItem.js Line 32:16: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-textsrc\components\DiaryList.js Line 1:15: 'useEffect' is defined but never used no-unused-varssrc\components\EmotionItem.js Line 6:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-textsrc\pages\Diary.js Line 20:7: React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array react-hooks/exhaustive-deps Line 37:7: React Hook useEffect has a missing dependency: 'navigate'. Either include it or remove the dependency array react-hooks/exhaustive-deps Line 58:25: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-textsrc\pages\Edit.js Line 5:9: 'getStringDate' is defined but never used no-unused-vars Line 22:7: React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array react-hooks/exhaustive-deps Line 39:7: React Hook useEffect has a missing dependency: 'navigate'. Either include it or remove the dependency array react-hooks/exhaustive-depsSearch for the keywords to learn more about each warning.To ignore, add // eslint-disable-next-line to the line before.File sizes after gzip: 54.79 kB build\static\js\main.544a876e.js 1.42 kB build\static\css\main.b7fc6af2.cssThe project was built assuming it is hosted at /.The build folder is ready to be deployed.You may serve it with a static server: serve -s buildFind out more about deployment here: https://cra.link/deploymentPS C:\Users\PC\Desktop\emotion diary\hello> serve -s buildserve : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\PC\AppData\Roaming\npm\serve.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.mic rosoft.com/fwlink/?LinkID=135170)를 참조하십시오.위치 줄:1 문자:1+ serve -s build+ ~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccessPS C:\Users\PC\Desktop\emotion diary\hello> npm install -g serve와npm run build를 했습니다 you may serve it with a static server라는 메시지와함께 serve -s build라는 메세지도 떴는데 serve -s build라고 명령어를 입력했는데도 입력이 되지 않습니다... 루트폴더 문제인가요? 문제가 무엇인가요
-
미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. invailhost header 질문
현재 슬랙클론 수강중인 학생입니다.저는 군대에서 독학으로 공부중입니다.현재 제로초님 깃허브에서 git clone 하여 그대로 데모버전을 사용하고 있습니다.제가 사용하는 에디터는 구름ide를 사용하고 있는데구름 ide 에서는 localhost를 제공해주지 않고, 제가 port를 설정하면 구름에서 제공해주는 사이트 주소를 사용하는 식으로 운영됩니다.제가 본 영상에서와 같이 dependency까지 그대로 다운받고,npm run dev 명령어를 실행하면 당연히 localhost가 없기때문에 사이트 접속이 힘듭니다....그래서 port 3090에 맞게 url에 접속하면 invaild host header 에러가 나옵니다..전에 위 에러를 만났을 때는 항상 cra로 개발했기 때문에 금방 구글링으로 해결을 했는데 현재는 어떻게 해결해야 할지 모르는 상황입니다..
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
class name 질문
안녕하세요.classname 작성하실때 어떤건 className = {name} 이런식으로 괄호 안에 넣고 어떤건 단순히 className = "name" 이렇게 하시는데 혹시 어떤 차이가 있고 이유는 무엇인지 궁금합니다 ㅠㅠ 이미 가르쳐주셨던건데 제가 모르는거 같기도 하네요
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
cookie-parser Invalid or unexpected token error
영상에 따라서 단순하게 cookie-parser 설치하고 import cookie-parser 한다음에 app.use(cookieParser()) 진행하면 상단에 이미지처럼 에러가 발생하더라구요. cookie-parser을 제거하면 cookie가 정상적으로 저장되는 것을 볼 수 있었습니다. 어떤 부분을 놓친 것일까요server.tsimport express from "express"; import morgan from "morgan"; import { AppDataSource } from "./data-source" import authRoutes from "./routes/auth"; import subRoutes from "./routes/subs"; import cors from 'cors'; import dotenv from 'dotenv'; import cookieParser from "cookie-parser"; const app = express(); dotenv.config(); app.use(cors({ origin: process.env.ORIGIN, credentials: true })) app.use(express.json()); app.use(morgan('dev')); app.use(cookieParser()) app.get("/", (_, res) => res.send("running")); app.use('/api/auth', authRoutes); app.use("/api/subs", subRoutes); const PORT = process.env.PORT; console.log('PORT', PORT) app.listen(PORT, async () => { console.log(`server running at http://localhost:${PORT}`); AppDataSource.initialize().then(async () => { console.log("data initialize...") }).catch(error => console.log(error)) })