리버인사이트

자바스크립트를 배우는 현실적인 방법, 학습 로드맵은?

Author
자바스크립트 배우는 방법, 학습로드맵

자바스크립트는 웹 개발에서 필수적인 기술로 자리잡은지 오래되었죠. 때문에 아마 배우려는 이들이 많을 거라고 생각되는데요. 어떻게 해야 자바스크립트를 제대로 배울 수 있을까요? 현실적인 방법을 알아보고자 하는데요. 아마 생소한 용어들이 눈에 띄리라 생각합니다. 단순히 이러저러한 개념과 기능들을 익혀야 한다는 건 직접 와닿지 않기에 각각의 요소들을 최대한 쉽게 설명하려고 노력했습니다. 자바스크립트의 여러 가지 개념과 기능들을 왜 배워야하는지를 이해하면 기초부터 심화까지 배우고자하는 동기를 갖는데 도움이 되리라 생각합니다.

1.자바스크립트를 배우기 시작하기 전에 알아야 할 것들

1)웹 개발에서 자바스크립트가 하는 역할은?

자바스크립트가 하는 가장 큰 역할은 웹 페이지를 동적으로 만들어준다는 것인데요. 사용자가 하는 행동에 따라 페이지의 내용을 실시간으로 변경하고 업데이트할 수 있도록 도와줍니다. 예를 들어, 버튼을 클릭하면 내용을 숨기거나 표시하도록 해주거나 이미지가 좌우 방향으로 슬라이드하는 기능을 구현하도록 만들어주는 역할을 하죠.

단순히 HTML과 CSS가 페이지의 뼈대를 갖추고 디자인하는 영역을 벗어나 동적인 요소를 갖추는데 역할을 한다고 볼 수 있습니다. 조금 더 어떤 역할을 하는지 이야기를 해보자면 서버와 통신할 수 있게 만들어줍니다. 실시간 변하는 날씨에 대한 정보를 보여주거나 뉴스 피드를 띄워주는거죠. 로그인, 회원가입과 같이 사용자와 상호작용하는 일도 자바스크립트를 통해 구현됩니다.

2)HTML/CSS와 자바스크립트는 어떤 관계일까?

앞에서도 간단히 언급하긴 했지만 웹 사이트를 만드려면 HTML과 CSS는 자바스크립트와 서로 떼려야 뗄 수 없는 관계입니다. HTML이 웹 페이지의 구조 즉 뼈대를 만든다고 하면 CSS는 웹 페이지의 디자인을 담당합니다. 자바스크립트는 실시간 변하는 웹페이지의 동작을 제어하죠. 이 세 가지 기술은 웹 페이지의 시각적 디자인과 기능적인 동작을 구현할 수 있도록 만드는데 하나로서 역할을 한다고 볼 수 있겠네요.

3)자바스크립트를 배우는 데 필요한 기본 도구는?

자바스크립트를 배우는 데 필요한 도구는 크게 코드 편집기, 웹 브라우저, 개발자 도구가 있습니다.

1.코드편집기

먼저, 코드 편집기는 자바스크립트 코드를 입력하는 개발 도구입니다. 일반 텍스트 편집기로도 코드를 짤 수 있지만 코드 편집기를 활용하면 손쉽고 간편하게 개발을 할 수 있습니다. 추천 편집기를 소개하자면 다음과 같습니다.

2.웹 브라우저

자바스크립트는 브라우저 위에서 실행됩니다. 따라서 웹 브라우저가 필요한데요. 자바스크립트 개발자들이 가장 많이 사용하는 브라우저는 크롬 브라우저입니다. 모질라의 파이어폭스, 마이크로소프트 엣지 브라우저와 같은 것들이 있지만 전세계 70%의 점유율을 가지고 있는 크롬 웹브라우저로 시작해보시는 것을 추천합니다.

3.개발자 도구

