묻고 답해요

정말유익해요

해결됨

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

좋은 정보 정말 감사합니다! 돈이 아깝지 않네요ㅎㅎ

• react
• devtools

톡방 비밀번호

미해결

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

지금까지 강의 보면서 톡방 비번을 못본거 같은데 혹시 어디에 있었는지 알 수 있을까요..

• nodejs
• javascript
• react

실제 배포한 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
• nodejs
• deserializeUser
• react
• Next.js

requirment.txt 관련 질문입니다.

미해결

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

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

• django
• python
• react
• docker

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

해결됨

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

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

• nodejs
• react
• javascript

내용 학습 관련 질문

해결됨

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

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

• python
• docker
• django
• react

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

해결됨

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

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

• 리액트
• nodejs
• react
• javascript
• react

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

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

해결됨

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

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

• nodejs
• javascript
• react

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

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

해결됨

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

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

• validationerror
• django
• docker
• python
• react

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

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

최상위 태그 관련 에러 ?

해결됨

한 입 크기로 잘라 먹는 리액트(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

궁금한 점이 있습니다.

해결됨

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

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

• 질문
• react
• devtools

import {Icon} 에러 나시는 분

미해결

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

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

• react
• redux
• mongodb
• nodejs

그림 불러오기

미해결

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

그랩마켓이라는 이미지 불러오기가 안되네요... 어떻게 해야될까요???

• express
• tensorflow
• HTML/CSS
• nodejs
• javascript
• 머신러닝 배워볼래요?
• react-native
• react

Props 강의 관련해서 질문!!

해결됨

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

안녕하세요. OddEvenResult 관련 부분 설명 시, 저는 decideodd 라고 했을 때는 인식이 되지 않다가 Decideodd 라고 하게 되면 인식이 되는 모습을 볼 수 있었습니다. 즉. 함수명은 소문자로 시작하면 에러가 발생을 합니다. 관련해서는 무조건 대문자로 시작을 해야하는건가요??

• javascript
• react
• nodejs

React alert창 띄운 후 확인 버튼 누르면 값 갱신 안되게 하는 방법ㅠㅠ

미해결

안녕하세요, react로 웹 페이지를 제작 중입니다. 다름이 아니라 3개 이상 선택하면 alert창으로('3개까지만 선택 가능합니다')라고 띄우는 것 까지는 썼는데 이제 확인을 누르면 4개도 다시 클릭이 되더라구요.. 이걸 막는 방법은 뭐가 있을까요..? 관련된 함수랑 코드를 써놓겠습니다..! const [ number , setNumber ] = useState ( 0 ); const increaseNumber = () => { setNumber ( number + 1 ) }; const decreaseNumber = () => { // number의 값을 감소시키는 함수 setNumber ( number - 1 ); }; const over3 =() => { if ( number >= 3 ){ alert ( '3개까지만 선택 가능합니다!' ); } } //onClick에 카운트 세는 함수 설정되어있습니다. < div className = 'movieposter' > { datas . map (( movie , i ) => ( movie . value === true ? < img className = 'img-responsive_clicked' src = "https://movie-phinf.pstatic.net/20220214_120/1644825641315cvVKI_JPEG/movie_image.jpg?type=f125" alt = { i } onClick = { () => { decreaseNumber (); handleClickImage ( i );} } /> : < img className = 'img-responsive' src = 'img/movie_image1.jpg' alt = { i } onClick = { () => { increaseNumber (); handleClickImage ( i ); over3 ()} } /> )) } </ div >

• react
• reactjs
• 웹페이지
• 프론트엔드

왜 비디오가 이미지보다 늦게 요청되는 걸까요?

해결됨

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

네트워크 탭으로 분석했을 때 비디오 리소스가 팬딩상태였다가 이미지 로드 완료 후 요청되는데 왜 항상 비디오가 이미지보다 늦게 요청되는 걸까요? 리소스 타입에 따른 브라우저 네트워크 상의 우선순위같은 것이 있는지 궁금합니다!

• react
• devtools