'리액트 네이티브' 앱 개발에 필요한 자바스크립트의 문법에 대해서 배워보고자 합니다. - 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 앱을 다운받..
이번 일지에서는 자바스크립트의 기초을 활용해 예제를 공부해보겠습니다. Q. 0부터 n-1까지 더하는 함수 만들기 function get_sum(n){ let sum = 0; for(let i = 0; i < n; i++){ sum = sum + i; // = (sum += i) } return sum } let result = get_sum(150) console.log(result) Q1. 포도는 몇개일까? let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기'] let count = 0 for(let i = 0; i < fruit_list.length; i++){ let fruit = fruit_list[i] if (fruit == ..
이번 일지에서는 자바스크립트의 기초 문법에 대해 공부한 내용을 기록하였습니다. 기존 공부하던 자바 언어와 비슷한 점이 많은 문법이었습니다. let num = 250 let = 변수를 선언하는 문법 num = 변수의 이름 250 = 변수에 넣을 값 console.log(num) >> 250 출력 여기서 num = 1000 으로 재할당해주면 재할당된 값이 출력됩니다. let a = 1 let b = 2 let c = a + b console.log(c) >> 3 console.log(a * b) 처럼 곱셈도 가능합니다. let first = 'gnob' let last = 'ong' console.log(first + last) // 문자열 더하기 가능 // gnobong console.log(first +..
자바스크립트에 대한 공부를 '앱개발' 과 더불어 해나가고자 합니다. 이번 일지에서는 기본적인 개념과 앱 서비스의 전반적인 개요에 대해 공부한 내용을 기록하였습니다. * 앱 서비스를 만든다 는 것은 "클라이언트와 서버를 모두 만든다는 것"을 의미합니다. 여기서 클라이언트는 '사용자가 보는 화면 (어플)' 을 말합니다. 앱 서비스는 전반적으로 데이터가 담겨있는 서버에서 데이터를 요청하고 데이터를 응답하는 과정을 말합니다. 앱을 개발하기 위해서는 안드로이드 또는 IOS를 선택해 개발할 수 있습니다. 둘은 OS(즉 환경)이 다르기 때문에 각기 다른 개발 기술이 필요합니다. 안드로이드는 Java 와 Kotlin, iOS는 Swift라는 기술로 개발이 가능합니다. 1. 안드로이드와 iOS를 각각 개발하는 것 = 네..
강의를 참고해 객체에 간단한 애니메이션을 주는 방법에 대해 알아봅니다. 먼저 CSS에는 애니메이션에 쓰일 Animation 속성이 있는가 하면 간단하게 바꿀 수 있는 Transition 과 Transform 속성이 있습니다. Transition은 속성을 서서히 변화시키는 효과, Transform은 객체를 회전시키거나 크기 조절, 이동, 기울임 등을 지정할 수 있는 속성입니다. Introduction Transition transition : property timing-function duration delay | initial | inherit property : 속성을 정할 수 있습니다. ex) width, background 등을 포함할 수 있습니다. timing-function : 트랜지션의 속도..
강의를 참고해 홈페이지 디자인, UI를 만들어봅니다. 간단하게 들어갈 요소와 구성, 레이아웃은 어떻게 할 것인지 생각해봅니다. 이번 실습에서는 Float Layout 방법을 사용해 요소들을 배치할 것입니다. Introduction Float Layout은 요소들을 좌측이나 우측에 위치시킬 수 있는 옵션입니다. float: left | right 필요한 요소 : 버튼 = 로그인 / 회원가입 / 마이페이지 / 주문배송 조회 / 장바구니 / 이용안내 / 고객센터 / 게시판 등 로고(버튼 좌측에 위치하도록 함) 가장 먼저 보여질 Top Bar 부분 전체 코드 (Editing_homepage.html) 로그인 | 회원가입 | 마이페이지 | 주문배송 조회 | 장바구니 | 이용안내 | 고객센터 | myshop 소개 ..