웹 브라우저에는 자바스크립트를 디버깅하고 코드 실행 결과를 확인할 수 있는 개발자 도구가 내장되어 있는데요. 크롬의 경우 맥에서는 (Command + Shift + C), 윈도우에서는 F12키로 개발자 도구를 열 수 있습니다. 개발자 도구를 활용하면 잘 만들어진 웹사이트의 구조가 어떻게 되어있는지 들여다볼 수 있죠. 클론 코딩이라고 들어보셨을지 모르겠는데요. 가령, 스타벅스 홈페이지를 따라 만들기 위해 개발자 도구를 활용하는 것이 도움이 됩니다. 개발자 도구를 활용해 똑같이 홈페이지를 따라 만들어보면서 실습하는 것도 좋은 방법입니다.

2.자바스크립트 학습 로드맵

1.입문 단계

1)HTML과 CSS의 기본 개념 공부하기

HTML이 웹사이트에서 어떻게 구조적으로 설계되어 있는지를 알 수 있어야 합니다. 마크업 언어가 무엇인고 어떻게 사용하는지 정도의 개념만 익히는 것으로 충분합니다. 그리고 CSS를 통해 폰트와 배경색을 어떻게 입히는지 그리고 어떤 식으로 요소들을 배치할지를 CSS를 공부하면서 익혀야 합니다.

👉 HTML 기본 구조와 개념 알아보기!

2)자바스크립트 기본 문법 공부하기

변수 선언, 자료형, 조건문, 반복문, 함수 선언과 호출, 매개 변수, 반환값, 연산자, 이벤트, DOM 조작과 같은 기본적인 개념을 알아야 하는데요. 요새는 유튜브나 온라인 강의가 잘 되어있기 때문에 온라인을 활용해보는 것을 추천합니다. 모르는 것이 생기거나 자료를 찾아야 할 때면 가능한 공식 문서를 활용해보시기 바랍니다.

👉 자바스크립트 기본 문법 완벽가이드!

2.중급 단계

실제 웹 프로그램을 개발하는데 필요한 기술을 익히는 단계인데요.

1)ES6+ 문법 익히기

취업을 위해서도 ES6+ 문법을 이해했는지 여부는 중요하다고 할 수 있습니다. 여기서 ES는 ECMAScript의 줄임말로 뒤에는 버전을 의미하는데요. ES6 이후의 버전을 통칭하여 ES6+라고 합니다. 개발자가 깔끔하고 효율적인 코드를 작성할 수 있도록 꾸준히 업데이트 되고 있습니다.

주요 문법에는 다음과 같은 것들이 있습니다. let과 const, 화살표 함수, 템플릿 리터럴, 디스트럭처링, 스프레드 연산자, 기본 매개변수, import와 export 모듈, Promise, async/await, 클래스, for of루프, Map과 Set입니다.

2)비동기 처리 익히기

비동기 처리라는 말이 생소하게 들릴지 모르겠습니다. 쉽게 말하자면 한 가지 일을 하는 동안 다른 일도 같이 할 수 있도록 하는 것입니다. 구체적인 예시를 들어보겠습니다. 네이버에서 날씨를 검색하면, 네이버 서버에서 정보를 가져오는 데 시간이 걸릴 수 있습니다. 이때 비동기 처리를 사용하면, 기다리는 동안에도 페이지가 멈추지 않고 계속 사용할 수 있습니다. 기다리는 동안 로딩이 지속된다면 아마 기다리지 못하고 창을 닫아버리게 될지도 모르니까요. 반대로 동기 처리 방식이라는 것도 있는데요. 한 가지 일이 끝나야 다음 작업으로 넘어갈 수 있다는 것이 특징입니다. 비밀번호를 입력한 뒤, 확인이 끝나야 로그인이 진행되는 것처럼 말이죠.

정리하자면 비동기 처리는 사용자가 기다리지 않게 만들어주는 기술입니다. 주로 데이터를 서버에서 가져오거나, 타이머나 예약 작업이 필요할 때, 파일을 업로드하거나 다운로드 받을 때, 실시간 채팅을 할 때, 애니메이션과 화면 동작을 부드럽게 할 때 사용합니다.

