230113_TIL

휜·2023년 1월 14일
TIL

React Native

RN Alert 넣기

  • React Native에서는 알림창 구현할 때 Alert.alert로 할 것.
const deleteItem = () => {
  Alert.alert(
    '삭제',
    '정말로 삭제하시겠습니까?',
    [
      {text: '취소', onPress: () => {}, style: 'cancel'},
      {
        text: '삭제',
        onPress: () => {
          onDelete(id);
        },
        style: 'destructive',
      },
    ],
    {
      cancelable: true,
      onDismiss: () => {},
    },
  );
};
  
  ...
  
return(
  ...
  <Icon name="delete" size={32} color="red" onPress={() => deleteItem()} />  
)

Javascript

Wrapper Object

✅ 원시값을 필요에 따라서 관련된 빌트인 객체로 변환한다.

// 래퍼 객체 (Wrapper Object)
// 원시값을 필요에 따라서 관련된 빌트인 객체로 변환한다.
const number = 1234; // number 원시 타입
console.log(typeof number.toLocaleString());
// number 원시타입 데이터를 String 객체로 덮음.
console.log(typeof number); // string

const text = "text"; // string 문자열 원시타입
console.log(text);
text.length; // String 객체

Global Object

✅ .parseFloat()
✅ .parseInt()

console.log(globalThis);
console.log(this);
// ---------------- ⬆ 대표적인 글로벌 전역 객체

// ---------------- 👇 글로벌 전역 객체
console.log(Infinity);
console.log(NaN);
console.log(undefined);

eval("const num = 2; console.log(num)");
// 자바스크립트를 한 줄씩 표현가능하게 하는 함수

console.log(isFinite(1));
// 숫자가 유한한지, 아닌지 Boolean 형태로 알려줌. 1은 유한하니 true 반환.
console.log(isFinite(Infinity));
// 유한하지 않아서(무한) false를 반환.

console.log(typeof parseFloat("132.33")); 
// parseFloat 안에 ✅ 문자열로 되어있는 숫자를 Number_Type으로 변환시켜줌. (Type 변환 : String => Number)
console.log(parseInt("132.63"));
// parseInt 안에 문자열로 되어있는 숫자 소수점을 전부 버리고, 정수 형태(Number Type)로 반환해줌. *(실수를 정수로 변환해준다.)

// URL (URI, Uniform Resource Identifier 하위 개념)
// 아스키 문자로만 구성되어야 함
// 한글이나 특수문자는 이스케이프 처리해야 한다. 이럴때 유용하게 쓰이는 것이 encode URI
const URL = `https:/너거서장남천동.com`;
const encoded = encodeURI(URL);
/**
👍 https:/너거서장남천동.com이 ➡️ https:/%EB%84%88%EA%B1%B0%EC%84%9C%EC%9E%A5%EB%82%A8%EC%B2%9C%EB%8F%99.com
이렇게 encoding 됨. */ 
console.log(encoded);

/**
👍 https:/%EB%84%88%EA%B1%B0%EC%84%9C%EC%9E%A5%EB%82%A8%EC%B2%9C%EB%8F%99.com 
➡️ 다시 https:/너거서장남천동.com으로 decoding 됨. */ 
const decoded = decodeURI(encoded);
console.log(decoded);

// 전체 URL이 아니라 부분적인 것은 component이용
const part = "남천동.com";
console.log(encodeURIComponent(part)); // encodeURIComponent는 전역함수.

Boolean Object

  • False Type

    [ 0, -0, null, NaN, undefined, '' (빈 문자열) ] ⭐️ 기본 숙지. 매우 중요함.

    조건문, if문, while문에서 False 타입 구분 실수때문에 에러가 나는 경우가 많다.

  • True Type

    1
    -1 값이 0이 아니기 때문에 true
    '0' 문자열에 해당하기 때문에 true
    'false' 문자열에 해당하기 때문에 true
    [] 빈 배열은 true.
    {} 객체 자체가 값이기 때문에 true

// Boolean Object
const isTrue = true;
console.log(isTrue.valueOf());

