개발/개발과정

[import-visualizer] 2. 경로별칭

이전 단계에서 프로젝트의 설정이 끝났다. 이제는 요구사항에 맞게 만들면 된다.이 시리즈의 글은 개발 과정을 작성한 것으로 내용 중 코드 또는 판단이 이상한 부분이 있다면 높은 확률로 뒷부분에서 수정될 것입니다.Cli 기반의 프로그램cli 기반의 프로그램을 실행할 때 아래와 같이 입력하는 경우가 많다. --option1 option1 --option2 option2Node.js에서는 위에서 option1과 같은 프로그램 실행 인자를 process를 이용해 가져올 수 있다. #!/usr/bin/env nodeconsole.log(process.argv);위와 같이 process.argv의 내용을 살펴보면 아래와 같은 결과를 확인할 수 있다.첫 번째 요소는 해당 파일을 실행하는 nodejs의 경로, 두 번째 ..

[import-visualizer] 1. 프로젝트 시작 (요구사항 분석)

추상 구문 트리 (AST)란? 추상 구문 트리 (AST)란?[CS: 운영체제] 컴파일러 [CS: 운영체제] 컴파일러컴퓨터는 const a = 10;을 읽을 수 없다. 컴퓨터는 0과 1밖에 이해하지 못하기 때문이다. 나는 0과 1로만 작성된 코드를 읽을 수 없다. 나는 컴퓨터가29223.tistory.com위의 글에서 AST란 무엇이며 어떻게 사용 중이며 어떻게 응용할 수 있을지에 대해 다뤘다. AST를 응용하면서 어떤 것을 만들 수 있을지 고민하다가 저번부터 만들고 싶었던 프로젝트 구조를 트리로 볼 수 있는 라이브러리를 만들어 보기로 했다. 이 시리즈의 글은 개발 과정을 작성한 것으로 내용 중 코드 또는 판단이 이상한 부분이 있다면 높은 확률로 뒷부분에서 수정될 것입니다.들어가며처음에는 AST를 활용하여..

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을 사용해..

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

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