[Winter Blog Challenge] React vs. Android Studio - 프론트엔드와 안드로이드 개발 도구 비교(Member 오지윤)

GDSC SungShin 23-24 Member 오지윤

 

안녕하세요!! GDSC Sungshin University Member 오지윤입니다.

지난 해 하반기 동안 GDSC 스터디와 전공수업을 통해 두 가지 다른 개발 환경을 경험하게 되었습니다. 

지난 해 하반기 동안 GDSC 스터디와 전공 수업을 통해 React와 Android Studio라는 두 가지 다른 개발 환경을 경험했어요. 이번 글에서는 두 환경의 특징과 장점에 대해 자세히 알아보고, 어떻게 활용할 수 있는지 살펴보려고 합니다.

---

📌 React : 프론트엔드의 선두주자

React란?

페이스북에서 개발된 JavaScript 라이브러리로, 사용자 인터페이스를 빠르고 효과적으로 개발하기 위한 목적으로 설계되었습니다. 가상 DOM을 사용하고 컴포넌트 기반 아키텍처를 통해 모듈화된 코드 작성이 가능합니다. 

 

출처 : 위키백과

출처 : npm trends

다양한 프레임워크들이 존재하지만 흔히들 말하는 프론트엔드 프레임워크 3대장 중에서도 React의 사용률이 월등히 높은 것을 볼 수 있습니다. 그렇다면 React를 사용했을 때의 장점이 무엇인지 알아봅시다. 

1️⃣ Virtual DOM

Virtual DOM은 React의 가장 큰 특징 중 하나이자 장점입니다. 

기존의 DOM은 변화가 발생할 때마다 새 DOM을 그리고 DOM 전체를 바꾸는 방식이나 Vitural DOM가 발생하여 DOM에 적용해야할 때 가상 DOM에서 변경 사항을 감지하고 필요한 부분만 실제 DOM에 업데이트함으로써 효율적인 업데이트를 가능케 한다고 합니다. 

 

2️⃣ Component 기반의 아키텍쳐

Component란?

독립적인 단위의 소프트웨어 모듈을 말합니다. 

즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있습니다. 

React는 UI를 독립적이고 재사용 가능한 컴포넌트로 나누는 컴포넌트 기반 아키텍쳐를 제공합니다. 각 컴포넌트들은 자체적인 상태(State)와 라이프사이크를 가지며, 부모-자식 관계를 통해 데이터를 전달할 수 있습니다. 

애플리케이션이 복잡해지더라도 코드의 유지보수 및 관리가 용이해지는 장점을 가집니다. 

 

3️⃣ JSX 문법

자바스크립트의 확장 문법

JavaScript + XML/HTML

리액트에서는 JSX 문법을 사용하여 JavaScript 코드 안에서 HTML과 유사한 구문을 작성할 수 있으며 이를 통해 코드 가독성을 높이고, UI의 구조를 직관적으로 표현할 수 있습니다.

class App extends React.Component {

  render() {

    return (

      <div>

        <p>Header</p>

        <p>Content</p>

        <p>Footer</p>

      </div>

    );

  }

}

 

 

📍GDSC 스터디를 통한 경험 

GDSC 스터디를 통해 React를 학습하면서, 컴포넌트 기반의 구조를 활용하여 다양한 웹 애플리케이션을 개발하는 흥미로운 경험을 쌓았습니다. React를 활용하여 GPT API와 연동하여 AI 회고록 서비스를 만들어보기도 했고, 또한 영화 웹을 제작하는 등 다양한 실습 프로젝트를 통해 React 프레임워크에 대한 실질적인 이해를 높일 수 있었습니다.

이러한 경험을 통해 React가 제공하는 강력한 기능들과 개발 생산성의 높은 면을 직접 체험하며, 컴포넌트 기반의 아키텍처가 얼마나 유용하고 재사용성이 뛰어난지를 깨달을 수 있었습니다. 이러한 능력을 바탕으로 나만의 웹 애플리케이션을 만들어내는 즐거움을 느꼈고, React 프레임워크를 활용하여 다양한 프로젝트를 추구하고 싶다는 열망이 생겼습니다.