/**
 * False Type
 * [ 0, -0, null, NaN, undefined, '' (빈 문자열) ]  ⭐️ 기본 숙지. 하지만 매우 중요함.
 * 조건문, if문, while문에서 False 타입 구분 실수때문에 에러가 나는 경우가 많다.
 */

/**
 * True Type
 * 1
 *  -1 값이 0이 아니기 때문에 true
 * '0' 문자열에 해당하기 때문에 true
 * 'false' 문자열에 해당하기 때문에 true
 * [] 빈 배열은 true.
 * {} 객체 자체가 값이기 때문에 true
 */

Number Object

✅ .toLocaleString()

  • new Number()와 Number() 모두 Number 객체의 생성자인데, new 연산자를 붙이면 Number 타입 객체 인스턴스를 반환하고, 붙이지 않으면 원시 타입 숫자를 반환하는 게 차이.
const num1 = 123; // 원시타입
const num2 = new Number(123);
// 원시타입으로 바로 나타낼 수 있는 데이터를 굳이 객체 wrapper로 감싸 만드는 것은 메모리 낭비이다. (객체 타입)
const num1 = new Number(123);
const num2 = Number(123);

console.log(typeof num1, typeof num2);  // object number
const num1 = 123; // 원시타입
const num2 = new Number(123); 
// 원시타입으로 바로 나타낼 수 있는 데이터를 굳이 객체 wrapper로 감싸 만드는 것은 메모리 낭비이다. (객체 타입)

/** 
 * Tip.
 * new Number()와 Number() 모두 Number 객체의 생성자인데, new 연산자를 붙이면 Number 타입 객체 인스턴스를 반환하고, 붙이지 않으면 원시 타입 숫자를 반환하는 게 차이.

const num1 = new Number(123);
const num2 = Number(123);

console.log(typeof num1, typeof num2);  // object number

- 요약
new 연산자를 사용: 생성자로 쓰여서 Number 객체 생성
사용하지 않음: 그냥 함수로 쓰여서 타입만 바꿔줌

 */

console.log(num1, num2); // 123 [Number: 123]
console.log(typeof num1, typeof num2); // number object

console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
console.log(Number.MAX_SAFE_INTEGER);
console.log(Number.MIN_SAFE_INTEGER);
console.log(Number.NaN);
console.log(Number.NEGATIVE_INFINITY);
console.log(Number.POSITIVE_INFINITY);
// 위 메소드 적용 예시
if (num1 === Number.NaN) {
  // num1이 NaN인지 아닌지 구분할 때,
}
if (Number.isNaN(num1)) {
  //Number Class 객체 안에 있는 정적 메소드 isNaN을 이용하여 간편하게 사용가능.
}

// ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

// 지수표기법 (매우 크거나 작은 숫자를 표기할 대 사용, 10의 n승으로 표기)
const num3 = 102;
console.log(num3.toExponential()); // 1.02e+2로 반환. ( e === 10 / 10의 2승임을 나타냄. 1.02 * 10의2승)

// 실수를 반올림하여 믄자열로 변환
const num4 = 1234.52;
console.log(num4.toFixed());
console.log(typeof num4.toFixed());

// 숫자를 일반 문자열로 반환
console.log(num4.toString());
console.log(typeof num4.toString());

// 숫자를 국가별 표기에 맞게끔 변환
console.log(num4.toLocaleString("ar-EG")); // 아랍권.  ١٬٢٣٤٫٥٢으로 나옴. (પ નુલુગ લસશ)

// 원하는 자릿수까지 유효하도록 반올림
console.log("원하는 수 까지 반올림 : ", num4.toPrecision(5));
console.log("원하는 수 까지 반올림 : ", num4.toPrecision(4));
console.log("원하는 수 까지 반올림 : ", num4.toPrecision(2)); // 전체 자릿수 표기가 안될때는 지수표기법으로 변환.

// ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

