[TIL]11월25일(금)

2022-11-25

더존 수업

수업교재 : Reactjs.pdf

부트스트랩

검색 : bootstrap theme 4.6 (https://getbootstrap.com/docs/4.6/examples/)

시작전 html에 css 및 js 임포트하기

필요한 기능 카피

! 만약 css를 편집하고싶다면?

https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css

해당 링크에서 min 제거한 페이지로 접속 -> 부트스트랩 적용한 태그를 검색 -> 다운받은 내 css에 적용

//예를 들어 아래 태그중 nav-item dropdown을 수정하고싶다면 그 키워드로 검색
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

react

npx create-app [응용프로그램이름(폴더명지정)] 또는 아래방법
mkdir ex01_react
cd ex01_react 
creat-react-app 

리엑트 실행순서

src가 시작위치
app.js는 index.js에서 만들어진다
실제로는 index.html에서 index.js를 불러와져서 실행된다.

index.js

    import App from './App';
    import React from 'react'; //class UserApp extends React.Component{}
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
    <React.StrictMode>
        <App /> <!-- 위에 app과 이름이 같으면 된다. -->
    </React.StrictMode>
    );

package.json 파일은 key-value 방식으로 정리되어있다.

ES6 축약코딩기법

접기 / 펼치기

var / let,const

var는 scope이 함수 단위이고, 반면 const와 let은 scope이 블록 단위 입니다.

1. 삼항 조건 연산자 (The Ternary Operator)

const x = 20;
let answer;
if (x > 10) {
answer = 'greater than 10';
} else {
answer = 'less than 10';
}

//축약 --->

const answer = x > 10 ? 'greater than 10' : 'less than 10';


//react에서 특정 버튼을 state 값에 따라 보여지게 할 경우에 이렇게 사용할 수 있음
    {editable ? (
    <a onClick={() => this.save(record.key)}> </a>
    ) : (
    <a onClick={() => this.edit(record.key)}> </a>
    )}

2. 간략 계산법 (Short-circuit Evaluation)

if (variable1 != null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}

//축약 -->

const variable2 = variable1 || 'new';

//결과확인
let variable3 = 'foo';
let variable4 = variable3 || 'foo';
console.log(variable4 === 'foo'); //print true

3. 변수선언

let x;
let y;

//축약 -->

let x,y = 3;

4. For 루프

for (let i=0; i < msgs.length; i++)

//축약 -->

for (let value of msgs)

function logArrayElements(element,index, array) {
console.log('a[' + index + '] =' + element);
}
[2,5,9].forEach(logArrayElements);

//축약 --->

//a[0] = 2
//a[1] = 5
//a[2] = 9

5. 간략 계산법

두가지의 변수를 비교할 때, 앞에 있는 변수가 false 일 경우 결과는 무조건 false 이기 때문에 뒤의 변수는 확인 하지 않고 return 시키는 방법.

기본 값을 부여하기 위해 파라미터의 null 또는 undefined 여부를 파악할 때 short-circuit evaluation 방법을 이용해서 한줄로 작성하는 방법이 있습니다.

아래의 예제에서는 process.env.DB_HOST 값이 있을 경우 dbHost 변수에 할당하지만, 없으면 localhost를 할당 합니다.

let dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = 'localhost';
}

//축약 --->

Const dbHost = process.env.DB_HOT || 'localhost';

6. 객체 프로퍼티

객체 리터럴 표기법은 자바스크립트 코딩을 훨씬 쉽게 만들어 줍니다. 하지만 ES6는 더 쉬운 방법을 제안합니다. 만일 프로퍼티 이름이 key 이름과 같을 경우, 축약 기법을 활용할 수 있습니다.

const obj = {x:x, y:y}

//축약 --->

const obj = {x, y}  // 다른 값이면 적용 안됨

7. 화살표 함수

function sayHello(name) {
    console.log('Hello', name);}

setTimeout(function() {
    console.log('Loaded')}, 2000);

list.forEach(function(item) {
    console.log(item);});

//축약 --->

sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));

8. 묵시적 반환

