inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

모달창 밖에 스크롤 이벤트는 어떻게 끌 수 있을까요?

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

안녕하세요. 모달창 을 띄우고 스크롤을 하면 모달창 밖에 화면이 스크롤이 되는데 이부분도 useRef를 이용해서 막을 수 있을까요??

  • typescript
  • react
  • tdd
  • redux
  • Next.js
조찬호 댓글 1 좋아요 1 조회수 3105

Suspense 관련해서 질문드립니다

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

안녕하세요. 유익한 강의 너무 잘 듣고 있습니다. 다름이 아니라, 팩토리 패턴으로 리팩토링 한 코드에 대해 질문이 있어서 글을 적게 되었습니다. lazy를 사용하지 않고 import('') 구문 만으로는 동적으로 모듈을 임포트 할 수 없나요?? 컴포넌트가 모두 마운트 된 후 레이지 컴포넌트가 동적으로 임포트가 모두 완료된 상태인데도 suspense가 꼭 필요하나요?? 레이지 컴포넌트에 접근할 땐 이미 임포트가 완료된 후라는 생각이 들어서 여쭤봅니다!

  • react
  • devtools
정세연 댓글 1 좋아요 2 조회수 376

포트폴리오 css 스택을 어떻게 가져가는게 좋을까요?

해결됨

웹 게임을 만들며 배우는 React

6개월 학원 수료를 한 상태이고, 프론트엔드쪽 웹 개발자를 지망하고 있습니다. 추가적으로 공부를 하고 웹사이트를 하나 더 만들어볼 생각을 하고 있는데 css 전처리기, 프레임워크, css in js 등등 여러가지 기술이 많은데 면접에서 어필을 하려면 대부분의 것을 기본 CSS위주로 짜서 CSS기본이 탄탄한 것을 어필해야 할지, sass나 styled component, tailwind 등의 기술 중 하나를 써서 할줄 아는 스택이 있다는것을 어필해야할지, antd, 부트스트랩 등의 프레임워크를 부담없이 떡칠해서 써서라도 화면을 깔끔하게 만드는것이 중요할지 판단이 잘 안서네요. 혹시 조언을 좀 해주실 수 있으신가요?

  • react
kenny 댓글 1 좋아요 0 조회수 364

sudo certbot --nginx 중에 에러가 발생해 질문합니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요. 제가 동영상 으로 진행하다가 404 에러가 발생하여 댓글에 있는 포스트를 이용해서 진행하려고 했으나, sudo certbot --nginx 과정에서 에러가 발생하여 질문하고자 합니다. // etc/nginx/nginx.conf 저는 localhost:3000으로 진행했어서 127.0.0.1:3000으로 기입했습니다.

  • nignx
  • Next.js
  • certbot
  • https
  • react
  • redux
  • nodejs
  • express
조찬호 댓글 2 좋아요 0 조회수 863

ec2 에 배포시 500 (Internal Server Error) 에러가 뜹니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

안녕하세요? 강의를 무사히 다듣고 따라 했는데 로컬에서는 문제가 없다가 .env파일과 next.config, 하드코딩된 url 주소를 다 바꿔주었는데도 ec2 환경에서 에러가 뜹니다.

  • react
  • nodejs
  • docker
  • typescript
  • postgresql
  • Next.js
  • 클론코딩
댓글 1 좋아요 0 조회수 1411

로그인을 안한 상태에서 에러질문 드립니다(재작성)

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

로그인을 하지않은 상태에서는 loadUser함수에 의해 /auth/me로 router로 호출이 되어 user미들웨어는 담긴 쿠키가 없으니 next()로 넘어서 auth미들웨어에서 unauthenticated 에러가 뜹니다 로그인을 안한 상태라고 401 에러가뜨는게 맞는건지.. 강의대로 재대로 따라했는지 잘 모르겠어서 질문드립니다 제공된 소스코드랑 비교해도 다른점을 모르겠네요 로그인만 하면 에러는 당연히 안뜨네요

  • docker
  • nodejs
  • react
  • typescript
  • postgresql
  • 클론코딩
  • Next.js