비동기 처리의 주요 구성 요소를 보면 콜스택, 웹API, 태스크 큐, 마이크로태스크 큐, 이벤트 루프, Promise와 같은 것들이 있습니다.

3)브라우저 API 활용하기

IT에는 생소한 용어들이 많아 이해하기가 어려울 때가 많은 것 같습니다. 여기 API도 사실 이해하면 어렵지 않습니다. API는 Application Programming Interface의 줄임말인데요. API를 사용하면 개발자가 처음부터 끝까지 복잡한 코드를 짤 필요 없다는 엄청난 이점이 있습니다. 이를 테면, 구글 지도 API가 있습니다. 내 웹사이트에 지도 기능을 넣고 싶은데 처음부터 코드를 짜려면 많은 시간과 비용이 발생하겠죠? 하지만 이미 만들어진 구글 지도 API를 가져다 사용하기만 하면 편하게 웹사이트의 기능 한 가지를 추가할 수 있습니다. 이게 바로 API가 중요한 이유입니다.

그럼 브라우저 API가 뭘까요? 브라우저에서 제공하는 내장된 기능들을 말합니다. 브라우저에서 제공하는 API를 활용하면 웹사이트를 좀 더 편리하고 똑똑한 웹사이트를 만들 수 있어요.

브라우저 API에는 어떤게 있을까요? 이벤트 리스너, 로컬 저장소, 타이머, DOM API, BOM API, Fetch API, Web Storage API, Canvas API, Geolocation API, Web Audio API, WebRTC API, Notification API 등이 있습니다. 이 중 몇 가지를 설명하자면 Canvas API는 그래픽을 그리거나 애니메이션을 만드는 데 사용합니다. 그리고 Geolocation API는 사용자의 위치 정보를 제공합니다. 이러한 API들은 브라우저 환경에서만 동작한다는 단점이 있지만 어쨌든 브라우저 API를 사용할 수 있으려면 익혀놓는게 필요합니다.

4)기초 알고리즘과 자료구조 공부하기

기초 알고리즘과 자료구조는 컴퓨터 프로그래밍에서 문제를 해결하는 방법과 데이터를 효율적으로 처리하는 방법을 배우는 중요한 개념들입니다. 이건 자바스크립트에만 국한된 것이 아닌 개발자로서 갖춰야 할 역량이기도 하죠.

알고리즘은 어떤 문제를 해결하기 위한 단계적 절차나 방법을 말합니다. 문제를 풀기 위해 필요한 작업들을 논리적인 순서대로 나열해 놓은 거라고 할 수 있어요. 알고리즘을 잘 구현해 놓아야 프로그램이 효율적으로 돌아갈 수 있습니다.

자료구조는 데이터를 어떻게 저장하고 처리할지 정하는 방법입니다. 방 안에 물건들을 잘 정리해놓아야 물건을 잘 찾을 수 있는 것처럼 컴퓨터도 데이터를 잘 정리해놓아야 데이터를 효율적으로 사용할 수 있습니다. 자료구조에는 배열, 스택, 큐, 연결 리스트라는 개념이 있습니다. 각각이 무엇인지 간단히 설명하자면 다음과 같습니다.

5)작은 프로젝트 진행하기

간단한 앱을 만들어보시기 바랍니다. 계산기, 할 일 목록, 이미지 슬라이더를 직접 구현해보는 거죠. 할 일 목록 프로그램을 예시로 보자면, 사용자가 할 일을 추가하고, 완료된 일을 체크하고 삭제하는 간단한 앱을 만들어 보는 겁니다.

이를 통해 DOM 조작 방식, 이벤트 리스터, 배열 사용, 로컬 스토리지를 통한 데이터 저장, 기본적인 CRUD를 익힐 수 있습니다. 날씨 앱을 만들어보는 것도 좋은데요. 외부 API를 호출하는 방법, JSON 데이터 다루기, 사용자 입력을 처리하고 비동기를 처리하는 방법을 익힐 수 있습니다.

