Enjoy Programming

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하는 함수를 설정해주고 라우트 접속시 각 페이지의 이름을 띄워주었고~ 중요한 라우터의 경..

유저 프로필 페이지를 수정을 해줄 건데 약간의 수정사항과 추가사항이 있다. 일단 로그인한 유저의 프로필 페이지로 이동을 하면 기존에는 /:id 를 이용해서 갔는데 userDetail 컨트롤러를 이용해서 id값을 찾아 이동을 했다. 사용자마다 똑같은 user template을 이용하는데 이부분을 바꾼다. 그래서 사용자 프로필 페이지 routes와 컨트롤러를 하나 더만들어준다 헤더 템플릿으로 가서 경로도 다시 설정 해주자 기존 userDetail과 같은 기능을 하지만 다른점은 userDetail은 사용자를 찾는 과정이 필요한데 새로 만든 getMe user를 지금 로그인한 유저인 req.user로 전달한다. 햔재 userDetail은 제 역할을 못하기에 프로필 페이지 접속후 :id부분의 url을 임의로 바꿔..

이번에도 이어서 컨트롤러를 더 만져보자 우선 비디오를 클릭하면 비디오 상세페이지로 넘어가도록 해주자 mixins로 이동해서 videoBlock mixin에 링크를 걸어준다. 라우트를 걸어주고 video.id를 인자로 넣어준다. 이 id는 각 비디오에 부여된 id를 인자로 받게 된다. 이제 videoBlock을 사용하는 곳에서 입력할때 id:item.id를 추가로 보내주는 작업을하자. home 템플릿에서 videoBlock에 id 객체를 추가한다. 추가후 비디오를 클릭하면 url상에 비디오 id가 뜨게 된다. 이제 할일은 로그아웃을 클릭하면 로그아웃 페이지가 아닌 로그아웃후home화면을 접속하게 하겠다. 로그아웃 처리는 차후에 하고 일단 랜더링시 홈화면으로 redirect해줬다. 이제 logout 템플릿은..

이번엔 login과 user profile페이지를 다뤄보자. 역시 userController에 가서 get과 post방식의 두가지 컨트롤러를 만들어준다. 하나는 get 방식으로 로그인 페이지를 띄워줄 getLogin컨트롤러와 post방식으로 로그인이 이루어지면 홈화면으로 redirect해주는 컨트롤러 이렇게 만들어주고 로그인이 이루어지면 화면에 뿌려질 헤더 템플릿을 수정해주자. ul태그 하나 만들어주고 사진과 같이 작성했다. isAuthenticated는 요청이 인증 되었는지 확인하는 속성이다. user변수는 아직 데이터가 없기에 설정이 되진않았다. 이제 middleware에 가서 user정보를 객채로 만들어 주자 전역으로 설정할 user정보를 true로 설정하고 id: 1이라는 객체를 넣어줬다. 우선 ..

음 잘 알지는 못하지만 ECMAScript6에는 브라우저상에서 자바스크립트를 모듈을 export, import할 수 있게 되었다. 일단 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 세부 사항을 캡슐화 하고 공개가 필요한 API만을 외부에 노출한다. 모듈은 파일 단위로 분리 ~ 필요에 따라 명시적으로 모듈을 로드하여 재사용한다. c, java, python은 #include, import등의 모듈 기능을 가지고 있다. 그러나 클라이언트 사이드 자바스크립트는 script태그를 사용하여 외부의 스크립트 파일을 가져 올 수 는 있지만, 파일마다 독립적인 파일 스코프를 갖지 않고 하나의 Global Object를 공유한다. ES6에서는 이를 해결? 하기 위해 expo..