댓글 1 좋아요 0 조회수 367

rendered HTML error 관련

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

MsgItem 을 이용하여 MsgList 50개를 뽑는 과정에서 Error: Text content does not match server-rendered HTML. Error: Hydration failed because the initial UI does not match what was rendered on the server. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. 오류를 만났습니다. 혼자서 분석해본결과 jay와 roy를 랜덤으로 얻기위한 const getRandomUserId = () => UserIds[Math.round(Math.random())]; 이라는 함수를 이용하면 이런에러가 나는것으로 확인되었습니다 선생님 .fill(0).map() 함수에서 getRandomUserId() 를이용하지않고 직접 이름을 "roy" 로 작성하니 오류가 나오지않습니다.. 구글링을해봐도 이유를 알기 어려워서 질문을남깁니다 왜 이런오류가 나오는걸까요.?

  • graphql
  • rest-api
  • react
박세영 댓글 2 좋아요 2 조회수 2214

이메일 아이디는 findOneBy를 이용하였는데 서브레딧제목은 왜 QueryBuilder를 사용하나요?

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

const emailUser = await User.findOneBy({ email }); const usernameUser = await User.findOneBy({ username }); if (emailUser) errors.email = '이미 사용 중인 이메일입니다.'; if (usernameUser) errors.username = '이미 사용 중인 이름입니다.'; if (Object.keys(errors).length > 0) { return res.status(400).json(errors); } 이런방식과 QueryBuilder는 뭐가 다른지 왜 그렇게 하는지 궁금합니다.. 연휴에도 질문드려 송구하네요..에고 ^^

  • postgresql
  • docker
  • typescript
  • nodejs
  • react
  • Next.js
  • 클론코딩
댓글 1 좋아요 1 조회수 482

react 18에 맞춰서 작성한 코드입니다.

미해결

처음 만난 리액트(React)

바뀐 react 18에 따라서 작성된 코드입니다. 바뀐 리엑트로 어떻게 코드 작성해야하는지 모르겠는 분들은 참고하시면 좋을것 같습니다! https://github.com/matt700395/first-meet-react/commit/7df1b7367e6a2c00f21ae30a92e39102959e373f

  • react
  • HTML/CSS
  • javascript
베이스 캠퍼스 댓글 3 좋아요 6 조회수 715

도커를 이용하여 postgresql을 사용하는것에 이점이 있나요?

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

도커를 사용하지 않으면 postgresql을 사용하지 못하는것인가요? 정말 잘 몰라서 그러는데 도커를 사용해 postgresql을 이용하는것에 장점이 궁금합니다

  • nodejs
  • typescript
  • docker
  • postgresql
  • react
  • 클론코딩
  • Next.js
댓글 1 좋아요 0 조회수 370

GET /api/auth/me 304

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

커뮤니티생성 - 커뮤니티 생성핸들러 생성하기(2) 까지 강의를 들은 상황에서 첫 로그인은 network status가 200이 뜨는데 그 다음부터는 어느 페이지든 접근시 GET /api/auth/me 304 가 나옵니다. routes/auth.ts 에서 [변경전] const me = async (_: Request, res: Response) => { return res.json(res.locals.user) } [변경후] const me = async (_: Request, res: Response) => { return res.status(200).json(res.locals.user) } 바꾸었으에도 계속 그러네요.. 왜 그런지 아시나요 아래와 같은 글을 발견했지만 캐싱 이후 그냥 304를 날린다는데 이게 맞는건가요..? https://www.inflearn.com/questions/14571

  • 클론코딩
  • Next.js
  • docker
  • nodejs
  • postgresql
  • typescript
  • react
heonpage 댓글 1 좋아요 0 조회수 350

npm run start 오류 제발요,,ㅠ

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

