묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
Suspense 관련해서 질문드립니다
안녕하세요.유익한 강의 너무 잘 듣고 있습니다. 다름이 아니라, 팩토리 패턴으로 리팩토링 한 코드에 대해 질문이 있어서 글을 적게 되었습니다. lazy를 사용하지 않고 import('') 구문 만으로는 동적으로 모듈을 임포트 할 수 없나요??컴포넌트가 모두 마운트 된 후 레이지 컴포넌트가 동적으로 임포트가 모두 완료된 상태인데도 suspense가 꼭 필요하나요?? 레이지 컴포넌트에 접근할 땐 이미 임포트가 완료된 후라는 생각이 들어서 여쭤봅니다!
-
해결됨웹 게임을 만들며 배우는 React
포트폴리오 css 스택을 어떻게 가져가는게 좋을까요?
6개월 학원 수료를 한 상태이고, 프론트엔드쪽 웹 개발자를 지망하고 있습니다.추가적으로 공부를 하고 웹사이트를 하나 더 만들어볼 생각을 하고 있는데css 전처리기, 프레임워크, css in js 등등 여러가지 기술이 많은데 면접에서 어필을 하려면대부분의 것을 기본 CSS위주로 짜서 CSS기본이 탄탄한 것을 어필해야 할지,sass나 styled component, tailwind 등의 기술 중 하나를 써서 할줄 아는 스택이 있다는것을 어필해야할지,antd, 부트스트랩 등의 프레임워크를 부담없이 떡칠해서 써서라도 화면을 깔끔하게 만드는것이 중요할지판단이 잘 안서네요. 혹시 조언을 좀 해주실 수 있으신가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
ec2 에 배포시 500 (Internal Server Error) 에러가 뜹니다.
안녕하세요?강의를 무사히 다듣고 따라 했는데 로컬에서는 문제가 없다가.env파일과 next.config, 하드코딩된 url 주소를 다 바꿔주었는데도 ec2 환경에서 에러가 뜹니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
npm run start 오류 제발요,,ㅠ
위와 같이 정상적으로 컴파일 되었다고 하지만,이렇게 오류가 뜹니다... 도저히 해결 방법을 모르겠어요!!proxy설정 전에는 정상적으로 작동해서 다시 proxy에 관한 코드를 다 주석처리하고 해봤는데 저렇게 뜨네요 ㅠㅠ
-
미해결Slack 클론 코딩[실시간 채팅 with React]
npx sequelize db:create 오류
ws@DESKTOP-9H6S8B6 MINGW64 ~/Desktop/sleact/back$ npx sequelize db:createSequelize CLI [Node: 16.15.0, CLI: 6.4.1, ORM: 6.21.4]Loaded configuration file "config\config.js".Using environment "development".ERROR: Access denied for user 'root'@'localhost' (using password: NO) 이런 오류가 계속 뜨고 다른 분들께서 질문하신 답변을 봐도 모르겠습니다... mysql 비밀번호는 확실하게 맞습니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
다른건 다되는데 typeerror 가 뜹니다..
1.<pre>TypeError: Cannot read properties of undefined (reading 'create')const express = require("express"); const cors = require("cors"); const { application } = require("express"); const app = express(); const port = 8080; const models = require("./models"); app.use(express.json()); app.use(cors()); app.get("/products", (req, res) => { const query = req.query; console.log("QUERY:", query); res.send({ products: [ { id: 1, name: "농구공", price: 100000, seller: "조던", imgUrl: "images/products/basketball1.jpeg", }, { id: 2, name: "축구공", price: 50000, seller: "메시", imgUrl: "images/products/soccerball1.jpg", }, { id: 3, name: "키보드", price: 10000, seller: "그랩", imgUrl: "images/products/keyboard1.jpg", }, ], }); }); app.post("/products", (req, res) => { const body = req.body; const { name, description, price, seller } = body; models.Product.create({ name, description, price, seller, }) .then((result) => { console.log("상품 생성 결과 : ", result); res.send({ result, }); }) .catch((error) => { console.error(error); res.send("상품 업로드에 문제가 생겼습니다."); }); }); app.get("/products/:id/events/:eventId", (req, res) => { const params = req.params; const { id } = params; res.send(); }); app.listen(port, () => { console.log("그랩의 쇼핑몰 서버가 돌아가고 있습니다."); models.sequelize .sync() .then(() => { console.log("DB 연결 성공"); }) .catch((err) => { console.error(err); console.log("DB 연결 에러 ㅠ "); process.exit(); }); }); 그 전까진 다 실행 잘되고 테이블도 잘 만들어졌는데 postman 에 send 를 누르면 이렇게 나옵니다body 안에는 잘 들어가는데 create 에서 문제가 생긴거 같습니다. ㅠㅠ
-
미해결따라하며 배우는 리액트 A-Z
API_URL
이러한 API_URL은 어떻게 알 수 있을까요 ? https://www.themoviedb.org 사이트에 정보가 나와있는 걸까요 ?
-
미해결따라하며 배우는 리액트 A-Z
스타일관련문의드립니다
선생님 강좌 하다보니까 스타일 관련이 좀어려운 부분이 있는데요혹시 스타일 쉽게 구현하는 법이 있나요? 미디어쿼리 z인덱스니 포지션 이런거 한번에 해결해주는 툴은없는지요?
-
미해결따라하며 배우는 리액트 A-Z
특정 영화의 더 상세한 정보가져오기
const {data:moviedetail} = await axios.get(`movie/${movieId}`,{params:{append_to_reponse:'videos'}}) setmovie(moviedetail)`movie/${movieId}`,{<---------- 이부분이요 params:{append_to_reponse:'videos'}});선생님 저 윗 부분은1. 중괄호로 params를 묶으신건 어떤걸 의미하는건가요?2.append_to_response:'videos' 이부분은 문법인가요?감사합니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
error: password authentication failed for user "postgres"
도커 컨테이너도 실행 잘 되고, 서버 연결도 잘되서localhost: 4000에서 서버도 잘 띄워집니다.그런데, 데이터베이스만 연결이 안되는 것 같아요 ㅠㅠnpm run dev 만 하면이런 에러가 납니다.// docker-compose.yml// data-source.ts환경변수로도 해봤는데 안되서,일단은 postgres, password로 입력해 놓은 상태입니당 ㅜDocker Desktop에 컨테이너에서 로그 같은 기능이 있길래 봤는데자꾸 비밀번호 인증에 실패 했다고만 나오고 구글링해도 모르겠어용 ㅠㅠreddit-postgres | 2022-08-28 02:13:17.747 UTC [1] LOG: database system is ready to accept connections reddit-postgres | 2022-08-28 02:13:52.751 UTC [33] FATAL: password authentication failed for user "postgres" reddit-postgres | 2022-08-28 02:13:52.751 UTC [33] DETAIL: Connection matched pg_hba.conf line 100: "host all all all scram-sha-256"
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
data값이 안 받아와져요..
프록시 설정하고 응답요청했는데 console.log(요청)도 안되고 데이터자체가 안 받아와지는데 왜 그럴까요..?
-
미해결따라하며 배우는 리액트 A-Z
동영상이 없을 경우 오류
선생님 안녕하세요? 강의 잘 듣고 있습니다.Styled Component를 이용한 비디오 배너 만들기에서iframe에서 src에 movie.videos.results가 없을 경우 오류가 생깁니다.저는 여기에 옵셔널 체이닝(?.)을 걸어 만약에 movie.videos.results이 없을 경우 undefined를 반환하게 하는 방식으로 해결했습니다. 이렇게 한 경우 오류 페이지가 보이는 대신 동영상을 재생할 수 없다고 뜹니다.이렇게 하는 방법도 괜찮은지, 혹시 더 좋은 방법이 있다면 가르쳐 주세요.감사합니다.src={`https://www.youtube.com/embed/${movie.videos.results[0]?.key}?controls=0&autoplay=1&loop=1&playlist=${movie.videos.results[0]?.key}`}
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
dispatch("LOGIN",res.data?.user); 쪽에서 에러가 뜹니다 ㅜ
TypeError: dispatch is not a functionat _callee$ (login.tsx?11e1:20:10)at tryCatch (runtime.js?ecd4:45:16)at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)at prototype.<computed> [as next] (runtime.js?ecd4:97:1)at asyncGeneratorStep (_async_to_generator.mjs?949a:3:1)at next (async_to_generator.mjs?949a:25:1)라는 에러가 뜨는데 어디가 문젠지 모르겠습니다.. ㅠ
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
질문 드려요
findone vs findoneorfail무슨차이 인가요?
-
미해결따라하며 배우는 리액트 A-Z
디비 api 사이트 회원가입 문제
디비 api 사이트 회원가입이 안됩니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Router 예제 복붙했더니 오류가 뜰 때!
아랫분들도 설명해주셨다싶이 버전이 바뀌면서 쓰이는 용어가 바뀌었어요! 다만 올려주신부분들이 다 수업끝부분 완성본인것같아서.. 저는 Home() About() Users()함수가 들어가야하는 초반 부분 수정본을 첨부해봅니다! import React from "react"; import { Route, Routes, BrowserRouter } from "react-router-dom"; function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function Users() { return <h2>Users</h2>; } function App() { return ( <BrowserRouter> <div> {/* A <Switch> looks through its children <Route>s and renders the first one that matches the current URL. */} <Routes> <Route path="/about" element={About()}> <Route /> </Route> <Route path="/users" element={Users()}> <Route /> </Route> <Route path="/" element={Home()}> <Route /> </Route> </Routes> </div> </BrowserRouter> ); } export default App;
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Context 질문드립니다.
안녕하세요 선생님. 질문이 있어요. 그전까지는 이해가 되었는데 Context강의가 유독 어렵네요... 먼저 DiaryStateContext.Provider의 value로 {data, onCreate, onRemove} 이렇게 넣으면 prop이 바뀌면 재생성된다는 것이 이해가 안되요. onCreate랑 onRemove는 useCallback으로 재생성 되는 것을 막아 놓은 것 아니었나요? 헷갈리네요. 두번째로 중첩으로 하는 이유가 잘 이해가 안 됩니다. 왜 중첩으로 하면 이게 해결이 될까요? 어차피 memoizedDispatches로 useMemo를 썼으면 그냥 DiaryStateContext.Provider에 value로 넣으면 안되는 건가요. 중첩으로 하는 이유가 잘 납득이 안됩니다. DiaryStateContext.Provieder value={data, memoizedDispatches} 이렇게 하면 안되나요? 그리고 useMemo로 묶는 부분도 다시 한번 설명해주실 수 있나요? useCallback으로 막아놨는데 왜 useMemo로 다시 묶어야 할까요 그냥 onCreate, onRemove, onEdit을 묶지 말고 따로따로 DiaryStateContext.Provider의 value로 {data, onCreate, onRemove} 이렇게 보내주면 안될까요? 강의를 두번 반복했는데도 잘 이해가 안되네요..
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
중첩 Context 관련 질문있습니다.
안녕하세요 중첩 Context 관련해서 질문하나 드립니다 <DirayStateContext> 라는 컨텍스트 또한 컴포넌트 이기에 data 값이 바뀌면 하위 컴포넌트 들 또한 재렌더링이 되기에 DirayStateContext 에 상태변경 함수를 넣어주게 되면 함수또한 재생성이되서 전달이 되는것이고 그러면 최적화가 풀려버리기에 그하위에 별도의 컨텍스트를 생성해서 data 라는 상태가 변경되어도 DiaryDispatchContext에 전달한 상태변경 함수는 변동이 없어서 최적화를 유지할 수 있다 제가 이해한게 맞는걸까요? 이부분이 살짝 헷갈립니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
npx sequelize db:create 입력시 에러 발생
back 폴더에 npm i 이후 npx sequelize db:create 입력시 npm ERR! could not determine executable to run npm ERR! A complete log of this run can be found in:npm ERR! /Users/eycha/.npm/_logs/2022-08-21T06_14_10_186Z-debug-0.log 라는 에러 발생합니다. mysql 과 node 정상적으로 설치했는데 관련되서 검색해도 해결책이 없어서 질문 남깁니다.
-
미해결따라하며 배우는 리액트 A-Z
params : { append_to_response : "videos"},
강의 잘 보고 많이 배우고 있습니다 ! "append_to_response"는 사용자가 다르게 바꿀 수 있는 부분인가요 ? 아니면 axios 속성인가요 ?