guricode

마지막으로 프로젝트 정리중에 이런게 떳다. firebase login-> firebase init으로 초기화를 완료하니까 업데이트하라고 뜬다..' 일일이 확인 안해도 이렇게 알려주는구나 그런데 업데이트 하다가 이슈가 생겻따.. 표시된 경고는 다음과 같다. har-validator@5.1.3: this library is no longer supported debug@4.1.0: Debug versions >=3.2.0 =4

프로젝트 작성을 하면서 리액트 컴포넌트간 이동을 할때 자연스러운 효과가 없을까 하다 검색해서 찾은 react-transition-group입니다. 사용법 익히느라 좀 애먹었는데 정리하자면 일단 트레지션 컴포넌트를 따로 만들어두고 app.js에 있는 라우터에 호출하는 방법입니다. 처음에는 app에 직접 호출해서 사용하려고했는데 소스가 꼬인건지 제대로 작동을 하지 않았습니다 참고 (https://sso-feeling.tistory.com/548) 이분 블로그를 보고 해답을 얻었습니다. 이제는 쓰지않는 메소드가 있지만 스위치를 라우터로 교체하고 해시라우터 또는 브라우져 라우터로 교체하여 작성하니까 제대로 작동이 되었습니다. 나머지는 css를 수정해서 원하는 효과를 주면 됩니다. 전체적인 컴포넌트 구조는 app..

이번에는 Genre컴포넌트에서 foreach문을 이용하여 해당 버튼을 클릭했을때 같은 값의 데이터를 movie.json에서 필터링하여 보여주는 것이다. 장르부분 컴포넌트다. 같은 영화 데이터를 들고와서 foreach로 반복문을 돌렸다. 그리고 usestate를 이용해 doc에 접근시켰다. clickbtn함수를 이용해 버튼을 클릭했을때 해당 버튼에 있는 id값과 영화데이터에 있는 장르 값이 같을 때 d라는 배열에 넣고 그 배열에 넣어진 데이터만 추출해서 화면에 뿌려줬다. 그리고 새로운 버튼을 클릭하면 다시 비우고 넣고 반복 이렇게해서 버튼을 클릭했을때 그 장르만 화면에 나오게 구성이 되었다.

이번에 개인프로젝트로 간단한 영화 앱을 만들면서 생겻던 이슈를 정리하겠다.. 일단 구성은 이렇다 App.js Rank.js Genre.js detail.js 그리고 영화 정보가 들어있는 movie.json이 있다. 이렇게 App이 메인이고 각 컴포넌트를 메인에 라우트해서 클릭하면 이동할수 있게 해놨다. Detail은 영화를 클릭하면 이동하게 구성했다. 여기서 Detail은 링크를걸어두지 않았다. 왜냐면 Rank와 Genre에서 따로 Link해두었기때문이다. 참고로 라우트 된 컴포넌트에서 또 라우트를 쓰면 중복이 되어 오류가 뜬다. 이렇게 해봤더니 작동이 됐다. 이제 랭킹 컴포넌트를 만들어보자. 랭킹컴포넌트에서 movie.json에 있는 .리스트를 불러와서 랭크에 있는 숫자를 sort를 이용해 정렬을 했다..