묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
mutate 와 Pessimistic UI, Optimistic UI 관계 질문이요
1번.axios요청후 then으로 처리 : Pessimistic UImutate(data, true) : Optimistic UImutate(data, false) : 데이터를 바꾸는데 서버에 요청 및 점검을 안함. 2번 mutate(data, true) : Pessimistic UImutate(data, false) : Optimistic UI 처음엔 1번으로 이해를 했는데 shouldRevalidate를 false로 넣어서 시도했을 때 주기적으로 GET요청이 되는 직후 바로 로그아웃을 클릭하면 추가적인 요청이 없는데 그냥 로그아웃하면 바로 추가적인 요청이 보내집니다. 주기적으로 GET요청을 하는 것과의 우연의 일치인진 모르겠는데 뭔가 자꾸 추가적인 GET요청이 되었다 안되었다 하더라고요. 그래서 false를 넣어도 점검을 하는 2번인가 싶기도 하고 헷갈립니다. 뭐가 맞는거죠?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
s3 연결하기 강의 중에
안녕하세요 제로초님 항상 질문에 빨리 답변 달아주셔서 감사합니다. 백엔드에 문제가 있는거 같은 pm2 monit은 아래와 같이 뜹니다 const express = require("express"); const session = require("express-session"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const app = express(); const postRouter = require("./routes/post"); const userRouter = require("./routes/user"); const postsRouter = require("./routes/posts"); const hashtagRouter = require("./routes/hashtag"); const db = require("./models"); const passportConfig = require("./passport"); const passport = require("passport"); const dotenv = require("dotenv"); const morgan = require("morgan"); const path = require("path"); const hpp = require("hpp"); const helmet = require("helmet"); dotenv.config(); db.sequelize .sync() .then(() => { console.log("db 연결성공"); }) .catch(console.error); passportConfig(); //모드변경 if (process.env.NODE_ENV === "production") { app.use(morgan("combined")); app.use(hpp()); app.use(helmet({ contentSecurityPolicy: false })); app.use( cors({ origin: "http://sansbook.co.kr", credentials: true, }) ); } else { app.use(morgan("dev")); app.use( cors({ origin: true, credentials: true, }) ); } // app.use( // cors({ // origin: [ // "http://localhost:3000", // "http://sansbook.co.kr", // "http://43.200.92.114", // ], // credentials: true, // }) // ); app.use("/", express.static(path.join(__dirname, "uploads"))); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, domain: process.env.NODE_ENV === "production" && ".sansbook.co.kr", }, }) ); app.use(passport.initialize()); app.use(passport.session()); app.get("/", (req, res) => { res.send("hello express"); }); app.use("/posts", postsRouter); app.use("/post", postRouter); app.use("/user", userRouter); app.use("/hashtag", hashtagRouter); app.listen(80, () => { console.log("서버실행중!"); });
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
기초공사 1에서 버튼 컴프의 클래스네임
MyButton이라는 새로운 CSS를 만들어서 버튼에만 적용하고 싶은데, 검사에서 클래스 네임이 다른 3개는 나오는데 UI상에서는 .MyButton은 효과가 적용되는데 포시티브, 네거티브, 디폴트에는 적용이 안되요! ㅠㅠApp.css에서도 동일하게 적용이 안되네요,오타도 없고, 검사에서 나온 값 그대로 복붙했는데..왜이러춍? 임포트를 해도, 가장위에있는 .MyButton만 효과가 적용된 상태(폰트 패밀리 등)
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
workspace/channel 새로고침 오류
http://localhost:3090/workspace/channelhttp://localhost:3090/ 로 접근해서 해당 path까지 접근이 잘되지만 이후 새로고침하면 자바스크립트를 불러오지 못하여 에러가 납니다.<body> <div id="app"></div> </body>//에러코드 Rfused to apply style from 'http://localhost:3090/workspace/public/client-boot-styles.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. GET http://localhost:3090/workspace/public/slack-icons-v2-fe043a5.woff2 net::ERR_ABORTED 404 (Not Found) GET http://localhost:3090/workspace/dist/app.js net::ERR_ABORTED 404 (Not Found) Rfused to execute script from 'http://localhost:3090/workspace/dist/app.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. GET http://localhost:3090/workspace/public/favicon.ico 404 (Not Found) the resource http://localhost:3090/workspace/public/slack-icons-v2-fe043a5.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.제 생각에는 http://localhost:3090/workspace/ router가 없어서 channel까지 오지 못하고 중간에서 끊기는 것 같은데 <Routes> <Route path="/" element={<Navigate to="/signin" replace />} /> <Route path="/signin" element={<SignInPage />} /> <Route path="/signup" element={<SignUpPage />} /> <Route path="/workspace" element={<Navigate to="/workspace/channel" replace />} /> <Route path="/workspace/channel" element={<ChannelPage />} /> </Routes>workapce경로에서 channel로 redirect를 걸어주려고 하는데 잘 되지 않습니다 어떻게 개선하면 좋을까요?
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
Heroku build관련 오류가 발생해 글 남깁니다 ㅠㅠ
신입개발자라 구글링을 해도 모르는 지식이 많아, 도움을 받고자 글 남깁니다.. ㅠHeroku로 배포중인데 빌드오류도 발생하지 않고, 로그에도 딱히 오류가 발생하지 않는데, 앱을 실행하면 애러페이지와 함께 , heroku 로그에 이 메세지가 나타납니다. ㅠㅠㅠㅠ2023-04-21T06:15:12.485071+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=shoppingmall-graphql.herokuapp.com request_id=7e6324ad-02a3-4e4f-95a6-26e309a8f380 fwd="1.227.192.156" dyno= connect= service= status=503 bytes= protocol=https2023-04-21T06:15:12.742280+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=shoppingmall-graphql.herokuapp.com request_id=117583f5-bf2d-48b9-929f-8f902023aa33 fwd="1.227.192.156" dyno= connect= service= status=503 bytes= protocol=https구글링 해보고, 실행방안을 적용했는데도 애러 해결이 안되서 지금 4시간째 헤메고 있습니다 ㅠㅠㅠㅠㅠㅠ 하 너무 답답하네요.. 어디서 잘못되서 애러가 났는지 모르겠습니다 ㅠ(해결참고 ref: https://dev.to/lawrence_eagles/causes-of-heroku-h10-app-crashed-error-and-how-to-solve-them-3jnl)구글링을 해보니 아마도 heroku local 로 접근했을 때, process.env.PORT 가 undefined로 뜨는데 이 부분에서 생긴 오류 인것같습니다 ㅠㅠ 해결 방법을 몰라 글 남깁니다 ㅠㅠ해당 빌드 로그 이미지와 코드 남깁니다. 감사합니다 ㅠㅠ* Build Log*Application Logs*server/package.json*shopping-mall/package.json감사합니다!!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
회원가입시 500 에러
{ "name": "sansbook-back", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "dev": "nodemon app", "start": "cross-env NODE_ENV=production pm2 start app.js" }, "author": "jangsan", "license": "ISC", "dependencies": { "bcrypt": "^5.1.0", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "cross-env": "^7.0.3", "dotenv": "^16.0.3", "express": "^4.18.2", "express-session": "^1.17.3", "helmet": "^6.1.5", "hpp": "^0.2.3", "morgan": "^1.10.0", "multer": "^1.4.5-lts.1", "mysql2": "^3.2.0", "passport": "^0.6.0", "passport-local": "^1.0.0", "pm2": "^5.3.0", "sequelize": "^6.30.0", "sequelize-cli": "^6.6.0", "session": "^0.1.0" }, "devDependencies": { "nodemon": "^2.0.22" } } const express = require("express"); const session = require("express-session"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const app = express(); const postRouter = require("./routes/post"); const userRouter = require("./routes/user"); const postsRouter = require("./routes/posts"); const hashtagRouter = require("./routes/hashtag"); const db = require("./models"); const passportConfig = require("./passport"); const passport = require("passport"); const dotenv = require("dotenv"); const morgan = require("morgan"); const path = require("path"); const hpp = require("hpp"); const helmet = require("helmet"); dotenv.config(); db.sequelize .sync() .then(() => { console.log("db 연결성공"); }) .catch(console.error); passportConfig(); //모드변경 if (process.env.NODE_ENV === "production") { app.use(morgan("combined")); app.use(hpp()); app.use(helmet()); } else { app.use(morgan("dev")); } app.use( cors({ origin: ["http://localhost:3000", "sansbook.com", "http://15.164.99.87"], credentials: true, }) ); app.use("/", express.static(path.join(__dirname, "uploads"))); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, }) ); app.use(passport.initialize()); app.use(passport.session()); app.get("/", (req, res) => { res.send("hello express"); }); app.use("/posts", postsRouter); app.use("/post", postRouter); app.use("/user", userRouter); app.use("/hashtag", hashtagRouter); app.listen(80, () => { console.log("서버실행중!"); }); 회원가입 할떄 마다 500에러가 나는데 프론트 문제인가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
logoutUser 로그아웃 방법
로그인은 가능한데 로그아웃은 어떻게 하는지 모르겠습니다 ㅠlogoutUser mutation으로 해도 에러가 떠서 찾아봐도 강의에 나와있지 않아서글 남깁니다!!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
Aborting
git 저장소를 불러오는중에 Aborting떠서git reset --hard를 해도 계속 최신 커밋이 안뜹니다 ㅠㅠHEAD is now at 95de5ce Update: back start script계속 이게 뜨면서 pull해도 Aborting이 계속 나오네요 ㅠㅠ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
mysql_secure_installation 정책에 관해
제가 다른게시물 보고 https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04이거까지 했는데 계속 새로운 비밀번호 입력 하라고 뜨네요 ㅠㅠ이런 경우 어떻게 해야할까요 비밀번호도 보안수준에 맞게 했는데 계속 뜨네요 ㅠㅠ
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
정상 작동은 하는데 웹팩 프록시 설정이 없어도 OPTIONS요청이 없어요.
그냥 기존의 백엔드 app.js 코드 그대로 하고 웹팩 데브서버에 프록시 설정을 하지 않고 회원가입 했을 때 201로 요청이 성공했습니다. 하지만 제로초님과 달리 OPTIONS요청이 추가적으로 생기지 않았고 POST요청만 네트워크 창에 보이는데 잘못된게 있는 건가요 아님 시스템 상 뭐가 바뀐건가요? 작동상 문제는 없는데 궁금해서 여쭤봅니다.index.tswebpack.config.tsapp.js
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
firebase filterling 관련 질문
안녕하세요 재남쌤~~ 어렵지만 헤매고 구글링 하면서 어찌저찌 따라하고 있는데 , 무한 스크롤링 + firebase 관련 애러가 발생해, 질문이 있어서 게시글 남깁니다.DB 데이터 수를 Limit 보다 줄이고 실행했을 때, data에 다음 게시물이 아닌, 처음 게시물부터 push로 추가되는 문제가 발생했습니다 ㅠㅠ 제가 중간에 이것저것 기능을 넣었는데 ( 삭제된 게시물만 보여주기, 모두 보여주기 등등 ) 여기서 오류가 난 것이라 생각했는데, jsonDB로 실행했을 때는 문제가 없어서, firebase에서 cursor 로 받아오는 고유값 다음 게시물을 잡아내지 못해 발생된 오류 같습니다 ㅠㅠ firebase 공홈 문서를 봐도 잘 이해가 가지않아 글 남깁니다.공홈 Ref : https://firebase.google.com/docs/firestore/query-data/query-cursors?hl=ko#web-version-9_1지금 작성된 코드를 보면, const queryOptions: any[] = [orderBy("createdAt", "desc")]; if (cursor) queryOptions.push(startAfter(cursor));이 형태로 작성되어 있는데, 공홈에 따르면 orderBy의 필드인 createdAt이 가진 값에서, startAfter 값부터 시작되는 것 같은데, 저희가 cursor로 가진 값은 문서 ID인데, 이 값을 기준으로 startAter를 잡는 방법이 있을까요?
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
개발환경을 바꿨는데 alt + 엔터 (장고 API 임포트 자동완성) 기능 동작이 안되고 있는 이슈
프로젝트를 파이참으로 로드/열고 가상환경으로 다시 만들어 주었고 프로젝트와 가상환경을 연동해주었습니다. 여기서 궁금한게 2가지 있습니다.장고프로젝트마다 혹은 가상환경이 바뀔때 마다File Watchers 에 black 규칙을 추가해 주어야 하나요? 그리고 상황(프로젝트코드, 가상환경) 이 바뀌어서 그런지 이전 장고설계철학 강의에서 잘되던 장고 임포트 자동완성이 계속 안되고 있어서Languages&Frmaworks 설정도 확인해서 잘되어있음을 확인했고 (아래 이미지)File > Invalide Caches > Invalidate and Restart 해줬는데도 안되고 있습니다. (체크박스 옵션은 모두 체크 안 했습니다)음..혹시 이유와 해결책이 있을까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
redux-saga 코드 정리는 어떻게 하는게 좋나요?
강좌를 듣고나면 saga의 user.js 랑 post.js 쪽 파일이 코드줄이 굉장히 길어지는데요막상 파일을 쪼개서 정리를 하려고해도 연관되는 상태들이 많아서 결국엔 한쪽으로 몰게되네요어쩔 수 없는 부분인가요? 사실 강좌를 듣고 프로젝트를 하나 완성했는데 saga 부분을 쪼갤 수 있으면 최종적으로 수정하고 마무리 할거고 아니면 바로 타입스크립트 강좌 듣고 repo 하나 더 파서 지금 프로젝트 타입스크립트로 정리해보려 합니다 ㅎ좋은 강좌 만들어주셔서 정말 감사하고 다음 강좌는 전용 링크로 수수료없이 결제하겠습니다 ~감사합니다 !
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
react query를 이용한 로그인 유저 정보 가져오는 방법
깃허브에 올려주신 react query의 부분을 보고 공부하는 과정중에 궁금한 점이 생겨 질문드립니다.로그인 정보를 가져오기 위한const { data: me } = useQuery<User>('user', loadMyInfoAPI);useQuery를 이용해 캐싱한 데이터를 가져오는 방법과,리덕스, 리코일의 전역관리 상태 라이브러리를 이용하여 로그인 정보를 관리하는 방법중에 어떠한 방법이 나은 방향인지 궁금합니다.저의 경우는 전역 상태로 관리해, 데이터를 한 번만 가져와서 여러 곳에서 사용할 수 있어서 코드의 중복을 줄일 수있다고 생각하였는데 왜 useQuery를 이용해 캐싱한 데이터를 가져오는 방법을 사용하였는지 궁금합니다.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
`장고설계철학 개발환경`으로 `파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트` 강의 듣기
장고설계철학 강의 듣고 바로 이어서 듣는중인데아래와 같이 두 강의의 구축한 개발환경이 다른상황 입니다. Q1.1. 혹시 아래에 적은 장고설계철학 개발환경으로 그대로 진행해도 괜찮은 버전인건지 궁금하고2. 팩키지관리명령어가 서로 달라도 패키지가 저장되는 경로는 동일해서 장고설계철학 개발환경으로 그대로 진행도 상관 없는지/있는지 궁금합니다.개발환경 - 파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트Python~=3.7.13 ( 아나콘다파이썬 사용)Django~=3.0.0 (3.0.14 설치됨)pip install 명령어로 패키지 설치/관리IDE(VSC) - 디폴트 터미널: 명령프롬프트개발환경 - 장고설계철학Python~=3.10.4 ( 공식홈 사용)Django~=4.0.10python -m install 명령어로 패키지 설치/관리IDE(Pycharm PRO) - 디폴트 터미널: 다운받아 설치한 최신윈도우파워쉘
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
REQUEST를 실행해도 loadPostLoading이 바로 바뀌지 않습니다.
안녕하세요 제로초님! const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector( (state) => state.post, ); useEffect(() => { function onScroll() { if ( window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300 ) { if (hasMorePosts && !loadPostsLoading) { console.log('로딩상태 ; ', loadPostsLoading); console.log('불러오기'); dispatch({ type: LOAD_POSTS_REQUEST, }); } } } window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('scroll', onScroll); }; }, [hasMorePosts, loadPostsLoading]);현재 여기까지 코딩이 진행된 상태인요! 콘솔로 찍어보니이렇게 두번 REQUEST를 보내게 됩니다.리덕스를 찍어봤을 때는이렇게 나옵니다.reducers 부분은const reducer = (state = initialState, action) => produce(state, (draft) => { switch (action.type) { case LOAD_POSTS_REQUEST: draft.loadPostsLoading = true; draft.loadPostsDone = false; draft.loadPostsError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostsLoading = false; draft.loadPostsDone = true; draft.mainPosts = action.data.concat(draft.mainPosts); draft.hasMorePosts = draft.mainPosts.length < 50; break; case LOAD_POSTS_FAILURE: draft.loadPostsLoading = false; draft.loadPostsError = action.error; break; ...saga > post.js 코드는function loadPostsAPI(data) { return axios.get('/api/post', data); } function* loadPosts(action) { try { // const result = yield call(loadPostsAPI, action.data) yield delay(1000); const id = shortid.generate(); yield put({ type: LOAD_POSTS_SUCCESS, data: generateDummyPost(10), }); } catch (err) { yield put({ type: LOAD_POSTS_FAILURE, data: err.response.data, }); } } function* watchLoadPosts() { yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts); }이 상태입니다.조건문에서 !loadPostsLoading < 이걸 지우면 엄청난 양으로 REQUEST가 보내지는 것을 보니 !loadPostsLoading 이게 먹히는 것 같기는 합니다.왠지 REQUEST가 보내진 후 loadPostsLoading이 true로 변경된 것 같기는 한데 이게 useEffect 코드에서는 아직 false로 인식해서 또 REQUEST를 보내는 것이 아닌가 하는게 제 추측인데요, 맞을까요?ㅠㅠ
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
공부 방법에 대한 질문
공부 방법에 대해서 질문드려도될까요?자바스크립트와 리엑트 문법에 대해서는 조금이나마 알고 있다고 생각하는데, 막상 코드 앞에 서면 학습된 내용으로 코드를 짜고 작게나마 응용하는 수준이고 마음먹은 대로 잘안될때도 빈번합니다.강의에서 사용된 코드들은 외우다시피 작성하여 마치 내가 다 코드를짠것처럼 느껴지는 부분도 없지 않아 있구요..응용력이나 사고력이 많이 부족한것 같습니다.코딩 테스트 관련된 문제는 아직 한번도 보지못했습니다.추천 공부방법이나 조언 등 대답해주시면 감사하겠습니다 추가적으로, api호출시 fetch를 이용하여 map을 통해 값을 수정하여 일기리스트에 추가했는데 이것을 axios를 이용하여 요청시 , map에 사용될 배열값이 잡히지 않아서 문제가 있어요,,혹시 다른 방법이 있다면 알려주세요 :)
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
챕터 6의 코드 샌드박스 url 오류?
6-3 6-4 6-5 6-7 6-13 강의 하단의 url들이 제대로 동작하지 않는것 같습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
about.js에서 getStaticProps
export const getStaticProps = wrapper.getStaticProps(async (context) => { console.log("getStaticProps"); context.store.dispatch({ type: LOAD_USER_REQUEST, data: 1, }); context.store.dispatch(END); await context.store.sagaTask.toPromise(); });about.js에서 위에 코드를 입력하면 사이트에 연결할수 없음이라고 뜨는데 이코드도 버전 차이면 어떻게 바꿔야 하는지 알려주시면 감사하겠습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
노션 쓰는거
안녕하세요 취업할때 공부한 걸 블로그나 노션에 기록해뒀다가주소를 이력서에 첨부하면 좋다고 들었는데요노션에 공부노트 템플릿으로 저렇게 수업내용 같은거 작성하고 있는데제가 노션이 익숙치 않아서ㅜㅜ 이런식으로 해서 주소첨부해도 괜찮은 게 맞나요?혹시 팁이 있다면 알려주세요~^^