// 0과 1사이에서 나타낼 수 있는 가장 작은 숫자
if (Number.EPSILON > 0 && Number.EPSILON < 1) {
  console.log(Number.EPSILON);
}
const num = 0.1 + 0.2 - 0.2;
console.log("num : ", num);
/**
 *  num :  0.10000000000000003 으로 반환된다.
 *  Why?
 *  - 컴퓨터는 10진수를 2진법으로 변환하여 계산하고,  2진수를 다시 10진수로 반환한다. 정확하게 부동소숫점을 계산하지 않음.
 *  console.log(Number.EPSILON); << EPSILON이 이런 작은 오차범위를 표현한 것이라고 생각하고 넘어가자.
 */

function isEqual(original, expected) {
  return original === expected;
  // return Math.abs(original - expected) < Number.EPSILON; // EPSILON보다 작은 값이라면 true, 아님 false
}
console.log("서로 같은 값인가요? : ", isEqual(1, 1));
console.log("서로 같은 값인가요? : ", isEqual(0.1, 0.1));
console.log("서로 같은 값인가요? : ", isEqual(num, 0.1));
// num의 값은 const num = 0.1 + 0.2 - 0.2; 사람이 연산하면 0.1이 나오지만, 컴퓨터의 계산으로는 완전한 0.1로 계산되지 않음을 알 수 있음.

//  요약 : 자바스크립트에서 소숫점 연산은, 우리가 미처 생각하지 못한 미묘한 오차가 있을 수 있음. 오차를 감지하려면 Number에 정의된 static property인 EPSILON을 사용하면 된다.

// ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

// ✨ toLocaleString()만 쓰면 1,000단위로 숫자를 구분해준다.
const 만원 = 10000;
console.log(만원); // 10000으로 출력
console.log(만원.toLocaleString()); // 10,000으로 1000단위 구분하여 출력

Math Object

✅ Math.floor(Math.random())

// Math
// static property, method
console.log(Math.E); // 오일러의 상수, 자연로그의 밑
console.log(Math.PI); // 원주율 PI값

// static method
// 절대값
console.log(Math.abs(-10));

// 소수점 이하를 올림
console.log(Math.ceil(1.2));

// 소수점 이하를 내림
console.log(Math.floor(1.8));

//  소수점 이하를 반올림
console.log(Math.round(1.4));
console.log(Math.round(1.6));

// 정수만 반환
console.log(Math.trunc(1.23241324512));

// ⭐️ 최대, 최소값을 찾기
console.log(Math.max(1, 3, 5, 9));
console.log(Math.min(1, 3, 5, 9));

//  거듭제곱
console.log(3 ** 3);
console.log(Math.pow(3, 3)); // .pow() 메소드가 거듭제곱 연산자인 `**` 와 같음.

// 제곱근
console.log(Math.sqrt(9));

//⭐️ 랜덤한 값을 반환
console.log(Math.random()); // 0 ~ 1 사이의 난수를 발생함.
//  응용해서 1 ~ 10까지의 값을 랜덤 출력하려면?
console.log(Math.random() * 10 + 1);
// ⭐️⭐️⭐️ 응용해서 랜덤 값의 소수점 자리를 버리고 정수만 반환하려면? ⭐️⭐️⭐️
console.log(Math.floor(Math.random() * 100 + 1));

String Object

✅ .length()
✅ .trim()
✅ .slice()
✅ .includes()
✅ .split()

// string이라는 문자 객체

const textObj = new String("Hello Hwuiinn");
const text = "Hello Hwuiinn";
console.log(textObj); // 객체 wrapper
console.log(text); // 원시타입

// 문자열에 문자 하나씩 접근할 때, 배열 인덱스 찾는 것 처럼 하면 된다.
console.log("text : ", text[0]);
console.log("text : ", text[1]);
console.log("text : ", text[2]);

//  메소드를 사용하여 문자열에 문자 하나씩 접근
console.log("text charAt: ", text.charAt(0));
console.log("text charAt: ", text.charAt(1));
console.log("text charAt: ", text.charAt(2));

/**
 *  ⭐️ text(String)에만 존재하는 .length 메소드는 매우 중요하다.
 *  문자열의 전체 길이를 알려주는 메소드다. (공백 포함)
 * 파라미터는 숫자를 넣어줘야 한다,.
 */
console.log(text.length);