한 줄로만 작성된 arrow 함수는 별도의 return 명령어가 없어도 자동으로 반환 하도록 되어 있습니다. • 다만, 중괄호({})를 생략한 함수여야 return 명령어도 생략 할 수 있습니다 • 한 줄 이상의 문장(객체 리터럴)을 반환 하려면 중괄호({})대신 괄호(())를 사용해서 함수를 묶어야 합니다. 이렇게 하면 함수가 한 문장으로 작성 되었음을 나타낼 수 있습니다.

function calcCircumference(diameter) {
return Math.PI * diameter
}

//축약 --->
calcCircumference = diameter => Math.PI * diameter;

//또는
calcCircumference = diameter => (
    Math.PI * diameter;
)

9. 파라미터 기본 값 지정

function volume(l, w, h) {
if (w === undefined)
w = 3;
if (h === undefined)
h = 4;
return l * w * h;
}

//축약 --->
volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24
// a,b=2,c=3 가능
// a,b=2,c 불가능, 선언한 위치부터 넣어야 한다

10. 템플릿 리터럴

백틱(backtick) 을 사용해서 스트링을 감싸고, ${}를 사용해서 변수를 담아 주면 됩니다.

const welcome = 'You have logged in as ' + first + ' ' + last + '.'

const db = 'http://' + host + ':' + port + '/' + database;

//축약 -->
const welcome = `You have logged in as ${first} ${last}`;

const db = `http://${host}:${port}/${database}`;

11. 비구조화 할당

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');

const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;


//축약 ---->
import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

12. 전개연산자 #1

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice();

//축약 --->

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

12. 전개연산자 #2

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

//축약 --->

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

13. 필수 파라미터

기본적으로 자바스크립트는 함수의 파라미터 값을 받지 않았을 경우, undefined로 지정합니다. 다른 언어들은 경고나 에러 메시지를나타내기도 하죠. 이런 기본 파라미터 값을 강제로 지정하는 방법은 if 문을 사용해서 undefined일 경우 에러가 나도록 하거나, ‘Mandatory parameter shorthand’을 사용하는 방법이 있습니다.

function foo(bar) { if(bar === undefined) {
throw new Error('Missing parameter!'); }
return bar; }

//축약 --->

let mandatory = () => {
throw new Error('Missing parameter!');
}
let foo = (bar = mandatory()) => { return bar;
}

14. Object.assign() 함수

Object.assign() 함수는 첫 번째 Object에 그 다음 Object (들)을 병합해 줍니다.

//target에 빈 객체를 주고 source 객체를 한 개만 주면 해당 source 객체를 복제하는 것이 됩니다. var obj = {a:1};
var copy = Object.assign({}, obj);
console.log(copy); // {a: 1}
//obj1, obj2, obj3를 각각 {}안에 병합합니다. var obj1 = {a:1};
var obj2 = {b:2};
var obj3 = {c:3};
var newObj = Object.assign({}, obj1, obj2, obj3); console.log(newObj); // {a: 1, b: 2, c: 3}

리엑트 실습 : App.js

function App()

function App() {
  return{

  // 리턴 안에는 오직 하나의 태그만 가능

  }
} 

useState : 변화하는 값 처리

import React, { useState } from 'react';
let [title] = useState(['혜화 맛집 튀김' , '송파 샤브샤브','홍대 일식집'])
//출력 : {title[0]} {title[1]} {title[2]}

활용

    let [like, setLike] = useState(0); 
    // useState() 혹은 배열 형태로 2개의 값이 전달된다.
    function fnlike(){
      setLike(like+1);
    }
    return(
      {title[0]}  <span>좋아요</span>{like}
    )

  //축약
    let [like, setLike] = useState(0); 
    return(
      {title[0]}  <span onClick={()=>{setLike(like+1)}}>좋아요</span>{like}
    )

개인공부

배열의 특정구간 복사방법

import java.util.*;

class Solution {
    public int[] solution(int[] numbers, int num1, int num2) {
        return Arrays.copyOfRange(numbers, num1, num2 + 1);
    }
}

Twitter Facebook LinkedIn