가장 쉽게 이해할수 있는 CS 컴파일러와 인터프리터 개념

컴파일러 vs 인터프리터

 

 

 

 

🤷‍♂️ 본론에 앞서

---

IT분야에서 프로그래밍을 하다 보면 컴파일러(Compiler)와 인터프리터(Interpreter) 차이에 대한 개념이 필요할 때가 있고 이 두 개의 방식에 대한 개념은 개발자에게 중요한 지식이라고 생각이 듭니다.

 

그래서 이번 글을 통해서 컴파일러와 인터프리터의 개념을 가장 쉽게 이해할 수 있도록 정리해 보았습니다.

 

 

🤷‍♂️ 컴파일러와 인터프리터 개념

---

프로그래밍 언어를 사용할 때 코드가 어떻게 실행되는지 이해하는 것은 개발자에게 중요합니다.

여기서 프로그램 언어마다 컴파일러와 인터프리터라는 두 가지 방식이 있고 둘 다 고급언어이며 즉 기계가 이해할 수 있는 언어로 번역해 주는 프로그램입니다. 그리고 이 두 가지는 코드 실행 방식에서 큰 차이를 보입니다.

컴파일러와 인터프리터 개념을 요즘 가장 많이 사용하는 React, Svelte, Vue와 같은 프레임워크를 통해 쉽게 설명해 보겠습니다.

 

컴파일러

컴파일러 (Compiler)

컴파일러는 전체 코드를 한 번에 읽고 이를 기계어로 변환하여 실행 가능한 파일을 생성합니다.

전체 코드를 읽고 완료될 때까지 에러를 표시하지 않기 때문에 디버깅이 어렵다는 단점이 있습니다.

하지만 전체 코드 변환을 완료하면 인터프리터 언어보다 프로그램 실행 속도가 빠르다는 장점이 있습니다.

 

컴파일러의 변환 과정

• 코드 작성: 개발자가 소스 코드를 작성합니다.
• 컴파일: 컴파일러가 코드를 읽고 오류를 체크한 후 기계어로 변환합니다.
• 실행: 변환된 파일을 실행합니다.

예를 들어 C++ 같은 언어는 컴파일러를 사용합니다. C++ 코드를 작성한 후 컴파일러를 통해 실행 파일을 만들고 이 파일을 실행하여 프로그램이 작동합니다.

 

인터프리터

인터프리터 (Interpreter)

인터프리터는 코드를 한 줄씩 읽고 즉시 실행합니다.

프로그램 실행 속도는 느리지만 에러를 발견하면 실행이 멈추기 때문에 오류를 바로바로 찾을 수 있습니다.

 

인터프리터 변환 과정

1. 코드 작성: 개발자가 코드를 작성합니다.
2. 실행: 인터프리터가 코드를 한 줄씩 읽고 즉시 실행합니다.

JavaScript는 대표적인 인터프리터 언어입니다.

React, Svelte, Vue와 같은 프레임워크는 JavaScript로 작성되며 브라우저가 이 코드를 읽고 즉시 실행합니다.

 

🤷‍♂️ 컴파일러 vs 인터프리터의 예시

---

 

React: React는 JavaScript로 작성된 UI 라이브러리입니다. React 코드는 브라우저에서 인터프리터에 의해 실행됩니다. 즉, 개발자가 작성한 JSX(React의 문법 확장)는 브라우저가 읽고 해석하여 DOM에 반영됩니다.

Svelte: Svelte는 컴파일러 기반의 프레임워크입니다. Svelte 코드를 작성하면, Svelte 컴파일러가 이를 최적화된 JavaScript 코드로 변환합니다. 이 과정에서 불필요한 부분이 제거되고 더 빠르게 실행될 수 있도록 최적화됩니다.

Vue: Vue는 주로 인터프리터 방식으로 작동하지만, Vue의 템플릿은 컴파일러에 의해 사전 컴파일될 수 있습니다. 즉, Vue는 개발자가 작성한 템플릿을 JavaScript로 변환하여 브라우저에서 실행할 수 있도록 합니다.

 

🤷‍♂️ 정리하자면

---

컴파일러: 전체 코드를 한 번에 읽고 기계어로 변환하여 실행 파일을 생성합니다. (예: C++, C)

인터프리터: 코드를 한 줄씩 읽고 즉시 실행합니다. (예: JavaScript, Python, PHP)

 

React, Svelte, Vue와 같은 프레임워크는 이러한 개념을 바탕으로 작동하며 각각의 방식에 따라 개발자에게 다양한 경험을 제공합니다. 이처럼 컴파일러와 인터프리터의 차이를 이해하면 프로그래밍 언어와 프레임워크의 작동 방식을 더 잘 이해할 수 있습니다.

 

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리

 

 

https://itibiza.tistory.com/entry/%EB%8F%84%EC%BB%A4-%EC%9E%85%EB%AC%B8-%EC%8B%9C%EB%A6%AC%EC%A6%88-Dockerfile-%EA%B0%9C%EB%85%90-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95

[도커 입문 시리즈] Dockerfile 개념 및 사용법