3.고급 단계

고급 단계부터는 프레임워크와 라이브러리를 사용하게 되는데요. 생산성을 극대화하는 방향으로 나아가는 과정이라고 볼 수 있습니다. 여기서 프레임워크와 라이브러리는 뭘까요? 둘 다 개발을 더 빠르고 쉽게 만들어주는 도구라고 할 수 있는데요. 약간의 차이가 있습니다. 프레임워크는 정해진 틀이 있기 때문에 프레임워크라는 틀에 따라 맞춰 개발하게 됩니다. 여러 개의 프로젝트를 빠르고 신속하게 구현해야할 때 짜여진 틀에 따라 맞춰 개발만 하면 되기 때문에 굉장히 신속하고 편리하게 개발할 수 있다는 것이 가장 큰 특징이죠. 라이브러리는 미리 만들어진 코드들의 모음집이라고 할 수 있어요. 라이브러리의 기능을 호출해서 사용하는 방식으로서 마찬가지로 웹사이트를 손쉽고 빠르게 개발할 수 있도록 도와줍니다.

1)자바스크립트 프레임워크 학습하기

자바스크립트의 프레임워크는 무엇을 배우는게 좋을까요? 프레임워크는 트렌드가 계속해서 변하기 때문에 최신 동향을 살펴보는게 필요하지만 24년도 현재 가장 많이 쓰이는 프레임워크, 라이브러리는 다음과 같습니다.

2)상태 관리 라이브러리 학습하기

상태 관리 라이브러리는 또 뭘까요? 말그대로 현재 웹사이트의 상태를 관리하도록 도와주는 도구라고 할 수 있는데요. 어떤 상태를 말할까요? 예를 들어, 쇼핑몰의 웹사이트를 보면 여러가지 상태가 있죠. 로그인 상태, 장바구니 상태, 페이지 상태와 같이 말입니다. 사용자가 로그인했는지 하지 않았는지, 장바구니에는 어떤 상품들이 담겨 있고, 상품의 개수와 가격은 얼마인지와 같은 상태를 말합니다.

그런데 이러한 상태들이 관리가 되지 않으면 문제가 생길 수 있습니다. 상품을 추가했는데 장바구니 페이지에는 반영이 되었지만 아이콘은 업데이트되지 않는 문제가 바로 그렇습니다. 상태를 일일이 관리하려면 너무나 복잡하고 관리하기 어렵기 때문에 이를 상태 관리 라이브러리를 통해 해결할 수 있습니다.

그럼 상태 관리 라이브러리는 무엇을 공부하면 좋을까요? Redux를 학습해보도록 추천하는데요. 현재 자바스크립트에서 가장 인기 있는 상태 관리 라이브러리 중 하나로, 주로 React.js와 함께 사용되고 있습니다. Redux는 단일 상태 트리로 모든 애플리케이션의 상태를 관리하는데요. 상태를 변경하는 방식은 액션과 리듀서를 통해 이루어집니다. React와 함께 자주 사용되는 또 다른 상태 관리 라이브러리로 MobX, Recoil 등이 있고, Vue.js와 함께 쓰이는 Vuex 라이브러리가 있으니 참고하시기 바랍니다.

3)백엔드 연동하기

백엔드는 서버 측이라고 할 수 있는데요. 지금까지는 사용자가 브라우저를 통해 보는 화면을 구성하는데 중점을 두었다면 컴퓨터 화면 뒤에서 벌어지는 일을 익힐 차례입니다. REST API 설계, GraphQl (데이터 쿼리 언어), OAuth, JWT와 같은 인증 및 권한을 설정하는 방법을 공부하는 것을 추천합니다.

4)테스팅과 디버깅을 통해 오류 점검하기

