코딩브론즈

원하는 경로로 가서 다음 명령어를 입력한다. expo init {프로젝트 명} 프로젝트 명은 "weather_app_2021" 이라고 했다. 입력하면 위와 같이 선택지가 나온다. 1. blank : 비어있는 템플릿. 2. tabs : react-navigation을 통해 몇몇의 예시 화면과 탭들이 만들어져있는 템플릿. blank로 하자. documents에 가면 app이 생성되었을 것이다. 이제 github에 repository를 만들자. 이제 프로젝트로 가져오자. git remote add origin [repository 주소] git pull oringin main --allow-unrelated-histories 프로젝트는 다음과같은 파일들이 있다. app.json 은 configuration 파..

React Native를 개발하는 방법은 2개가 있다. 1. Expo CLI 2. React Native CLI Expo는 기본적으로 create-react-app과 같은거다. react native를 위한 설정 파일같은 것들이 없는 방식으로, 모든것이 셋업이 되어있다. React Native CLI는 react native를 수동으로 작업하고 싶을때 사용한다. 필요한 기능이 있는 경우 모듈을 직접 만들어 사용할 수 있지만, 초기 구성이 오래걸리고 배포도 불편하다. => native files 를 더 많이 컨트롤하고 싶을때 쓴다. 다시 Expo. Expo는 모든 native files들을 숨기고, 모든걸 관리한다. 가장 큰 장점은 나의 휴대폰으로 앱을 테스트할 수 있다는 것이다. (React Native..

React Native로 날씨앱 만들기 리액트와 결합된 자바스크립트, Expo를 이용한다. 스마트폰의 geolocation에 접근해서, api에 보낸 후 날씨에 따라, 이쁜 스크린을 덮을예정. - 아이콘을 가지고 어떻게 작업하는지, - 레이아웃 시스템, - 현재위치를 갖고 어떻게 작동하는지, - 데이터와 어떻게 작업하는지 를 배울것이다. 결과물 : ios & 안드로이드 앱 - 스마트폰에서 test 가능 요구사항 : JavaScript, React. Java, Swift, Kotlin,Objective-C 등은 몰라도 됨. 설치 1. Node.js (버전10 이상) nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 Ja..

이제 링크를 통해 정보를 라우터로 보냈다. 하지만 문제가 있다. 영화를 클릭하지 않고 movie-detail을 들어오면 state가 없는 상태(undefined)가 된다. 이 문제를 해결해 보자. 먼저 함수형 컴포넌트였던 Detail 컴포넌트를 클래스 컴포넌트로 바꿔준다. 그 다음, location.state가 undefined일 경우 리다이렉트를 시켜준다. 이게 가능한 이유는 component의 다른 prop인 history 덕분이다. history에는 go, goBack, goForward 등 많은게 있고 이것들이 url을 변경해줄 수 있다. 이제 /movie-detail 을 입력해도 홈으로 리다이렉트 될 것이며 /movie-detail은 클릭으로만 이동할 수 있게 되었다. 이제 "디테일" 이란 문자..

모든 컴포넌트에는 props 가 있다. About 컴포넌트의 props는 뭐가있는지 한번 console.log를 찍어보자. 다음과 같이 history, location, match, staticContext. 총 4개의 props들을 볼 수있다. 이것들은 react-router에 의해서 넣어진 것이다. 라우터에 있는 모든 라우트들은 위의 props를 가진다. 하나하나 자세한 설명은 당장 필요없다. 중요한건 이 props들을 사용할 수 있다는 점이다. 덕분에 클릭한번으로 정보를 전달할 수 있다. 이걸 이용해서, 영화를 클릭했을 때 movie detail 페이지로 데이터를 보내보자. reactrouter.com/web/api/Link React Router: Declarative Routing for Rea..

오늘의 할 일은 Navigation 버튼을 만드는것이다. 먼저 Navigation 이라는 컴포넌트를 생성하자. 실행시켜보면 이렇게나온다. 하지만 문제가 2개 발생하는데 하나는 홈을 누를 시 다시한번 로딩이 되는점 (새로고침이 되는 점) 다른 하나는 About 페이지가 안먹힌다는 점이다. (href="/about" 이 안먹힘) 그 이유는 이게 html이기 때문이다. html은 매번 어디를 갈때마다 그냥 페이지를 새로고침 시켜버린다. 리액트가 죽고, 새 페이지가 새로고침 되는것이다. 강제로 새로고침하면서 리액트를 죽이는걸 막고싶다면 태그 대신에 react-router-dom의 Link를 쓰면 된다. 페이지 이제 모든페이지를 죽이고 새로고침하지 않고 페이지가 바뀐다. 또한 about 페이지도 잘나온다. 하지만..

Router를 들어가기전에, 사실 더이상 state를 갖기 위해 class component를 가질 필요가 없다. 하지만 이것은 react의 새로운 부분이고 이것을 이해하는데 많은 시간이 걸린다. 그냥 react hook 이란것 때문에 더이상 state를 갖기 위해 class component를 가질 필요가 없다는 것만 알아둬라. 그렇다고 여태까지 한 내용이 올드한 내용이란 의미는 아니다. react.js 공식 문서에도 여전히 class component 는 가르치고있다. react hook은 그냥 새로운것이지 대체물이 아니고 class component가 구식이 아니라는 의미이다. 이제 Router에 대한 학습을 시작해보자. 지금까지의 웹 페이지를 구현하는것도 물론 좋았지만 이 페이지에 인터랙션을 추가..

이제 배포를 해보자. 먼저 gh-pages를 설치해야한다. gh-pages는 github에 업로드하는 것을 허가해주는 모듈이다. npm i gh-pages gh-pages는 내 웹사이트를 github의 github page 도메인에 나타나게 해준다. 즉 github가 나에게 무료 웹사이트를 제공하는것이다. static 웹사이트와 HTML, CSS, JavaScript 웹사이트는 무료로 제공해준다. 일반적으로 동작하는 방식은 github에서 내 project 이름을 가져오는 방식이다. 먼저 내 github에 있는 프로젝트 이름을 보면 git remote -v 프로젝트 이름은 movie_app_2021임을 알 수 있다. 그 다음은 user name을 알아야 한다. 나의 github user name은 lau..