목록JavaScript (99)

Enjoy Programming

[clone coding-devflix]

react router에 있는 composition에 대해서 알아보자. composition은 두개 이상의 route를 동시에 랜더링 하는 방식이다. 예를 들어 tv라는 Router가 있는데 tv안에는 또 다른 tab들이 있다고 생각해보자. 이런거다 이런거~ tv/popualr/blabal/123/45 이런식으로 tv를 랜더링함과 동시에 연결된 route들이 있으면~ /tv와 /tv/popualr는 /tv로 location이 일치한다. 접속해보면~ 역시 동시에 랜더링 되어버린다... 이때 필요한건?! exact인가?! 일단 니코는 header를 만들어 이해해보자고 한다. componenets폴더에 Header.js를 만들고 route로 링크를 걸어주자~ 그런데.. 문제가 생겼다 해당 링크로 url에 접근..
카테고리 없음 2021. 6. 7. 11:25
[clone coding- devfilx] 클론코딩 시작

앞서 간단한 무비 info앱을 만드는 것으로 react를 맛보았다. 이제 본격적으로 movie app을 clone coding해볼것인데 바로 팝콘타임이라는 스트리밍 사이트를 클론해본다. 약간 넷플릭스 비슷하지만 ~ 해적판 사이트라 불법;;; 사용해본적은 없는데 클로닝만 진행해보자 먼저 앞서 create-react-app을 설치한 것 처럼 새로운 폴더를 생성해서 npx를 이용해 repository를 생성했다 그리고 필요한 prop-types도 설치하고~ 라우터를 설정해줄 react-router-dom도 설치하고~ 필요한 라이브러리 설치후~ 라우트와 컴포넌트들을 만들어 주었다. 각 라우트들에는 default로 export하는 함수를 설정해주고 라우트 접속시 각 페이지의 이름을 띄워주었고~ 중요한 라우터의 경..
JavaScript/React 2021. 6. 6. 21:55
[ES6] Array.find() & Array.findIndex() & Array.fill()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find Array.prototype.find() - JavaScript | MDN find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. developer.mozilla.org 1. Array.find() 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 그런 요소가 없으면 undefined를 반환. 자 예를 들어보자 frineds라는 배열이있고 find()함수를 통해 @gmail이 있는 요소를 찾으려고한다 argument에 @gmail이 있는지 includes메소..
JavaScript/Vanilla Js 2021. 6. 2. 02:38
[ES6] Array.from() and Array.of()

array method에 대하여 알아보자. 1. Array.of() https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/of Array.of() - JavaScript | MDN Array.of() 메서드는 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 Array 인스턴스를 만듭니다. developer.mozilla.org Array.of() 메서드는 인자의 수나 유형에 관계없이 가변 인자를 갖는 새Array 인스턴스를 만든다. 이러한 차이가 있다고 한다~~!~!~ 2. Array.from() https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference..
JavaScript/Vanilla Js 2021. 6. 1. 18:48
[ES6] String method

1. includes() https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/includes String.prototype.includes() - JavaScript | MDN includes() 메서드는 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고, 결과를 true 또는 false 로 반환합니다. developer.mozilla.org 인클루드 메소드는 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고. 있으면 true 없으면 false를 반환한다. 2. repeat() https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/G..
JavaScript/Vanilla Js 2021. 6. 1. 17:47
Planning the movie component

component 의 life cycle까지 알아보았고. 이제 movie app을 만들기 위해 movie component를 구성해본다. state를 만들어주고 기본적으로 컴포넌트가 마운트 되면 라이프 사이클이 시작된다. 라이프 사이클은 마운트 되는 순간 시작되었으니 isLoading은 당연히 true이다. render에서 isLoading이 true이면 Loading을 아니라면~ Ready라고 알려준다. 자 이제 로딩이 끝나면 ready로 변경이 되어야 하는데~ 컴포넌트의 render를 하면 호출되는 life cycle method인 componentDidMount함수를 통해 setTimeout함수로 5초뒤 setState를 이용해 isLoading을 false로 바꿔준다. 6초뒤 브라우저는 Loadi..
JavaScript/React 2021. 6. 1. 03:22
이전 Prev 1 ··· 7 8 9 10 11 12 13 ··· 17 Next 다음