Download to read offline
![참고
프론트엔드 개발 첫걸음
[FE] 프론트엔드 3대장 비교와 주관적인 최신 웹 동향에 대해 (feat. React를 기반으로)
[번역] CSS-in-JS에 관해 알아야 할 모든 것
Javascript, 왜 중요한가?
React-사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
Vue.js
Svelte - Cybernetically enhanced web apps
2020년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 1
2020년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 2](https://image.slidesharecdn.com/random-211020080732/85/slide-18-320.jpg)
![[D2 오픈세미나]1.무한스크롤성능개선](https://cdn.slidesharecdn.com/ss_thumbnails/1-140804011241-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[2014널리세미나] 웹 서비스분석 MEAN Stack과 PhantomJS만 알면 끝!](https://cdn.slidesharecdn.com/ss_thumbnails/05meanstackphantomjs-140827025811-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[부스트캠프 웹・모바일 7기 Tech Talk]안병준_프론트엔드,어쩌다 여기까지](https://cdn.slidesharecdn.com/ss_thumbnails/random-221026092238-0da41e67-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Tech meet up] 2018 프론트엔드 트렌드&인사이트](https://cdn.slidesharecdn.com/ss_thumbnails/2018-180129073840-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DataUs]클라우드 입문자를 위한 보안 가이드](https://cdn.slidesharecdn.com/ss_thumbnails/securit-210319073708-thumbnail.jpg?width=640&height=640&fit=bounds)
프론트엔드 개발 첫걸음
- 1. 2021.10.20 서비스 개발팀 이연권 프론트엔드 개발첫걸음 날짜 팀 담당자
- 2. 1. 프론트엔드란? 2. 프론트엔드개발 프레임워크의 최신 동향 3. 프론트엔드 개발 환경 구축 4. 예제를 통한 React / Vue.js / Svelte 비교 목차 ## 목차
- 3. 최근에는 일반적인 웹사이트를 만드는 것이 아닌 다양한 기술을 통해 역동적이고 효과적인 웹 사이트를 만들고 있습니다. 프론트엔드 개발의 의미 프론트엔드란? 01 프론트엔드란 HTML, CSS, 자바스크립트의 사용을 통해 웹 사이트의 그래픽 사용자 인터페이스를 개발하여 사용자들이 해당 웹 사이트를 보고 상호작용할 수 있도록 하는 것입니다. 프론트엔드 개발
- 4. 클라이언트 사이드 렌더링 프론트엔드개발 프레임워크의 최신 동향 02 클라이언트 사이드 렌더링 서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. SPA는 서버 사이드 렌더링의 반대인 클라이언트 사이드 렌더링 방식을 사용하는데 클라이언트 사이드 렌더링 방식은 javascript를 조작해 화면을 그려줍니다. Server 화면1 /index 화면2 /about Server 화면1 /index 화면2 /about SSR (Server Side Rendering) CSR (Client Side Rendering)
- 5. CSS in JS 프론트엔드개발 프레임워크의 최신 동향 02 CSS in JS CSS in JS란 문자 그대로 자바스크립트에 CSS가 내장된 것으로, 여러 라이브러리에서 각각 다른 작성법을 지원합니다. 스타일 정의는 최종적으로 CSS로 변환되어 HTML에 적용됩니다, 이 적용 방법도 제각각이어서 요소에 style 속성이 기재되는 타입이나 분산된 스타일의 정의를 CSS 하나로 합쳐서 파일로 출력하거나, head 태그 안에 출력합니다. React Native의 스타일 정의 예 Vanilla JS 스타일 정의 예
- 6. 컴포넌트 지향 프론트엔드 개발프레임워크의 최신 동향 02 컴포넌트 지향 컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻합니다. 컴포넌트 개념을 도입한 Bootstrap의 컴포넌트를 보면 HTML, CSS, Javascript를 합쳐 하나의 컴포넌트를 구 성합니다, 각각의 컴포넌트가 주체가 되어 컴포넌트 사이의 관계로 어플리케이션 전체를 구성하는 것을 “컴포넌트 지향＂이라고 합니다. 컴포넌트 지향에서는 애플리케이션의 기본 정보를 포함하는 페이지를 통째로 하나의 컴포넌트(루트 컴포넌트)로 정의합니다. 이 루트 컴포넌트 안에 다른 컴포넌트를 포함시키는 형태로 컴포넌트 간의 부모관계 및 형제관계를 형성하고 컴포넌트 사이의 상호작용을 정의하여 애플리케이션을 만듭니다. Root 컴포넌트 기준 자식 컴포넌트 자식 컴포넌트 형제 값을 주고 받으며 상호작 용 컴포넌트 지향
- 7. 가상 DOM 프론트엔드 개발프레임워크의 최신 동향 02 가상 DOM 가상 DOM(Virtual DOM)은 자바스크립트가 HTML을 렌더링하는 방법 중 하나입니다. React에서 가상 DOM을 채택하고부터 주목을 받게 되었는데 React에서는 React가 관리하는 HTML의 DOM 요소를 다른 영역에 가상화된 DOM 요소를 통해 관리합니다. 이렇게 가상 DOM을 사용하는 큰 이유는 실제 DOM을 수정하는 과정이 자바스크립트에서 메모리 상의 객체를 수정하는 것보다 훨씬 오래 걸리기 때문이다. 그러므로 일단 메모리 상에 있는 DOM 구조를 업데이트한 다음, 가상 DOM의 현재 상태와 이전 상태의 차이를 구해서 그 차이만을 실제 DOM에 반영하여 효율적으로 DOM을 수정할 수 있습니다. 가상 DOM
- 8. PWA 프론트엔드 개발 프레임워크의최신 동향 02 PWA 어플리케이션을 설치하는 것보다 웹사이트에 방문하는 것이 훨씬 쉽고 빠르며, 링크로 웹 앱을 공유할수도 있습니다. 반면에, 네이티브 앱은 운영체제와 보다 잘 통합되므로 더 부드러운 사용자 경험을 제공할 수 있습니다. 네이티브 앱은 설치할 수 있으므로 오프라인에서 동작하며, 사용자는 홈 화면의 아이콘을 탭하여 브라우저를 사용하여 이동하는 것보다 선호하는 앱에 더 쉽게 접근할 수 있습니다. PWA는 이들과 동일한 이점을 즐길 수 있는 웹 앱을 생성하는 능력을 제공합니다. 첫눈에 웹 앱이 PWA인이 아닌지 구분하기는 쉽지 않습니다. 앱이 특정 요구 사항을 만족하거나 다음 기능들이 구현되었을 때 PWA라고 볼 수 있습니다: 오프라인에서 동작, 설치가 가능, 쉬운 동기화, 푸시 알림, 등. 앱의 완성도를 퍼센트로 측정하는 도구들도 있습니다. (Lighthouse가 현재 가장 유명합니다.) 다양한 기술적 이점을 구현함으로써, 앱을 더 점진적이게 만들 수 있고, 더 높은 Lighthouse 점수를 받을 수 있습니다. 하지만 이는 대략적인 지표일뿐입니다.
- 9. Node.js 프론트엔드 개발 환경구축 03 Node.js Node.js는 서버 사이드에서 동작하는 자바스크립트 환경입니다. 이후에 나올 예제는 모두 Node.js 상에서 동작하므로 Node.js의 설치가 필요합니다. Node.js를 설치하고 나면 Node.js의 패키지 관리 도구인 npm도 함께 설치가 됩니다. 명령어를 통해 정상적으로 설치되었는지 확인할 수 있고 각종 명령어를 통해 패키지를 관리할 수 있습니다. 버전 확인 $ node -v 패키지 설치 $ npm i 패키지명 패키지 제거 $ npm un 패키지명 프로젝트 생성 $ npm init -y
- 10. Webpack 프론트엔드 개발 환경구축 03 Webpack 서버에서 처리하는 로직을 javascript로 구현하는 부분이 많아지면서 웹 서비스 개발에서 javascript로 작성하는 코드의 양도 늘어났습니다. 코드의 양이 많아지면 코드의 유지와 보수가 쉽도록 코드를 모듈로 나누어 관리하는 모듈 시스템이 필요해집니다. 그러나 javascrip는 언어 자체가 지원하는 모듈 시스템이 없습니다. 이러한 한계를 극복하려 여러 가지 도구를 활용하는데 그 도구 가운데 하나가 webpack입니다. Webpack은 모듈 시스템을 구성하는 기능 외에도 로더 사용, 빠른 컴파일 속도 등 장점이 많습니다, Webpack
- 11. ESLint 프론트엔드 개발 환경구축 03 ESLint ESLint는 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정하는 린트 도구 중에 하나 입니다. 코드의 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것이 목적입니다. 코드에서 포맷팅을 통해 일관된 코드 스타일을 유지할 수 있고 문법적으로는 에러가 없지만 이후에 문제가 생길 수 있는 잠재적인 코드에 대해 에러를 띄워 코드의 품질을 높여 줍니다. ESLint 에러
- 12. React 예제를 통한 React/ Vue.js / Svelte 비교 04
- 13. React 예제를 통한 React/ Vue.js / Svelte 비교 04
- 14. Vue.js 예제를 통한 React/ Vue.js / Svelte 비교 04
- 15. Vue.js 예제를 통한 React/ Vue.js / Svelte 비교 04
- 16. Svelte 예제를 통한 React/ Vue.js / Svelte 비교 04
- 17. Svelte 예제를 통한 React/ Vue.js / Svelte 비교 04 React Vue.js Svelte
- 18. 참고 프론트엔드 개발 첫걸음 [FE]프론트엔드 3대장 비교와 주관적인 최신 웹 동향에 대해 (feat. React를 기반으로) [번역] CSS-in-JS에 관해 알아야 할 모든 것 Javascript, 왜 중요한가? React-사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 Vue.js Svelte - Cybernetically enhanced web apps 2020년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 1 2020년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 2
- 19.
Editor's Notes
- #3 프론트엔드의 의미와 필요성 프론트엔드 기술의 최신 동향 개발환경 구축 세 가지의 프레임워크(라이브러리) 비교
- #4 기존 웹 애플리케이션 개발은 주로 Java, C#, PHP 등 서버 사이드 언어가 메인이고 거기에서 화면은 중심을 크게 두지 않은 경우가 많았다. 구조가 그러다보니 위에서 언급한 큰 회사에서 마크업만 하는 직군이 따로 있고 이분들이 정적인 HTML, CSS만 만든다(일부 간단한 스크립팅까지 해주는 경우도 있다). 그후에 서버쪽 코딩하는 사람이 위의 마크업을 받아서 API 연동이나 인터랙션 작업 같은 JavaScript 코딩을 하는 식이었다. 이렇게 Server-side 의존적인 구조다보니 Front-end side에서 무언가 주도적으로 하기가 힘들었고, 흔히 이야기하는 Modern web스러운 프레임워크나 라이브러리를 쓰기가 매우 힘들었다. 내가 알기로 규모있는 회사에서 React.js 같은 걸 어드민 사이트용이 아닌 대고객용 웹 애플리케이션에 적극적으로 쓴 건 정말 얼마 되지 않았다.
- #5 전통적인 웹에서는 페이지 이동을 하고 서버에 요청을 하면 서버가 HTML 파일을 만들어서 클라이언트에 보내주고 브라우저가 HTML 을 반영해서 보여주기전 새로고침이 일어납니다. 하지만 SPA 에서는 페이지 이동시 서버에 AJAX로 요청하고 Server 는 JSON 만 전달해줌을 알 수 있는데, 이는 SPA 방식에서는 페이지 이동시 변경되는 부분만 JSON 으로 받아온뒤, 브라우저의 자바스크립트에서 받은 JSON 을 토대로 DOM 에 변경된 부분만 렌더링 해주기 때문입니다. 이 때 SPA 는 html 렌더링을 서버가 하는게 아닌 클라이언트가 받은 json 을 토대로 하기 때문에 CSR(Client Side Rendering) 방식으로 렌더링 한다고 말합니다.
- #6 CSS in JS란 문자 그대로 자바스크립트에 CSS가 내장된 것으로, 여러 라이브러리에서 각각 다른 작성법을 지원합니다. 스타일 정의는 최종적으로 CSS로 변환되어 HTML에 적용됩니다, 이 적용 방법도 제각각이어서 요소에 style 속성이 기재되는 타입이나 분산된 스타일의 정의를 CSS 하나로 합쳐서 파일로 출력하거나, head 태그 안에 출력합니다.
- #7 컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻합니다. 컴포넌트 개념을 도입한 Bootstrap의 컴포넌트를 보면 HTML, CSS, Javascript를 합쳐 하나의 컴포넌트를 구성합니다, 각각의 컴포넌트가 주체가 되어 컴포넌트 사이의 관계로 어플리케이션 전체를 구성하는 것을 “컴포넌트 지향＂이라고 합니다. 컴포넌트 지향에서는 애플리케이션의 기본 정보를 포함하는 페이지를 통째로 하나의 컴포넌트(루트 컴포넌트)로 정의합니다. 이 루트 컴포넌트 안에 다른 컴포넌트를 포함시키는 형태로 컴포넌트 간의 부모관계 및 형제관계를 형성하고 컴포넌트 사이의 상호작용을 정의하여 애플리케이션을 만듭니다.
- #8 가상 DOM(Virtual DOM)은 자바스크립트가 HTML을 렌더링하는 방법 중 하나입니다. React에서 가상 DOM을 채택하고부터 주목을 받게 되었는데 React에서는 React가 관리하는 HTML의 DOM 요소를 다른 영역에 가상화된 DOM 요소를 통해 관리합니다. 이렇게 가상 DOM을 사용하는 큰 이유는 실제 DOM을 수정하는 과정이 자바스크립트에서 메모리 상의 객체를 수정하는 것보다 훨씬 오래 걸리기 때문이다. 그러므로 일단 메모리 상에 있는 DOM 구조를 업데이트한 다음, 가상 DOM의 현재 상태와 이전 상태의 차이를 구해서 그 차이만을 실제 DOM에 반영하여 효율적으로 DOM을 수정할 수 있습니다.
- #9 웹사이트에 방문하는 것은 어플리케이션을 설치하는 것보다 훨씬 쉽고 빠르며, 링크로 웹 앱을 공유할수도 있습니다. 반면에, 네이티브 앱은 운영체제와 보다 잘 통합되므로 더 부드러운 사용자 경험을 제공할 수 있습니다. 네이티브 앱은 설치할 수 있으므로 오프라인에서 동작하며, 사용자는 홈 화면의 아이콘을 탭하여 브라우저를 사용하여 이동하는 것보다 앱에 더 쉽게 접근할 수 있습니다. PWA는 이들과 동일한 이점을 즐길 수 있는 웹 앱을 생성하는 능력을 제공합니다. 첫눈에 웹 앱이 PWA인이 아닌지 구분하기는 쉽지 않습니다. 앱이 특정 요구 사항을 만족하거나 특정 기능들이 구현되었을 때 PWA라고 볼 수 있습니다: 오프라인에서 동작, 설치가 가능, 쉬운 동기화, 푸시 알림, 등이 있습니다. x 앱의 완성도를 퍼센트로 측정하는 도구들도 있습니다. (Lighthouse가 현재 가장 유명합니다.) 다양한 기술적 이점을 구현함으로써, 앱을 더 점진적이게 만들 수 있고, 더 높은 Lighthouse 점수를 받을 수 있습니다. 하지만 이는 대략적인 지표일뿐입니다.
- #10 다음은 프론트엔드 개발 환경을 구축하기 위한 도구들을 말씀드리겠습니다. Node.js는 서버 사이드에서 동작하는 자바스크립트 환경입니다. 이후에 나올 예제는 모두 Node.js 상에서 동작하므로 Node.js의 설치가 필요합니다. Node.js를 설치하고 나면 Node.js의 패키지 관리 도구인 npm도 함께 설치가 됩니다. 명령어를 통해 정상적으로 설치되었는지 확인할 수 있고 각종 명령어를 통해 패키지를 관리할 수 있습니다.
- #11 서버에서 처리하는 로직을 javascript로 구현하는 부분이 많아지면서 웹 서비스 개발에서 javascript로 작성하는 코드의 양도 늘어났습니다. 따라서 많은 양의 javascript 코드로 인해 무거워진 파일을 서버에서 보내는 것은 속도를 느리게 만들 수 있습니다. Webpack은 이러한 경우에 사용하지 않는 코드를 제거해주는 트리쉐이킹, 파일내에 띄어쓰기와 변수명들을 줄여주는 번들링 해주는 등 많은 역할을 합니다. x 코드의 양이 많아지면 코드의 유지와 보수가 쉽도록 코드를 모듈로 나누어 관리하는 모듈 시스템이 필요해집니다. 그러나 javascrip는 언어 자체가 지원하는 모듈 시스템이 없습니다. 이러한 한계를 극복하려 여러 가지 도구를 활용하는데 그 도구 가운데 하나가 webpack입니다. Webpack은 모듈 시스템을 구성하는 기능 외에도 로더 사용, 빠른 컴파일 속도 등 장점이 많습니다,
- #12 ESLint는 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정하는 린트 도구 중에 하나 입니다. 코드의 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것이 목적입니다. 코드에서 포맷팅을 통해 일관된 코드 스타일을 유지할 수 있고 문법적으로는 에러가 없지만 이후에 문제가 생길 수 있는 잠재적인 코드에 대해 에러를 띄워 코드의 품질을 높여줍니다.
- #13 React의 공식문서를 보면 “사용자 인터페이스를 만들기 위한 javascript 라이브러리”라고 소개하고 있습니다. 그래서 react 자체에서는 프레임워크가 제공하는 정형화된 구조를 강제하지 않습니다. 그러나 오늘날 react를 이용하여 웹 개발을 하는 양상을 보면 프레임워크의 성질을 보이기도 합니다. React와 react 기반의 서드 파티 라이브러리(react-router-dom, react-redux)를 조합하여 개발환경을 구축하는 과정에서 정해진 프레임워크 내 작업이 요구하기 때문입니다.
- #14 내부적으로 JSX라는 특별한 문법을 사용하는데, 이는 자바스크립트를 확장한 문법으로 리액트의 기본 단위가 되는 컴포넌트를 생성하는데 사용되는 문법입니다. 마치 그 내부는 자바스크립트와 HTML을 섞어놓은 듯한 모습을 하고 있습니다. 그리고 앞서 말씀드린 virtual-dom을 사용하여 컴포넌트 내에 데이터의 변동이 있을 때 해당 내용부분만 감지하여 렌더링을 하게 됩니다.
- #15 뷰는 프론트엔드에서 라이브러리적인 측면과 프레임워크적인 측면을 동시에 갖는 프레임워크입니다. 페이지에 일부분에만 적용하기도 쉽고, 다른 라이브러리들과 함께 사용하여 애플리케이션의 일부분에만 사용하는 것도 가능합니다. React의 경우엔 각각 독자적인 쓰임이나 문법(JSX 등)으로 템플릿을 따로 구현해야 했는데, 이는 입문자의 입장에서 또 다시 새로 익혀야 하는 러닝커브로 작용합니다. 그러나 Vue는 다소 고전적인 웹기술들을 그대로 유지한 채 그 기반위에서 작동합니다. 따라서 HTML로 작업해온 개발자뿐만 아니라 디자이너와의 협업에 있어서도 장점을 가집니다. 또한 기존 HTML 기반 템플릿의 웹 문서를 Vue로 이전하기 더 쉽다는 장점도 있습니다.
- #16 Vue는 React보다 이후에 나오게 되었는데 React의 컴포넌트 개념을 그대로 적용하여 재사용성을 높이고 가상돔 역시 도입하여 렌더링 성능을 최적화했습니다. 또한 React는 데이터가 오직 단방향 바인딩 되는 것에 반해, Vue에서는 양방향 데이터 바인딩을 지원한다. 양방향 데이터 바인딩을 통해 더 원활한 흐름을 꾀할 수 있는 여지가 있다는 점은 장점이 될 수 있다.
- #17 Svelte는 2019년에 등장에 무럭무럭 자라나고 있는 새로운 프론트엔드 프레임워크이다. Svelte에 대한 관심도는 실로 놀랍다. 2020년에 조사한 state of JS 설문에 의하면 React를 제치고서 가장 많은 이들이 배워보고 싶은 또는 관심이 가는 프레임워크로 뽑았다. Svelte는 착실히 점점 메이저 프레임워크로 성장하기 위한 모습을 갖춰나가고 있고 관련 글로벌 컨퍼런스도 여러 차례 개최하는 등 어쩌면 React를 대체할 차세대 프레임워크라는 기대가 있습니다. 이처럼 Svelte가 각광받는 이유는 여러 요인이 있겠지만 가장 차별화되는 점은 바로 그 속도에 있다. Svelte는 앞서 소개한 프레임워크보다 매우 빠릅니다. React나 Vue에서 사용하는 가상돔 방식 역시 기존 방식보다 빠르다는 이유로 채택한 방식인데도 불구하고, Svelte는 가상돔을 사용하지 않으면서 더욱 빠른 속도를 자랑합니다. 가상돔 프레임워크는 실제 DOM에 변경사항을 반영하기 메모리 상의 DOM에서 컴포넌트를 그리기 위한 시간을 소비하는 반면, Svelte는 이런 중간 단계를 바로 건너띄고 변경하기에 더 빠른 퍼포먼스를 나타낼 수 있습니다.
- #18 또한 Svelte는 개발 속도의 생산성 역시 향상시킬 수 있다. 일반적으로 같은 내용의 컴포넌트를 만든다고 할 때, Svelte는 React 또는 Vue와 비교해서 더 적은 코드량을 요구한다. Svelte는 번들링 된 자바스크립트 파일의 용량이 매우 작다. 이는 Svelte가 프레임워크 이면서 동시에 컴파일러이기 때문이다. 즉 Svelte는 자체적으로 컴포넌트를 컴파일할 수 있고, 번들러의 트리 쉐이킹 이점을 가져와 이용하여 내 코드에서 사용하는 프레임워크의 부분만을 포함해 자체적으로 빌드할 수 있다.