기초 숙달(1/n부)

우리Capstone preparation의 일부로서 우리는 훌륭한 과정Full Stack Open의 일부를 진행하고 있으며 그 중 대부분은 React에 중점을 두고 있습니다. LaunchSchool의 핵심 프로그램은 프레임워크 대신 JavaScript 기본 사항에 중점을 두는 것에 대해 명시적이며, React를 학습한 제 경험은 이러한 접근 방식의 지혜를 실제로 보여주었습니다.

기본 JavaScript에 대한 편안함

이 과정을 거치면서 나는 React 기능을 선택하고 JavaScript에 걸려 넘어지지 않는 것이 얼마나 쉬운지 정기적으로 기쁘게 생각합니다. 다음 공통 라인을 고려하십시오.

const [username, setUsername] = useState('')

이 한 줄에는 다음과 같이 제한되지 않고(특정한 순서 없이) 다양한 기본 JavaScript 강의에 걸친 아이디어가 있습니다.

배열 분해는 함수에서 여러 값을 반환하는 편리한 방법입니다(이 경우 객체 분해보다 우수함)

.

useState는 사용 방법에 따라 함수여야 하지만 '' 인수가 정확히 수행하는 작업은 문서

를 참조해야 합니다.

setUserName는 이제 필요에 따라 호출하거나 전달할 함수입니다

.

... (간결함을 위해 생략됨)

배열 파괴 또는 고차 함수를 본 것이 이번이 처음이라고 상상해 보십시오. 이 한 줄을 구문 분석하는 데 훨씬 더 오래 걸릴 것입니다. 그리고 이러한 변수의 범위와 다른 파일에 정의된 구성 요소에 변수를 전달하는 방법에 대해서도 다루지 않았을 것입니다...

React가 해결하는 문제에 대한 이해

주의할 점은 새로운 개발자로서 저는 React가 해결하는 문제에 대해 표면적인 수준의 이해만 가지고 있다고 확신하지만 그럼에도 불구하고 몇 가지 큰 문제를 봅니다. JavaScript 기초 연구에서 우리는 브라우저에서 사용할 수 있는 DOM 조작 API를 다루었습니다. 우리는 다음과 같은 작업을 수행했습니다.

let header = document.querySelector('body>header');
let title = document.querySelector('h1');

header.insertAdjacentElement('afterBegin', title);
document.body.insertAdjacentElement('afterBegin', header);

그리고 요소의 가시성을 전환하는 작업을 시작하지 마십시오. DOM을 수동으로 조작하는 고통을 이해하면 React를 사용하여 애플리케이션을 빌드하는 것이 얼마나 간단한지 알 수 있습니다. 그리고 저는 아직 복잡한 애플리케이션에 도달하지도 못했습니다. 애플리케이션 크기에 따라 이점이 확장될 것이라고 생각합니다.

혼란의 대상 지정

완전히 새로운 구문을 접할 때 기본 사항에 대한 강력한 숙달도 도움이 되었습니다. React 기능 구성 요소에서 다음 반환을 고려하십시오.

return (
      <div>
        <h2>Log in to application</h2>
        <form onSubmit={handleLogin}>
          <div>...
      //...continued

JavaScript에 대한 이해가 불안정하다면 .js 파일에 HTML을 작성할 수 있다고 생각할 수도 있습니다. 그러나 저는 더 잘 알고 있었습니다. 여기서 진행 중인 다른 일이 있습니다. JavaScripts에서 HTML 요소를 만들고 조작하는 방식이 아니기 때문입니다. 여기에서 실제로 진행 중인 작업(이 경우 JSX)을 쉽게 찾을 수 있습니다.

그리고 여기에 문제가 있습니다. 기본 JS 및 HTML 작성이 편하기 때문에 JSX는 선택하기가 매우 쉽습니다! 자신의 숙달을 기반으로 할 수 있습니다.

결론

저는 JavaScript의 기초를 숙달하는 데 보낸 시간에 대해 후회하지 않으며 제 경력을 쌓을 때 이 관점을 확실히 가져갈 것입니다.


표지 사진 작성자: Jakob Braun on Unsplash