guricode

리액트를 다루는 기술을 읽으며 차분하게 복습하고 있다. 첫번째 목표는 투두리스트를 만들어 배포하는것. 교육을 받을때 미리 만들어서 올린 동기생이 있었는데 뒤늦게 나마 만들려고 해본다. 교재에 들어있던 코드중 new라는 연산자가 있어 검색하게 되었다. 함수로 객체를 생성한 뒤에 변수를 가져와서 적용시킬때 new라는 연산자를 사용한다. new 연산자는 영역을 만들어서 함수 내부의 내용을 실행해 준다. MDN에 있던 내용으로 살펴보자 See the Pen Untitled by leeys (@agent-megurii) on CodePen. 코드의 콘솔로그를 살펴보면 함수 Car 객체에 인자를 넣고 mycar라는 변수에 new 생성자 함수를 사용하여 Car안에 있던 객체의 인자를 부여 했다, 콘솔로 Car와 my..

마지막으로 프로젝트 정리중에 이런게 떳다. 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를 이용해 정렬을 했다..

오늘은 리엑트 배운것을 복습해보겠습니다.. 우선 리엑트 터미널에 진입해서 npx create-react-app 폴더명을 입력해줍니다. 명령어를 입력하면 폴더 생성을 알아서 해줍니다.. 시간이 좀 걸려요 조금 기다리면 리엑트 폴더가 생성됩니다. 아까 명령어로 입력한 testfolder가 생겼습니다. 이제 이 폴더에 진입해주어야하는데 다시 터미널로 갑니다. cd라는 명령어로 폴더에 진입할수 있습니다. 다시 나오고 싶으면 cd..을 입력하면 상위폴더로 나옵니다. 이제 리엑트를 시작해주어야합니다. cd명령어로 해당 디렉토리로 진입했다면 터미널에서 npm start명령을 주게되면 아래 화면이 나오면서 리엑트 실행이 완료됩니다.