inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

실제 배포한 ip에서는 쿠키가 생성이되지않고 passport중에deserializeUser호출이 안됩니다.

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 조현영 선생님 제가지금 해당 강의를 통해서 개인 프로젝트를 진행중인데 문제가 발생이 됬습니다. 클라이언트와 백엔드 다 우분트 환경에서 잘 작동해서 실제 배포한 ip주소로 들어가면 정상적으로 화면이 보여집니다. 클라이언트 서버: 다 작동이 잘 되고 회원가입 기능도 잘 작동해서 실제 해당http://13.125.96.64 쪽으로 요청을 하여 데이터베이스도 잘 생성이되고 됩니다. 근데 문제가 local로 성공적으로 로그인을하면 passport.js 쪽에서 serializeUser 한번 실행을하고 쿠키가 생겨야하는데 생기질 않습니다. 그리고 다시 메인 화면으로 돌아오면 LOAD_MY_INFO_REQUEST action으로 통해서 cookie 와 같이 서버로 전송을해서 deserializeUser도 실행이 되야하는데. deserializeUser도 실행이 안됩니다. 제 로컬에서는 모든게 다 잘 작동합니다. 로컬에서 프론트: 로그인 하면 잘 작동합니다. 로컬에서 백엔드 pm2 환경 보시면 쿠키도 잘 생성되고 passport.js 에서 deserializeUser 도 잘 작동되는게 보입니다. 하지만 배포한 ip에서는 쿠키도 생성이 되질않고 deserializeUser 도 작동하지 않습니다위 사진은 제가 로그인이 성공하고 다시 메인 페이지로 돌아온 화면입니다 성공적으로 로그인이 되도 쿠키는 여전히 생성되지 않았습니다. 위 사진은 제가 로그인이 성공하고 다시 메인 페이지로 돌아온 화면입니다 성공적으로 로그인이 되도 쿠키는 여전히 생성되지 않았습니다. 백엔드쪽 봐도serializeUser 으로 로그인이 성공하고 deserializeUser는 호출이 되질 않습니다. back/app.js 소스코드입니다. const express = require('express'); const PORT = 80; const app = express(); const cors = require('cors'); const effectRouter = require('./routers/effect'); const userRouter = require('./routers/user'); const effectsRouter = require('./routers/effects'); const db = require('./models'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); const passport = require('passport'); const passportConfig = require('./passport'); const morgan = require('morgan'); const hpp = require('hpp'); const helmet = require('helmet'); db.sequelize .sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); passportConfig(); dotenv.config(); app.use(cookieParser(process.env.EFFECTSHOP_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret:process.env.EFFECTSHOP_SECRET, }) ) if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); //보안에 도움되는 라이브러리 app.use(helmet()); }else{ app.use(morgan('dev')); } app.use(passport.initialize()); // 패스포트 설정 미들웨어에 추가. app.use(passport.session()); app.use(express.json()); app.use(express.urlencoded({extended: true})); app.use(cors({ origin:["http://localhost:3000","http://54.180.81.148"], credentials:true, })); app.get('/',(req,res)=>{ res.send('hello express'); }) app.use('/effects' ,effectsRouter); app.use('/effect',effectRouter); app.use('/user', userRouter); app.listen(PORT, ()=>{ console.log(`server on! at http://localhost:${PORT}`); }); 더 자세한 코드를 보시길 원하신다면 여기에 제 소스코드를 올려 놓았습니다 ㅠㅠ 엄청난 고민끝에 여쭤봅니다 ㅜ 감사합니다. https://github.com/sungmin-choi/effectShopByHTML-CSS

  • 배포
  • express
  • 쿠키
  • redux
  • passport
  • deserializeUser
  • nodejs
  • react
  • Next.js
sungmin-choi 댓글 2 좋아요 0 조회수 631

requirment.txt 관련 질문입니다.

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

안녕하세요 인프런 강의를 듣기전 docker 공부를 하고있는 사람입니다. pip freeze > requirments.txt 하고 난 뒤 버전정보가 숫자가아닌 경로로 나오는 경우는 어찌해야 할지 모르겠네요 aiohttp @ file:///C:/ci/aiohttp_1602530153430/work

  • django
  • python
  • react
  • docker
유태혁 댓글 2 좋아요 0 조회수 249

react app에서 html파일이 돌아갈까요??

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요! react를 수강중인 학생입니다..! 멍청한 질문인것 같은데.. 혹시 create react app 하고 vscode환경에서 html파일을 생성해서 js파일에 링크 걸어논다음에 html파일을 열 수 있나요?? 그러니까 html파일, react js 파일 둘다 작성해서 링크로 연동이 가능한지 궁금합니다! 감사합니다.

  • nodejs
  • react
  • javascript
