분류 전체보기

추상 구문 트리 (AST)란?

[CS: 운영체제] 컴파일러 [CS: 운영체제] 컴파일러컴퓨터는 const a = 10;을 읽을 수 없다. 컴퓨터는 0과 1밖에 이해하지 못하기 때문이다. 나는 0과 1로만 작성된 코드를 읽을 수 없다. 나는 컴퓨터가 아니기 때문이다. 따라서, 둘을 연결하는 중간다29223.tistory.com컴파일러에 대한 내용을 읽다보면 구문분석(파서)의 결과의 예시로 AST라는 것이 있다. AST는 무엇일까? 추상 구문 트리위와 같은 트리의 형태를 추상 구문 트리라 부른다. (Abstract Syntax Tree) 각 언어로 프로그래밍 된 소스 코드는 추상적으로 바뀌게 되고 코드의 구조는 위와 같이 노드로 바뀌게 된다. 이러한 노드들이 모여 만들어진 자료구조가 AST다. const test = 'this is te..

React createElement로 리팩토링 하기 (권장 X)

createElement는 React Legacy API에 포함되어 있으므로 사용을 권장하지 않습니다. 얼마 전 리액트에서 createElement를 사용하여 리팩토링 하는 글을 봤다. 리액트의 기본 매커니즘을 활용한 방식이라 매력적으로 느껴졌다. createElementcreateElement – ReactcreateElement를 사용하면 React Element를 생성할 수 있으며 이는 JSX를 작성하는 대신 사용할 수 있다.const element = createElement(type, props, ...children) React Element는 HTML Element와 달리 실제 DOM을 구성하는 요소는 아니다. 리액트 내부에서 사용되는 Element라 볼 수 있다. 이 Element을 사용해..

선언형 프로그래밍과 명령형 프로그래밍 (feat. React 18 Concurrent Mode)

선언형React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다.React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (reactjs.org) 리액트 공식 홈페이지에서 React는 선언형 라이브러리로 소개되었다. 프로그래밍에서 선언적이라는 것이 어떤 것을 의미할까? 프로그래밍 패러다임프로그래밍 패러다임은 프로그래머에게 프로그래밍의 관점을 갖게 해 주고, 결정하는 역할을 한다. 대표적인 프로그래밍 패러다임으로는 객체지향 프로그래밍, 함수형 프로그래밍 등이 있다...

[AlgoITNi] 홈 화면 성능 개선하기: 7. 최종 결과

앞서 했던 다양한 최적화의 적용 결과는 위와 같다. 같은 조건에서 여러번 테스트 했을 때 프로덕션 최고 점수는 아래와 같다. 최종결과 최종적으로 아래와 같은 개선 결과를 얻을 수 있었다. 개발환경 성능 점수: 56 → 68 (약 21% 개선) 프로덕션 성능 점수: 79 → 평균 90 (약 14% 개선) 아쉬운 점 마지막 까지 해결하지 못한 부분은 LCP와 관련된 부분이다. 로드 지연을 줄여볼 수 있었지만 렌더링 지연의 경우 JS의 실행에 걸리는 시간 때문이라 생각한다. (주의: 잘못되었을 수 있음) 개발자 도구의 Performance 탭을 보더라도 특별히 병목이 발생하는 부분을 찾을 수 없었다. 지금까지 다양한 최적화 기법을 사용해볼 수 있었으며 목표했던 평균 90점을 달성할 수 있었다. 마치며 마지막으..