만약 여러분이 웹 개발에 흥미를 느끼고 있다면, 저의 소개와 경험을 통해 React를 선택해보고 여러 프로젝트를 통해 스스로의 능력을 발전시키는 것은 어떨까요? 🤩

---

📌 Android Studio : 안드로이드 앱의 완벽한 통합

Android Studio란?

 

Android Studio는 JetBrains의 IntelliJ IDEA를 기반으로 안드로이드 앱을 개발하기 위한 통합 개발 환경(IDE)입니다. Java 또는 Kotlin을 사용하여 안드로이드 애플리케이션을 개발할 수 있습니다. 

 

출처 : 안드로이드 스튜디오 공식 문서 

1️⃣ 풍부한 기능과 도구

안드로이드 스튜디오는 안드로이드 애플리케이션 개발에 필요한 다양한 기능과 도구를 제공합니다. 사용자 인터페이스(UI) 디자인 도구, 코드 편집기, 디버깅 도구, 빌드 시스템, 테스트 환경 등이 있습니다. 

xml 디자인 편집기

2️⃣ 안드로이드 플랫폼에 최적화 

안드로이드 스튜디오는 안드로이드 플랫폼에 특화되어 있습니다. 안드로이드 SDK(소프트웨어 개발 키트)와 원활하게 통합되어, 개발자들이 안드로이드 플랫폼의 다양한 기능과 API를 쉽게 활용할 수 있습니다. 또한, 안드로이드 스튜디오는 안드로이드 버전 관리와 호환성 검사 등을 자동으로 처리하여 개발자들이 최신 버전의 안드로이드 앱을 개발할 수 있도록 도와줍니다.

 

 

3️⃣ 편리한 개발 환경 

안드로이드 스튜디오는 사용자 친화적인 인터페이스를 제공하여 개발자들이 편리하게 앱을 개발할 수 있도록 도와줍니다. 코드 자동 완성 기능, 실시간 레이아웃 프리뷰, 오류 검출 기능 등의 편리한 기능을 제공하여 생산성을 높여줍니다. 또한 안드로이드 스튜디오는 Git과 같은 버진 관리 시스템과도 통합되어 협업 개발을 용이하게 지원합니다. 

📍전공 수업을 통한 경험

전공 수업을 통해 처음으로 안드로이드 스튜디오 개발 환경에 접하게 되었습니다. 안드로이드 스튜디오를 사용하면서 개발이 처음인 저도 직관적이고 사용하기 편리한 환경 덕분에 높은 자신감을 얻을 수 있게 되었습니다. 팀 프로젝트를 통해 협업과 개발의 즐거움을 동시에 경험할 수 있었는데요. 전공 수업에서 안드로이드 스튜디오의 편리함을 경험한 후, GDSC Google Solution Challenge도 안드로이드 스튜디오를 통해 개발할 예정이랍니다!! 

여러분도 모바일 앱 개발에 관심이 있으시다면, 안드로이드 스튜디오로 첫걸음을 내딛어 보세요~!! 저처럼 초보자도 하나의 어플을 완성시킬 수 있답니다.🚀

 

 

👩🏻‍💻 마무리하며

이렇게 두 가지 다른 개발 환경을 경험하면서, 각각의 장점과 매력을 알게 되었습니다. React로는 웹 애플리케이션의 동적이고 효율적인 UI 개발을, Android Studio로는 안드로이드 앱의 완벽한 통합과 최적화된 개발을 경험할 수 있었죠.

여러분도 자신의 취향과 프로젝트에 맞게 두 환경을 유연하게 활용하면, 보다 다양하고 풍부한 개발 경험을 쌓을 수 있을 것입니다. 함께 즐겁게 개발하며 성장해봐요. 🌟