본문 바로가기
반응형

Dev

 (122)
React 실습 -6 와우 또 왔군.. 가자ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ 여기서 이런 말을 하는 사람도 있어! state는 단지 object잔아 ? 이거로 뭘 할 수 있다는거야? 예를 들어서, 내가 add를 쓰고 싶을 때, 단지 this.state.count = 1을 할 수 있다는걸 의미 해 minus를 쓰고 싶을 땐, this.state.count = -1 단지 예일 뿐이야! 적용하고 런을 해보자! 오잉? 보다시피 동작하지 않지? state를 set해라, 직접 state를 변경하지 마라 라고 하네 왜 동작하지 않을까? 나는 state를 변경하고 있지만, state는 동작하지 않아! 나한테 보여주지 않아! 그 이유는, react는 render function을 refresh하지 않기 때문이야 저렇게 해서 작동한다는 것은 매번 s..
React 실습 -5 자자자자자ㅏ자자ㅏㅏ자자 이제 그동안 했던 food 예제들을 버려야 햌ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 겁나 아까운데 아까워하면 안돼 .. 이제 state에 대해 배워야 하는데 food 예제는 state를 위해 동작하지 않기 때문이야.. 왜냐면 이 데이터들은 내가 작성했어 state는 보통 동적 데이터와 함께 작업할 때 만들어져! 변하는 데이터, 존재하지 않는 데이터! 그리고 생겨나고 사라지고 또는 변경되고, 하나인 데이터가 두개가 되고 0이 되는 종류의 것들 이게 바로 dynamic data야! 그리고 이런 props는 우리를 돕지 않아!! 우리가 필요한건 state야 !!! 아아ㅏㅏㄲ!!!!!!!!!!!!!!!!!!!!!!! 자 슬프지만 다 지우자 .... 그리고 우리는 function compo..
React 실습 -4 바로가자ㅏㅏㅏ 우리는 항상 점검할 필요가 있어! father component로부터 전달받은 props가 우리가 예상한 props가 맞는지! 이걸 보기 위해서 list각각에 rating을 추가할거야 rating은 말그대로 평가한다는 뜻이야 그리고 이건 number야 바로 코드 추가 해보자고 rating 즉, 평가! 음식이니까 평점을 표시하기 위해 한거야 이건 string이 아니라 number라는걸 기억 해! 앞으로 점점 많아지는 props를 나의 food object로 전달하고 싶기 때문에 이렇게 할거야! 그리고 props types라고 하는것을 설치하려고 해! node.js에 무언가를 설치하는 방법은 npm 뒤에 설치하고 싶은걸 쓰면 돼 props types 같은 경우는 npm i prop-types ..
React 실습 -3 호호호호 실습2를 마치고 오셨나? 그렇다면 아직 멀었군ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 실습 2에서 한 일들은 효율적이지 않아!!! 왜냐하면 우리가 새로운 음식을 추가할 때 마다 복붙을 해야 하거든!! 우리는 복붙을 원하지 않아! 데이터는 처음부터 우리가 가지고 있던 데이트가 아니기 때문이야 이 데이터들은 웹사이트에서 온 데이터들이야. 따라서 우리는 갖고 있지 않은 데이터를 복붙 할 수 없어! 따라서 이제 할 방법은 웹사이트에 동적 데이터를 추가하는 방법이야! 가보자고~ 우리가 할 것은 데이터가 있다고 시뮬레이션 하는거야. 데이터가 이미 API에서 왔다고 생각해보자! 따라서 다음 할 일은 함수를 만드는거야, 다른 함수는 foodILike라고 불리는 array야 이것은 food의 배열이 될거야! 기본적으로 모든 컴포넌..
React 실습 -2 제가 하면 여러분도 하실 수 있습니다!! 진짜에요.. 파일간의 혼란을 피하기 위해 potato 파일을 지워보자! 결과를 예상해봅시다! 당연히 오류! potato 파일에 있던 컴포넌트가 사라졌거든! 그럼 컴포넌트를 생성하면 될까? 결과는 ?? 아싸 나온다리!!!!! 자 이제 컴포넌트는 이해한것 같고! 진도를 나가보자!! JSX에서 두번째로 이해해야 할 것은 이 컴포넌트에 정보를 보낼 수 있다는 점!!!!! React가 멋진 이유는 재사용 가능한 컴포넌트를 만들 수 있다는 점!! 이 말은 컴포넌트를 반복 사용 가능하다는 말!! 예를 들자면, 영화목록이 있다고 생각해보자 영화 목록이 여러개 있다면, 하나하나를 수동으로 만들어야하지! 하지만 컴포넌트를 사용한다면 하나의 컴포넌트만 생성하고 나머지는 부르기만 하면..
React 실습 -1 component는 HTML을 반환하는 함수! 따라서 우리는 function, application을 가지고 있고 이것은 HTML을 반환할거야 ReactDOM.render(, document.getElementById("potato")); 부분이 우리가 component를 사용하고자 할 때, component의 형태! 리액트는 컴포넌트를 사용해서 HTML처럼 작성하려는 경우에 필요해 javascript와 HTML 사이의 이러한 조합을 jsx라고 부른다 JSX는 react에서만 쓰이기 때문에 vue, augular 등 에서는 아무짝에도 쓸모가 없어! 하지만 react를 써야한다면 알아둬야한다! 어떻게 컴포넌트를 만들 수 있을까? 매우 간단하지 src폴더에 potato.js를 생성! 여기서 중요!! 컴포넌트..
자동으로 높이 설정 및 스크롤 했을 때 페이지 상단으로 이동 //높이 정하기 function activeHeightSet() { var activeHt = $(".swiper-slide-active .mainImg").height(); eventActiveHt(activeHt); scrollUp(); } //높이 실행 function eventActiveHt(activeHt) { $(".swiper-container").stop(true).animate( { height: activeHt, }, 200 ); } //스크롤 했을 때 페이지 맨 위로 이동 function scrollUp() { $("body, html").stop(true).animate( { scrollTop: "0", }, 200 ); } // 스와이퍼 할 때 함수 실행 swiper.on("sli..
css transform matrix [CSS] transform matrix transform의 값들인 translate(이동), skew(기울기), rotate(회전), scale(확대)를 transform: matrix(1, 0, 0, 1, 0, 0) 또는 행렬로 표시하는 것을 말합니다. ** transform matrix 를 쓸 경우 transform 함수들보다 간결하게 사용이 가능합니다! ​ transform: translate(0,0); transform-origin: top right bottom right center; transform: skew(45deg); transform: rotate(45deg); transform: scale(1); transform: matrix(1,0,0,1,0,0) ​ [ transfrom 행..
반응형

티스토리툴바