2022-07-04

Web/App / CSS8분안에 읽기 (약 1204 단어)

이채현

하드웨어 가속은 왜 필요할까?

복잡한 계산이 필요한 인터렉션은 렌더링에 많은 시간이 걸리게 된다. 이런 부분을 CPU가 아닌 GPU가 계산하도록 만들면 렌더링 시간을 줄일 수 있게 된다.

하드웨어 가속을 사용하려면 어떤 스타일을 사용해야 할까?

대표적으로 animation(keyframes), will-change 속성이 있지만 두 속성은 사용하는 데 있어서 한계가 있다.

다양한 케이스에 대응하기 쉽고 초기 렌더링에도 크게 영향을 주지 않는 방법으로는 transform: translate3d 스타일을 사용하면 된다. will-change, translate3d속성은 브라우저에게 **"얘는 3D 요소니까 하드웨어 가속을 써야 해!"**라고 알려주며 대상이 되는 요소를 자체 레이어로 승격시키고 GPU 메모리에 할당이 되어 하드웨어가 계산을 하게 된다.

2022-06-27

Web/App / React3분안에 읽기 (약 436 단어)

[React] React의 setState는 비동기로 동작한다

이채현

function App() {
  const [state, setState] = useState(0);

  const handleClick = () => {
    setState(state + 1);
    setState(state + 1);
    setState(state + 1);
  };

  return (
    <div className="App">
      <p>{state}</p>
      <button
        onClick={() => {
          handleClick();
        }}
      >
        +3
      </button>
    </div>
  );
}

export default App;

위 코드의 결과는 버튼을 눌러도 1씩 증가한다.

이유는?

결국, 위 코드는 setState 는 동일한 key 값에 대하여 이전의 값을 계속해서 덮어써서, 마지막 명령어만 수행되는 셈이다.

2022-06-01

DevOps / Fastlane9분안에 읽기 (약 1330 단어)

[Fastlane] Fastlane을 통해 빌드를 자동화하자 1편

이채현

노션으로 보기

What is the Fastlane?

ruby 코드로 만들어진 앱 배포 자동화 툴
커맨드라인으로 빌드 할 수 있음
CI 시스템과의 통합 용이
여러 구성원이 App Store에 앱을 배포하거나 단일 장치에 앱을 설치할 때 별도의 코드 서명 ID가 필요하지만, fastlane의 match를 사용하여 하나의 중앙저장소를 만들 수 있음
- 기존 배포 인증서는 팀원 각각 만들어야 하고, 만료 기한이 있었던 것과 달리 깃 저장소에 저장된 배포 인증서로 사용 가능
- 단, 이중인증 필요하다는 한계 존재

Run Fastlane

01. setting

fastlane 설치 및 세팅

2022-02-12

Web/App / Javascript2분안에 읽기 (약 274 단어)

[JS] 클로저 간단 정리

이채현

클로저는 먼저 자바스크립트 변수의 유효범위를 이해해야한다.
클로저를 명확히 무엇이다라고 말하기는 어렵다.

function returnX(){
    return 'x';
}

const x = returnX()
console.log(typeof x) // string

----------------------------------------------

function returnX() {
    let x = 'x';
    return function returnY() {
        return x + 'y';
    }
}

const x = returnX()
console.log(typeof x) // function => return 값이 함수 덩어리이기 때문에

const x = returnX()();
console.log(typeof x) // string
function sum(num1) {
    return function (num2) {
        return num1 + num2;
    };
}

const sum5 = sum(5); // 숫자5가 계속 바인딩되어 있는 상태
console.log(sum5(10)); // 15

은닉화

function privateData() {
    let temp = 'a';
    return temp;
}

const result = privateData(); // privateData를 실행시켜야만 temp값을 알 수 있다.
console.log(result);

-------------------------------------

function privateData() {
    let temp = 'a';
    return {
        value: () => {
            return temp;
        },
        changeValue: (newVal) => {
            temp = newVal;
        }
    };
}

const private = privateData();
console.log(private.value()); // a
private.changeValue('b');
console.log(private.value()); // b

활용사례

2022-02-12

Web/App / Javascript3분안에 읽기 (약 381 단어)

