25%
29,700원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
manually reload해야 컴파일된 파일 적용됨
우선 원인을 찾아달라고 부탁드리는건 절대 아니구요. 다른분도 혹시 저 같은 분이 있는지 알고 싶어서 글남겨요. 일단 컴파일 잘되고 수동으로 브라우저 새로고침하면서 작업하면 되니까 문제는 없는데 불편함이 좀 있기도하고 원인도 알고싶어서요. 구글링을 해보고 하는데도 아직 제대로 해결을 못했거든요. 제 환경은 아래와 같아요 ℹ️ 환경 피씨:ubuntu 20.04 브라우저: 크롬 91.0.4472.164 💁 webpack-dev-server 컴파일 잘 되고 수정된 부분 반영 잘되는데, 브라우저가 새로고침이 자동으로 되지 않는 현상. 저는 참고로 '@pmmmwh/react-refresh-webpack-plugin' 이 패키지 설치 안해도 hot reload 잘 됐었거든요. 예전 노드버드했을때요. 그래서 그때 이거 그냥 제거하고 했었고. 제가 바닐라로 작업하는 프로그램에도 웹팩으로 설정했을때도 따로 위에 패키지 안하고도 핫리로드 잘돼서 그냥 원인 모를 특정환경에서 리로드안될 때만 적용하면 되겠다 생각하고 있는중이었는데.ㅠ ⭐⭐ 시도 ✅ ts는 안해봐서 강의대로 따라했는데 새로고침이 ㅠㅠ. 컴파일은 잘 됩니다. ✅ @pmmmwh/react-refresh-webpack-plugin 평소처럼 빼고 해보도 넣어봐도 안되네용.ㅠ ✅ 마지막으로 원본 깃허브에 있는 소스도 그대로 수정없이 npm i, npm run dev 해도 새로고침은 안되고 컴파일만 잘되는현상입니다. 아래처럼 브라우저 콘솔에 찍혀야하는데 저게 안찍히네요. 그게 원인인거 같은데 이유는 아직 못찾았습니다. 웹팩설정을 첨부하려다 원본파일도 현상이 동일해서 의미가 없는거 같아서 그냥 문의 글만 올려봅니다 .혹시 저같은 사람 또 없나해서요~ 일단은 너무 시간을 잡아먹는거 같아서 그냥 수동으로 새로고침해가면서 작업하려고요. 긴글 읽어주셔서 감사합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
core-js 패키지 설치에 대한 질문
안녕하세요 제로초님. . 제로초님 sleact를 클론 받아서 확인을 하다보니 core-js라는 패키지가 설치되어있던데요. 검색을 해보니 babel-polyfill을 대신해서 사용하는 것 같더라고요. . 그렇다면, 자바스크립트 최신 문법을 사용하기 위해서는 core-js를 설치하고 웹팩에 설정을 해줘야하는지요..? 그렇다면 아래와 같이 설정을 하면 될까요? ["@babel/preset-env", { "targets": { "browsers" : ["last 2 versions", "ie >= 11"] }, "useBuiltIns": "usage", "corejs":3, "shippedProposals": true }]
- 미해결Slack 클론 코딩[실시간 채팅 with React]
공식문서
안녕하세요. 제가 next에 typescript 적용하려고 제로초님 수업듣고 next 공식 문서를 한번 읽어보고 있었는데요. 공식 문서에는 다음과 같이 나와 있습니다. npx create-next-app --ts # or yarn create next-app --typescript npm run dev # You'll see instructions like these: # # Please install typescript, @types/react, and @types/node by running: # # yarn add --dev typescript @types/react @types/node # # ... TypeScript strict mode is turned off by default. When you feel comfortable with TypeScript, it's recommended to turn it on in your tsconfig.json. ------------ 그래서 제가 그대로 따라 해봤는데 tsconfig.json 의 strict 기본 값이 true 네요. 공식문서에는 turned off 가 기본 값이라 나와있고 그러면 false 로 나와있어야하는 거 아닌가 해서요. 그리고 npm run dev 했을 때 # You'll see instructions like these: ~~ 이 부분 밑에 주석으로 써져 있는 글(공식 문서에 나와있는 글) 도 안나오고 (직접 해봤을 때) 그냥 바로 되는데 공식문서도 업데이트가 느린 경우가 있나요? 조금 헷갈리네요 "strict": true,
- 미해결Slack 클론 코딩[실시간 채팅 with React]
이미지 등의 리소스 저장 위치에 대한 질문
안녕하세요 제로초님. 다소 큰 이미지가 여러개 있는 페이지 구성할 때, 프로젝트 내부에 이미지를 저장하는 것이 유리할 지 (번들 사이즈가 커지지 않을까 하는 우려) S3 등에 이미지를 저장하는 것이 유리할지 (아무래도 네트워크를 타야하므로 더 불리할 것 같은데.) 어떤 방법이 더 나은 판단이라고 생각 되시나요? 프로젝트 내부에 이미지를 저장하게되면 번들에 같이 포함된다고 생각하는데 옳게 이해하고 있는 것인지요..?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
이미지가 올라가지 않고 글자가 올라갑니다.
안녕하세요. 잘 듣고 있는데, 저는 드래그앤드랍 하면글씨가 올라갑니다.. uploads\가 아니라 /가 되어서 글씨로 나오는것같은데, 어떻게 바꿀 수 있을까요.? input type='file' 형태로 하지는 않았습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
devServer 오류 관련
다른 질문에 달아주신 답변처럼 다운그레이드로 @types/webpack-dev-server 3.11.1 버젼을 받아보기도 하였지만 오류가 사라지지 않습니다. 어떻게 해결해야 할까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
Error: Cannot find module 'typescript'
npm run build시 아래와 같은 오류가 뜹니다. npm i - D @types/node typescript ts-node 다 해보았지만 오류가 동일하게 나옵니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
hot reload가 작동하지 않습니다ㅠㅠ
안녕하세요. 수강중에 따라하다가 막혀서 질문드립니다. clone coding중에 제 프로젝트에서 Hot reload가 안되길래 제로초님이 올려주신 깃헙프로젝트를 그대로 받아서 front에서 npm run dev를 해줬는데, 역시 화면은 잘 뜨는데 hot reload가 안됩니다. 더 자세히는 파일에 변경사항이 생긴 후 save를 해도 compile은 다시 되나 view가 업데이트 되지 않습니다. 아래는 clone 코딩 중인 제 webpack.config.ts 파일입니다. 제로초님의 Front 프로젝트 안의 config파일과 다른 점은 styled-component 설정에 대한 추가와, devServer에서 proxy설정을 삭제한 것 뿐인데...어디가 잘못된걸까요?ㅠㅠ import path from 'path'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import webpack, { Configuration as WebpackConfiguration } from 'webpack'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'; interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; } const isDevelopment = process.env.NODE_ENV !== 'production'; const config: Configuration = { name: 'newts', mode: isDevelopment ? 'development' : 'production', devtool: !isDevelopment ? 'hidden-source-map' : 'inline-source-map', resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], alias: { '@src': path.resolve(__dirname, 'src'), '@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'), }, }, entry: { app: './client', }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist/', }, target: ['web', 'es5'], module: { rules: [ { test: /\.tsx?$/, loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { targets: { browsers: ['IE 10'] }, debug: isDevelopment, }, ], '@babel/preset-react', '@babel/preset-typescript', ], plugins: [require.resolve('react-refresh/babel'), 'babel-plugin-styled-components'], }, }, { test: /\.css?$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [ new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }), new ForkTsCheckerWebpackPlugin({ async: false, eslint: { files: './src/**/*', }, }), ], devServer: { historyApiFallback: true, port: 3020, publicPath: '/dist/', hot: true, }, }; if (isDevelopment && config.plugins) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.plugins.push( new ReactRefreshWebpackPlugin({ overlay: { useURLPolyfill: true, }, }), ); } if (!isDevelopment && config.plugins) { config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true })); } export default config;
- 미해결Slack 클론 코딩[실시간 채팅 with React]
원본 사이트에서 소스 코드는 어떻게 가져오시는 건가요?
강의 초반에도 말씀하셨었는데 실제 slack에서 html과 css를 가져오신다고 들었어요. 제로초님이 가져오신 소스코드 말고 실제로 제가 브라우저의 개발자 도구를 사용해서 소소코드를 직접 가져와 클론해보고 싶은데요. 어떻게 가져올 수 있나요? 실제 웹사이트 주소는 https://slack.com/get-started#/create 여기인데요. 저 페이지에서 html은 어떻게 가져와야 하는지, 어떤 css는 다운로드 해와야 하고, 어떤 css는 css-in-js로 가져와야 하는 것인지 궁금합니다! 또 편리하게 복사해오는 방법이 있다면 그것도 알려주세요!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
styled 관련 질문입니다!
styled로 작성하는 것이 한 컴포넌트에 css를 미리 입히는 방식인데, 만약 한 컴포넌트의 css가 동적으로 바뀌어야 할 때라면 어떻게 해야하나요? 예를 들어, 어떤 웹사이트에서 theme기능을 구현하려 할 때, 같은 컴포넌트라더라도 theme마다 다른 스타일로 보여져야 할 때가 있을텐데요. 이런 경우에는 어떻게 해야할까요?
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
절대경로설정
절대경로 설정이 안됩니다.. 영상과 깃헙에 있는 것과 tsconfig설정, webpack설정 동일하게 했고, client파일에서 app을 @layouts/app으로 가져오는건 되었는데 이 부분은 절대경로가 안먹히네요. 상대경로로 하면되요.. 어디 확인 더 해야할것 있을까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
Cannot use import statement outside a module
안녕하세요. 첨부 이미지와 같은 오류가 발생해서 tsconfig.json의 "module": "esnext" 부분을 "module": "commonJs" 로 수정하니 webpack이 정상적으로 동작합니다. module을 esnext에서 commonJS로 바꾸게 되면 문제가 있을까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
className 쪽 스타일 질문 있습니다
삭제된 글입니다
- 미해결Slack 클론 코딩[실시간 채팅 with React]
userData?.Workspaces.map 타입에러가 납니다.
새롭게 로그인을 한 직후 바로 Workspace페이지로 이동하지않고 undefinded 타입 에러가 납니다. 이후 새로고침을 한번 실시하면 정상 실행됩니다. 해결방법을 모르겠어요 ㅠ
- 미해결Slack 클론 코딩[실시간 채팅 with React]
서버요청후 500에러가 발생합니다.
proxy 설정후에 회원가입 서버 요청을 진행하면 Error: secret option required for sessions ...이런 메세지와 함께 500에러가 계속 발생합니다..env 파일도 back 폴더안에 제대로 만들었는데 어떻게 해결해야할까요..?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npm run build시 에러발생
$ npm run build > alecture@1.0.0 build D:\study\sleact\alecture > cross-env TS_NODE_PROJECT="tsconfig-for-webpack-config.json" webpack [webpack-cli] Failed to load 'D:\study\sleact\alecture\webpack.config.ts' config [webpack-cli] Error: Cannot find module 'react-refresh/babel' Require stack: - D:\study\sleact\alecture\webpack.config.ts - D:\study\sleact\alecture\node_modules\webpack-cli\lib\webpack-cli.js - D:\study\sleact\alecture\node_modules\webpack-cli\lib\bootstrap.js - D:\study\sleact\alecture\node_modules\webpack-cli\bin\cli.js - D:\study\sleact\alecture\node_modules\webpack\bin\webpack.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) at Function.resolve (D:\study\sleact\alecture\node_modules\v8-compile-cache\v8-compile-cache.js:164:23) at Object.<anonymous> (D:\study\sleact\alecture\webpack.config.ts:46:68) at Module._compile (D:\study\sleact\alecture\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) at Module.m._compile (D:\study\sleact\alecture\node_modules\ts-node\src\index.ts:1225:23) at Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Object.require.extensions.<computed> [as .ts] (D:\study\sleact\alecture\node_modules\ts-node\src\index.ts:1228:12) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:14) at Module.require (internal/modules/cjs/loader.js:974:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'D:\\study\\sleact\\alecture\\webpack.config.ts', 'D:\\study\\sleact\\alecture\\node_modules\\webpack-cli\\lib\\webpack-cli.js', 'D:\\study\\sleact\\alecture\\node_modules\\webpack-cli\\lib\\bootstrap.js', 'D:\\study\\sleact\\alecture\\node_modules\\webpack-cli\\bin\\cli.js', 'D:\\study\\sleact\\alecture\\node_modules\\webpack\\bin\\webpack.js' ] } npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! alecture@1.0.0 build: `cross-env TS_NODE_PROJECT="tsconfig-for-webpack-config.json" webpack` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the alecture@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\shsim\AppData\Roaming\npm-cache\_logs\2021-07-15T15_30_20_092Z-debug.log --------------------------------------------------- 기존 alecture 폴더로 명령어 진행시 정상적으로 실행됩니다. 여러번 삭제후 해도 똑같은 에러만 표시됩네요
- 미해결Slack 클론 코딩[실시간 채팅 with React]
useEffect 쪽 disconnect 할때 return () => {} 하는 이유
삭제된 글입니다
- 미해결Slack 클론 코딩[실시간 채팅 with React]
react-custom-scrollbars 질문 있습니다.
https://www.npmjs.com/package/@types/react-custom-scrollbars 저는 여기에서 @types/react-custom-scrollbars를 깔고 다른 건 똑같이 한 뒤에 실행을 하려고 했는데, 이런 오류가 나면서 실행이 되지 않았습니다. 그래서, @types가 없는 그냥 react-custom-scrollbars를 인스톨했는데(이부분도 그냥은 안깔려서 --force로 다운받았습니다..) 그제서야 되더라구요. 혹시 이유를 알 수 있을까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
babel target
안녕하세요. https://github.com/browserslist/browserslist#queries 참고해보면 지원가능한 브라우저나 지원 하고싶은 브라우저 설정이 많잖아요. 근데 그냥 모든 브라우저 지원으로 설정해두면 편한데 굳이 따로 설정을 하는 이유는 성능 문제인가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
build와 dev router 설정
yarn run dev로 서버를 돌리면 라우터가 제대로 동작하는데, yarn run build를 통해서 dist 폴더 아래에 생긴 js 파일을 이용해서 index.html에서 open한 경우 라우터가 제대로 동작하지 않는데, 이유를 알 수 있을까요? historyApiFallback 설정 true로 해뒀습니다. htmlplugin을 통해서 dist 아래에 html 파일을 동적으로 생성해줬습니다. 요약하자면 배포를 하려는데, dist 아래에 html이 없어서 생성해주고 build 명령어로 배포를 하는데 라우터 설정이 안되는 상황입니다. 구글링하다가도 해결 못해서 질문 남깁니다 ㅜㅜ