173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Slack 클론 코딩[실시간 채팅 with React]
9분57초 쯤에 질문 있습니다. 실제 서비스라고 가정했을 때 사용자가 저 sleact에 focus를 두지 않고 다른 탭을 사용한다면 지금과 똑같이 대화가 와도 sleact에 focus를 두지 않는 한 채팅이 화면에 반영되지 않는건가요?
미해결
프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식
요렇게 했더니 CommonJs문법이어서 npx webpack 에러나는데, package.json에 "type":"module", 로 해서 에러나는건가여? ESM방식으로 webpack.config.js를 만들면 되는게 맞나여?
미해결
웹 게임을 만들며 배우는 Vue
현재 방식에서는 볼의 색상을 표현할떄 computed:{ backGround(){ let background; if(this.number <=10){ background ='red'; } else if(this.number <=20){ background='orange'; } else if(this.number<=30){ background='yellow'; } else if(this.number <=40){ background ='blue'; } else{ background='green'; } return {background,}; } }, 이런식으로 computed에 넣으신뒤 바뀌는구조로 갔는데 mounted(){ if(this.number <=10){ this.color ='red'; } else if(this.number <=20){ this.color='orange'; } else if(this.number<=30){ this.color='yellow'; } else if(this.number <=40){ this.color ='blue'; } else{ this.color='green'; } }, 이런식으로 mounter()로해서 하게되는것과의 차이가 (현재 컴포넌트에서는 동일하게동작) 실제 자식컴포넌트가 삭제가 안되고 재사용을 하게되는경우엔 computed로 사용하게된다면 실시간으로 반응성이되지만 mouted로 하게되면 자식컴포넌트가 삭제가된것이 아니기때문에 반응을 안하기때문에 computed로 사용한것이다 2. 캐싱 때문도 있고 라고 이해해도 될까ㅓ요?
미해결
프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식
안녕하세요 수강후기를 어디에 남기나요? 수강후기 남기면 수료증 나오나요?
미해결
프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
다른 QnA 글들이나 정한님 답변 글도 다 읽어봤습니다. 현재 강의를 들을때에 개발 환경을 구축하는 것에 대해서 어려움을 많이 토로하는것 같은데요 그래서 해당 강의를 강의만 들으면서 현재 시점의 빌드 도구(ex vite, rollup.js , parcel, etc... )들과 달라진 점이 무엇인지 AI와 학습하는 정도로만 한다면 배움을 적게 가져갈까요 ? 추후에 해당 강의 업데이트라던지 혹은 다른 강의를 올리실 예정이 있는지도 궁금합니다. 감사합니다 정한님
미해결
웹 게임을 만들며 배우는 Vue
npm run build 실행시 위와 같은 메시지만 뜨고 하단의 app.js 화면같이 뜹니다. 다른분의 응답처럼 이거 경로도 바꿔봤고요. 실행하면 개발자 도구에서 요렇게 되는데요? html 출력과 app.js가 강사님과 다른이유 문의드립니다. 그리고 다른분응답에 github에서 소스 비교해보라고 남기신 글도 있던데 주소도 궁금합니다. 감사합니다.
해결됨
프론트엔드 빌드 시스템 완벽 가이드 - Part.1: 모듈 시스템
안녕하세요, 강의 잘 듣고 있습니다! 최근 개인 프로젝트로 래핑 라이브러리를 만들고 있고 번들러로 Rolldown을 사용하고 있습니다. 강의에서 언급된 Rollup과 구조가 유사하고 기본 개념은 거의 동일하다고 알고 있습니다. Rolldown을 사용하고 있는 상황에서 Webpack이나 Rollup의 구조를 먼저 이해하는 것이 학습에 도움이 될까요? 학습 우선순위나 접근 방식을 어떻게 잡는게 좋을지 궁금합니다.
미해결
프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
요즘에는 Webpack 외에도 Rollup, Rolldown, tsup, tsdown, Vite, esbuild 등 다양한 번들러가 있는 것으로 알고 있습니다. 실무에서는 어떤 기준으로 각 번들러를 선택하게 되는지, 그리고 실제로 어떤 도구들이 많이 사용되는지 궁금합니다. 예를 들어, UI 컴포넌트 라이브러리를 만들 때는 어떤 번들러를 주로 사용하는지, Lodash 같은 유틸리티 라이브러리에서는 어떤 번들러가 효율적인지 이런 식의 상황별 선택 기준 이나 실무 사용 경향 을 알고 싶습니다. 제가 찾아보기로는 Vite 는 개발 서버에 강하고, Rollup 은 라이브러리 번들에, esbuild 나 tsup 은 속도에 특화되어 있다고 하더라고요. 실무에서는 이런 특성을 어떤 기준으로 판단해 선택하는지 조금 자세하게 알고싶습니다! 그리고 조금 시간이 지난 강의여도 정말 얻을게 많은 강좌라고 생각합니다. 오히려 제가 최신버전으로 고쳐보며 정말 많은 것을 배우고 있습니다. 질문 남기면서 좋은 강의 항상 만들어주셔서 감사하다는 말씀도 함께 전달드립니다! 강사님의 팁이 녹아져있는 실전 프로젝트 같은 것도 나중에 기회가 된다면 들어보고 싶습니다!
해결됨
Slack 클론 코딩[실시간 채팅 with React]
settings/ts 폴더 front로 바꿔서 진행할 경우 셋팅 강의 하나도 들을 필요없이 바로 섹션2부터 진행해도 되는건가요?
미해결
Slack 클론 코딩[실시간 채팅 with React]
강좌에서 언급한대로 직접 세팅하기보다는 그냥 settings/ts 폴더 클론받아서 하시는 것을 추천드립니다. 직접 세팅하기에는 버전이 자꾸 달라져서 세팅법이 바뀌고, 입문자분들한테는 버겁습니다. 폴더가 많아서 헷갈리니 back 폴더는 백엔드 용으로 남겨두시고, setting/ts 폴더를 front 폴더로 바꾼 뒤 나머지 폴더는 전부 지워버리세요. 라는 말씀에 따라 다음과 같이 세팅을 했는데, alecture 폴더로 들어가 npm init 을 하라고 하시는 부분이 이해가 어렵습니다.
해결됨
프론트엔드 빌드 시스템 완벽 가이드 - Part.1: 모듈 시스템
안녕하세요. 좋은 강의 감사합니다. 캐싱 관련해서 이해가 잘 안 되는 부분이 있어 질문드립니다. 강의에서는 modules[moduleId][0].call 의 첫 번째 인자로 module.exports 를 넘겨주는 것이 캐싱과 관련 있다고 설명해주셨는데요. 제가 코드를 보기엔 module.exports 가 thisArg 로 전달되긴 하지만, 실질적인 캐싱은 함수 내부에서 세 번째 인자인 module 객체를 직접 수정하면서 ( module.exports = { add }; ) 이뤄지는 것으로 보입니다. 즉, thisArg 로 전달된 module.exports 는 실제로 의미 있는 쓰임새가 없고, 캐싱은 module.exports 를 직접 설정함으로써 발생하는 것 아닌가 싶은데, 혹시 제가 잘못 이해한 걸까요?
미해결
프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식
안녕하세요! 일단 멋진 강의 감사합니다. 정말 잘 듣고있습니다 🙂 강의 수강 중 하나 제안하고 싶은게 생겨서 질문 남기게 되었습니다. 이벤트 캡쳐링과 버블링에 대한 개념을 쉽게 설명해주셨는데요, 이 캡쳐링과 버블링이 실제 코드 동작시에 어떤 영향을 주는지도 설명에 포함되면 좋을것 같았습니다! 예를들면 버블링의 경우는 클릭이벤트가 타겟요소에 부모까지 영향을 받아서 의도치 않는 동작이 발생될 수 있고, 그걸 막기 위해서 강의에서처럼 stopPropagation()을 해주는걸로 알고 있습니다. 그렇다면 캡쳐링에 경우는 어떤 경우에 문제가 되고 언제 stopPropagation()을 사용하면 좋은지 궁금해지더라구요. 강사님의 귀에 쏙쏙 박히는 설명에 한 줄 추가되면 좋을것 같아 의견 남겨보았습니다. 오늘도 고생 많으셨습니다~~
미해결
Slack 클론 코딩[실시간 채팅 with React]
웹소켓 커넥션은 유지되어 데이터까지 들어오지만 view update는 브라우저 focus되어야만 발생하는걸 보여주셨는데요 원인과 대중적인 해결방법이 있는지 궁금합니다 (사파적 방식x, 대중적인 정파적 방식o)
미해결
Slack 클론 코딩[실시간 채팅 with React]
useEffect가 잘못짜면 디버깅이 골치아파서 관리에 신경을 쓰는데요. 제로초님의 useEffect 사용패턴이 궁금합니다 deps가 같은 것 끼리는 전부 묶어둔다 deps가 같아도 로직 범주가 다르면 분리한다 저는 보통 2번을 선호하는데 useEffect 많아져서 드러워집니다. 그렇다고 1번은 더 머리가 아픈데,, 제로초님의 기준이나 이 문제에 대한 나름의 best practice가 있으신지 궁금합니다
미해결
Slack 클론 코딩[실시간 채팅 with React]
강의에서 말씀주시는 것 처럼 가급적 라이브러리를 쓰고 싶은데요. 제가 경력이 짧아서인지 라이브러리 서치에 애를 먹습니다 "가장 대중 픽" 찾는다고 할 때 어떤 방법으로 접근하시는지 궁금합니다 제 생각엔 다운로드 수..는 순위가 아닌 절대량이라 모호하고 이 기능은 요즘 이게 좋더라하는 얘기를 나누는 커뮤니티가 따로 있으려나요? npm이나 구글링해서 나오는 무수한 라이브러리들 다 비교하는건 거시기한 상황입니다
미해결
Slack 클론 코딩[실시간 채팅 with React]
react 개발하다보면 대부분의 파일에서 export default 하나만을 하게 되는데요. 아래 2가지 패턴 중 2번을 주로 사용하시는 것 같아서 이유가 있으신지 궁금합니다 export default function ABC() const ABC = () => {} export default ABC; 저는 1번을 강하게 선호하고 왜 굳이 하나의 함수에 대한 정의를 둘로 나눠 거리를 벌리는지 이해가 안 가는데요, 코딩 고수(?)들이 주로 2번 패턴을 사용하셔서 이유가 궁금합니다
미해결
Slack 클론 코딩[실시간 채팅 with React]
npm run dev시 새로운 에러가 발생하여 재질문 드립니다. http://localhost:3090/Login 연결시, 크롬에서 Failed to compile. 가 발생하였습니다. Module not found: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/layouts' layouts/workspace.tsx 터미널 메세지입니다. ERROR in ./pages/Login/index.tsx 17:0-39 Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login' @ ./layouts/App.tsx 7:9-31 @ ./client.tsx 9:0-32 12:95-98 ERROR in ./pages/Login/index.tsx 19:0-37 Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login' @ ./layouts/App.tsx 7:9-31 @ ./client.tsx 9:0-32 12:95-98 ERROR in ./pages/SignUp/index.tsx 17:0-39 Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp' @ ./layouts/App.tsx 11:9-32 @ ./client.tsx 9:0-32 12:95-98 ERROR in ./pages/SignUp/index.tsx 23:0-37 Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp' @ ./layouts/App.tsx 11:9-32 @ ./client.tsx 9:0-32 12:95-98 ㅡ tsconfig.json 파일입니다 "paths": { "@hooks/*": ["hooks/*"], "@components/*": ["components/*"], "@layouts/*": ["layouts/*"], "@pages/*": ["pages/*"], "@utils/*": ["utils/*"], "@typings/*": ["typings/*"] } ㅡ webpack.config.ts 파일입니다 resolve: { extensions: ['.js', '.jsx', '.front', '.tsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path.resolve(__dirname, 'pages'), '@utils': path.resolve(__dirname, 'utils'), '@typings': path.resolve(__dirname, 'typings'), // 경로 폴더들 }, }, ㅡ 현재 터미널 경로입니다 /Desktop/study/react/zerocho/sleact/setting/front ts 폴더에서 설정 후, front 라는 폴더명으로 바꾸어서 진행중입니다. 감사합니다
미해결
Slack 클론 코딩[실시간 채팅 with React]
강의를 클론 받은 후, /sleact/setting/ts 경로에서 npm i 후 npx webpack을 입력하면 아래와 같이 에러가 나옵니다. 다른 컴퓨터로 했을때는 작동 되지만, 제가 사용중인 컴퓨터에서는 작동되지 않습니다. npm i 입력 후 터미널 메세지 ㅡ up to date, audited 643 packages in 4s 74 packages are looking for funding run npm fund for details 26 vulnerabilities (3 low, 8 moderate, 12 high, 3 critical) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run npm audit for details. npx webpack 명령후 입력후 터미널 메세지 [webpack-cli] Failed to load '/Users/kanghyun/Desktop/study/React/zerocho/sleact/setting/ts/webpack.config.ts' config [webpack-cli] SyntaxError: The requested module 'webpack' does not provide an export named 'Configuration' at ModuleJobSync.runSync (node:internal/modules/esm/module_job:387:37) at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:427:47) at loadESMFromCJS (node:internal/modules/cjs/loader:1565:24) at Module._compile (node:internal/modules/cjs/loader:1716:5) at Object.loadTS [as .ts] (node:internal/modules/cjs/loader:1826:10) at Module.load (node:internal/modules/cjs/loader:1469:32) at Function._load (node:internal/modules/cjs/loader:1286:12) at TracingChannel.traceSync (node:diagnostics_channel:322:14) at wrapModuleLoad (node:internal/modules/cjs/loader:235:24) at Module.require (node:internal/modules/cjs/loader:1491:12)
미해결
vivado 2017.4 webpack 설치 를 하려고 하는데 vivado 홈페이지에 들어가서 아카이브-> 2017.4를 눌러도 웹팩이 안뜨고 파일 크기가 큰 애들만 뜨는데,, 어떻게 설치해야하나요?
해결됨
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. login, singup, workspace 페이지에서 data 가 있는 경우, Redirect 하려는 함수에서 다음과 같은 에러가 공통으로 나타납니다. => 'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345) 어떻게 해야 할까요?
