guricode

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

See the Pen Untitled by leeys (@agent-megurii) on CodePen. 제이쿼리에서 사용하는 draggable 메소드로 axis는 움직이는 축, containment는 선택자를 포함하는 부모요소 revert는 되돌아가는 속성을 키고 끄는 요소입니다.

See the Pen Untitled by leeys (@agent-megurii) on CodePen. 전에 작성했던 aniomation과 같이 사용하면 좋은 transform입니다. transform은 기본적으로 scale, rotate, translate가 있으며 작성 방식은 transform: scale(숫자); 입니다. scale 은 크기를 결정합니다. ratate는 회전각도를 결정합니다. translate는 X와 Y값을 변경할수 있습니다. translate는 자기 자신을 기준으로 이동하기 때문에 주의하셔야합니다.

css로 태그에 움직임을 주는 방법입니다. 쓰는 방법은 이렇습니다. animation: 이름 동작시간 딜레이 반복여부 그리고 @keyframes로 animation 이름을 호출하여 동작을 줘야합니다. @keyframes 이름 { 0%{ 0일때 작동할 css 명령} 100%{ 100일때 작동할 css 명령} } 예시 See the Pen Untitled by leeys (@agent-megurii) on CodePen.

작업을 하다가 문제가 생겼다 label에 before을 만들고 그 before에 hover 이벤트를 주려고했다. 처음에 before에 직접 hover를 붙여서 써보려고했는데 반응이 없었다. 그 다음에 laber에 호버를 붙이고 before를 바로 붙여보았다. 형태는 laber:hover:before 이렇게 사용했다. 이것도 역시 아무 반응이 없었다. 해결책은 이렇다 laber에 호버를 주고 그 자식요소로 before를 넣어주면 before에 hover이벤트가 작동된다.

See the Pen Untitled by leeys (@agent-megurii) on CodePen. 일단 스크립트로 x라는 변수에 70과 80을 넣은 배열을 만들었습니다. 그리고 console.log로 x 를 찍어 확인합니다. (도출되는 값) // [object Array] (2) [70,80] 이제 total변수에 x배열에 있는 0번과 1번의 값을 더한값을 선언합니다. ex) x[0]+x[1]; 그리고 콘솔로 total값을 확인합니다. 150 이걸로 알수있는 사실은 배열의 순서는 0번부터 시작한다는 겁니다. 그러면 x배열에 0번과 1번에는 각각 70과 80이 들어가있습니다. 그러면 2번에는 아무런 값도 없는데 -배열추가하는 첫번째 방법 x[2] = 100;로 x의 배열2번으로 100을 선언해주고 ..

이번에는 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를 이용해 정렬을 했다..

See the Pen Untitled by leeys (@agent-megurii) on CodePen. 1.보통 태그에 있는 클래스로 스크립트에 선언을 한후 선택자로 쓸수 있지만 대상에 id값이 있는경우 선언할 필요없이 바로 선택자로 사용할수 있습니다. 2.이번에는 자바스크립트에 selectedCard라는 함수를 선언하고 select 태그에 onchange를 작성하여 함수를 넣었습니다. 그렇게되면 select박스가 선택될때 seletedCard명령이 실행됩니다. 저는 셀렉트카드함수에 클래스를 추가,제거하는 명령을 주었습니다. 대신 if문을 이용하여value값이 "00"이 아닐경우에만 실행되도록 하였습니다. 연습장에는 태그에 class도 넣어서 클래스 선언시 선택자가 작동하도록 작성되었습니다. id로 쓰..

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