/**
 *  어떤 문자열이 몇 번째 인덱스인지 알 수 있게 해주는 메소드 .indexOf()
 *  .indexof()는 조건을 만족하는 문자를 찾으면, 바로 실행 종료된다.
 *
 * 맨 뒤에 있는 문자가 몇 번째인지 알고싶다면, .lastIndexOf() 메소드를 사용한다.
 *
 * indexOf(''), lastIndexOf('') 의 파라미터는 "문자열"을 넣어줘야 한다.
 */
console.log(text.indexOf("o"));
console.log(text.lastIndexOf("H"));

/**
 * 해당하는 믄자열에 특정한 문자열이 포함되어 있는지 확인해주는 메소드 .includes('');
 * 파라미터는 "문자열"을 넣어줘야 한다.
 * 대소문자를 구분하여 true OR false를 반환하므로, 신경써서 적어주기.
 * 반환하는 값 : Boolean
 * */
console.log(text.includes("Hwuiinn"));
console.log(text.includes("hwuiinn"));
console.log(text.includes("Ahinn"));

/**
 * 문자열이 특정한 문자로 시작하는지, 안하는지 구별할 수 있게 해주는 .startWith('') 메소드
 * 파라미터로 "문자열"이 온다.
 * 대소문자를 구분하여 true OR false를 반환하므로, 신경써서 적어주기.
 * 반환하는 값 : Boolean
 *
 * 문자열이 특정한 문자로 끝나는지 알 수 있게 해주는 .endWith('') 메소드
 *  */
console.log(text.startsWith("H"));
console.log(text.startsWith("h"));
console.log(text.startsWith("e"));
console.log(text.endsWith("Hwuiinn"));
console.log(text.endsWith("Ahinn"));
console.log(text.endsWith("!"));

/**
 * 영문 text를 전부 대문자로 바꾸어주는 .toUpperCase() 메소드
 * 영문 text를 전부 소문자로 바꾸어주는 .toLowerCase() 메소드
 * 기존 메모리에 저장되어 있는 값을 바꾸진 않음. 그대로 사용하려면 다른 변수에 저장하여 사용하면 될 듯 하다.
 *
 */
console.log(text.toUpperCase());
console.log(text.toLowerCase());

/**
 * 특정한 위치의 문자열을 삭제하게 해주는 .substring() 메소드
 * 파라미터 : 표현할 문자열의 시작 인덱스와 끊을 인덱스가 들어간다. (자를 범위 지정)
 * 마지막 인덱스의 바로 앞 문자열이 출력되니까 주의할 것.
 */
console.log(text.substring(0, 5)); // (0, 4)로 넣으면 마지막 인덱스값은 나타내지 않으므로 Hell 까지 나온다. (Hello Hwuiinn)

/**
 * 문자열을 삭제하는 .slice() 메소드
 * 파라미터에 들어가는 값이 양수(+)이면, 앞에서 부터 삭제. 음수(-)이면 뒤에서 부터 인덱스 삭제
 */
console.log(text.slice(2)); // 2번 인덱스까지 문자를 삭제하고 나머지 문자열을 반환.
console.log(text.slice(-2)); // 뒤에서 2번째 인덱스만 반환하고, 나머지 문자열을 삭제.

/**
 * 문자열에 양쪽 공백을 제거해주는 .trim() 메소드.
 * 문자열과 문자열 사이의 공백을 제거해주진 않습니다.
 */
const textSpace = "            안녕하세요.              ";
const textOfSpace =
  "            안      녕     하        세   요.              ";
console.log(" textSpace : ", textSpace);
console.log(" textSpace : ", textSpace.trim());
console.log(" textOfSpace : ", textOfSpace);
console.log(" textOfSpace : ", textOfSpace.trim());

/**
 * 공백을 기준으로 문자열을 끊어주는 .split() 메소드
 * 파라미터로 문자열이나 공백을 넣어준다. 그냥 ""으로 하면 문자 하나하나씩 잘라서 반환해준다.
 * ⭐️ split() 메소드를 사용하면 반환값이 "배열"이다.
 * split()으로 문자열을 끊어 준 뒤에, 인덱스 번호로 원하는 문자열에 접근할 수 있음.
 */
