[TIL] 0210

코드스피치 스터디

프로그래밍의 흐름 - 컴파일 언어

1. language code

• Lint Time
• 언어로 코드를 짠다
• 에러 예상 코드 검사

2. machine language

• Compile Time
• 기계언어로 컴파일을 한다

3. file

• 컴파일한 언어로 파일이 만들어짐

4. load

• 파일을 열어서 컴퓨터 주 메모리로 올라가는 과정
• 이 시점부터 프로그램이라고 부른다
• 정확히는 메모리에 적재되어있는 것

5. run

• Run Time
• 실행
• 이 단계는 에러 못잡음. 에러가 계속 쌓이면 프로그램을 다시 만들어야 함
• 런타임 에러가 안나게 하는걸 추구해야 함
• context error Run Time에도 안걸리는 논리적인 오류(의사소통의 문제)

6. terminate

프로그래밍의 흐름 - 스크립트 언어

1. language code

• lint time

2. file

3. load

• 브라우저(메모리)에 적재

4. machine language

• 브라우저(메모리)에 올라가고 나서 컴파일된다
• javascript엔진인 v8이 변환

5. run

• runtime
• 베이스 함수 정의, 커스텀 함수 정의, 함수 실행문 연산의 3단계로 이루어진다
• 3단계의 관계에 맞춰 static time과 run time이 상대적으로 정해진다
• js가 동적 언어인 이유

6. terminate

컴퓨터 구조와 프로그래밍 실행 과정, 자바스크립트 실행과정에 대한 공부가 더 필요함

WaffleCard Refactoring

overflow를 감지해 정렬 바꾸기

• scrollHeight, clientHeight(ref로 접근)를 사용해 자식의 높이나 너비가 부모의 것보다 클 때 상태를 true로 바꿔준다

    import * as React from 'react';
  
    export const useIsOverflow = (ref, callback) => {
      const [isOverflow, setIsOverflow] = React.useState(undefined);
  
      React.useLayoutEffect(() => {
        const { current } = ref;
  
        const trigger = () => {
          const hasOverflow = current.scrollHeight > current.clientHeight;
  
          setIsOverflow(hasOverflow);
  
          if (callback) callback(hasOverflow);
        };
  
        if (current) {
          trigger();
        }
      }, [callback, ref]);
  
      return isOverflow;
    };

  출처

MonthSub Refactoring

스토리북에서 상태 사용하기

• 외부의 상태를 의존하는 컴포넌트를 스토리북에 등록하기 위해 스토리북 내부에서 상태를 사용해야한다
• storybook-addon-state라이브러리 사용
• useState를 실행해 상태와 setter함수를 가져오고 hadler함수를 작성해 사용하면 된다