Enjoy Programming

먼저 spread를 알아보겠다. spread연산자는 전개구문으로 ... 점 세개를 사용해서 사용가능하다. mdn에 따르면 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수(함수로 호출할 경우) 또는 요소(배열 리터럴)로 확장하여, 0개 이상의 키-값의 쌍의 객체로 확장시킬 수 있다. 음 뭔소리야 쉽게 생각해 이렇다.. 그냥 콘솔에 찍어보면 저 배열 그대로 배열임을 나타내지만 spread는 배열을 나타내는 []를 표시 하지 않고 풀어 헤친다. 왜 풀어 헤치냐고?.. 음 배열 하나 더있다고 생각하고 합쳐보자 짜잔~ 하나의 배열로 합쳐졌다. 꽤 좋은듯 하다.! 물론 concat()이라는 함수도 있으나~ 이방법도 괜찮은듯 하다~ 그리고 object에도 똑같이 사용가능하다~! 두 ..

자 이번에 다룰 ES6는 destructuring(비구조화)이다. Destructuring이란 구조화된 배열 또는 객체를 비구조화(파괴)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다. 쉽게말해 object나 array같은 구조 안의 요소들을 변수 바깥으로 빼내서 사용할 수 있도록 하는것이다. 먼저 object부터 보자 기존 객체에서 어떤 정보를 빼오려면~ settings.notifications.follow 이런식으로 해야 했다. 그러나 destructuring을 이용하면 value를 추출해 변수에 할당하면 된다. 음 위코드는 default까지 지정한 것이라 좀 헷갈릴 수 있으니 이 코드를 보면 더 이해가 쉽다. 아주 코드가..

몽고db를 사용을 위해 mongoose를 사용하던 중 업로드한 파일을 수정시 파일이 있는지 여부를 체크할때 기존 findById로 video객체를 전부 불러와 있는지 확인했다. 그런데~ 더 간단? 하게 확인 할 수 있는 방법이 있는데 바로 Model.exists()를 사용하면 된다. exists() function은 Promise를 return하는데 데이터베이스에 해당 필터와 일치하는 문서가 하나 이상이 있으면 true를 반환하고 아니라면 false를 반환한다. 여기서 filter는 object이다. callback함수도 필요하다고 doc에는 나와있으나 async await을 이용해 콜백없이 사용해본다. 기존 해당 비디오가 있는지 판단후 없다면 오류메세지를 반환하는 코드이다. exists를 사용해서 동일..

react에서 네비게이션을 만들어주는 패키지인 react-router-dom을 사용해보자 https://reactrouter.com/web/guides/quick-start React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com HashRotuer -> Route path problem -> 라우터를 읽을때~ 읽어 들인 모든 " / " , " about " 까지 다 랜더링해서 /about 페이지에서도 다보임 이때 exact={true}를 사용함 Navigation 컴포넌트를 하나 만드는데 a href를 사용하면 html이기때문에 매번 Loading이 이루어짐 Link to를 사용 detail 페이지를 만들..

음.. 오랜만에 챌린지 기록을 해본다 그동안 계속 챌린지는 진행중이긴 한데 ~ 다른거 포스팅하고 공부하느라 이것 까진 못하겠다 싶었는데 오늘부터는 간단하게라도 기록해야겠다. 일단 오늘의 challenge내용은 영화정보가 담긴 fakeDB를 이용해서 간단한 웹을 제작하는 내용이다. 조건이 세가지 있는데 먼저 기본적으로 정의된 세가지 컨트롤러가 있는데 1. home should list all the movies 2. movieDetail should show a movie based on the :id 3. filterMovie should filter for a movies based on the rating or the year.~! 홈 컨트롤러는 모든 영화리스트를 보여줘야하고, 영화디테일 컨트롤러는 ..

지난 포스팅에 이어 영화를 랜더링해보겠다. api를 통해 얻어온 movies를 console.log해보면 이렇게 data를 확인 할 수 있다. 이번엔 movies.data.data.movies를 콘솔창에 띄워보자 이렇게 각 영화의 id~ url~ title~등등 정보를 확인 할 수 있다. 이제 render method에서 isLoading이 false로 바뀌면 ready를 리턴하도록 되어 있는데 movie data를 리턴하도록 바꿔보자. Movie.js파일을 하나만들고 역시 react와 Prop-types를 import 해주자. 그리고 movie component는 state가 필요없으므로 굳이 class component로 만들 필요가 없다 function component로 만들어보자. Movie 컴..