[TIL] 0210

yoon Y·2022년 2월 11일
0

2022 - TIL

목록 보기
37/109

코드스피치 스터디

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

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 timerun 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함수를 작성해 사용하면 된다
profile
#프론트엔드

0개의 댓글