따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 두 가지 질문이 있는데 답변해주시면 정말 감사드립니다.ㅠㅠㅠ entrise[0] 이 뜻하는건 뭔지 알 수 있을 까요?? 아래에서 인수로 마지막 Post의 element를 설정했는데 그걸 의미하는건가요?? 위에서 setPage(page+1)을 하면 아래에서 setPage가 +1이 돼서 page가 +1이 되고, getkey의 pageIndex가 page값으로 돼서 /posts?page=${pageIndex} 가 호출 되는 건가요?? const page 가 getkey의 pageIndex 인건가요??
안녕하세요! Credentials 설정 후 origin을 ' http://localhost:3060 ' 으로도, true 로도 변경해봤지만 계속해서 해당 오류가 뜨는데 이유를 모르겠습니다. ㅠㅠ 제로초님의 오류와 다른 부분이 있는 것 같습니다. Access to XMLHttpRequest at 'http://localhost:3065/user/login' from origin 'http://localhost:3060' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. 제 코드는 현재 이렇습니다. [app.js] const express = require("express"); const session = require("express-session"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const passport = require("passport"); const dotenv = require("dotenv"); const postRouter = require("./routes/post"); const userRouter = require("./routes/user"); const db = require("./models"); const passportConfig = require("./passport"); const app = express(); dotenv.config(); passportConfig(); //서버 실행할 때 db sequelize 연결도 함께 실행 db.sequelize .sync() .then(() => { console.log("db 연결 성공"); }) .catch(console.error); // router보다 위에 작성해야 함 app.use( cors({ // origin: 'https://nodebird.com' // 설정된 웹페이지에서 오는 요청만 허용 // origin: "*" // 전체 허용 // origin: "http://localhost:3060", // withCredential: true 일 때 보안이 더 철저해져서 정확한 주소를 적어야 함 origin: true, // 요청을 보낸 곳의 주소가 자동으로 들어가 허용 credientials: true, }) ); // CORS 에러 처리법 2 (npm i cors) app.use(express.json()); // front에서 json형식으로 데이터를 보냈을 때 json형식의 데이터를 req.body로 넣어줌 app.use(express.urlencoded({ extended: true })); // form을 submit했을 때 urlencoded 방식으로 데이터가 넘어옴 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.get("/posts", (req, res) => { res.json([ { id: 1, content: "hello1" }, { id: 2, content: "hello2" }, { id: 3, content: "hello3" }, ]); }); app.use("/post", postRouter); app.use("/user", userRouter); app.listen(3065, () => { console.log("서버 실행중!!!!"); }); [sagas - index.js] import axios from "axios"; import { all, fork } from "redux-saga/effects"; // take 는 1회용이기 때문에 while(true) {} 문으로 감싸준다. 하지만 직관적이지 않으므로 take 대신에 takeEvery를 사용한다. // takeLatest 는 클릭이 두번되었을 때 두 번 실행되지 않기 위해 마지막 것만 실행되도록 하는 effect 이다. (요청은 취소되지 않고 응답만 취소되므로 서버에는 두개가 저장됨(치명적단점)) // takeLeading 은 첫번째 것만 실행되도록 하는 effect 이다. // throttle 은 시간제한을 두어 그 시간동안에 한번만 실행되도록 요청하는 것이다. (특수한 경우에 사용, 디도스 공격을 막을 때 좋음) import userSaga from "./user"; import postSaga from "./post"; axios.defaults.baseURL = "http://localhost:3065"; axios.defaults.withCredentials = true; // function* : generator 는 yield(중단점)가 있는 곳에서 멈춤 export default function* rootSaga() { // all 은 fork 나 call 을 동시에 실행시켜준다. yield all([ // fork !== call // fork 는 비동기 함수 호출 , call 은 동기 함수 호출 fork(userSaga), fork(postSaga), ]); } 어디서 잘못된 걸까요..? 오류를 보면 header in the response is '' 로 헤더의 결과 값이 없는 것같은데... origin 을 true 로 변경했는데 왜 안들어갈까요...
안녕하세요 멘토님. 항상 좋은 강의 잘 보고 있습니다. HOC와 권한분기 실습 까지 수강을 마치고 궁금한 점이 생겨 질문 드립니다. 페이지로 이동 시 HOC를 먼저 실행하여 로그인을 체크하는 방식은 이해했습니다. 그런데, 간혹 어떤 특정 게시판 사이트에 비로그인 상태에서 댓글 작성을 한다고 가정할 때 인풋창이나 등록 버튼을 누르면 '로그인 후 이용해주세요' 라는 알럿을 띄워주는 경우가 있습니다. (페이지 이동이 아닌 단순 엘리먼트 클릭) 이러한 경우에는 그냥 단순히 인풋이나 등록 버튼 등 엘리먼트를 클릭 했을 때 토큰이 있는지 if 검증을 하는 로직만 넣으면 되는 것인지 궁금합니다. 그리고 댓글 리스트 수정과 같은 상황에서 댓글 리스트에서 댓글 하나를 수정 버튼 눌렀을 때, 비로그인 유저를 감지하여 알럿을 띄워주고 싶은 경우도 궁금합니다. 이런 경우는 보통 이전 수업 때 배웠듯이 map을 사용하여 댓글 수정 컴포넌트를 반복문으로 뿌려주는 형태로 사용을 합니다. 그렇다면 이 댓글 수정 컴포넌트를 export 하는 과정에서 HOC를 씌워주는게 맞는 것인지, 아니면 그냥 또 단순히 수정 버튼 클릭 시 if 검증을 통해 토큰 존재 여부만 파악하면 되는지 궁금합니다. 감사합니다.
기본적인 개념같아서 구글링도 해봤는데 object 와 object[] 배열간의 형변환에 대한 내용이 안보여서 질문드립니다. 다름이 아니라 Object o = resultList.get(); Object[] result = (Object[])0; 에서 왜 Object 타입에서 Object[] 타입으로 형변환을 해야하는지, 그냥 o[0], o[1] ... 로 쓰면 왜 컴파일 오류가 나는지 궁금합니다. Object 타입에서 어떻게 Object[] 타입으로 형변환이 가능한지 궁금합니다. Obect[] 배열은 Object가 여러개 포함된 배열 아닌가요?.. 아니면 Object 타입이 Object[] 타입까지도 포함한 포괄적인 개념이라 위처럼 형변환이 가능한 건가요? 기본적인 내용같은데 개념이 잘 이해가 안가서 질문드립니다 ㅠㅠ
영속성 컨텍스트에 프록시 객체도 저장이 되나요? 강의 내용중 프록시 객체의 초기화를 보면 getName()을 요청했을때 최초의 요청이면 영속성 컨텍스트에서 조회를 하고 DB에서 조회를 한다고 나와있는데 .getReference를 했을때 생성되는 프록시객체도 영속성컨텍스트에서 관리를 하나요? 그리고 .getName을 요청해서 실제 엔티티를 받아오게되면 이 객체도 영속성 컨텍스트에서 관리를하나요? 그리고 2번째 .getName 메서드를 요청해도 꼭 프록시 객체를 거쳐서 값을 받게되나요?
강의 열심히 듣고 있습니다. Row.js에서 사용하고 있는 isLargeRow에 관해 질문드립니다. isLargeRow는 부모 컴포넌트에서 boolean값을 설정하지 않고 단지 문자열로 props로 보내지는데 Rows.js에서는 true 값을 가지게 되는게 잘 이해가 안가네요 props로 문자열을 내려주면 자식 컴포넌트에서는 그 문자열이 내려오면 true로 없으면 false로 인식을 하는건가요? 바쁘시겠지만 답변 부탁 드리겠습니다.
typesciprt 였나 antd 였나 설치하고 부터 자주 밑에 그림처럼 뜨네요. 구글링으로 ctrl + f8로 일시적으로 문제를 해결할 수 있었으나 계속 오류가 반복되어 질문드립니다. 혹시 어떤 부분에서 잘못 되었을지 ... 알수있을까요 밑에 부분은 소스에서 빨간줄 뜨는 부분입니다. 추가로 이런 오류도 자주 뜹니다 ...
안녕하세요! yarn add -D @graphql-codegen/cli yarn add -D @graphql-codegen/typescript 설치 후 yml 파일 생성하는데 빨간줄이 발생하고 이후 단계로 넘어가지 못합니다. 마우스 오버 후 에러 메세지 잘못 설치했나 싶어 node-modules 삭제 package.json 에서 codegen 지우고 재설치 해보아도 같은 에러가 나타납니다. 확인 부탁드립니다.
공부하다가 의문이 생겼는데요, 낙관적 락 - 충돌 잦으면 락 획득 재시도 로직 때문에 성능 안좋음 비관적 락 - 충돌 잦으면 낙관적 락보다 성능좋음. 분산 락 - 스케일 아웃된 DB 환경에서도 사용 가능 - Redis 라이브러리마다 다른데 Lettuce는 스핀락으로 구현되서 재시도 많으면 불리 Redisson은 pub-sub 기반이라 재시도 많으면 유리 정확하진 않지만 이렇게 알고있습니다. 질문은 1. 잘못 알고 있나요? 2. 제가 공부한게 맞다면, 무조건 비관적 락, 낙관적 락 말고 분산락 + Redis(Lettuce/Redisson) 쓰는게 좋은건가요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 강의 잘 보고 있습니다. 여러 아이콘을 저장해놨다가 사용하는 방법도 있는데 스프라이트 이미지를 사용하시는 이유가 궁금합니다.
일단 강의 잘 보고 있습니다. 제 학습 수준이 아직 낮아서, 더이상 진도는 안나가고 있고 다시 리액트를 좀 복습중입니다.ㅎㅎ 저도 언능 수준이 올라가서, 박용주님처럼 이것저것 만들어보고 싶네요. 최종 목표는 웹게임을 만들어보는겁니다.ㅎㅎ 아무튼. 질문이 하나 있는데요~ 혹시 next.js로 개발을 할 때 Redux는 잘 사용 안하나요? 리액트 배우면서 redux를 아주 중요하게 다루는것 같은데, next.js강의는 여러곳을 돌아다녀 봐도 redux에 대해서는 안가르치는것같더라구요. 리액트에서 당연히 배워왔을 소양이라서 커리큘럼에 없는건지, 아니면 next.js에서는 redux는 잘 사용 안하는건지 궁금합니다!
안녕하세요 강의시작마다 브랜치가 나오는데, 깃헙주소 알 수 있을까요? 감사합니다. 1-2 브랜치 1-4 브랜치가 어디에 있는지 알 수 있을까요? 강의 중간중간 보시면 git checkout 하시는 것으로 보아 github주소가 있는 것 같습니다. github 주소 공유해부탁드립니다. 감사합니다.
