천천히 차근차근

'App' 형식에 'setState' 속성이 없습니다. 오류 해결 방법 package.json 파일에 "@types/react": "17.0.0" 항목을 추가 project 경로에서 npm install 명령어를 통해 package.json을 다시 셋팅. 추가한 항목 @types/react 설치 완료 에뮬레이터를 다시 시작하니 오류 해결.react-native run-android

State Component에서 rendering되는 데이터를 담고 유지, 관리하는 자바스크립트 객체이다. component의 rendering되는 데이터를 다루기 때문에 매우 중요하다. state 값에 따라 화면에 보여지는 output이 달라질 것이다. class component안에서 사용이 가능하고, 함수 컴포넌트를 정의했다면 state의 활용은 불가하다. state 활용 불가 예시 const App = () => { return ( ) } state 시작 우리는 App이라는 클래스를 사용할 것이기 때문에 state를 사용할 수 있다. state는 render함수 밖에서 정의가 된다. Hello World라는 문자를 직접 입력하는 것과 변수에 값을 할당해서 출력하는 것은 굉장한 차이가 있다. 결과는..

앱의 출력화면은 App.js에서 만들어진다. react라는 모듈에서 Component라는 클래스를 import는 해옴. Component라는 클래스는 App 클래스가 상속 받았다. Component 클래스 안에는 화면을 출력하는 render()라는 함수가 존재한다. 이 함수가 return하는 것들이 화면을 구성한다. import React, {Component} from 'react'; import {View, Text, StyleSheet} from 'react-native'; class App extends Component { render() { return ( Hello World!!!! ); } } const styles = StyleSheet.create({ bac..

React란?? UI를 개발하기 위한 자바스크립트 라이브러리이다. (UI : User Interface) 화면에 보여지는 웹, 앱 그림, 버튼, 텍스트 등 화면을 구성하는 뷰를 만들어주는 facebook에서 관리하고 개발하고 있다. 프로젝트 생성 react-native init react_01 (react-native init --version 0.61.5 react_01) version을 명시해서 프로젝트를 생성하려고하니 오류 발생 react-native run-android

Class 자바스크립트에서는 함수처럼 활용된다. constructor 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화하는 역할을 한다. 클래스를 구성하기 위한 껍데기 // Class class Person { constructor(region_, gender_) { this.region = region_; this.gender = gender_; } greetings(val = 'an-nyeong') { console.log(val); } } let person = new Person('Korea', 'male'); console.log(person); person.greetings(); // extends 상속 class American extends Pe..

Arrow Function 표현식의 결과값을 반환하는 표현식 본문에 쓰인다. 상태 블럭 본문에 쓰인다. map의 두번째 인자로는 index를 파라미터로 받는다. //arrow function let arr = [1, 2, 3, 4, 5]; // map : for문 같은 loop, 자바스크립트에서 지원하는 배열 객체 내장 함수. // input이 파라미터로 전달되는 함수이고, outPut이 새로운 배열이다. let twice = arr.map(v=>v*2); /* 위와 같은 표현식 let twice = arr.map(function(val) { return val * 2; }); */ console.log(twice); // 상태블록 본문에 쓰인 예제 let arr2 = [1, 2, 3, 4, 5, 6];..

//방법1 let drink = { caffe: 'latte', coca: 'cola' } let newDrink = { lemon: 'tea', orange: 'juice', drink } console.log(newDrink); //방법2 let drink2 = { caffe: 'latte', coca: 'cola' } console.log('-------------------------') let newDrink2 = { lemon: 'tea', orange: 'juice', ...drink2 } console.log(newDrink2);

Spread Operator 함수를 호출할때 인수로 사용할 수도 있고 배열 안에 들어갈 수도 있고, 객체 안에 들어갈 수도 있다. spread-operator는 rest-operator와는 다르게 함수를 호출해서 사용하기 때문에 중간에 낑겨 있어도 된다. 함수 호출에서 사용하는 방법 function sum(a, b, c ) { return a + b + c; } console.log(sum(10, 10, 10)); // 배열의 합을 계산해주는 함수 활용법 let arr = [10, 20, 30]; console.log(sum.apply(null, arr)); // 배열의 합을 계산하는 spread-operator 사용법 let arr2 = [100, 200, 300]; console.log(sum(.....

Rest Operator 모든 나머지 인자를 표준 자바스크립트 배열로 대체하기 위한 문법 arguments 함수로 전달된 모든 인수를 포함하는 객체 arguments 객체가 가지고 있는다. // 방법1 function printNum(num1, num2 ) { console.log(num1, num2); } printNum(1, 2, 3, 4, 5); // 방법2 function printNum2(num1, num2 ) { console.log(arguments); } printNum2(1, 2, 3, 4, 5); // 방법3 function printNum3(num1, ...num2) { console.log(num1, num2); } // num1의 1을 제외하고 나머지 인자를 배열로 담아서 보여준다..

let array = [10, 20, 30, 40, 50]; // in : key 를 반환 for ( let val in array) { console.log(val); } // in : key를 사용해서 value를 반환 for ( let val in array) { console.log(array[val]); } // of : value를 반환 for ( let val of array ) { console.log(val); } 객체 속성 값을 출력

const val01 = 'Hello'; const val02 = 'World'; const val03 = val01 + ' ' + val02 + '!!!'; console.log(val03); // String Literal 사용법 const litVal = `${val01} ${val02}!!!!!!!`; console.log(litVal); 문자 또는 정수를 문자열로 사용하기 편리한 호호

react.native Node.js 설치(LTS : 안정성이 높은) NPM 설치 NPM 으로 react native를 설치 터미널 명령어 TIP pwd : 현재 위치가 어디인지 cd + enter : 기본 홈( 내 홈으로 가는 ), root 위치로 가는 whoami : 내가 누구인지 cd ~ : 기본 홈, 내 위치로 (cd + enter 와 동일) Dir도 파일이다. 모두 파일이다. 8진수로 만들어진 각각의 앨리어스(ALIAS) 일 뿐이다. ls, ls -al : 현재 디렉터리에 있는 것들을 보여준다. mkdir 폴더명 : 폴더 생성 man ls : ls명령어의 옵션을 확인할 수 있다. (원하는 명령어를 man을 사용해서 옵션을 확인한다.) q : quit 나가다 react native 프로젝트 생성 ..

참고하기 좋은 사이트 https://dod09.tistory.com/118 사이트에서 참고한 유튜브 영상 https://youtu.be/s3sTX-1ribI vmware 설치 vmware workstation pro 다운로드 유튜브 영상에서는 player를 설치하라고 했지만 그건 화면 조정이 자유롭지 못하다. vmware에서 iOS 운영체제가 조회되지 않으면 압축을 풀었던 폴더의 파일에서 install을 하기 전에 build도 열어본다.

ts-node를 사용하여 전역 적으로 설치 npm install -g ts-node ts-node는 typescript 컴파일러를 번들하지 않으므로 설치해야 할 수도 있다. 나는 이미 설치했으므로 아래 설치는 패스 npm i typescript -g = ----- npm install typescript -g ts-node **.ts 위와 같이 ts-node 명령어로 파일을 실행하면 터미널에 출력된다.

작업 순서(ts파일을 js파일로 컴파일 하기 위해 시도) ESLint 플러그인 설치 TSLint(deprecated) 플러그인 설치 open settings에 eslint 관련 코드 추가 { // ...

prettier 2.0이상 부터 endOfLine 옵션 default가 auto'에서 'lf'변경되면서 오류 발생 해결 방법 .eslintrc.js 에 아래 코드 추가 rules: { 'prettier/prettier': [ 'error', { endOfLine: 'auto', } 아래와 같이 기 입력되어 있는 코드들 맨 밑에 endOfLine: 'auto'를 입력해주니 세미콜론 오류가 해결되었다. 기존 파일들의 호환성을 위해 auto로 정의되어 있었다. 개행 문자로 인해 git diff과 git blame의 어려움을 제거하고자 lf를 사용하기로 했다고 한다. lf로 강제할 경우 줄 끝이 섞이거나 잘못된 git blame을 피..

NPM, ESLint, TS 설명 tsconfig.json : 타입스크립트 설정 파일 타입스크립트가 자바스크립트로 변환할 때 어떤식으로 변환할지 설정 allowJs checkJs 타입스크립트 파일에 오류가 남아있으면 자바스크립트 파일로 변환되지 않는다. 타이핑(typing) : 타입이 정의되지 않은 코드에 타입을 입혀주는 행위 package.json 파일 npm으로 프로젝트를 초기화하는 방법 npm init -yfreeview 강의 참고하기. .eslintrc.js eslint 설정 파일에 의해서 규칙들을 인식해서 경고, 에러라고 표시해주는 것.

CRUD란 용어는 Create Read Update Delete 또는 Create, Retrieve, Update, Destroy를 묶어서 이야기 하는 용어로 대부분의 software가 가지는 기본적인 데이터 처리기능을 지칭한다. Create(생성), Read/Retrieve(읽기/인출), update(갱신), Delete/Destroy(삭제/파괴)의 기능을 하지 못하는 소프트웨어는 완전하다고 할 수 없다는 말이 있을 정도로 기본적인 기능에 속하기 때문에 한묶음으로 이야기 되어진다. 이러한 기능을 하는 대표적인 프로그램들로는 주소록앱이나 달력앱 그리고 Mysql같은 DB관리 software등이 있다.

API란? API를 사용하면 구현 방식을 알지 못해도 제품 또는 서비스가 서로 커뮤니케이션할 수 있으며 애플리케이션 개발을 간소화하여 시간과 비용을 절약할 수 있다. API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체 API의 역할은? API는 서버와 데이터베이스에 대한 출입구 역할을 한다. : 데이터베이스에는 소중한 정보들이 저장되는데요. 모든 사람들이 이 데이터베이스에 접근할 수 있으면 안 되겠지요. API는 이를 방지하기 위해 여러분이 가진 서버와 데이터베이스에 대한 출입구 역할을 하며, 허용된 사람들에게만 접근성을 부여해줍니다. API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다. : 여기서 애플리케이션이란 우리가 흔히 알고 있는 스마트폰 어플이나 프로그램을 말합니다. API는..

첫 번째 실습 프로젝트 소개, 환경 구성, 코드 분석 package.json에 설정한 타입스트립트, 바벨 관련 내용을 설치한다. npm i 위의 명령어를 입력하면 package.json에 정의한 설정들이 node_modules 폴더에 생성된다. npm i 명령어를 실행하고 node_modules가 보여지지 않는다면 새로고침을 해보도록 한다. VSCode 설정 (첫번째, 두번째를 모두 설정하기) 첫번째 window : ctrl + ',' format on save 검색 꺼져있는지 확인한다. 모두다 타입스크립트의 문법검사는 eslint를 사용할 것이기 때문에 포맷팅 관련한 프리티어나 뷰티파이 같은 것들을 꺼주어야 한다. 그래서 체크가 풀려 있는지 확인한다. 두번째 ESLint 플러그인이 설치된..