[RN] CSS, Hooks, import/require, Object 메서드

1. alignSelf, alignItems, alignContent

• align-self: grid나 flex item를 정렬, flexBox 내에서 교차 축에 정렬 즉, flexDirection에 따라 교차 축이 달라짐
• align-Items: 상위 요소에서 아이템들을 일괄적으로 적용
• align-content: flexBox의 교차축을 따라 content items 사이의 간격 설정, 두 줄부터 사용해야 의미있다, flex-wrap: wrap;인 상태에서 사용(nowrap이면 의미 없음)

https://dkrnfls.tistory.com/247

css align-content, align-items, align-self

https://letsgojieun.tistory.com/49

align-items / align-content / align-self의 특징과 차이점

 

2. Hooks

https://ko.legacy.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React

 

3. import, require()

• import: 일반 자바스크립트(ES6부터) 지원, 파일 최상단에 작성
• require(): node.js 환경에서 사용, 파일 어느 곳이든 가능

import {모듈명} from '모듈경로'; // javascript
const 모듈명 = require('모듈경로'); // node.js

https://www.codeit.kr/community/questions/UXVlc3Rpb246NjM5YjNlMGViYzIzODgzZmRjNWRlMmMx

import와 require()의 차이를 알 수 있을까요?

 

4. Object 메서드

• Object.create(proto, propertiesObject): 새로운 객체를 만드는 메서드, 이미 존재하는 객체를 새롭게 생성하는 객체의 프로토타입(->상속)으로 사용, propertiesObject는 프로퍼티 값을 설정하는 객체
• Object.values(Obj): 주어진 객체의 열거형이자 문자열 키로 구성된 프로퍼티의 값을 배열로 반환, for...in loop과 기능 동일
  for...in loop은 prototype chain에서도 프로퍼티를 열거할 수 있다, objects.values는 불가
  (cf. prototype chain: 객체가 다른 객체들로부터 프로퍼티와 메서드를 상속받을 수 있는 메카니즘)
• Object.entries(Obj): 주어진 객체의 열거형이자 문자열 키로 구성된 프로퍼티와 그 값을 페어로 하여 각각을 배열로 반환, 전체 반환된 타입도 배열

https://2ssue.github.io/common_questions_for_Web_Developer/docs/Javascript/2_Object.create.html#참고

Object.create의 역할은 무엇인가요? | 2ssue's dev note

• new 연산자 vs. Object.create(proto) by chatGPT

chatGPT가 설명한 두 개의 차이점

from fireship, prototype chain - 최상단의 Object.prototype은 null

아래는 코드 예제

function Vehicle(name, maxSpeed) {
  this.name = name;
  this.maxSpeed = maxSpeed;
}

Vehicle.prototype.information = function() {
  console.log(`${this.name} can move to ${this.maxSpeed}km/h`);
};

function LightCar(name, maxSpeed, currentSpeed) {
  Vehicle.call(this, name, maxSpeed);
  this.currentSpeed = currentSpeed;
}

// Vehicle을 상속받도록 설정
LightCar.prototype = Object.create(Vehicle.prototype);

// constructor를 다시 LightCar로 설정
LightCar.prototype.constructor = LightCar;

LightCar.prototype.currentSpeedInfo = function() {
  console.log(`${this.name} is currently moving at ${this.currentSpeed}km/h`);
};

const lightCar = new LightCar('light car', 150, 80);
console.log(lightCar.constructor === LightCar); // true

const object1 = {
  a: 'somestring',
  b: 42,
  1: 'numeric',
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
};

// "1: numeric"
// "a: somestring"
// "b: 42"


console.log(typeof Object.entries(object1)); // Object - 자바스크립트 설정 오류
console.log(Array.isArray(Object.entries(object1))); // true
console.log(Object.entries(object1)); // Array [Array ["1", "numeric"], Array ["a", "somestring"], Array ["b", 42]]

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Object.values() - JavaScript | MDN

https://fireship.io/courses/js/102-prototype-chain/

Prototype Chain

https://velog.io/@estell/typeof-Array.isArray-타입을-판별하는-메소드