Enjoy Programming

기존 자바스크립트에서 삼항연산자의 경우 condition ? ture - return : false- return 이런식으로 condition이 true이면 true일때의 리턴갑슬 false이면 false일때의 리턴값을 보내주는 방식이다. 뭐 중첩도 되고 여러 방향에서 쓰일 수 있다. 그런데~ react를 공부하며 삼항연산자에 && operator를 알게되었는데 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가된다. 쉽게 말해 true일때만 expression이 실행된다. false라면 그냥 react는 무시한다. 살짝 맛만 보자면 위 코드에서 기본적으로 nowPlaying이 false이면 오른쪽은 아에 실행되지 않는다,..

기존 클론코딩을 하며 mongoose의 populate메서드를 가져다 쓴적이 있는데.. 음 object id를 가져온다는건가? 뭔지 이해가 잘 안갔는데 차근차근 다시 포스팅해본다. mongoose 공식 doc을 보면 mongo-db의 lookup과 같은 연산자를 갖고 있다. 그리고 mongoose는 더 강력한 대체항목으로 populate()메서드를 가지고 있다고 한다. 그럼 간단히 말해 populate()가 하는 역할이 무엇인가~ 다른 스키마의 정보를 참조해서 쓰는것이다. 우선 두개의 스키마 user와 video 가 있다고 하자 그리고 video 스키마에는 owner라는 key가 있다. 그리고 이 owner는 ObjectId 타입이고 User model을 참조하고 있다 이때 owner를 통해 User ..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce Array.prototype.reduce() - JavaScript | MDN reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. developer.mozilla.org 금일 챌린지 중에서 배열의 원소들을 모두 합하는걸 써야 했는데 음 이전 파이썬 c언어 할때는 주로 for문 돌려서 연산을 했다~ 음 찾아보니 자바스크립트에는 reduce라는 좋은 메소드가 있었다. 배열의 각 요소에 대해 주어진 reducer함수를 실행하고 하나의 결과값을 반환한다. 리듀서는 네개의 인자를 ..

리액트 챌린지 1일차.. 아 순간 벙쪘다... 에러투성이.. 1일부터 이렇다니;;; 내가 클래스에 대해 너무 몰랐던거 같다.. 일단 오늘 클래스에 대해 한가지 알게 된점을 서술하고 몇가지 함수만 기록한다. 우선 챌린지 진행을 하는데 주요 골자는 클래스 하나가 선언되어있고 외부에 오브젝트 두개가 있다. 그리고 인스턴스를 만들지 않고 함수를 실행해서 새로운 객체를 만들어주는 것인데.. 이제껏 인스턴스를 만들어서 함수를 실행하는 것만 해보다 보니 벙쪘다. 한 두시간 헤맨거 같다.. 근데 slack의 친절한 도움으로 해결할 수 있었다.. mdn을 잘 살펴보자 ㅠㅠ mdn이 최고다.. 독해력이 좀 부족할뿐.. 바로 이부분이다... 기존 작성된 코드를 건들지 않고 해야 하다보니 필수로 이용했어야 할 정적메서드 이다..

detail 컨테이너 작업을 해주는데 아직 detail page에 대한 route가 없다. 라우터로 가서 route를 만들어주자 detail 페이지는 해당 영상의 id가 필요하다. id를 변수로 :id를 지정해주고 라우트를 만들어줬다. 잊지말고 컴포넌트는 임포트해주자. 그리고 :id를 URL로부터 어떻게 가져오는지 movie에 해당 id를 보여줄지 tv의 해당 id를 보여줄지 선택할 수 있게 작업해야한다. 먼저 header 라우터에서 withRouter를 사용했는데 이때는 라우터에 의해 호출된 컴포넌트가 아닌 항상 보여지는 컴포넌트이기에 location값을 얻기위해 사용했다. 하지만 router설정이 되어있는 detail의 경우 withRouter없이 링크를 클릭해 라우터에 접속함으로 인해 history..

앞서 home과 tv컨테이너의 로직은 거의 같다. tv컨테이너는 따로 작성할 필요가 없으니 search container로 넘어와서 포스팅한다. search컨테이너는 많은 로직이 들어간다. 첫번쨰로는 handleSubmit을 한다. react에서 form다루는 거라고 생각하면 된다. form에서 text를 인풋하고 submit하면 handleSubmit하는 거~~~ 잠시 react.doc을 살펴보면 react에서 html form element는 form element자체가 내부의 state를 가지기 때문에 react의 다른 Dom element와 조금 다르게 동작한다고 한다. 기본적으로 이 폼은 사용자가 submit하면 새로운 페이지로 이동하는 기본 html폼 동작을 수행한다. react에서 동일한 동..