전체 글

[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를 활용하여..

추상 구문 트리 (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을 사용해..