테스팅은 코드를 작성하면서 이 코드가 잘 작동할까?를 미리 확인하는 과정입니다. 그리고 디버깅은 이미 문제가 생긴 코드를 찾아내 고치는 과정을 말하죠. 테스팅과 디버깅을 잘 활용하면, 안정적이고 믿을 수 있는 프로그램을 만들 수 있습니다. 개발하는 과정에서 코드가 의도한 대로 작동하지 않을 때가 생기기 마련인데요. 문제가 발생하기 전에 예방하려면 테스팅을 통해 작성한 코드가 제대로 작동하는지 확인해볼 수 있습니다. 아래 세 가지 테스팅 도구를 사용해보시기 바랍니다.

문제가 발생하기 전에 예방하는 것이 테스팅이라면 디버깅은 문제가 발생한 후 원인을 해결할 때 사용합니다. 브라우저 개발자 도구, VS Code, Lint 같은 도구를 사용해 오류를 확인할 수 있으니 직접 만든 프로그램의 완성도를 높이기 위해 사용하기 바랍니다.

4.전문 심화 단계

자바스크립트를 깊이 이해하고 고급 기술을 습득하기 위한 단계인데요. 여기까지 왔다면 이젠 프론트엔드 개발자로서 손색이 없다고 봐도 무방하지 않나 생각이 듭니다. 심화 단계부터는 컴퓨터의 구조적 특성에 대한 깊이 있는 지식을 요구하는 고급 기술들이 포함됩니다. 이를 테면, 메모리 관리와 가비지 컬렉션 같은 것들 말이죠. Node.js를 통해 서버를 직접 다루는 것까지 가능합니다. 프론트엔드 영역에서 백엔드 영역까지 다루기 때문에 방대하고도 깊이 있는 지식이 요구되는 전문가 영역입니다. 단계별로 학습해야 할 것들을 소개하자면 다음과 같습니다.

1)고급 자바스크립트 익히기

고급 자바스크립트는 자바스크립트 언어의 심화된 기능과 개념을 다룹니다. 초보 단계에서 익힌 기본 문법과는 다릅니다. 복잡한 코드들을 효율적으로 작성하는 데 초점을 두고 있습니다. 고급 자바스크립트에서는 클로저, 고차 함수, 클래스와 객체 지향 프로그래밍, 프로토타입 상속, 메모리 관리와 가비지 컬렉션과 같은 개념들을 학습하게 됩니다. 개념들을 익히는 가장 좋은 방법은 바로 실습을 통해 적용해보는 것인데요. 적용한 뒤에 내 것으로 만드는 경험은 더 깊이 있는 개발자로 성장하는 즐거움을 갖게 하니 도전해보시기 바랍니다.

2)Node.js 다루기

앞에서도 언급했지만 자바스크립트로 할 수 있는 것은 비단 HTML과 CSS와 함께 화면을 구성하는 것에 그치지 않습니다. 자바스크립트 하나로 서버 측 애플리케이션까지 개발할 수 있다면 사용하지 않을 이유가 없겠죠. 그럼 구체적으로 Node.js로 할 수 있는게 뭐가 있을까요? 웹 서버를 구축, API서버 개발, 실시간 애플리케이션, 파일 시스템 작업, 스크립팅 자동화와 같은 작업을 할 수 있습니다. Node.js와 함께 서버를 개발하고, 데이터베이스를 연동하고, 실시간 통신을 위한 소켓을 구성하는 법을 익혀보기 바랍니다.

3)TypeScript 익히기

타입스크립트는 자바스크립트의 한계를 보완하고, 대규모 프로젝트를 하는데 있어 손쉬운 협업을 위해 만들어졌는데요. 한마디로 자바스크립트 상위 호환 버전이라고 볼 수 있습니다. 자바스크립트의 경우 작은 프로젝트에서는 유용하지만 대규모 프로젝트를 하는데 있어서는 코드 구조와 타입 관리가 어렵다는 단점이 있어 왔는데요. 이를 보완하고자 마이크로소프트에 개발한 프로그래밍 언어가 바로 타입스크립트입니다.

