173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
ts 프로젝트 진행중 config-overrides를 통해 경로를 alias 설정하였는데 cra-bundle-analyzer가 작동을 안하는데요 혹시, 방법이 있을까요? webpack-bundle-analyzer로 해야할 것 같은데 잘 안나오네요,, module.exports = override( useBabelRc(), addWebpackAlias({ "@Path": path.resolve(__dirname,'./src/path'); )
해결됨
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요 선생님... 아래 부분 이해를 못했는데 다시 한 번 설명 가능하신가요? ㅠㅠ const { data: movieDetail } = await axios.get(`movie/${movieId}`, { params: { append_to_response: "videos" }
미해결
따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
안녕하세요. 강의를 듣다가 막히는 부분이 생겨 질문 드립니다. VSC상에서 npm install react-router-dom --save를 칠 때부터 이런 종류의 문구가 뜨더니, npm run start를 하면 새로운 포트로 연결이 성공되었다는 문구는 뜨지만, 아무 글씨도 나타나지 않은 흰 배경만 있습니다. 혹시 어떤 점이 문제인지 알 수 있을까요?? 구글링도 해보고 npm audit?? 그것도 시도해봤는데 해결되지 않습니다ㅠㅠㅠ *현재 window쓰고 있고, VSC로 작업하고 있습니다 *App.js 코드 첨부하겠습니다. import React from "react"; import { Routes, Route} from "react-router-dom"; import ChatPage from "./components/ChatPage/ChatPage"; import LoginPage from "./components/LoginPage/LoginPage"; import RegisterPage from "./components/RegisterPage/RegisterPage"; function App(props) { return ( <Routes> <Route path="/" element={<ChatPage />} /> <Route path="/login" element={<LoginPage />} /> <Route path="/register" element={<RegisterPage />} /> </Routes> ); } export default App;
미해결
파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)
1) arr = list(map(int, input().split())) 2) arr = map(int, input().split())) 안녕하세요 저는 구현하기전에 문제를 읽고 코드설계를 먼저 하는방식으로 공부를 하고 있습니다. 대표값문제를 접하면서 궁금한점이 입력을 받을때 1)과같이 list를 써야하는지 아니면 2)처럼 안써도 되는지 어떻게 판단할 수 있을까요? 1)과 2) 둘 다 띄어쓰기로 구분하는 숫자열을 받는것은 동일하니 list를 써야하는지 안써도 되는지 판단 기준을 못잡겠습니다. 또 현재 대표값문제에서는 2)과 같이 썼을때 어떤 점때문에 의도치않은 결과가 나오는지 궁금합니다. 질문을 정리하자면 1) 여러 값을 입력받을때 list 사용의 판단 기준 2) 대표값문제에서 2)과같이 썼을때 정답이 안나오는 이유
미해결
[리뉴얼] React로 NodeBird SNS 만들기
next.config.js 와 같은 설정파일에서는 commonjs 모듈을 사용하고 src폴더내의 소스파일들은 es6 모듈시스템을 사용하는게, src는 웹팩이 번들링하기 때문에 es6를 사용하는것이고, 그외 파일들은 node 완경이라서 그런건가요?? + 그리구 express를 사용할때, package.json에서 module타입을 es6로 변경해서 사용하시지 않는 이유가 있을까요? express 사용할때도 es6 모듈시스템이 편해서 항상 바꿔서 사용하는게 좋지 않을까 생각했는데, 여러 소스코드를 참고해봐도 굳이 es6모듈로 바꾸지 않고 commonjs모듈을 그대로 사용하는거 같더라구요! 혹시 어떤 단점이 있어서인지 궁금합니다
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
str?.length > n ? str.substr(0, n - 1) + "..." : str; 이부분을 (str.length > n) ? str.substr(0, n - 1) + "..." : str; 썼더니 에러가 납니다.. (Cannot read properties of undefined (reading 'length')) str? -->> 삼항연산자의 시작이라는 건 알겠는데 .. .length의 의미는 뭔가요
해결됨
Slack 클론 코딩[실시간 채팅 with React]
깃헙에서 sleact/alecture/pages/login/styles.tsx 파일이 비워 있는데 일부러 비워 두신거죠?
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
onCreate 함수에서 질문이 있습니다! 새로운 객체인 createMessages와 기존에 존재하던 15개의 길이를 가진 old.messages를 나열하기만 하면 된다고 생각했는데, 뒤에 ...old.pages.slice(1)을 또 나열을 하는 부분이 이해가 안됩니다!. console.log를 찍어보니 ...old.pages.slice(1)는 빈 배열이 나오는데 어떤 이유때문에 넣어주는지 궁금합니다!
해결됨
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' ,
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
안녕하세요 강사님! 아래와 같이 문제가 있어 질문 남깁니다! graphQL 적용 후 새로고침 시 화면 렌더링 속도가 되게 느려짐 => 어떤 문제인지 잘 모르겠습니다.. Create 후에 getData를 하지 못함(등록 버튼 누르고 새로 fetch를 해야 Create 했던 내용이 나옴)=> 기존에 MsgList 컴포넌트에서 GET_MESSAGES로 fetch 하였을 땐 잘 동작했지만 getServerSideProps함수 안에서 fetch 했더니 동작하지 않는 것 같습니다(추측) React Component Tool에 Hydrate 부분이 Anonymous라고 뜸 => React-query 버전이 올라가면서 문법상에 오류가 있는 건지, Hydrate(캐싱)이 적용 되지 않는 것 같습니다. ㅜㅜ 도와주세요!!!.. _app. js index MsgList(Create Code)
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
안녕하세요! 장고 학습 관련하여 몇 가지 여쭤볼라고 합니다. 현재 장고를 개념부터 강의를 따라서 학습하고 있습니다. 뭔가 아직 막막하고 진도가 빠르게 진행되지 않아 마음이 성급한 마음이 있습니다. 그래서 불안감이 생겨서 그런지 부트캠프를 알아보았는데, https://learningspoons.com/course/detail/django-backend/ python django aws 기술 셋을 사용하는 부트캠프입니다. 들어가서 상단으로 올리면 커리큘럼을 볼 수 있습니다. 부트캠프로 들은 후, 나중에 이진석님 강의를 듣는 게 나은지 아니면 그냥 묵묵히 계속 강의를 듣는 게 나을지 고민이 됩니다. 만약 이진석님이 보실 때 커리큘럼이 만드신 강의가 더 낫다면 묵묵히 강의를 들으면서 학습해볼려고 합니다. 제 수준이 낮아서 뭐가 좋은지 잘 몰라서 여쭤봅니다.
미해결
[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part4: 게임 서버
session#3 까지는 어찌어찌 따라온것같은데 #4에서 어질어질 해졌습니다. 그냥 이해는 못하고 따라 치고 있습니다..ㅠ 이럴 때는 그냥 끝까지 듣고 복습하는게 좋을까요? 이금 복습하고(처음부터?) 이해하고 다음 수업을 듣는게 좋을까요?? (_ㅇ_)
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
아래의 사진에서 컴퓨터가 자동적으로 수정하는 것이 아닌 직접 server/index.js로 바꿔줘야 하는 것인가요??
미해결
공공데이터와 Folium(Python Library)으로 만드는 제주 오름 지도 안내 서비스
제주 오름 강의를 모두 수강한 뒤 다른 공공API를 이용해서 응용 연습을 해보고 있습니다. 체크박스로 원하는 주소 마커만 보는 기능을 사용했고 마커에 커스텀 아이콘을 사용했습니다.(아이콘 2가지 사용) 이제 부트스트랩에 적용해보려하는데 iconUrl길이가 너무 길어서 코드가 복잡해보입니다. iconUrl을 다른 코드로 대체해서 아이콘이 보이도록 할 수 있을 까요?
미해결
[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part4: 게임 서버
복학 전에 개인 작업으로 FPS게임서버를 만들고 있습니다. 구현된 것들: - 신규 유저 접속 시 기존 유저 데이터 전송, 기존 유저에게 신규 유저 스폰 전송 - 키보드 입력(Vertical, Horizontal)을 하나의 Vector3에 저장하여 이전 값과 다를 경우 패킷을 전송 ( 데드레커닝이 맞는진 모르겠음) - 카메라 회전 값을 각 클라이언트에서 0.25초 단위로 동기화 패킷 전송 ( 회전값은 서버에서 검증이 필요없을 거라 생각해서 검증 없이 Echo ) 위에 적은 대로 위의 기능은 문제없이 잘 작동하지만 이동 동기화에 대해서 문제가 심각합니다.... 데드레커닝처럼 이전값과 다를 때만 패킷을 보내는데, 상대 클라이언트는 회전값 동기화가 0.25 + (내RTT/2 + 상대RTT/2)이상이라 이동패킷이 더 빠르게 가버리면 위치값에 대한 데이터 일관성이 깨집니다. 그래서 추가로 1초 단위로 현재 위치를 서버에 전송합니다. 서버는 새로운 위치값을 받고 자신이 갖고 있던 해당 플레이어의 위치값 ( 서버 내에서도 이동방향, 회전값, RTT/2, 오차범위를 기준으로 위치값을 0.25초 단위로 업데이트함) 과 비교하여 이 값이 정상적인 데이터인지 검증합니다. 만약 결과가 정상적이라면 Broadcast, 비정상적이라면 Leave로 구현했습니다. 그런데 문제는 서버에서 검증하는 시간 + 내 RTT / 2 + 상대 RTT / 2 차이 때문에 데드레커닝으로 예측하더라도 계속 이전 위치로 돌아가는 현상이 발생했습니다. 데드레커닝을 포기하자니 너무 느린 반응때문에 FPS에 적합하지 않은 것 같고, 서버 검증을 포기하자니 에디터에 Inspector에서 위치 이동만 해도 핵처럼 보였습니다. FPS에서는 검증을 어떻게 하는게 맞을까요?
해결됨
리액트로 나만의 블로그 만들기(MERN Stack)
node_modules 폴더 삭제 package-lock.json 파일 삭제 package.json 파일 아래 내용으로 대체 대체 후 npm i 명령어 입력 macOS 기준입니다. { "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12", "@testing-library/user-event": "^13.5.0", "bootstrap": "^5.2.0", "connected-react-router": "^6.9.3", "dotenv": "^16.0.1", "react": "^17", "react-dom": "^17", "react-redux": "^8.0.2", "react-router-dom": "^5.3.3", "react-scripts": "5.0.1", "reactstrap": "^9.1.3", "redux": "^4.2.0", "redux-saga": "^1.1.3", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
미해결
홈페이지만들어서 nginx로 배포했습니다,,, 만 이런식으로 디자인이랑 글씨가 다깨져서 보입니다zzz 그냥 runserver 했을때는 괜찮았는데 왜이러는걸까요? 이런현상을 뭐라하나요? 뭔지알면 스택오버플로우에 질문이라도 할텐데 무슨현상이라고 하는지도 모르겠습니다
미해결
Slack 클론 코딩[실시간 채팅 with React]
정규식으로 닉네임 찾는 부분에서요 match.match(/@\[(.+?)]\((\d+?)\)/)! 여기 이부분에서 느낌표(!)를 왜 붙여준건가요? str.match(정규표현식) 이런 형태로 작성하는 건줄 알았는데 느낌표가 붙여있어서 궁금해서 질문올립니다.
해결됨
처음 만난 리액트(React)
요약: 3개가 각각 1-1-1 로 1초 간격으로 나와야 하지만, 2-1 로 나옴. 즉 2개가 한번에 나오고 나머지 1개가 나옴, notification 개수를 5개로 늘려봤더니, 1-1-1-1-1이 나와야 하지만 2-2-1로 나옵니다. 어디가 문제일까요.. 1. NotificationList import React from "react" ; import Notification from "./Notification" ; const reservedNotifications = [ { message : "안녕하세요, 오늘 일정을 알려드립니다." , }, { message : "오전은 피곤합니다" , }, { message : "점심식사 시간입니다." , }, { message : "30분 후 잠시 휴식하겠습니다." , }, { message : "퇴근합시다." , }, ]; var timer ; class NotificationList extends React . Component { constructor ( props ){ super ( props ); this . state = { notifications : [], }; } componentDidMount () { const { notifications } = this . state ; timer = setInterval ( () => { if ( notifications . length < reservedNotifications . length ){ const index = notifications . length ; notifications . push ( reservedNotifications [ index ]); this . setState ({ notifications : notifications }); } else { clearInterval ( timer ); } }, 5000 ); } render () { return ( < div > { this . state . notifications . map (( notification ) => { return < Notification message = { notification . message } /> ; }) } </ div > ); } } export default NotificationList ; 2. Notification import React from "react" ; const styles = { wrapper : { margin : 8 , padding : 8 , display : "flex" , flexDirection : "row" , border : "1px solid grey" , borderRadius : 16 }, messageText : { color : "black" , fontSize : 16 } }; class Notification extends React . Component { constructor ( props ) { super ( props ); this . state = {}; } render () { return ( < div style = { styles . wrapper } > < span style = { styles . messageText } > { this . props . message } </ span > </ div > ) } } export default Notification ; 도와주세요!
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
window에서 대소문자 문제 수정해도 에러가 나네요 ㅠ