위와 같이 정상적으로 컴파일 되었다고 하지만, 이렇게 오류가 뜹니다... 도저히 해결 방법을 모르겠어요!! proxy설정 전에는 정상적으로 작동해서 다시 proxy에 관한 코드를 다 주석처리하고 해봤는데 저렇게 뜨네요 ㅠㅠ

  • nodejs
  • react
강창민 댓글 3 좋아요 1 조회수 808

npx sequelize db:create 오류

미해결

Slack 클론 코딩[실시간 채팅 with React]

ws@DESKTOP-9H6S8B6 MINGW64 ~/Desktop/sleact/back $ npx sequelize db:create Sequelize 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 비밀번호는 확실하게 맞습니다.

  • Socket.io
  • babel
  • react
  • 웹팩
  • typescript
  • 클론코딩
wsws 댓글 1 좋아요 1 조회수 630

닉네임 부분이 잘못되어 있는 것 같습니다.

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

해당 강의 이후에 수정하시는지 모르겠지만 닉네임이 제대로 적용되어있지 않는 것 같습니다. // MsgList.js <MsgItem ... user={...} /> 현재 해당 강의 시점에서 user을 넘기고 user.nickname으로 표시를 하게 되어 있는데 { id: 'roy', nickname: '로이' } 가 계속 넘어가서 닉네임이 '로이'로만 렌더링되고 있습니다. // MsgList.js <MsgItem ... users={users} /> // MsgItem {users.find(user => user.id === userId).nickname} 저는 일단 이런식으로 수정하였는데 닉네임 부분 한번 확인 부탁드립니다! 혼동이 올 수도 있을 것 같습니다 ㅎㅎ..

  • rest-api
  • react
  • graphql
hwlim 댓글 2 좋아요 0 조회수 467

Typescript 질문드려요!

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

안녕하세요 재남님! Typescript 적용 중에 계속 안되는 부분이 있어서 질문드려요! setQueryData에 2번째 인자인 old에 대해서 타입 지정 중인데 안되는 이유가 궁금합니다!

  • react
  • graphql
  • rest-api
bj2525 댓글 1 좋아요 0 조회수 354

다른건 다되는데 typeerror 가 뜹니다..

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

1.<pre>TypeError: Cannot read properties of undefined (reading &#39;create&#39;) 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 에서 문제가 생긴거 같습니다. ㅠㅠ

  • tensorflow
  • 머신러닝 배워볼래요?
  • javascript
  • HTML/CSS
  • react-native
  • nodejs
  • react
  • express
댓글 2 좋아요 0 조회수 416

API_URL

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

이러한 API_URL은 어떻게 알 수 있을까요 ? https://www.themoviedb.org 사이트에 정보가 나와있는 걸까요 ?

  • tdd
  • react
  • redux
  • typescript
  • Next.js
댓글 1 좋아요 0 조회수 297

스타일관련문의드립니다

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

선생님 강좌 하다보니까 스타일 관련이 좀어려운 부분이 있는데요 혹시 스타일 쉽게 구현하는 법이 있나요? 미디어쿼리 z인덱스니 포지션 이런거 한번에 해결해주는 툴은 없는지요?

  • Next.js
  • redux
  • react
  • typescript
  • tdd
David Ko 댓글 2 좋아요 0 조회수 304

특정 영화의 더 상세한 정보가져오기

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

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' 이부분은 문법인가요? 감사합니다

  • tdd
  • redux
  • typescript
  • react
  • Next.js
David Ko 댓글 2 좋아요 0 조회수 340

error: password authentication failed for user "postgres"

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

도커 컨테이너도 실행 잘 되고, 서버 연결도 잘되서 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"

  • error
  • react
  • typescript
  • docker
  • postgresql
  • nodejs
  • 클론코딩
  • Next.js
프링이 댓글 3 좋아요 1 조회수 1629

인기 태그

인프런 TOP Writers

주간 인기글