강현구 댓글 1 좋아요 0 조회수 1002

내용 학습 관련 질문

해결됨

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

안녕하세요. 학습을 최근에 시작한 초급자입니다. 현재 장고 프로젝트 생성하여 생성된 폴더와 파일들이 무슨 기능을 하는 지에 대해 듣고 있습니다. 첫 번째 질문입니다. 제가 학습해나가는 것을 TIL로 깃헙에 올리고 싶은데, 코드는 똑같이 안쓰고 참고하여 다른 예시로 작성하면 된다면 이런 개념적인 부분들은 출처와 함께 그대로 써도 되는지 아니면 표현을 달리 해서 올리면 되는 지 알고 싶습니다. 이에 대해 먼저 묻고 작성하는 것이 예의인 것 같아 여쭤봅니다. 앞으로의 내용이 참 기대됩니다. 두 번째 질문입니다. 강의 시작 전에 SQL에 대해서 알고 있어야 하나요???

  • python
  • docker
  • django
  • react
김제하 댓글 1 좋아요 0 조회수 203

state에서 count값 올릴때 +와 ++차이점이 궁금합니다

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요! 상태 강의 8:08초쯤 count에서 값을 1씩 올릴때 +1을 하면 오류가 안생기는데 제가 궁금해서 count ++를 써보니 const로 선언돼서 값을 재할당할 수 없다고 오류가 뜨더라구요! +와 ++의 차의점을 알 수 있을까요? 감사합니다! const [ count , setCount ] = useState ( 0 ); const onIncrease = () => { setCount ( count + 1 ); };

  • 리액트
  • react
  • nodejs
  • javascript
  • react
Yena Kwon 댓글 1 좋아요 0 조회수 735

Create React App에서 node_modules파일 지워졌을 경우

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요. create react app 강의 19:30초 부분에서 node_modules 파일이 지워졌을 경우 npm i로 다운 받으면 된다고 하셨는데, 뒤에 다른 명령어 추가되는 것 없이 그냥 root 파일위치에서 npm i 만 입력하면 node_modules 파일이 알아서 생성이 되는건가요? 감사합니다! :D 강의 너무 재밌게 잘 듣고있습니다!

  • 리액트
  • react
  • nodejs
  • javascript
Yena Kwon 댓글 1 좋아요 0 조회수 1974

eslint

미해결

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

아래 첨부한 사진처럼 vue.config.js를 만들어서 exports를 입력했을 때, 서버는 돌아가지만 다른 eslint의 조건을 만족하지 못 하는 파일들에서 빨간색으로 오류가 떠있는 현상이 발견됩니다. lintOnSave:false는 서버에서만 eslint를 동작하지 않게하는 문법인건가요? 아니면 파일들도 오류없이 떠야 정상인가요?

  • vuejs
  • javascript
댓글 2 좋아요 1 조회수 422

컴포넌트와 모듈의 차이점이 뭔가요?

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요. 컴포넌트와 모듈의 차이점이 궁금해서 질문을 드립니다. 컴포넌트와 모듈의 똑같은 내용인 것같아서 질문드립니다.

  • nodejs
  • javascript
  • react
고요한 댓글 1 좋아요 0 조회수 1482

Heroku EROFS: read-only file system, mkdir '/client' 오류가 납니다

미해결

