본문 바로가기

전체 글

 (108)
Screen
Flexbox div대신에 view를 쓴다. flex direction이 column이다. 두 개의 view가 둘다 flex:1 속성을 갖고 있으면 반반 나눈다. flex의 비율대로 적용된다.
Reactive native 모바일 앱을 만드는 3가지 방법 1. fully native: Swift or objective-c로 ios 앱 만드는 것, Java or 코틀린 가지고 만드는 것, Xcode, Android App 만드는 것. 2. 앱 기반 웹뷰를 만드는 것 3. Reactive native: javascript를 iOS 또는 Android 엔진에 보내주는 것(브릿지가 필요하다)
Setup nodeJS, NPM nodeJS 설치하면 NPM은 자동으로 깔림 expo: 안드로이드 스튜디오 없이 테스트 가능 npm install -g expo-cli expo init weather-app github에 repository 생성 git remote add origin https://github.com/wonjongRyu/weather-app git pull origin master npm start expo localhost 창이 뜨는데, QR 코드를 인식하면 실시간으로 폰에서 확인 가능 이때 LAN, Local 은 인식안되고 Tunnel만 됨 파일을 수정하고 저장하면 자동으로 반영됨 https://medium.com/@pks2974/react-native-%EC%82%BD%EC%A7%88%EA%..
Deploy npm install gh-pages github는 무료로 웹사이트를 제공한다. deploy는 build 폴더를 이용해 홈페이지를 만든다. predeploy는 deploy가 실행되기 전에 자동으로 실행되며, build를 실행시킨다. build는 우리가 작성한 js 파일과 css 파일을 static으로 바꿔준다. npm run start로 서버가 돌아가는 상황에서 npm run deploy를 입력하면 된다. predeploy - build - deploy 순서대로 작업이 이루어진다. 홈페이지 URL은 {github이름}.github.io/{repository이름} 소문자만 사용해야한다. 대문자는 모두 소문자로 바꿔서 쓰면 된다 홈페이지가 만들어지려면 대기시간이 좀 필요한 모양
Making Movie App 사람들은 데이더를 fetch할 때 fetch를 사용하지만 여기선 axios를 사용할 것, axios는 fetch위에 있는 하나의 레이어. npm install axios YTS에서 만든 API를 사용 jsonview라는 크롬 extension이용하면 웹브라우저에서 json 파일을 깔끔하게 볼 수 있다. 시크릿 탭에서 https://yts-proxy.now.sh/list_movies.json로 접속하면 영화 리스트 많음
Component Life Cycle 컴포넌트는 render함수를 많이 사용하지만, 이외에도 다양한 함수를 가지고 있다. 이들은 life cycle method를 가지는데, 이건 react가 컴포넌트를 생성하고 없애는 방식이다. 컴포넌트가 렌더되기 전후로 호출되는 함수가 있다. mount, update 등이 있다. componenetDidMount는 첫 렌더링이 끝난 뒤 호출되는 함수 https://velopert.com/1130
State state는 수정할 데이터, 추가할 데이터 등 Dynamic Data를 작업할 때 쓰인다. function component를 class component로 바꾼다. react는 자동으로 class component의 render method를 실행한다. setState를 사용하면 새로운 값과 함께 페이지가 render 된다 this는 현재 class에 포함된 함수/상수라는 뜻

티스토리툴바