묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
Items 페이지 내 이미지 깨지는 오류
동균님 안녕하세요. 좋은 강의 공유해주셔서 감사합니다 :) 지금 페이지를 로컬에서 띄워보면서 페이지 분석을 하고 있는데요, Items 페이지의 보드들의 이미지가 깨져서 보입니다. 또한 보드 클릭시 이동하는 링크도 현재 존재하지 않아 리다이렉트되는 것 같습니다. Network탭을 확인해보니 이미지 파일에 대한 Response 가 500 으로 오고 있습니다. land-mfg.com 의 대대적인 홈페이지 개편이 있었던 걸까요..? 참고목적으로 스크린샷 공유드립니다 :)
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
3-2) 서비스 탐색 및 코드 분석 내 소스코드 링크 오류
안녕하세요! 좋은 강의 공유해주셔서 감사합니다. Part1 에 이어 Part2도 즐겁게 수강하고 있습니다 :) 다름이 아니라 3-2) 서비스탐색 및 코드 분석 강의 하단에 있는 소스코드의 링크가 문구와는 다르게 lecture-4 를 가리키고 있습니다. lecture-3로 변경이 필요할 것 같습니다. clone하고 나서 순간 좀 당황했네요 ㅎㅎ..
-
미해결오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1
22년 최신버전 visual studio 사용 솔루션 탐색기 셋팅
222년 기준 최신 버전 vs를 깔고 강의대로 진행해보았을 때 솔루션 탐색기에 목록이 다른 점이 많아서요.. 구버전으로 새로 까는 것이 나을까요? 아니면 여기서 해결방안이 있을까요?
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
yarn run client
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 환경 세팅하고 yarn run client으로 "simple sns" 정상출력 확인 후 목록뷰 구현하기에서 코드 친 후 yarn run client하니 갑자기 빈페이지에 아래 오류가 뜨는데 구글링해도 방법을 잘 모르겠습니다ㅜ
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
lazy load 의 layout shift에 대하여
이강의에서는 이전강의에서 layout shift 에 대한 처리를 해서 현재는 발생하지 않고있지만, 보통이라면 lazy loading 을 할때 layout shift 가 반드시 따라올것같은데 image lazy loading시에는 선작업으로 무조건 layout shift를 없애주어야하는것일까요?
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
질문이있습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 먼저 좋은 강의감사합니다. 질문이있습니다. 보여주신 예제는 전부 동일한 이미지일때인데 각 이미지마다 사이즈가 다른 갤러리에서는 어떻게 적용하면 좋을까요 ? 예를들어 이런 사이트의 형식입니다. https://www.pinterest.com/seanbiehle/finterest/
-
미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
파이어베이스 관련 npm run build 에러
파이어베이스 관련 npm run build 에러 가 나와서 문의드립니다. 무엇이 에러인지를 모르겠습니다. 검토바랍니다. ./src/firebase.jsSyntaxError: /Users/ucoder/Documents/GitHub/react-firebase-chat/src/firebase.js: Unexpected token (1:22)> 1 | import {intializeApp} firebase from "firebase/app"; | ^ 2 | import "firebase/auth"; 3 | import "firebase/database"; 4 | import "firebase/storage"; import firebase from "firebase/app"; 으로 변경했으나 아래와 같은 메시지가 나옵니다. Failed to compile. ./src/firebase.js Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase').
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
수강전문의 next js 버전업데이트
강의는 next 11버전인데 지금은 12버전더라구요 혹시 수강하는데 문제없을까요? 그 11대응영상만 참고하면 에러사항없을까요?
-
미해결생활코딩 - React
chrome에서 화면 전환이 안됩니다...
10강 리엑트가 없다면 진행하던 도중 pure.html를 추가하여 해당 html을 확인하는 도중 마이크로소프트 엣지에서는 html이 확인되는데, 크롬에서는 확인이 되지 않습니다... 구글링했는데도 원인을 찾지 못해 질문 남깁니다 ㅠㅠ 를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
강의내용 질문
강의 7:01 부분의 16번쨰 코드내용에대한 질문입니다! 노드js는 처음이라서 우선 강의따라 흐름만 이해하면서 듣고있습니다! 16번쨰줄의 내용이 서버가 실행될때 forEach로 순회하면서 messagesRoute에서 정의한 메서드들을 실행하는 내용같은데, 작성된 문법이라면 현재 url외의 메서드들도 순회하면서 전부 실행 시키는 중인가요??
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
setEditingId 질문 있습니다!
안녕하세요? page를 처음 렌더링하고 MsgItem의 수정을 클릭하여 startEdit을 실행하면 setEditingId(x.id)를 실행시키는데요. 바로 console.log(x.id)와 console.log(editingId)를 찍어보면 x.id는 잘 나오는데 editingId의 경우 처음 null 이 오고 계속 전값들이 찍혀서요(계속 클릭한 전 x값들이 editingID에 찍힘). setEditingId 함수로 editingID 값 변경까지 시간 딜레이가 있어서 일까요? 작동은 잘 합니다만, 공부하느라 console.log를 찍어보다 의문점이 들어서요!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
react-router-dom v6 써서 component 에 hoc 적용하는법 찾으시는 분들
App.js 에서 react-router-dom v6 버전에 맞게 문법을 Switch 대신 Routes 로 바꾸는 부분과 component 대신 element 로 바꾸시고 꼼수(?)로 Auth로 감싼 컴포넌트를 새로 정의해서 넣으시면 작동은 됩니다..
-
미해결웹 게임을 만들며 배우는 React
common js 방식으로 내보내기를 하던 도중 문제가 생겨 질문 드립니다!
강의에서는 es6 방식을 사용하지만, common js도 알아두어야 할 것 같아서, 혼자 common js를 사용해보던 도중 문제가 발생하여 질문 드립니다! 문제 요약: common js 방식으로 내보내기 한 후, 같은 경로 상의 다른 파일에서 require를 했을 때, 빈객체가 required됩니다. 세부사항 1. 상황 TicTacToe.jsx에서 CLICK_CELL이라는 상수를 내보내어, Td.jsx라는 동일 경로의 다른 파일에서 그 상수를 받아 오려 하는데, 빈 객체가 required 되어 CLICK_CELL의 값이 undefined로 나타납니다. 해당 상수는 Td.jsx가 아닌 다른 경로에 있는 파일에서는 정상적으로 required됩니다! 2. 코드 # 파일 구조 # TicTacToe.jsx # Td.jsx console.log 결과 3. 추측 common js를 통해 같은 경로 상의 파일에서 모듈을 받아오는 경우에 문제가 생기는 것 같습니다. 다만 정확히 어떤 문제인지, 또 어떻게 해결할 수 있는지 해결 방법을 끝내 찾지 못해 질문 드립니다. *깃헙 주소: https://github.com/Parkhanyoung/React-zerocho-basic 항상 좋은 강의 감사드립니다! 덕분에 정말 즐겁게 공부하고 있습니다 ㅎㅎ
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
무한스크롤 관련
무한스크롤 구현시 <div ref={fetchMoreEl} /> 이부분이 화면스크롤시 제대로 감지가 안되는 건지 useEffect 에서 intersecting 이 계속 false 더군요 제가 해결한 방법은 <div ref={fetchMoreEl} style={{ border: '1px solid white' }}></div> 이렇게 입력해서 정상작동하는 것을 확인했습니다. 비슷한 문제 발생시 참고용~
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Router node v.6 바뀐 부분
이렇게 적으면 v6에서 작동합니다. 앞에 분들이 여럿 글을 적어 주셨지만 정리된 게 없는 것 같아서 이렇게 올립니다. 공식문서에 나와있지만 영어가 어려우신 분들이나 처음 공부하시는 분들은 이거 참고 하시면 될 겁니다. 그리고 Link부분은 아직 안 나왔는데 적혀있어서, 오류떠서 주석 처리 했습니다. ```js import { BrowserRouter, Route, Routes, //Link } from "react-router-dom"; import LandingPage from './components/views/LandingPage/LandingPage' import LoginPage from './components/views/LoginPage/LoginPage' import RegisterPage from './components/views/RegisterPage/RegisterPage' function App() { return ( <BrowserRouter> <Routes> <Route exact path="/" element = {<LandingPage/>}/> <Route exact path="/login" element = {<LoginPage/>}/> <Route exact path="/register" element = {<RegisterPage/>}/> </Routes> </BrowserRouter> ); }
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
jest와 @testing-library/jest-dom
너무 기초적인 질문인 것 같아 걱정이지만 질문드립니다~! 1. jest와 @testing-library/jest-dom는 어떤 차이가 있고 각각의 역할이 궁금합니다. 2. @testing-library와 함께 사용하는 이유와 jest만 따로 사용하지는 않는 이유가 궁금합니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
라우트 이동 및 새로고침시 각 컴포넌트별 state 유지
안녕하세요 제로초님 포트폴리오를 nextjs로 새로만들면서 작업중인데 라우트 이동 및 새로고침시에도 각 컴포넌트별 state를 유지하는 효율적인 방법을 좀 알고싶습니다. url : https://dv-node-portfolio.herokuapp.com/git : https://github.com/dvisign/new-next-portfolio전에 리액트로 할때는 useHistory를 이용한 커스텀 훅스 route state에 저장하였는데 nextjs에서는 사용할수가 없어서 useRouer로 저장이 가능한가 확인해보았는데 안되더라구요 그래서 다음으로 알아본것이 redux-persist 라이브러리였는데 리뉴얼된 강좌에서 ssr때문에 HYDRATE 액션때문에 사용은 해보지 않았고 리액트로 redux-persist 라이브러리를 사용했을때 로컬스토리지에 담는것같아 이용하지 않았습니다(개인적으로 localstorage를 신뢰하지 않는 개인적 성향때문에 그렇습니다.) 예를들어서 사이드 네비게이션이 열려있는것을 닫았다가 다른 라우트로 이동했을때 다시 열려있는 현상입니다. 스크린샷을 첨부합니다. 부단 이 부분 뿐만 아니라 나중에 더 만들다보면 이런 state유지 할것들이 더 많아질텐데 어떻게 유지 시키는것이 가장 효율적인 방법일까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
댓글작성 도중 해결안되는 에러가 있어 여쭤봅니다...
댓글 등록하고 버튼 눌렀을때 User 값이 안들어오는 것처럼 에러가 뜨는데 그 상태에서 바로 새로고침하면 값이 들어가있네요 분명 통신과정에서 올바르게 include한 전체 값을 들고오는게 맞는데 뭐가 문제인걸까요....?
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
더보기 버튼 클릭 시 경고메세지가 나옵니다.
안녕하세요? 더보기 버튼을 클릭하면 아래쪽으로 20개씩 영화 리스트가 쭉 뻗어나가는 기능은 정상적으로 작동합니다. 그런데 더보기를 누를 때마다 저런 경고메세지가 나옵니다. 다른분들 글을 보고 참고해서 MainMovieImage에 초기값으로 null을 넣어주었고, 선생님 코드와 비교해봐도 다른점이 없습니다. 그리고 저는 웹 페이지를 처음 로드했을 때는 아무런 에러가 없다가, loadMore 버튼만 누르면 이러는데..어떻게 해결해야 할까요 ㅠ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
saga에서 무한 api요청의 원인을 알 수 있을까요..?
안녕하세요 제로초님 완강 후 덕분에 3군데에서 면접을 보게되어서 복습겸해서 작게나마 오픈api 활용해 영화정보 보여주는 프로젝트를 진행중 입니다. redux 셋팅을 마치고 메인 페이지에서 아래처럼 dispatch를 하고있는데 여기는 사가입니다. 이렇게요.. 어느부분이 문제인지 찾기 위해 dispatch를 하지 않고 그냥 메인페이지에서 axios호출을 하면 정상작동을 합니다. effect 콘솔도 한번만 찍히구요.. 그렇게 4시간정도 찾아보면서 수정을하다가 그럼 결론은 saga의 문제구나를 깨닫긴했는데 도대체 어디가 문제인지 알 수가 없네용 강의 프로젝트가 아니긴 하지만 한번만 확인해 주실 수 있을까용?? 전체코드가 필요할 수 도 있을 것 같아서 깃헙주소도 남겨 놓겠습니다! 바쁘실테지만,, 미리 감사합니다! 취업후기도 꼭 남길게요😄 https://github.com/psw0962/movie-reviews