react와 nodejs를 heroku에 배포할 때 문제가 생겼습니다. push는 성공했지만 해당 페이지에 접속하면 에러가 뜹니다. heroku log --tail을 찍어본 결과 아래와 같은 오류를 확인 할 수 있었습니다. 2022-03-16T12:25:47.734926+00:00 app[web.1]: > node index.js 2022-03-16T12:25:47.734926+00:00 app[web.1]: 2022-03-16T12:25:48.422901+00:00 app[web.1]: us-cdbr-east-05.cleardb.net 2022-03-16T12:25:48.429348+00:00 app[web.1]: /app/node_modules/mkdirp/index.js:91 2022-03-16T12:25:48.429350+00:00 app[web.1]: throw err0; 2022-03-16T12:25:48.429351+00:00 app[web.1]: ^ 2022-03-16T12:25:48.429352+00:00 app[web.1]: 2022-03-16T12:25:48.429353+00:00 app[web.1]: Error: EROFS: read-only file system, mkdir '/client' 2022-03-16T12:25:48.429353+00:00 app[web.1]: at Object.mkdirSync (node:fs:1336:3) 2022-03-16T12:25:48.429354+00:00 app[web.1]: at sync (/app/node_modules/mkdirp/index.js:72:13) 2022-03-16T12:25:48.429354+00:00 app[web.1]: at sync (/app/node_modules/mkdirp/index.js:78:24) 2022-03-16T12:25:48.429355+00:00 app[web.1]: at Function.sync (/app/node_modules/mkdirp/index.js:78:24) 2022-03-16T12:25:48.429356+00:00 app[web.1]: at new DiskStorage (/app/node_modules/multer/storage/disk.js:21:12) 2022-03-16T12:25:48.429376+00:00 app[web.1]: at Function.module.exports [as diskStorage] (/app/node_modules/multer/storage/disk.js:65:10) 2022-03-16T12:25:48.429376+00:00 app[web.1]: at Object.<anonymous> (/app/index.js:57:24) 2022-03-16T12:25:48.429377+00:00 app[web.1]: at Module._compile (node:internal/modules/cjs/loader:1103:14) 2022-03-16T12:25:48.429377+00:00 app[web.1]: at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10) 2022-03-16T12:25:48.429378+00:00 app[web.1]: at Module.load (node:internal/modules/cjs/loader:981:32) { 2022-03-16T12:25:48.429378+00:00 app[web.1]: errno: -30, 2022-03-16T12:25:48.429378+00:00 app[web.1]: syscall: 'mkdir', 2022-03-16T12:25:48.429378+00:00 app[web.1]: code: 'EROFS', 2022-03-16T12:25:48.429379+00:00 app[web.1]: path: '/client' 2022-03-16T12:25:48.429379+00:00 app[web.1]: } 2022-03-16T12:25:48.629426+00:00 heroku[web.1]: Process exited with status 1 2022-03-16T12:25:48.702790+00:00 heroku[web.1]: State changed from starting to crashed 그런데 무엇이 문제인지 모르겠습니다 도움 부탁드립니다.

  • react
  • node.js
  • heroku
dlwnsgml203 댓글 0 좋아요 0 조회수 541

this의 scope

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

안녕하세요! this의 scope가 이해되지 않아 문의드립니다~ 모든 컴포넌트가 App.js에 등록되어 있고, App.js가 똑같은 Vue instance를 가르키고 있기 때문에 this를 거슬러 올라가면 똑같은 instance를 가르키고 있기 때문에 input에서 가르키는 this는 TodoInput 컴포넌트를 가르킨다. 이렇게 말씀하셨는데, 어떤 컴포넌트에서 this를 사용하면 거슬러 올라가면서 해당 객체(newTodoItem)를 찾는데 가장 가까운 객체를 찾는건가요? 아니면 해당 객체가 포함된 컴포넌트 안에서 찾는건가요? 만약 컴포넌트 안에서 찾는거라면 모든 컴포넌트가 App.js를 참조하고, App.js가 Vue instance를 참조하는 것과 무슨 관련이 있는건지 이해가 되지 않습니다. 답변 부탁드립니다 ^.^

  • this
  • javascript
  • vuejs
  • es6
  • vuex
초록곤룡용용이 댓글 1 좋아요 2 조회수 343

ValidationError 일으킬 시 error code 제공은 필수적인가요?

해결됨

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

https://docs.djangoproject.com/en/4.0/ref/forms/validation/ 공식문서에서는 error code 를 제공하는 것을 권장하고 있습니다. 이는 항상 지켜야 하는 걸까요? 선택의 기준이 있는지 궁금합니다. 강의 내에서는 안쓰는 것 같기도 하고요 감사합니다!

  • validationerror
  • django
  • docker
  • python
  • react
댓글 2 좋아요 0 조회수 474

버전 차이!

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

현재 vuejs.org 에 접속하면, vue3 기준으로 나오기 때문에 아래 링크를 강의 하단에 첨부하셔서 강사님과 같은 코드를 사용할 수 있게 해주시면 감사하겠습니다:) https://v2.vuejs.org/v2/examples/modal.html

  • vuex
  • es6
  • vuejs
  • javascript
달세이 댓글 2 좋아요 2 조회수 534

순서가 뒤죽박죽

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

등록도, 삭제도 잘 되는데 새로고침하면 등록했던 순서대로 보여지는 것이 아니라 위치가 바뀌기도 하네요. 이런 건 어떻게 수정해주는 게 좋은가요?

  • vuejs
  • javascript
  • vuex
  • es6
달세이 댓글 1 좋아요 1 조회수 314

scf, vue, vbase 단축키 다 안 됩니다 ㅠㅠ

미해결

Vue.js 시작하기 - Age of Vue.js

안녕하세요. Vue 강좌를 보고 공부중입니다만, 저 역시 1:12에서 단축키가 안 먹혀서 다른 분들이 질문한 것들을 보며 해결 하려 하였으나 동일하게 scf, vu, vue, vbase 입력하고 Tab을 눌러도 기본 양식이 나오지 않아 22년 3월 기준으로 해결방법 질문드립니다..

  • javascript
  • vuejs
조태준 댓글 3 좋아요 1 조회수 2063

