[이달의SSAFY 7月] 프론트엔드 로드맵 파헤쳐보기 (2/2)

안녕하세요! 9기 SSAFYcial 전인혁 기자입니다.

 

이번 기사의 주제는 바로바로~!~!

[이달의SSAFY 7月] 프론트엔드 로드맵 파헤쳐보기 (2/2) 입니다.

 

직전 기사인 [이달의SSAFY 7月] 프론트엔드 로드맵 파헤쳐보기 (1/2)와 이어집니다.

[이달의SSAFY 7月] 프론트엔드 로드맵 파헤쳐보기 (1/2)

 

지금부터 한 번 살펴볼까요? 💨💨

 

 

---

2023 프론트엔드 로드맵 소개

 

테스팅 / 인증 기법 / 웹 컴포넌트 / 타입 체커 / PWA / SSR / 정적 사이트 생성기 / GraphQL

🎤 조금씩 심화과정으로 넘어갑니다. 알아두면 200% 유용한 개념들입니다.

 

✔ 테스팅?

웹 애플리케이션의 코드나 로직, UI 등을 검증하고 문제를 발견하는 과정을 뜻합니다.

문제를 발견하고 해결함으로써, 애플리케이션의 안정성과 신뢰성을 확보하는 것이 그 목적입니다.

유닛테스트, 통합테스트, 기능테스트 등 각 테스트간의 차이를 이해하고,

Jest, React-Testing-Library 등 테스팅 도구의 사용법을 익히는 것이 좋습니다.

 

 

✔ 인증 기법?

사용자가 웹 애플리케이션에 접근할 때, 사용자의 신원을 확인하고 인증하는 방법을 뜻합니다.

사용자의 개인정보와 같은 중요한 정보를 어떻게 보호하고 관리할지,

그리고 사용자의 신원을 어떻게 확인할지를 결정합니다.

주로 사용하는 기술인 JWT 토큰 인증, OAuth의 개념과 구현 방법을 이해하는 것이 좋습니다.

 

 

✔ 웹 컴포넌트?

웹 개발에서 UI를 구성하는 독립적이고 재사용 가능한 요소를 말합니다.

특정 기능이나 뷰를 표현하는데 사용되며,

컴포넌트 단위로 분리되어 개발/유지보수되기 때문에, 재사용성과 개발 생산성을 향상시킵니다.

 

HTML 템플릿, 커스텀 엘리먼트, Shadow DOM과 같은 개념을 알아두면 좋다고 합니다 !

 

 

✔ 타입 체커?

자바스크립트는 타입을 미리 선언하는 것이 아니라, 동적으로 결정하기 때문에

잘못된 타입의 변수를 사용하거나 함수에 잘못된 타입의 인자를 전달하는 경우가 잦습니다.

 

이러한 오류를 사전에(실행 전에 코드 단에서) 발견하기위해 타입체커를 사용합니다.

 

흔히 사용하는 타입체커로는 TypeScript가 있고, Flow라는 타입체커도 존재한다고 합니다.

 

요즘 프론트엔드 개발자들이 TypeScript를 필수적으로 사용하는 추세이기에,

반드시 학습하는 것을 추천드립니다 !!

 

 

✔ PWA?

Progressive Web App의 약어로,

프론트엔드 웹 애플리케이션의 기술적 특징을 통해서, 웹과 네이티브 앱의 장점을 결합한 형태의 웹 앱을 말합니다.

즉, 개발한 웹 페이지를 모바일 앱화시킨 것입니다.

 

모바일 기기의 사용률이 높아짐에 따라, 점점 중요해지고 있는 기술 중 하나입니다.

 

 

✔ SSR (서버 사이드 렌더링)?

웹 애플리케이션의 뷰를 클라이언트가 아닌 서버측에서 렌더링하여 전달해주는 방식을 뜻합니다.

반대 개념인 CSR(클라이언트 사이드 렌더링)의 단점을 보완하기 위해 등장하였습니다.

(초기 로딩속도가 느리고, SEO 성능상 불리한 점)

 

현대의 프레임워크로는 Next.js(React 기반), Nuxt.js(Vue.js 기반) 등이 있습니다.

SSR, CSR의 개념과 장/단점을 이해하고,

프로젝트 시에는 성능 및 규모를 고려해 더 적절한 방식으로 선택적 사용하는 것이 좋습니다.

 

 

✔ SSG (정적 사이트 생성기)?

빌드 시점에서 웹 사이트를 사전에 렌더링하여, 정적파일인 HTML, CSS, JavaScript을 생성하고,

서버에 업로드하여 클라이언트 요청(request)에 따라 정적 파일들을 전송하는 방식입니다.

 

