분류 전체보기212 macos 오른쪽 커맨드 키를 한영키로 바꾸기 https://macnews.tistory.com/5043 macOS 한영 전환 키를 오른쪽 커맨드 키로 변경하는 방법 (Karabiner-Elements 버전) 맥 운영체제를 시에라로 업그레이드하면 작동하지 않는 프로그램이 여럿 있습니다. 대표적으로 Karabiner와 Seil 같은 키보드 리매퍼를 들 수 있는데요. 운영체제에 내장된 키보드와 마우스 드라이 macnews.tistory.com 2021. 7. 10. react.js로 영화 웹 서비스 만들기 -5 [ fetch 사용하기 ] fetch대신 axios를 사용할 것인데 npm i axios로 다운받아야 된다. 다음 yts.am 에서 api를 받아볼 것이다. 근데 주소가 자주 바뀌기 때문에 학습자들을 위해서 api주소를 따로 떼주셨다. https://yts-proxy.now.sh/list\_movies.json 비동기를 사용해서 처리한다. 비동기를 사용하는 이유는 간단하게 서버가 동시에 여러작업이 가능하게 하려는 이유. 혹은 사용자들 기준에서봤을 때 한 사용자가 요청하면 다른 사용자들은 기다려야 되는데 동시 다발적으로 조회가 가능하게 하는 등 여러 유용한 점이 있다. https://okky.kr/article/866436 비동기를 사용하려면 해당 함수에 async를 반드시 넣어줘야 한다. 그래야 await를 사용해서 비동기를 가능.. 2021. 7. 5. react.js로 영화 웹 서비스 만들기 -4 [동적data를 위한 class컴포넌트, state사용] 이제 api는 지우고 동적으로 data를 변화시켜본다. react에서 동적으로 data를 다루기 위해서는 먼저 function 컴포넌트가 아니라 class 컴포넌트를 사용한다. 그리고 state안에 변화시킬 값을 넣고 setState를 사용하면 react는 setState 부분이 작동할 때마다 render 함수 부분을 refresh 해준다. 하나의 공식이라고 생각하자. this.setState({count : this.state.count += 1}) 이렇게 매번 this.state를 호출하는 것은 성능에 좋지 않다. react는 이것에 대한 훌륭한 해결책을 제공해주는데 this.setState(current => {(count : current.count += 1 )} 이렇게 가능하다. 외우자. 유의해.. 2021. 7. 4. react.js로 영화 웹 서비스 만들기 -3 [prop.types로 검사하기] 복습도 할 겸 전체 다 코드로 쳐보자. import React from 'react'; import PropTypes from "prop-types"; const foodApi = [ { index :1, name : "kimchi", link : "http://image.dongascience.com/Photo/2016/11/14787526584108[1].jpg" }, { index : 2, name : "kkakdugi", link : "https://shop.hansalim.or.kr/im/is/activeDesigner/100101004_content1.jpg" } ] function Food({name, image}) { return ( {name} ) } // Food 컴포넌트.. 2021. 7. 3. 블로그에 코드를 다시 정리할 때 절대로 IDE에 썼던 코드 내용을 복사하지말자. 다시한번 블로그에 쓰면서 공부하는 거다. 누군가에게 보이기 위한 블로그라고 생각하지 말고 다시한번 나의 공부를 위해서 작성한다고 생각하자. 누군가에게 보인다? 나의 성실함을 보인다? 이건 깃허브에 하루1번 커밋하는 것으로도 충분하다. 공부를 하던 프로젝트를 하던 까먹지말자. 2021. 7. 2. react.js로 영화 웹 서비스 만들기 -3 [props 이용] prop를 지정해주고 컴포넌트에서 적용하는 방법 1번째 방법 function Food(prpos) { return i like {props.fav} } function App() { return ( hello ) }2번째 방법 function Food({fav}) { // 오브젝트의 특정 속성값만 가져오기 return i like {fav} } function App() { return ( hello ) } 동적으로 component 다루기 별도의 api를 내가 가져왔다고 가정하고 가상의 api를 내가 직접 배열로 만들어서 해당 값들을 불러오는걸 연습해보자. javascript에서 배웠던 것을 그대로 기반으로 해서 생각보다 쉽다는 것을 알 수 있다. 리액트의 편리함에 대해 점점 더 채감하고 있는 것 같다. 2021. 7. 2. 이전 1 ··· 7 8 9 10 11 12 13 ··· 36 다음