Tab 상수 관련되서 질문 드립니다.

미해결

[React 1부] 만들고 비교하며 학습하는 React

TabLable의 프로퍼티명을 상수 객체로 선언하신 이유가 있을까요? 추후 구현에서 TabType에 따라 안의 컨텐츠가 달라지니 map안에서 type === 'KEYWORD'와 같이 하드코딩 방지하기 위해서 일까요? (1) const TabType = { KEYWORD: 'KEYWORD', // 추천 HISTORY: 'HISTORY' // 최근 }; const TabLable = { [TabType.KEYWORD]: '추천 검색어', [TabType.HISTORY]: '최근 검색어' } Object.values(TabType) .map(tabType => ({ tabType, tabLable: TabLable[tabType] })) .map(this._getTab) .join('') ------------------------------- (2) const TabLable = { 'KEYWORD': '추천 검색어', 'HISTORY': '최근 검색어' } Object.entries(TabLable) .map((row) => { const [ tabType, tabLable ] = row; return { tabType, tabLable } }) .map(this._getTab) .join('');

  • MVC
  • react
geuni 댓글 3 좋아요 1 조회수 343

new Data( ) 질문

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

이 부분에서 new Data() 코드를 updata_time이라고 되어 있는 부분에 직접 넣어주게 되면 계속 에러가 발생을 합니다.... Data 라는 함수로 인지를 못하고 정의되어 있지 않다는 에러가 발생을 합니다. 제가 어떤 부분을 잘못한 것일까요?? const Diarycontent = ({ author , content , emotion , created_data , id }) => { const update_time = new Date ( created_data ). toLocaleString (); return ( < div className = "Diarycontent" > < h2 > diary content </ h2 > < div className = "info" > < span > 작성자: { author } | 감정점수: { emotion } </ span > < br /> < span > { update_time } </ span > </ div > </ div > ); }; export default Diarycontent ;

  • newData
  • nodejs
  • javascript
  • react
댓글 1 좋아요 0 조회수 249

최상위 태그 관련 에러 ?

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

리스트렌터링 부분에서 최상위 태그가 없어서 에러가 난다는 부분에 대해서 다시 한번 설명 부탁드리겠습니다. <h2></h2> 부분을 같이 쓰고 싶다면 어떻게 최상위태그로 묶어주어야하나요? import Diarycotent from "./Diarycontent" ; const DiaryList = ({ diarylist }) => { console . log ( diarylist ); return ( < div > < h2 > 일기장 list </ h2 > < div > { diarylist . map (( it ) => ( < div > < Diarycotent /> </ div > < div >< h2 > aaaaaaaaa </ h2 ></ div > )) } </ div > </ div > ); }; export default DiaryList ;

  • jsx
  • javascript
  • 리스트렌더링
  • react
  • nodejs
이종민 댓글 1 좋아요 0 조회수 307

궁금한 점이 있습니다.

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

불필요한 css를 purgecss로 제거하셨는데, 궁금한 점이 웹앱의 경우는 웹에서 사용하는 css는 앱에선 필요없고, 앱에서 사용하는 css는 웹에서는 필요없는데 이런것도 구별해서 제공을 해주는지 궁금합니다. 웹앱의 경우는 두개의 css를 다 갖고 있어서 불필요한 css를 줄일 수 있는지가 궁금합니다.

  • 질문
  • react
  • devtools
s s 댓글 1 좋아요 1 조회수 286

import {Icon} 에러 나시는 분

미해결

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

직접 공식문서 찾아드리려 했지만 이분께서 정리를 잘 해주셨습니다. ant design업그레이드 되면서 바뀐 문제입니다. 참고: https://shinye0213.tistory.com/317

  • react
  • redux
  • mongodb
  • nodejs
손서연 댓글 1 좋아요 0 조회수 276

++에 대해서 궁금합니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

1:40부근에 ++에 대해서 설명하실때 예를들어 i++ 라고하면 i에 1씩 더한다고 설명하셨는데. 실행할때는 i=0 이라 선언하고 i++를 실행하면 바로 1이더해진값인 1이 나오는게아니라 한번더 i의 값에 대해서 물어야지 1이더해진 값이 출력되더라구요. i++가 한번치면 i+1 두번치면 i+2 인데 해당상수 더하기는 바로적용되서 값이 반영되던데 ++는 어째서 출력값이 한번더 i의 값에대해 물어야지 나오는건가요? 쓸때없는 질문이지만 단순호기심에 여쭤봅니다.

  • HTML/CSS
  • javascript
  • react-native
  • nodejs
  • tensorflow
  • react
  • express
  • 머신러닝 배워볼래요?
댓글 1 좋아요 1 조회수 170

인기 태그

인프런 TOP Writers

주간 인기글