react와 node를 사용해서 youtube clone을 만들어보았다 ,물론 youtube의 모든 기능을 구현한 것은 아니고 react사용해서 간단한 ui나 node사용해서 로그인,영상 업로드 정도만 해보았다. 로그인은 passport사용해서 카톡으로 로그인이 가능하게 구현했다. 이 과정에서 front랑 backend에서 세션 쿠키를 공유하는 부분에서 배움(고통)이 있었다,,, 로그인 후에 mongodb에 넣어둔 사용자 카톡 프로필 사진과 이름을 가져와서 react의 state로 지정해주었다. 그 이후는 react 사용해서 간단한 modal창으로 업로드를 구현했다 upload는 nodejs에서 multer를 사용해서 구현했다. (캡쳐하면서 느낀건데 modal창 기왕 만들꺼면 좀 이쁘게 좀 꾸밀걸 아무리..

youtube-clone을 만드는 와중에 동영상과 썸네일 제목을 입력 받는 과정에서 스키마를 2,3번 수정했다. 근데 문제는 이 과정에서 drop collection을 하지않아서 mongodb에서 색인 오류가 나타났다;; 분명 upload폴더에는 사진과 동영상이 업로드되는데 중복 색인이라는 오류를 보고 캠퍼스에서 documents만 지우고 실행해도 되는줄 알았다. 이 오류를 발생시키는 색인은 현 상황에서는 더 이상 보이지 않는 이전 코드에 의해 생성되었을 가능성이 높다 그래서 컬렉션을 drop하니 문제가 되는 색인 지워져서 다시 db insert가 정상 작동되었다. 맨처음에는 몽고db에서 자동으로 생성해주는 id(ObjectId)의 옵션을 혹시 추가로 auto:true로 지정해줘야 하는줄 알았다,,;

todos 배열을 받아 map함수를 적용해서 todos배열안의 객체들의 값들로 각각의 를 생성하는 함수다 map 함수는 배열을 받아 그 배열에 포함된 요소 하나하나에 함수를 적용한 결과값을 리턴하여 다시 배열로 만든다. map 함수에 반환한 배열에 key가 설정되어있으면 배열 업데이트시 더 효율적으로 리렌더링이 가능합니다. 배열에 key가 없다면 배열에 요소 추가 시 배열을 0~n까지 순회하여 맨 마지막에 값을 추가하고 전체 배열의 값을 바꾸는 방식이고 , 삭제 또한 전체 요소를 한번 순회하고 나서 삭제가 끝나면 전체 배열의 값을 바꾸는 방식입니다. 하지만 key가 있다면 값을 바꿀때 해당 부분으로 pin-point가 찍혀 바로 바꿀 수 있습니다. onRemove 함수를 사용할 컴포넌트에서 지정한 eve..

한동안 jsp만 하다가 react를 한번 맛보고(?) 건들지 않아서 이번에 기회에 다시 복습하고있다. 오랜만에 보는 컴포넌트 구조는 처음에는 당황 스러웠지만 다시 익숙해졌다. 뭔가 계속 정적이었던 jsp 보다 front를 동적으로 구현할 수 있어서 수월했다. Todo리스트를 만들어 보고있는데 app.js라는 큰 화면안에서 파트별로 내가 원하는 부분을 컴포넌트로 구현하는 방식이라서 그런지 바로 페이지를 하나 만드는것 보다 작은것 부터 해보려고한다. 일단 react는 html xml과 구분되어 지기위해 camelcase로 작성을 유의하자 props와 state를 까먹었지만 다시 보니 생각이 났다. 나 자신의 언어로 단어의 의미를 재정의 해보자면 prop은 자식 컴포넌트에게 넘겨줄 값 state는 현재 상태와..