1. 자바스크립트란? >> 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어입니다. 2. 브라우저는 왜 자바스크립트 언어를 사용? 2-1) HTML 안에 파이썬, 자바 언어사용은 불가능? >> 브라우저에 자바스크립트 언어 사용은 이미 만들어진 표준이기때문에 모든 브라우저는 기본적으로 자바스크립트를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+자바스크립트 구조로 되어있습니다. >> 이미 많은 브라우저들이 자바스크립트로 만들어져있어서 파이썬이나 자바로 굳이 만들 이유가 없기때문에 표준처럼 굳어진 것입니다. 3. 자바와 자바스크립트의 차이점? >> 아무관련 없다고 봐도 무방합니다. 4. 자바스크립트 사용법? >> 태그 안에 CSS를 넣었듯이 태그 안에 자바스크립트를 넣습니다. ex) on..
CSS의 간단한 문법을 복습해보고 CSS 꾸미기의 유용한 도구인 부트스트랩에 대해서 공부해보고자 합니다. : 내 눈에 보이는 부분입니다. : 구역을 나누는 태그로, 여러가지 태그들을 한번에 옮길때 묶어서 옮길 수 있습니다. : 문단을 뜻합니다. : 문장 중에서 특정 글자에만 무언가를 효과주고싶을때 사용합니다. : 하이퍼링크를 사용할 수 있습니다. : 가로선을 주는 태그 CSS 주석처리 : 태그에서 /* 텍스트 */ HTML 주석처리 : 태그에서 1. div 태그 >> Button의 부모태그는 div태그라고 한다. >> 부모태그의 내용을 상속받는 것이다. 2. image 태그 이미지를 넣을때는 background-image:url("링크"); background-size:cover; background-p..
리액트 네이티브로 앱개발을 하면서, 다양한 페이지를 구현했지만 그 페이지들 간의 이동에 대해서는 아직 구현하지 못했었습니다. 리액트의 네비게이터 기능을 이용하여 페이지 간 이동에 대해서 공부해보고자 합니다. 네비게이터? : 페이지 끼리 이동할 수 있게끔 만드는 것으로, 웹 사이트를 이용하듯 앱에서 만든 컴포넌트들을 페이지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리입니다. ex) 가로방향으로 슬라이드 했을 때 다음페이지로 넘어가는 기능이 포함됩니다. cf) React Navigation 공식문서에서 정말 좋은 기능들을 가져다 쓸 수 있습니다. https://reactnavigation.org/ 1. React Navigation 공식문서의 installation 에는 npm과 Yarn ..
리액트 네이티브로 앱 개발을 하다보면, 앱 화면을 보면서 스마트폰의 배터리 잔량, 인터넷 연결상태, 시간등을 확인하고 싶을때가 있습니다. 이를 표시해주는 기능이 '상태바 (Statusbar)' 입니다. 이 상태바를 표시해주는 방법에 대해 공부해보겠습니다. - 기본값은 WHITE(흰색)으로 되어있기때문에, 몇시인지, 배터리, 와이파이 연결 등 잘 보이지 않습니다. 1. 먼저 상태바는 Expo에서 제공해주는 도구를 설치해주어야합니다. 2. 설치 후 이 도구에서 꺼내서 사용하기 expo install expo-status-bar 3. 기존 white로 되어있어 보이지 않던 상태바를 보이게 하기 => (MainPage.js) 에 추가 StatusBar style="black" ** 기본적으로는 스마트폰에는 st..
리액트 네이티브로 앱 개발을 할 때 알아둬야하는 리액트 기초지식에 대해서 공부해보겠습니다. 리액트의 간단한 과정을 살펴보자면, (컴포넌트 / 상태 / 속성) ** 컴포넌트에 Props(속성) 가 데이터를 전달해주면 컴포넌트 안에 있는 State(상태)가 그 데이터를 관리하게됩니다. 1. 컴포넌트 : 정해진 태그들을 사용하여 화면의 일부분들을 만드는 것을 말합니다. ex) 페이지를 여러 개로 나눠서 작성하고 관리한 것조차 컴포넌트라고 할 수 있습니다. ex) 버튼, 이미지, 전체화면조차 가능합니다. ex) 크게는 "코드를 분할해서 관리했다"를 의미합니다. 2. State (상태) : 컴포넌트 안에서 데이터를 관리하는 방법 : 하나의 파일, 페이지 등과 같은 의미입니다. >> 리액트에서는 상태가 바뀌어야 화..
'리액트 네이티브' 앱 개발에 필요한 자바스크립트의 문법에 대해서 배워보고자 합니다. - export를 function 앞에다가 달면 참조할 수 있습니다. - export 키워드는 밖에서도 쓸 수 있게 만들어주는 키워드입니다. export default function App { } // App함수를 외부에서 사용할 수 있도록 내보낼 수 있습니다. : 화면을 그리는 함수말고도 데이터를 다룰 때도 유용하게 사용됩니다. : 딕셔너리 + 리스트 복합구조(JSON 데이터 형식)로 구성됩니다. : 모듈시스템의 사용 예로, 폴더 안에 이 data.json을 넣고, 반복문을 통해서 APP.js 에서 뿌려줄 수 있습니다. >> App.js 에서 import data from './data.json' cf) 같은 폴더 ..
'리액트 네이티브' 앱 개발에서 가장 중요하다고도 할 수 있는 Style 속성에 대해서 배워보고자 합니다. :태그에 이어 모든 태그에 공통적으로 있는 style 속성에 대해서 공부할 것입니다. : style 속성은 엘리먼트들 즉 태그들에 스타일을 주기위한 속성입니다. * StyleSheet 이라는 기능을 가져와서 스타일을 입힐 수 있습니다. import StyleSheet from 'react-native'; * styles 라는 변수로써 StyleSheet를 쉽게 불러올 수 있습니다. const styles = StyleSheet.create({ )} >> StyleSheet을 생성해서 styles라는 변수에 넣어놓습니다. >> const : 변하지 않는 변수값이므로 스타일 값으로 태그들을 꾸며줄 수 ..
'리액트 네이티브' 앱 개발에서 필요한 엘리먼트(태그)에 대해 공부하고자합니다. 기본적인 엘리먼트부터 유용한 엘리먼트까지 배워보고자 합니다. 1. View 태그 : 화면의 영역을 잡아주는 태그 : style코드를 입혀주지 않는 이상 화면에 표시가 되지 않습니다. 2. Text태그 : 문자를 쓸때는 항상 Text태그를 사용해주어야 합니다. : View 태그안에 문자를 쓰게되면 오류가 발생합니다. 텍스트입니다. 3. ScrollView : 앱화면을 벗어나는 경우 ScrollView 엘리먼트로 감싸면 스크롤이 가능해지면서 모든 컨텐츠를 확인할 수 있습니다. : View 태그보다 바깥에서 구성 4. Button : 버튼을 누르면 팝업이 뜨기도하고, 다른페이지로 넘어가기도 하는 등의 다양한 기능이 실행됩니다. >..
2주차부터는 '리액트 네이티브' 앱 개발을 시작하려고 합니다. 그러기 위해서는 리액트 네이티브 (기술)와 Expo (도구)를 설치하여야 합니다. 이후 앱 화면을 만들고, 리액트 기초를 공부해보겠습니다. 리액트(React) + 네이티브(Native)의 합성어로, 자바스크립트 언어 하나로 안드로이드 앱과 ios앱 두가지 모두 만들어주는 라이브러리를 말합니다. cf) 라이브러리 : 개발할 때 사용하는 도구 안드로이드 & iOS 코드를 몰라도 개발이 가능하게 해주는 도구이자, 개발중인 앱을 쉽게 확인해주는 앱을 제공하는 도구 즉 Expo는 "개발 중인 앱 테스트"를 위한 Expo 클라이언트 앱을 자바스크립트 형태로 제공해줍니다. >> Expo Client 앱을 다운받..
