묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 웹팩 관련질문입니다.
안녕하세요! 웹팩 관련 질문이있습니다. 제꺼 빌드용량이 3MB로 엄청크더라구요. 그래서 원인을 알아보니 isDevelopment가 계속 development 모드로 빌드 되는게 이유였습니다. devtool설정은 아래와 같이했는데 development이다 보니까 계속 inline source map 으로 작동해서 파일크기가 큰것같더라고요. isDevelopment ? 'inline-source-map' : 'hidden-source-map' 차이점을 보니 npm script가 start는 webpack serve, build는 webpack만 되어있는 상태였어요. 그래서 start 에는 webpack serve --env development build에는 NODE_ENV=production webpack 를 적어주니까 production모드로 되고, 300kb로 떨어진걸 확인했어요. 그런데 start는 --env development이고, build는 NODE_ENV=production인 이유가 있나요? 둘다 --env development, --env production을 적거나 NODE_ENV=development, NODE_ENV=production으로 하는것과 차이가 있나요? 공식문서에서는 webpack dev와 prod로 파일을 다르게하는 아래방법밖에 못찾았는데, "start": "webpack serve --open --config webpack.dev.js", "build": "webpack --config webpack.prod.Js 제로초님은 어떤걸 보고 하셨는지 궁금합니다. 그리고 EnvironmentPlugin은 적지 않아도 console.log(isDevelopment)를 찍어보면 process.env.NODE_ENV 상태가 출력되고 빌드/실행도 잘되던데, 아래와같이 추가해야하는 이유가 있는지도 궁금합니다. new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production',
-
미해결Slack 클론 코딩[실시간 채팅 with React]
[06:26 부분] 정규표현식으로 문자열 변환하기 부분 질문할게요
정규식으로 닉네임 찾는 부분에서요 match.match(/@\[(.+?)]\((\d+?)\)/)! 여기 이부분에서느낌표(!)를 왜 붙여준건가요? str.match(정규표현식) 이런 형태로 작성하는 건줄 알았는데 느낌표가 붙여있어서 궁금해서 질문올립니다.
-
미해결따라하며 배우는 리액트 A-Z
mousedown과 touchstart에 대한 질문입니다
안녕하세요 좋은 강의 잘 듣고있습니다. 감사합니다. useOnClickOutside 함수에서 document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); 를 이용해서 모달 창 외부를 클릭했는지 감지하는 것으로 이해했습니다. 그래서 저는 mousedown과 touchstart 대신에 document.addEventListener("click", listener) 을 써도 되지 않을까 싶어서 해봤는데 이렇게 하니까 모달창이 아예 나타나지 않더라구요. 'touchstart' 이벤트 리스너는 없어도 동일하게 동작하는 것 같은데 'click' 'mousedown' 이벤트는 어떤 차이가 있는 것인지 궁금합니다. 감사합니다.
-
미해결따라하며 배우는 리액트 A-Z
[id].tsx 에서 params 빨간줄 부분 괜찮나요?
여기서 41번째줄 params 빨간줄 지나가도 괜찮나요 실행은 잘되는데 이유가 궁금합니다 undefine이라고 하는데... 잘모르겠네요
-
미해결따라하며 배우는 리액트 A-Z
Requests에 들어가는 주소들은 어떤 기준으로 정해지나요??
사이트에 나와있다면 어디에 나와있는지 알려주시면 감사하겠습니다 !
-
미해결따라하며 배우는 리액트 A-Z
banner가 여러 번 실행됩니다
https://github.com/kkyu0718/react-study/tree/main/react-netflix-clone 코드는 위에 있습니다. 일단은 app.js 가 한번 렌더링되면서 banner도 한번 렌더링 되어야하는데 이렇게 8번이 실행됩니다. 1번 때문에 실행이 안되고 있는 걸수도 있는데 useEffect() 에서의 fetchData가 실행이 되고 있지않아 Uncaught TypeError: Cannot read properties of undefined (reading 'results') 가 발생하는거 같습니다. 코드를 다시 아무리봐도 문제는 없어보이는데 혹시 어떻게 해결해야될까요?
-
미해결
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 에러가 발생했습니다.
현재 웹개발중인 초급 개발자입니다. 현재 개발이 마무리 단계에서 웹서버랑 통신?!이 안되는 듯합니다. 로컬서버에서는 오류없이 실행이 되는데 웹서버에서는 현재 실행이 안되고 있습니다. Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 라고 콘솔창에 이렇게 오류가 표시됩니다. 원인을 모르겠습니다. 어디를 수정해야하는지... 현재 apache2로 웹서버를 연동하고 있습니다.
-
미해결따라하며 배우는 리액트 A-Z
안녕하세요 선생님~~
useEffect(() => { first return () => { second } }, [third]) useEffect를 사용할때 first는 처음 렌더링이 된후에 실행 second는 앱이 종료될때 실행되고 third는 어떠한 state가 변경될때 useEffect를 다시 실행할것인가? 로 이해를 했습니다 여기서 질문이 있는데 nav.js에서는 처음 렌더링후 우리가 스크롤을 하였을때 추가적인 렌더링이 필요하기에 useEffect로 이벤트를 만들었다 라고 이해를 하였는데 Banner.js에서는 백그라운드이미지 경로에 movie.backdrop_path를 넣는데 렌더링 되기전에 useEffect가 먼저 실행이 된것인가요? 먼저 실행이 안되면 movie안에는 아무것도 없지 않나요? 실력이 없어 질문이 일목요연하지 못한점 죄송합니다 추가로 console.log()로 찍어보니 렌더가 되고 useEffect()가 실행이 되어서 setmovie로 스테이트를 set해주고 그래서 스테이트가 바뀌니 다시 렌더가 되고 근데 문제는 처음에 렌더가 될때 movie가 비었기 때문에 에러가 떠야하는데 순서가 위와 같이 나옵니다 렌더 에러 이펙트 렌더가 맞지 않나요?
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
웹팩 한가지 질문이 있습니다.
안녕하세요! 웹팩설정에서 질문이있습니다. 알거같다가도 헷갈려서 질문드려요! "webpack.config.ts 파일 내에서 const require 방식이 아닌 Import를 사용가능한 이유"가 어느부분때문인가요? tsconfig.json 에서 module을 esnext로 최신으로 쓰겠다고 설정했으므로 tsconfig를 웹팩이 먼저 읽어서, 웹팩 파일내부에서도 commonjs방식이아닌 import 방식이 가능한것이라고 이해하면 맞을지 궁금합니다. 그런데 이렇게 이해하면 tsconfig-for-webpack-config 파일에서는 또 module을 commonJs 로 해주기때문에 조금 헷갈립니다,,
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. nextjs & typescript 질문있습니다.
안녕하세요. nextjs에 타입스크립트를 적용하고, eslint를 적용해 연습을 해보려는데 기존에 nodebird에서 작업했던 applayout을 구현하려고 합니다. import React from "react"; const AppLayout: React.FC = ({ children }: { children: React.ReactNode }) => { return <div>{children}</div>; }; export default AppLayout; 일단 여기까지는 문제가 없지만 index.tsx에서 에러가 발생합니다. 구글링 해봐도 단순히 children을 넘겨주지 않게 하면 된다고 하는데 이해를 잘 하지못해서 질문드립니다. 감사합니다.
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
배운 내용을 토대로 swr을 이용하여 프로젝트를 하고 있는데요!
const {data, error, revalidate}=useSWR(주소, fetcher) -> 주소: fetcher 함수 실행을 요청할 주소 fetcher: 어떤 기능을 수행할 지 정의해 둔 함수 요청이 성공되면, revalidate 함수가 실행된 뒤, data로 응답을 받아와서 응용할 수 있다. 이렇게 이해했는 데 맞을까요? 그리고, fetcher는 하나가 아니라 여러가지를 만들어도 괜찮을까요? get을 할 수 있는 fetcher, post를 할 수 있는 fetcher 등 나눠서 사용할 수 있을까요? 그리고 프로젝트를 함께 진행하고 있는 친구가 회원가입을 하기 위해 post를 해줬고, 성공 시 response로 관련 데이터를 보내주는데 /api/user에 굳이 userData를 넣어서 또 get으로 받아볼 수 있도록 해야 하냐고 물어보던데 당연히 필요한 거 아닌가..? 라는 생각이 들지만 명확한 근거를 모르겠어서 질문드립니다.
-
미해결Vue.js + TypeScript 완벽 가이드
깃헙 권한 요청드립니다
eonhwakim / eonhwa97@gmail.com
-
해결됨실전 프로젝트로 배우는 타입스크립트
프론트개발관련모듈질문
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요!! 강의 잘듣고있습니다! 질문을 자주해서 죄송합니다 ㅠㅠ 강의를 듣다가 궁금한 점이있습니다. 프론트 개발쪽은 axios 모듈을 사용한다면 html쪽에도 cdn(<script>) 방식으로 선언을 하고 모듈을 직접적으로 사용하는 js/ts 파일에도 import로 선언을 총 2곳에 해야하나요??
-
해결됨실전 프로젝트로 배우는 타입스크립트
변수 선언 할때 타입 선언과 타입 단언 관련 궁금점이있습니다.!
안녕하세요! 강의잘듣고있습니다!! 타입 선언과 동시에 타입단언을 할때 보통 어떤 식으로 사용하는지 궁금해서 문의남깁니다! 1.const deathsTotal: HTMLParagraphElement = $('.deaths') as HTMLParagraphElement; 2. const deathsTotal = $('.deaths') as HTMLParagraphElement; 영상에서는 선언할때 타입은 빼고 단언만 하고 마무리하시던데 대부분 단언 하는 경우에는 선언 할때 타입은 안적나요??
-
해결됨타입스크립트 입문 - 기초부터 실전까지
타입 단언 관련 질문이 있습니다!
안녕하세여 강의잘보고있습니다! 타입 단언에 대해 궁금한점이있습니다. as 로 타입 단언을 해주면 null 같은 예외처리를 안해줘도 되는 건가여? as 로 단언 해도 null이 들어올 수 있는거아닌가요??(빨간 경고줄이 사라져서 여쭈어봅니다..) 아니면 단언을 한다는 것이 무조건 이것만 들어온다? 이런 느낌으로 받아 들이면될까요??..
-
해결됨Node.js에 TypeScript 적용하기(feat. NodeBird)
ts import 에러
Relative import path "express" not prefixed with / or ./ or ../deno(import-prefix-missing) 안녕하세요! node교과서부터 강의 듣고 있는 수강생입니다! 다름이 아니라 아래 에러가 발생중인데 검색해도 잘 나오질 않더라구요 ... 예전에 Deno로 개발한 적이 있는데 그때 설정을 잘못 건든건지.. 죄송하지만 한 번 봐주시면 감사하겠습니다! [index.ts] [프로젝트 구조] [tsconfig.json]
-
미해결프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
Preload Components 관련 질문입니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 좋은 강의 감사합니다. function lazyWithPreload(factory) { const Component = React.lazy(factory); Component.preload = factory; return Component; } 혹시 이 코드를 typescript로 바꾸려면 어떻게 해야 할까요? 코드를 이런식으로 바꿨는데 Component에는 preload 속성이 없네요 ㅜㅜ function lazyWithPreload( factory: () => Promise<{ default: React.ComponentType<any>; }> ) { const Component = React.lazy(factory); Component.preload = factory; return Component; }
-
해결됨Redux vs MobX (둘 다 배우자!)
next 에서 mobx
여기있는 예제를 보고 next 에서 mobx 사용중인데 https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18 깃헙코드: https://github.com/ivandotv/mobx-nextjs-root-store 참고로 저 예제에선 rootStore를 각 store 마다 생성자에 넘겨주긴했지만 직접적으로 rootStore를 사용하지 않았습니다. 그러나 제가 사용하는 서비스는 A store B store가 있을때 B store에서 action이 발생했을때 A store 에대한 상태가 바뀌어야되서 rootStore를 생성자로 받아야될것같더라고요 이 예제를 참고했습니다. 저기서 store 만들떄 RootStore 만들고 Counter Store에 CountStore 에 this 를 넘겨줘서 이렇게 rootStore 를 받고있는데 mobx devtools 보니까 makeObservable 에 root 를 넣지도 않았는데 devtools 에서 countStore 안에 RootStore가 있고 그 RootStore 안에 countSotre가 있고 1. 이렇게 재귀처럼 state 가 존재하는데 성능에 영향을 미칠까요? 2. 특정 변수만 observe 하고싶지 않은데 어떻게 하는게 좋을까요? 전 makeobservable 에 observable을 설정안해주면 안될줄 알았는데 devtools를 보니 rootStore가 있어서요. devTools에 있는 이유가 아마 annotation 에서 observable를 세팅해주는건 observable한 값이 변경됬을때 observer() 를 감싼 컴포넌트에서 리렌더링 하기위해 있는것같더라고요 2-1. 제 개인적으로 이 문제를 해결해보고자 이런식으로 넣긴 했거든요 makeObservable 의 첫번째 인자가 target 인데 감지할 state 를 넣는것같더라고요 두번째 인자에는 annotation (action인지 observable인지)붙혀주는것같아서 첫번째 인자에서 this 는 클래스를 가르키니까, root 도 같이 traget 된것같아 this에 대한 값을 바꾸면 될것같아서 state 변수를만들고 const state = this; 를 하면 참조되는 문제때문에 {...this} 이런식으로 복사해주고 root를 undefined 해주고 makeObservable에 this 대신 state 변수를 넘기니 rootStore가 devtools에 안나오는데 이렇게 해도 되는건가요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
인피니티 스크롤 시 데이터 일부를 가져오지 못하는 문제
채팅방에서 새로운 데이터를 입력한 후, 스크롤을 위로 올려 다음 페이지를 로드하면 다음 페이지 값의 일부가 사라져서 출력되는 것 같습니다. 사진에서 5를 새로 입력했습니다. 그리고 나서 위에 닿을 때까지 천천히 스크롤하여 새로운 페이지를 불러오면 8 다음에 있어야 할 9를 불러오지 못했습니다. 테스트는 강좌 깃헙의 front 폴더와 back 폴더에 있는 코드로 진행 했습니다. 버그인 것인지, 페이지를 불러오는 과정에서 문제가 생긴건지 궁금합니다ㅠㅠ..
-
해결됨타입스크립트 입문 - 기초부터 실전까지
밑줄 안생길때 해결법
질문은 아니지만 도움될까해서 올려요 코드에 밑줄 안쳐지시는분들은 먼저 아래에 질문/답변 글에 나와있는 설정 다 따라 하신 후에 상단에 let todoItems 옆에 노란 글씨로 eslint is disabled since its execution has not been approved or denied yet .. 어쩌고 뜨는 곳 그 밑에 줄에 조그만 파란 전구 눌러서 무슨 창 나오면 allow 누르면 생깁니다. 참고하세요