Dust

입력 후 하단 버튼 눌러주면 됨

비밀번호 입력할 때 토큰 복사해서 입력해주면 된다

import React from 'react';
// 프로젝트를 만들 때 node_modules 디렉토리가 같이 생성됨 -> node_modules 디렉토리에 react 모듈이 설치됨
// react를 불러와서 사용할 수 있게 해줌

// 이런식으로 모듈을 불러와서 사용하는 것은 브라우저에서는 불가능함
// node.js에서 지원하는 기능임

// import 가 아닌 require 라는 구문으로 패키지를 불러올 수도 있다!
import logo from './logo.svg';
// svg 파일
import './App.css';
// css 파일

// babel-loader 는 자바스크립트 파일을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 es5 문법으로 변환해줌
// 코드 변환하는 이유
// - es5는 이전 버전의 자바스크립트, 최신 자바스크립트 문법을 es5 문법으로 변환하는 것은 구버전 웹 브라우저와 호환하기 위함(구버전 웹 브라우저에서는 실행되지 않기 때문)
// - 리액트 컴포넌트에서 사용하는 jsx 문법도 정식 자바스크립트 문법이 아니므로 es5형태의 코드로 변환해야 함
// - 그럼 babel-loader 설치는 어떻게 하냐 -> create-react-app 시 설치해주었기 때문에 따로 설정할 필요가 없음


// 컴포넌트(함수형 컴포넌트)
// 해당 코드는 jsx 
// - jsx 란 
//   자바스크립트의 확장 문법이며 xml과 매우 비슷하게 생김
//   이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨
//   장점! - 가독성이 높고 작성하기 쉬움, html 과 비슷
function App() {
  return (
    // 컴포넌트에 여러 요소가 있다면 부모 요소로 하나로 감싸야 함!

    // 꼭 div 로 감싸지 않아도 됨
    // 리액트 v16이상 부터 도입된 Fragment 태그를 사용하면 됨
    // ex) import React, { Fragment } from 'react'; 로 추가해주고
    //     function App(){ return (<Fragment><div>내용</div></Fragment>); }
    // 이런식으로 Fragment로 감싸주면 됨

    // 다른 예시로는
    // ex) import React from 'react';
    //     function App(){ return ( <><div>내용</div></>)}
    // 이런식으로 <></>를 사용해줘도 됨
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

if문 대신 조건부 연산자

import React from 'react';
import logo from './logo.svg';
import './App.css';
import react, { Fragment } from 'react';

function App() {
  const name = '리액트';
  const const_name = '상수';
  let let_name = '변수';
  // return 뒤에 여러줄일 경우 괄호로 감싸고 한줄일 경우 감싸지 않음 / jsx를 괄호로 감싸는 것은 필수사항이 아님
  return (
    <Fragment>
      <header className="App-header">
        {name === '리액트' ? (
          <h2>React</h2>
        ) : (
          <h2>not React</h2>
        )}
        
        /* 한줄로 */
        {name === 'react' ? (<h2>yes</h2>) : (<h2>no</h2>)}
        /* { 조건 '내용' ? (true) : (false)} */
        {name === 'react' ? (<h2>yes</h2>) : null }
        /* null을 랜더링 할 경우 아무것도 보여주지 않음 */
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </Fragment>
  );
}

export default App;

값이 undefinde ?

function App(){
  const name = undefinde;
  return name;
  /* 
  함수에서 undefined 만 반환하여 렌더링하면 안됨 / 오류발생
  
  --> return name || '값이 undefined';
  일 경우 페이지에 위 텍스트를 반환함 / undefinde일 때 원하는 텍스트를 입력해줌
  */
}

// jsx 내부에서 undefined를 렌더링 하는 것은 괜찮
function App(){
  const name = undefined;
  return <div>{name}</div>
  // 한줄일 경우 괄호를 없애도 됨!
}

function App(){
  const name = undefined;
  return <div>{name || 'dust'}</div>
  // 일경우 dust 반환
}

CSS

function App(){
  const name = 'dust';
  const style = {
    backgroundColor: 'yellow',
    color: 'black',
    fontSize: '16px',
    fontWeight: 'bold'
  };
  return <div style={style}>{name}</div>;
}

요런식으로 나옴!

// 인라인 스타일 사용
function App(){
  const name = '리액트';
  return (
    <div style={{
      backgroundColor: 'yellow',
      color: 'black',
      fontSize: '16px',
      fontWeight: 'bold',
      height: '300px'
    }}>
      {name}
    </div>
  );
}

Homebrew 설치

패키지 설치 및 관리하는 mac용 패키지 관리자 설치해줌!

설치 되었는 지 확인 -> 설치가 되면 버전을 확인할 수 있다

설치 후 확인할 수 있는 화면 / 보통 이런식으로 버전이 밑에 나옴

Node.js 설치

설치 확인

npm 설치 확인 / Node.js를 설치하면 npm도 같이 설치되니 npm도 확인

npm or yarn 설치

yarn은 npm을 대체할 수 있는 도구로 npm보다 빠르고 효율적이라고 함

npm이 익숙하다면 npm을 사용해도 무방함

yarn 설치 확인

+ 에디터 및 git 설치가 안되어있다면 설치 해줌

프로젝트 생성

create-react-app은 프로젝트 작업 환경을 구축해 주는 도구 / 나중에 설정을 변경할 수 있음

create-react-app <프로젝트 이름>

실행

만든 프로젝트로 이동 후 실행해준다

npm 일 경우 npm start

실행이 되면 자동으로 페이지가 띄워지는 것을 볼 수 있음!

끝

ios는 잘 되는데 안드로이드는 계속 빌드 안된다고 뜸

https://www.mrlatte.net/code/2020/11/04/react-native.html

왤까.. ? 

gradle-6.3-all.zip 으로 바꾼 후 되는 듯 싶었는데 또 위에 에러가 뜸

응.. 또 바꿔..

될 것 처럼 설치를 막 하더니 결국 똑같은 에러

다른 건 다 안됐고

android studio에서 프로젝트/android 파일을 열고 난 후에 (에뮬레이터에서) 됐다

파일을 한번 열어줘야하나봄

짠

See the Pen Untitled by min-ji07 (@min-ji07) on CodePen.

https://min-ji07.tistory.com/entry/%EC%9E%84%EC%8B%9C?category=905135