[JS] Class 간단 정리

이채현

클래스

class 선언은 프로토타입 기반 상속을 사용
정의: 함수 정의방법과 동일하게 가능, 함수 표현식과 함수 선언을 class표현식에서 사용 가능

function Person(name, age) {
    this.name = name;
    this.age = age;
}

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

인스턴스

싱글리터럴로 만든 객체도 각자의 인스턴스를 뜻함..객체이지만 인스턴스
생성자 함수와 클래스를 활용하여…new 연산자와 더불어 만듬

2022-02-10

Web/App / Javascript3분안에 읽기 (약 458 단어)

[JS] 프로토타입 간단 정리

이채현

자바스크립트는 프로토타입 기반의 언어다.

constructor (생성자)

function Person(name, age) {
	this.name = name;
	this.age = age;
}

class Paerson {
	constructor() {

	}
}

생성자함수는 프로토타입이 모든 자바스크립트에 들어있듯이 생성자도 모든 자바스크립트에서 확인가능하다.

const one = new Person('one', 1);
const two = new Person('two', 2);

console.log(one.constructor); // [Function: Person]
console.log(two.constructor.name); // Person

2022-02-10

Web/App / Javascript3분안에 읽기 (약 430 단어)

[JS] this 간단 정리

이채현

JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작한다.

엄격모드와 비엄격 모드에서도 일부 차이가 있다.

this는 scope와 관계가 있다.
객체에도 영향을 준다.
this가 어디에 묶여있냐를 아는 것이 코드를 작성하는 시점, 동작하는 시점에 차이가 있을 수 있다.

(함수를 어떻게 호출했는지 상관하지 않고 this값을 설정할 수 있는 bind메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수 를 추가했습니다.)

암시적 바인딩

2022-02-10

Web/App / Javascript3분안에 읽기 (약 433 단어)

[JS] 스코프 간단 정리

이채현

전역 스코프 (Global)

그냥 가장 바깥쪽
언제 어디서나 접근 가능하기 때문에 재정의가 가능하다 ← 큰 문제
- 그 결과, 프로그램의 실행 결과 때 내가 만든 변수들의 결과를 예측하기 어려워짐 → 팀 단위로 개발할 때 최악

지역 스코프

함수 스코프

블록 스코프

2022-02-06

Web/App / Javascript5분안에 읽기 (약 746 단어)

[JS] 자료 다루기

이채현

객체

Object.keys()

객체의 키들이다~~라는 느낌으로 객체의 키들이 배열로 반환된다.

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

Object.values()

2022-02-02

Web/App / Javascript4분안에 읽기 (약 613 단어)

[JS] Object 객체

이채현

객체 생성

일반적으로 생성 할 수 있는 객체

싱글 리터럴 (Literal) 객체

const object = {
	property: 'value',
	method: function () {},
}

생성자 함수 객체 // PascalCase

하드웨어 가속은 왜 필요할까?

하드웨어 가속을 사용하려면 어떤 스타일을 사용해야 할까?

이유는?

What is the Fastlane?

Run Fastlane

01. setting

fastlane 설치 및 세팅

은닉화

활용사례

클래스

인스턴스

constructor (생성자)

암시적 바인딩

전역 스코프 (Global)

지역 스코프

함수 스코프

블록 스코프

객체

Object.keys()

Object.values()

객체 생성

싱글 리터럴 (Literal) 객체

생성자 함수 객체 // PascalCase

카테고리

최근 글

태그

하드웨어 가속은 왜 필요할까?

*하드웨어 가속을 사용하려면 어떤 스타일을 사용해야 할까?*

이유는?

What is the Fastlane?

Run Fastlane

01. setting

fastlane 설치 및 세팅

은닉화

활용사례

클래스

인스턴스

constructor (생성자)

암시적 바인딩

전역 스코프 (Global)

지역 스코프

함수 스코프

블록 스코프

객체

Object.keys()

Object.values()

객체 생성

싱글 리터럴 (Literal) 객체

생성자 함수 객체 // PascalCase

카테고리

최근 글

태그

하드웨어 가속을 사용하려면 어떤 스타일을 사용해야 할까?