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

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   그런데 무엇이 문제인지 모르겠습니다 도움 부탁드립니다.

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

 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('');

  이 부분에서 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;

  리스트렌터링 부분에서 최상위 태그가 없어서 에러가 난다는 부분에 대해서 다시 한번 설명 부탁드리겠습니다. <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;

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

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

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

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

안녕하세요, 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>

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

선생님 혹시 진짜 별거 아니긴한데 module.exports 여기에 색 들어오게 하는건 어떻게 하셨나요 ㅠㅠ 저는 그냥 흰색으로 나와서 뭔가 밋밋해서 바꾸고싶은데 방법을 모르겠네요

안녕하세요 zerocho 님 eslint 설정관련해서 질문이 있습니다.   eslint에서 env쪽에 node: true를 주시면서 node에서 사용하니까 주셨다고 하셨는데   next.js는 Browser환경에서 실행되지 않나요? server 코드가 따로 있는게 아닌 것 같아서요   혹시 이유를 알 수 있을까요?

강의 뒷부분에서 나온다고 댓글 확인했는데 아직 안나와서요.. height:100%는 어디다 적용되었는지 모르겠네요

안녕하세요! 이제 강의를 들을려고 합니다. 먼저 저의 상황은 이와 같습니다. Django를 통해 전체적인 웹개발에 대한 흐름을 공부해볼려고 시작합니다. 그 후, backend web 개발자나 Devops나 Data 분야로 가는 것을 결정해볼라고 합니다.  Django에 대해 그냥 유튜브 검색을 해보니  [Django를 추천하지 않는 이유](https://www.youtube.com/watch?v=ObelJbEt8-Y) 를 보게 되었습니다. 이 영상에서 봤을 때, 웹 개발을 공부하고 싶으면 Django를 하지 말고 Spring을 해야 한다는 의견이었습니다. Django는 너무 dB에 집중되어 있다고 했습니다. 3년 전 영상이라 지금은 어떨지 모르겠습니다. java spring 시장이 한국에서 매우 거대하여 python Django가 상대적으로 적어도, 절대적으로는 적은 수는 아니라고 생각합니다.  (그리고 python은 너무너무 가용성이 좋은 언어라 개인적으로 좋아하는 언어입니다  : )  ) 이에 대해 어떻게 생각하시는 지 궁금합니다.

안녕하세요! 환경세팅부분에서 계속막히는데요 ,,저는 yarn 설치 시 yarn lock 이 생성되지 않아 touch lock으로 생성하였습니다. 그 후 client 폴더에서 sass와 axios webpack을 설치하려 하니 다음과 같이 뜹니다. 어느 파일에 무얼 추가하면 될까요? 하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  안녕하세요 강의 잘보고 있습니다! DB 관련해서 제가 몇가지 궁금한게 있는데 1.  예를 들어 하나의 테이블에서 다 대 다일때 즉 user 와 user에 다대다 일때  중간테이블 follow를 만들어주지 않고 한 User 테이블에 컬럼을 늘리는건 별로 안좋은 방식인가요? 예를 들어서 follow 테이블을 만들지 않고 User 테이블안에 팔로우, 팔로잉 수 컬럼을 넣는 방식   2. 다 대 다 관계일시 중간테이블 관련 다 대 다 관계일시 데이터베이스 이론적으로는 중간테이블을 만드는걸로 저도 배우긴 했는데 근데 이게 프로그래밍 관점에서 테이블을 너무 많이 늘리고 join이 많아질시 성능이 안좋다고 배웠던 기억이 있어서요 그래서 이게 실무에서도 다대다일시 중간테이블로 쪼개고 join을 자주 발생시키는지 궁금해요  로그인 같은경우에도 팔로우,잉,쓴글갯수를 유지하기 위해 로그인을 할때마다 post 테이블 follow 테이블 과의 3개의 테이블을 조인시켜서 select 하는 경우인데 과연 이런식의 3중조인을 로그인할때마다 해줘야 하는건가에 대한 생각 꼭 조인을 이렇게 많이해야 저 데이터를 가지고 올 수있나에 대한 DB설계에 대한 생각이 공존합니다. 아니면 제가 너무 오버하는 것일지 문제가 되지 않는 것인지... 그래서 실제로도 실무에서도 이런식으로 중간테이블과 db설계관련 또한 그걸로 인한 많은 join 관련해서 궁금하네요  ++ 제가 이런 생각이 든 이유가 게시판을 만들때 게시물 상세 페이지에 파일갯수랑, 댓글 갯수를 게시물 리스트에 명시해주는 로직을 짜다가  join 몇번해서 select 해서 가져와보자 했는데..  다른분께서 이유는 말안하셨지만 join 그렇게 하지말라고 하셨거든요 그래서 그래서 게시물 DB에 갯수에 대한 컬럼을 늘려서  게시물 상세페이지 작성시 댓글, 파일 insert 할때 게시물 db에 갯수counting 해서 insert 하고 조인 없이 list 뿌려지는 형태로 바꿨거든요 그게 생각이나서요(insert 시 다른 db에는 count+1 insert 한 동작에 각 테이블의 2번의 insert 작업) 3. db 생성시 post.js user.js -> 실 테이블 posts, users 뒤에 s가 붙는데 이건 왜 붙는건 가요?   제가 실무 경험이 없어서 꼭 알고 싶은 포인트입니다.. ** 질문이 많은데 읽어주셔서 감사합니다.

안녕하세요 선생님 휴일인데 죄송합니다. 저는  강의를 듣기전에 미리 한번 먼저 해보고 하는 방식으로 공부중입니다. 다만 로그인이나  프로필 수정쪽은 FBV를 사용해서 직접 구현을 하셔서  이번 비밀번호 변경도 FBV로 구현을 하겠구나 생각하고 AUTH앱의 PasswordChangeForm과  FBV로 구현해보고 강의를 수강하였습니다.  선생님께서는 CBV로 구현을 하셔서 질문드립니다. CBV와 FBV를 다양하게  쓰는 예를 보여주시려고 사용하신건가요? 아니면 CBV는 AUTH앱의 passwordchangeVIew를 가져오면  기능들이 갖춰져 있기 때문에 편리하고 더 효율적이기 때문에  사용하신건가요? 아니면 그냥 아래 처럼 맞는지는 모르겠지만  함수로 구현해도 상관은 없는건가요? 처음 질문이라 좀 요점이  없는것 같은데 죄송합니다.  @login_required def password_change(request):     if request.method == 'POST':         form = ChangeForm(request.POST)         if form.is_valid():             form.save()             messages.success(request,"비밀번호 변경 성공")     else:         form = ChangeForm()     return render(request,"accounts/password_change_form.html",{'form':form,})  

안녕하세요. 다른이 아니라 수강생 카카오톡 그룹 채팅방 입장 비밀번호는 어디서 알 수가 있는지 궁금합니다.. 혹시 강의 구입후 처음 듣기 시작했을 때 나왔던 모달창에 비밀번호가 작혀 있었을까요?ㅠㅠ 차음 수강 시작 했을 때 모달창이 한개 나왔던거 같은데.... 제대로 확인을 못 해서 질문드리게 되었습니다