타입 오류를 줄이기 위한 일환으로 타입스크립트 코드는 브라우저에서 바로 실행할 수 없다는 것이 가장 큰 특징입니다. 컴파일러가 코드를 변환하는 과정을 거치기 때문에 타입 오류시 컴파일 단계에서 곧바로 오류를 찾을 수 있죠. 반면 자바스크립트는 컴파일 필요없이 브라우저에서 곧바로 코드가 실행되기 때문에 실행 중에 오류를 발견할 수 밖에 없었습니다. 이렇게 되면 코드를 실행 후에야 오류를 발견하기 때문에 사용자에게 직접적인 영향을 미칠 수 있다는 문제가 있습니다.

특히나 대규모 프로젝트의 경우에는 타입 관련 오류가 쉽게 발생할 수 있는데, 이를 사전에 예방할 수 없다면 그만큼 코드 안정성이 떨어질 수 밖에 없게 됩니다. 이를 타입스크립트로 해결하게 된 겁니다. 게다가 자바스크립트를 완벽히 호환하니 대규모 프로젝트에서 사용하지 않을 이유가 없겠죠. 타입스크립크를 통해 코드 안정성과 유지보수가 용이하게 되었으니까요.

4)최적화와 성능 개선을 위한 기술 익히기

프로젝트의 규모가 커지면 커질수록 대두되는 것이 있습니다. 프로그램을 어떻게 더 빠르고 효율적으로 작동하게 만들 것이냐. 최소한의 시스템 사양을 가지고 최대한의 성능을 내도록 만들 것인가 하는 문제이죠. 시스템의 규모가 커질수록 운영비용은 커지기 마련인데요. 당연히 서비스 운영자는 비용을 줄이고자 할겁니다. 그러려면 시스템 성능은 그대로 혹은 더 향상시키면서도 리소스를 절약하기 위한 코드를 짜야합니다. 응답 속도, 리소스 사용량, 처리 시간 등을 개선하는 방법이 있습니다.

최적화를 위한 어떤 방법들이 있을까요?

이 외에도 비동기 처리, DOM 조작 최적화, 네트워크 최적화, 성능 측정 도구를 활용한 시스템 성능 평가(ex:Lighthouse), 번들 크기 줄이기, 이벤트 디바운싱과 스로틀링, 이미지 최적화, CDN 활용, 코드 분할 방식의 기술을 통해 성능을 향상시킬 수 있습니다.

최적화를 하면 실제로 얻게 되는 효과가 뭘까요? 예를 들어, 쇼핑몰을 접속했는데 페이지 로딩 시간이 5초 동안 지속된다면 아마 불편함을 느껴 페이지를 이탈하고 말겁니다. 페이지 로딩 시간이 1초라면 더 많은 사용자가 물건을 구매할 가능성이 높아지겠죠. 마찬가지로 자바스크립트 최적화와 성능 관리는 사용자 경험을 향상시키고, 애플리케이션을 효율적으로 작동하게 만든다는 점에서 중요하다고 할 수 있습니다.

앞서 입문부터 심화 단계까지 로드맵을 소개했는데요. 처음에는 작은 목표부터 시작해서 고급 기술을 익히고, 실제 프로젝트에 적용하면서 경험을 쌓아보시기를 바랍니다.

3.자바스크립트 학습 추천 강의

1)추천 강의

2)부트캠프, 국비 지원

온라인 강의보다는 오프라인을 통해 수업을 받고 대면 프로젝트를 직접 진행하기를 원한다면 부트캠프나 국비 지원을 통한 학습 방법이 있습니다. 하지만 그 전에 부트캠프와 국비 지원의 장단점이 있기 때문에 알아보고 수강하는 것을 추천하는데요. 어떤 장단점이 있을까요?

4.자바스크립트를 학습을 위한 추천 문서와 커뮤니티

1)커뮤니티

2)AI 도구

3)자바스크립트 학습 자료 및 문서

Exit mobile version