[React] React, CSS
- React native webapp 기능
웹(web) : http 프로토콜로 웹브라우저를 기동 (크롬, 익스)
앱(app) : application, 스마트폰에서 프로그램을 다운받아 실행 (실제 프로그램을 만들어서 기동)
웹은 html(css)로 만들며 app은 자바, 코틀린(안드로이드). 스위프트(ios) 특정 언어로 구현
javascript에서는 html, css, 자바스크립트로 스마트폰에서 기동 가능한 앱까지 만들면 시장을 장악할 수 있다. > react native > flutter...
react : 자바스크립트 프레임워크 (즉, 자바스크립트로 개발을 편하게 만드는 기구 ex. 자바를 배우면 스프링, 파이썬을 만들면 디장고)
react외에 앵귤러, 뷰, 등 다양한 프레임워크가 있으며, 리액트가 60%이상 시장 점유율을 보이고 있다.
앱은 네이티브언어 (자바, 코틀린, 스위프트)로 퍼포먼스가 강하다. > 게임같은 성능 중심의 앱일 경우 반드시 네이티브 언어로 구현(상식으로 알아두기 : flutter(dart언어) 프레임워크는 브릿지 통신이 아닌 네이티브 코드 로딩 방식으로 속도를 빠르게 만드는 하이브리드앱)
*웹의 장점 :
- 브라우저 통신으로 왠만한 권한은 브라우저 안에서 취득하고 실행 (팝업, 외부 프로그램 실행, GPS...) 그에 반해 앱은 실행할 때 사용자에게 권한을 요청 받고 허락 받아야지 가능 실행가능(카메라 권한 등)
- HTML, CSS, javascript 언어로 웹을 구현하는 통일성, 그와 달리 앱은 안드로이드일 경우 (자바, 코틀린), ios일 경우 스위프트 등 다양한 언어를 배워야 가능
*웹의 단점 :
- OS자원이나 특이기능을 사용하기 힘듬(카메라 기능 중에 줌인, 줌아웃 기능을 100% 쓰지 못함(광각...)
- CSS 버전마다 구현 가능한 디자인이 각기 다르기 때문에 출력되는 (항상 사이트 하단에 보면 ex.크롬 브라우저 91.01버전에 최적화 되었습니다 라는 문구가 존재)
*앱의 장점 :
- 스마트폰의 퍼포먼스를 100% 발휘할 수 있도록 os에서 시스템 권한을 얻고 기능을 수행 (게임개발에 특화) 사용자 경험이 월등 (부드럽게 앱 기동)
*앱의 단점 :
- 설치, 버전 관리, 버그 있을 때 대처할 수 있는 방법은 재설치 혹은 수정버전 다운
가상환경 구성
https://ide.goorm.io/ > 회원가입
로그인 후 우측 상단 새컨테이너 클릭 >
자바, 서울 클릭 후 생성 >
실행 클릭 후 연결된 링크에서 코드 작성
React native
https://expo.dev/ 접속
회원가입 >
좌측 상단에 home 아래 snacks 클릭 후 우측 상단에 new snacks 클릭 >
뜬 페이지에서 자유롭게 코드 작성.
expo go 앱 다운로드 하여 모바일앱 확인
CSS 작성
CSS 링크 > https://tailblocks.cc/ | https://tailwindcss.com/docs/box-decoration-break
https://tailwindcss.com/ 접속 >
getstarted 클릭 후 <script. src="https://cdn.tailwindcss.com"> 복사 >
HTML 파일에 태그 안에 붙여넣기 >
ctrl+우클릭하여 복붙한 src 링크 코드 클릭 >
접속 된 브라우저 내에 있는 코드 전체 복사 후 .js파일에 입력 >
처음 임력한 HTML 파일에 src = 위치 js 파일 위치로 변경해주기