SSR과의 차이점은, 이미 HTML이 생성되어 있으므로, 요청 시에 별도의 렌더링이 필요하지 않다는 점입니다.

따라서, 동적인 요소가 포함된 웹에는 SSR, 정적인 컨텐츠가 많은 웹에는 SSG가 적절합니다.

 

SSR, CSR과 마찬가지로 SSG도 개념을 이해하고 프로젝트의 성질에 맞게 선택적으로 사용하는 것이 좋습니다.

 

 

✔ GraphQL?

데이터를 효율적으로 요청하고 응답받기 위한 쿼리언어 및 런타임입니다.

REST API의 용도처럼, 클라이언트와 서버 간의 통신에 사용됩니다.

REST API의 한계를 극복하고, 성능과 개발 생산성을 향상시키는데 그 목적을 둡니다.

 

아래 코드블록의 예시와 같은 형태로 데이터를 요청합니다.

REST API와 다소 차이가 있죠?

{
  human(id: "1000") {
    name
    location
  }
}

 

 

모바일 애플리케이션 / 데스크톱 애플리케이션

🎤 웹사이트 개발에서 더 나아가, 다른 플랫폼(기기) 개발을 위한 도구를 소개합니다.

✔ 모바일 애플리케이션?

스마트폰이나 태블릿과 같은 모바일 기기에서 동작하는 웹 애플리케이션 또는 네이티브 애플리케이션을 말합니다.

크게 두 가지 유형(웹 앱, 네이티브 앱)으로 나뉩니다.

 

웹 앱은 모바일 브라우저에서 동작하는 웹 기반의 애플리케이션입니다.

반응형 디자인을 통해 모바일 기기를 비롯한 다양한 기기에 최적화된 UI를 제공합니다.

개발과 배포가 간단하고 다양한 플랫폼에서 동작할 수 있지만,

기기의 기능을 직접적으로 활용할 수 없다는 단점이 있습니다.

(단, PWA를 활용한다면 기기의 일부 기능을 활용하게 할 수 있습니다 !)

 

네이티브 앱은 모바일 기기의 운영체제인 안드로이드 iOS 등에 특화된 애플리케이션 입니다.

해당 운영체제의 프로그래밍 언어(Java, Kotlin, Swift 등)으로 개발되고,

블루투스, Notification과 같은 기기의 기능을 직접적으로 활용하기에 용이하다는 장점이 있습니다.

 

React Native나 Flutter와 같은 프레임워크를 활용하면,

하나의 코드 베이스로 Android와 iOS 네이티브 앱을 개발할 수도 있습니다.

 

특히, React Native는 JavaScript와 React 기반이므로,

웹 사이트만 개발하다가 심심해진 개발자가 한 번쯤 앱 개발을 시도해보고 싶을 때 사용해보면 좋겠네요 !!?

 

 

✔ 데스크톱 애플리케이션?

웹 브라우저가 아닌, 데스크톱 컴퓨터에서 동작하는 애플리케이션을 뜻합니다.

인터넷에 연결되어 있지 않아도 독립적으로 실행가능하며, 네트워크와 상관없이 로컬에서 동작합니다.

 

Electron과 같은 프레임워크로 이를 개발할 수 있습니다.

특히, Electron은 HTML, CSS, JavaScript로 개발 가능하기에,

데스크톱 애플리케이션 개발에 흔히 사용되곤 합니다.

 

 

✔ KEEP LEANING !!

무엇보다 중요한건 꾸준한 학습인 것 같습니다.

이게 제일 어려운 기술이 아닐까 합니다.....

 

 

 

마치며 ...

프론트엔드 분야는 기술이 확확 바뀌기로 유명하지만,

모든 것이 바뀌는 것은 아닙니다.

바뀌는 와중에도 그 중심(기초)이 되는 공통 지식들이 있습니다.

 

두 번의 기사를 통해 소개해드린 기술들이

그 중심 지식이 아닐까 생각합니다.

 

부디, 이 기사를 보는 모든 분이

프론트엔드 기술의 전체적인 흐름을 파악하고,

학습 방향을 잡아가시는데 도움이 되었으면 합니다.

 

 

읽어주셔서 감사합니다!

더욱 유용한 기사로 찾아뵙겠습니다😊

 

SSAFYcial 기자 전인혁입니다.

 

 

 

 

 

 

이번 기사가 현재 SSAFY 교육생 이거나, SSAFY에 관심이 있으신 분들에게  많은 도움이 되었으면 좋겠습니다.

궁금하신 점이 있다면, 댓글로 꼭! 꼭! 남겨주세요 🙏🏻

 

 

 

---

" 읽어주셔서 감사합니다!

더 재밌고 유익한 기사와 함께 돌아오겠습니다 "