JavaScript 프레임워크를 배울 준비가 되었나요?

반응형

a
최근에 웹 개발을 배우기 시작한 제 친구는 제게 "리액트에서 다른 함수 안에 있는 함수의 변수를 참조할 때마다 정의되지 않은 오류가 발생하는 이유는 무엇입니까?"라고 물었습니다. 나는 내 친구가 스코프에 대한 기본적인 자바스크립트 지식이 부족하다는 것을 금세 깨달았습니다. 이 글에서, 저는 제 친구가 했던 것처럼 틀을 서두르지 않는 것이 왜 그렇게 중요한지 설명하고, 틀을 배우기 전에 여러분이 익혀야 할 것들에 대한 실제적인 예를 몇 가지 들려드리려고 노력할 것입니다.

왜 서두르지 않지?

자바스크립트 프레임워크는 어디에나 있다. Respect, Angular, Vue, Svelte, Ext JS, Express, Hapi는 전 세계 수백만 개의 회사에서 사용하며, 모든 채용 공고는 이들 중 적어도 하나를 포함합니다. 그리고 이것은 초보 개발자들에게 강력한 FOMO를 줍니다. 사람들은 프레임워크 열차에 빨리 올라타서 이것들 중 하나를 배우거나 시장에 나온 새로운 멋진 것을 시도하기를 원합니다. 저는 완전히 이해합니다. 개발자로서 우리는 항상 최신 기술을 가지고 있어야 합니다. 그러한 프레임워크들 중 하나를 배우는 것이 당신의 CV를 고용 회사들에게 더 매력적으로 만들거나 창업을 위한 다음 웹 애플리케이션을 구축하는 데 도움이 될 것이라는 것은 비밀이 아니다. 하지만 잠시 멈춰서 생각해보세요, 여러분이 먼저 자바스크립트 자체를 익히지 않았다면 단순히 리액트를 배우는 것이 여러분의 잠재력을 최대한 활용할 수 있을까요?
여러분이 짐작하셨겠지만 대답은 - 아닙니다.

위의 모든 프레임워크는 개발 속도를 높이고 DOM 조작, 요소 순환 및 비즈니스 로직 처리와 같은 일반적인 작업을 보다 쉽게 하기 위해 사용하는 도구입니다. 예를 들어, 반응에서 조건부 렌더링을 사용합니다. 반응: 부울 값을 기반으로 다른 정보를 쉽게 보여 주지만, 바닐라 JS에서는 몇 줄의 코드가 더 필요합니다. 아마도 이것이 가장 좋은 예는 아닐지 모르지만, 여러분은 그 아이디어를 알 것입니다.
말 그대로 reactjs.org 웹 사이트를 통하고, 과정을 수강하고, 기본적으로 혼자 리액트를 배운다고 해서 여러분은 강하고 박식한 JS 개발자가 될 수 없습니다. 왜냐하면 여러분은 무엇을 해야 할지 알고 있지만, 왜 그리고 어떻게 모든 것이 프레임워크 아래서 작동하는지 모르기 때문입니다. 때때로 우리는 특정한 것이 왜 그것이 어떻게 동작해야 하는지, 특히 현대의 프레임워크를 디버깅할 때, 왜 그것이 어떻게 동작하는지 알아내기 위해 며칠은 아니더라도 몇 시간을 보낸다. 이것은 언어 자체에 대한 확실한 이해가 많은 시간을 절약할 수 있는 때이다.

 

HTML

프런트엔드 개발자들을 위해 HTML 주소를 빠르게 지정하고 싶습니다. 프런트 엔드의 자바스크립트는 대부분 DOM 조작을 위한 것으로, 이는 의미론적 HTML, 이미지, iframe, 특정 폼 요소와 같은 다양한 종류의 요소들을 상당히 잘 이해해야 한다는 것을 의미하며, 또한 화면에 보이는 요소를 렌더링하고 색칠하기 위해 브라우저가 실제로 어떤 단계를 밟는지 학습해야 한다는 것을 의미한다. 이 상록수 기사는 구문 분석에서 시작하여 화면에 픽셀을 그리는 것으로 끝나는 단계에 대한 많은 통찰력을 제공합니다. 또한, 이 과정을 전체적으로 최적화하는 방법을 배우기 위해 이것을 확인해 보세요.

자바스크립트 엔진

구문 분석, 이벤트 루프, 호출 스택, 가비지 컬렉션, 약속, 상속.
크롬이 가지고 있는 V8과 같은 JS 엔진 깊숙이 다이빙하는 것은 탐험을 즐기는 진짜 괴짜들에게 흥미로울 뿐만 아니라, 여러분에게 더 큰 그림을 줄 것이고 왜 자바스크립트의 특정한 것들이 그런 것인지 이해하는 데 도움을 줄 것이다. 브라우저가 자바스크립트 코드를 구문 분석하는 방법과 이벤트 루프가 작동하는 방식을 배우십시오. 호출 스택과 함께 작동하는 네버 엔딩 루프가 있다는 것을 알게 되면 메모리 누수를 최대한 방지할 수 있도록 Garbage Collection이 무엇인지 알 수 있습니다.

 

범위