const longText = "Get to the point";
console.log(" longText : ", longText);
console.log(" longText 공백으로 split : ", longText.split(" "));
console.log(" longText 아무것도 안 하고 split: ", longText.split(""));
console.log(" longText : ", longText.split(" ")[3]); 
// return : point
console.log(" longText : ", longText.split(" ", 2)); 
// return : [ 'Get', 'to', 'the' ]

Data Object

✅ new Date()

완전 꿀팁
console.log(), %o를 사용하여 객체를 문자열로 변환

console.log()에 객체만 출력하면 객체의 내용이 모두 화면에 출력됩니다.
하지만 문자열과 객체를 함께 출력하면 객체의 내용이 문자열로 출력되지 않습니다. 아래 예제와 같이 %o를 사용하면 객체의 내용이 문자열로 변환되어 출력됩니다.

const obj = {
  name: "John Doe",
  age: 30
}
console.log(obj);
console.log("obj: " + obj);
console.log("obj: %o", obj);
// Output:
{ name: 'John Doe', age: 30 }
obj: [object Object]
obj: { name: 'John Doe', age: 30 }
  • ⭐️ Static methods : class 이름만을 이용하여 접근할 수 있는 것.
  • ⭐️ Instance methods : object를 만들어서 접근할 수 있는 함수.
  • 현재 시간을 출력하는 new Date() 메소드. new 생성자를 사용하여 Date 객체를 생성한 것임.
  • 파라미터로 아무것도 넣지 않으면 현재 시간, 파라미터에 특정한 날짜를 입력하여 출력하면 해당 날짜가 나온다.
  • 시간은 UTC기준으로 출력된다.
    (협정 세계시, 1970년도 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 표기)
const nowTime = new Date();
console.log(" nowTime : ", nowTime);
console.log(" nowTime : ", typeof nowTime);
console.log(" nowTime : %o", nowTime);
console.log(" nowTime : ", typeof nowTime);
console.log("23년 1월 24일 : ", new Date("Jan 24, 2023"));
// return : 2023-01-23T15:00:00.000Z ??
console.log("23년 1월 24일 : ", new Date("2023-01-24T14:58:00"));

console.log("Date now : ", Date.now());
console.log("Date parse : ", Date.parse("2023-01-24T14:58:00"));

const now = new Date();
now.setFullYear(2024); 
// 년도 지정을 해줄 수 있다.
now.setMonth(6);
// Month는 0부터 시작한다. 때문에 6월을 생각하고 6을 넣으면 7월이 반환된다. (now를 출력해보면 확인 가능)

console.log("getFullYear :", now.getFullYear());
console.log("getMonth :", now.getMonth());
console.log("getDate :", now.getDate());
console.log(" getDay : ", now.getDay()); 
// 0부터 6까지 (일요알부터 토요일까지)
console.log(" getHours : ", now.getHours());
console.log(" getMinutes : ", now.getMinutes());
console.log(" getSeconds : ", now.getSeconds());
console.log(" getTime : ", now.getTime());
console.log(" getTime : ", typeof now.getTime());
// number Type으로 출력

console.log(" now : ", now);
console.log(" now toString : ", now.toString());
console.log(" now toDateString : ", now.toDateString()); 
// 날짜만 반환해준다.
console.log(" now toTimeString : ", now.toTimeString()); 
// 시간만 반환해준다.
console.log(" now toISOString : ", now.toISOString()); 
// ISO 8601 형식
console.log(" now toLocaleString : ", now.toLocaleString("en-US")); 
// 해당 나라에 맞는 시간표기로 출력
console.log(" now toLocaleString : ", now.toLocaleString("ko-KR")); 
// 해당 나라에 맞는 시간표기로 출력
급할수록 되돌아가자. 나는 모자라니까 급하게 하지말자.
늦더라도 정체되지 말고 하루에 1cm라도 전진하고 성장하자.
profile
휜
- 배움에는 끝이 없다.
이전 포스트

230112_TIL

다음 포스트

23년 1월 2주차 WIL

0개의 댓글