Enjoy Programming

react에서 styling해주는 방법은 css파일을 만들어 한번에 import 해주거나 또는 각 컴포넌트들과 묶어서 css를 import해주는 방법이 있다. react는 각 부분부분을 나누어 쓰는 컴포넌트화 시키는 것에 의미가 있기에 이런식으로 index.js파일을 포함한 폴더를 만들어서 default로 내보내주면 인식이된다. 음 .. index라는게.. 의미가 크구나 싶다. 아직 잘 이해는 안간다 계속 봐야 할듯 하다. 그런데 css를 하다보면 class명을 주기가 참 까다롭다. class명이 중복되지 않도록 코드를 짜는게 상당히 성가시다. 물론 같은 class를 줘서 함께 prop을 주기는 좋지만~ 코드가 방대해지다 보면 다른 부분과 겹칠 가능성도 농후한데 react에서는 css모듈이라는 것을 이용..

https://codesandbox.io/s/a11blueprint-forked-0q4pq?file=/src/movieController.js a11Blueprint (forked) - CodeSandbox a11Blueprint (forked) by lee-tae-eon using @babel/core, @babel/node, @babel/preset-env, axios, body-parser, express, mongoose, pug codesandbox.io mongoDB 이용하기..

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에 접근..

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

이번엔 rest와 spread , destructure를 이용해서 예제를 살펴보자. 먼저 user라는 오브젝트를 하나 만들고 prop중 하나를 제거 해보자 password를 null로 만들어줬다. 원하는 것은 이게 아니라 password라는 prop을 아에 제거하는 것이다. 함수를 만들어보자 destructure와 rest를 이용해서 password를 제외한 rest만 return해주는 함수이다 정확히 password를 exclude하고 나머지 rest props 만 가져와서 출력해준다. 이번에도 rest와 destructure를 이용해 default value를 설정하고 prop을 추가해주는 function을 만들어준다. prop이 추가되었고 default로 korea를 넣어준다. 멋지다. 여러 코드를..

자 언제나 그랬듯 mdn을 살펴보자 Rest파라미터 구문은 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 합니다. 언제나 그랬듯 뭔말이냐... 자 보면 ...을 붙여 spread를 사용해주고 theArgs에 1,2,3이라는 인수를 넣으면 자동으로 separate되고 순차적으로 previous, current에 들어가고 그리고서 앞서 들어간 인수들을 합치고 합친결과를 그다음 인수랑 합쳐주고 또 그결과를 마지막 인수와 합쳐준건가? 그래야 맞긴하다. 설명을 더 보면 함수의 마지막 파라미터의 앞에 ... 을 붙여 모든 나머지 인수를 표준 자바스크립트 배열로 대체한다. 마지막 파라미터만 rest파라미터가 될 수있다. 뭔말이야.. help me nomad! 니코쌤은..