자바스크립트에서 실행되는 모든 것은 특정한 범위에서 발생하며 보안을 위해 존재합니다. 기본적으로 프로그램의 특정 영역에서만 변수에 액세스할 수 있으므로 의도하지 않은 변수 수정을 방지할 수 있습니다. 이것은 프레임워크에서 매우 잘 관찰될 수 있다. 범위는 다음과 같습니다.

• 창, 문서, 문자열, 배열 등과 같은 네이티브 브라우저 객체가 참조하는 전역 또는 함수 또는 블록 내부에 없는 기타 변수
• 함수 범위라고도 하는 로컬 범위로, 이 함수 내부의 변수 범위를 자신에게만 고정합니다.
• 블록 범위: 변수를 선언할 때 var 대신 const 또는 let를 사용하는 경우 함수 범위와 유사하게 작동합니다.

이러한 모든 유형의 범위를 잘 알면 프레임워크를 사용할 때 다른 시나리오에서 출력이 어떻게 되는지 다시 한 번 예측하고 결정할 수 있습니다.

폐쇄

 

React와 같은 프레임워크를 사용하면 어디에서나 Closures(폐쇄)를 볼 수 있습니다. 내 친구가 가지고 있던 정의되지 않은 이것과 관련된 문제로 돌아가서, 클로저는 단순히 다른 함수 안에 있는 함수의 조합으로, 그 내부 함수로부터 외부 함수의 범위에 접근할 수 있게 해주는 것이다. 헷갈리셨나요? 반응에서 함수의 컨텍스트를 올바른 범위에 바인딩해야 합니다. 그렇지 않으면 닫힘이 다른 범위를 가리킵니다. 그리고 자바스크립트가 당신에게 이런 놀라움을 줄 때 당신은 무엇을 해야 하는지 알 수 있도록 배워야 한다.

상속

자바스크립트는 다중 패러다임 언어로서 절차적, 함수적, 객체 지향적 프로그래밍의 조합을 가지고 있다. 후자는 상속과 같은 개념 위에 구축된다. 그리고 자바스크립트에서는 프로토타입 객체를 사용함으로써 상속이 이루어집니다. 작동 방식을 배우면 왜 모든 것이 자바스크립트에서 기본적으로 객체인지 이해할 수 있을 것이고, 리액트 클래스와 앵글 클래스에서 ES6 클래스가 어떻게 돌아가는지 이해할 수 있을 것이다. 계층, 생성자 등은 유산 위에 통사적인 설탕일 뿐이니 더 깊이 파고들 가치가 있다.

비동기/동기

이 점은 앞서 살펴본 콜 스택과 매우 관련이 있습니다. 기본적으로 비동기라는 단어는 동시에 발생하지 않는 것을 의미합니다. 그리고 기본적으로 자바스크립트는 모든 것을 하나씩 순서대로 실행하는 것을 좋아하기 때문에, 서버로부터 데이터를 가져오거나 타임아웃을 설정할 때 비동기성을 사용해야 할 때도 있다. 이러한 경우 응답이 도착할 때까지 코드 실행을 중지하고 싶지 않습니다. 따라서 프레임워크에서 비동기성이 큰 역할을 합니다.

 

오류 처리

이미 프로그래밍 경험이 있다면 오류를 잡아내고 올바른 방법으로 처리하는 것이 왜 중요한지 이해할 수 있을 것입니다. 당신이 프런트엔드에 있든 백엔드에 있든, 당신이 동적 응답을 가진 어떤 종류의 API를 다루는 한, 당신은 그것들을 거절하고 해결하거나 오류가 발생한 것들을 찾아내려고 시도해야 할 것이다. 프런트엔드는 앞서 말한 것처럼 API 응답 방식일 수 있지만 백엔드는 클라이언트 요청을 처리해야 할 수 있습니다.

ES6+

ES6를 배우는 것이 중요한 이유는 인기 있는 프레임워크의 모든 현대 버전이 이를 아키텍처에 통합하고 의존하기 때문이다. Angular는 문자 그대로 클래스와 생성자를 사용하며, React는 익명의 화살표 함수, 템플릿 리터럴 및 하위 구성 요소에 소품을 전달할 때 객체 파괴로 가득 차 있으며, Express.js는 컨트롤러 메소드에서 비동기 대기 기능을 사용하여 들어오는 요청을 처리한다. 따라서 ES6에 익숙하면 프레임워크의 학습 곡선을 훨씬 작게 만드는 데 도움이 될 것입니다.

방금 살펴본 내용을 모두 숙지하고 나면 새 프레임워크를 배우는 데 일주일이나 때로는 집중적인 주말이 소요된다는 점을 상기시켜 드리고 싶습니다. 다양한 시나리오에서 함수가 어떻게 동작하는지, 특정 오류가 발생하는 이유 및 이를 쉽게 수정하는 방법을 쉽게 예측할 수 있습니다. 제 친구는 아마 리액트에서의 초기 문제를 피하기 위해 올바른 맥락으로 묶을 필요가 있다는 것을 깨달았을 것입니다.

 

만약 이 기사가 도움이 된다면, 제 유튜브 채널을 꼭 확인해보세요. 사실 저는 기사에 대한 일대일 비디오를 제작했습니다.

다음 시간까지!