웹 개발자 빠르게 되는 방법. ( 비전공자 )

 

반응형

저번 시간에 이어서 오늘은 웹 개발을 위해 공부해야 할 기술에 대하여 알아보겠습니다. 웹 개발을 크게 3가지로 나눈다면 다음과 같이 기본, 프런트엔드, 백엔드의 영역으로 나눌 수 있습니다. 그리고 영역마다 꼭 알아야 할 대표 언어와 기술이 있습니다. 가장 먼저 기본 영역은 프런트엔드 개발을 하든 백엔드 개발을 하든 반드시 알아 두어야 하는 기술입니다. 위 영역에 대해 기본을 익혔다면 자신이 관심을 갖는 분야에 따라 프런트엔드 영역이나 백엔드 영역의 언어와 기술을 선택해서 깊이 있게 공부하시면 됩니다. 웹 개발의 기본으로는 HTML, CSS 자바스크립트가 있습니다. 웹 개발을 하려면 웹 브라우저에 정보를 어떻게 표현하는지 알아야 합니다. 그래서 프런트엔드 개발을 하든 백엔드 개발을 하든 HTML, CSS 자바스크립트를 먼저 공부해야 합니다. 웹 문서의 뼈대를 만드는 HTML은 웹 브라우저 창에 웹 문서의 내용을 보여 주는 데 필요한 약속이라고 할 수 있습니다. HTML은 웹 브라우저의 여러 내용 중에서 제목과 본문, 이미지, 표와 같은 웹 요소를 알려 주는 역할을 합니다. 웹 개발을 하면서 웹 브라우저에 보여 주고 싶은 내용이 있다면 HTML에 맞는 표기법을 사용해야 합니다. HTML을 작성하는 방법은 앞으로 이 책에서 배울 것입니다. 
CSS는 HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 사용합니다. 규격이 정해진 pc나, 모바일 화면에 여러 내용을 보여 줘야 하므로 CSS를 이용해서 웹 요소를 적절하게 배치하고 필요한 곳을 강조할 수 있습니다. 특히 pc, 태블릿 pc, 모바일 등 다양한 디바이스에 따라 화면이 자동으로 바뀌는 반응형 웹 디자인을 만들려면 CSS를 공부해야 합니다. 또한, 요즘 웹 사이트는 단순히 내용을 보여 주는 것에 그치지 않고 사용자가 클릭하거나 스크롤하는 동작에 따라 반응합니다. 예를 들어 팝업 창을 보여 주거나 상품 목록을 자동으로 스크롤하는 것처럼 동적인 효과를 사용하려면 자바스크립트가 필요합니다. 그리고 규모가 큰 웹 사이트 개발에서는 리액터나 뷰 같은 자바스크립트 프레임 워크를 사용하는데, 자바스크립트 기본 문법을 알고 있다면 이러한 프레임 워크를 배우기가 훨씬 쉬워집니다. 
프레임워크란 프로그램을 만들 때 필요한 여러 기능을 쉽게 구현하도록 도와주는 도구입니다. 예를 들어 웹 프레임 워크는 로그인이나 댓글처럼 자주 쓰는 기능을 제공해 개발자가 웹 사이트를 쉽게 만들도록 도와줍니다. 소스를 관리해 주는 유용한 서비스, 깃과 깃허브가 있는데요. 웹 개발을 하다 보면 한번 소스 작성으로 끝나는 경우는 없습니다. 사이트 하나가 완성될 때까지 계속 수정하고 완성한 후에도 필요하면 자주 업데이트합니다. 이럴 때 소스의 수정 내용을 계속 저장하고 관리해 주는 도구인 깃이 필요합니다. 그리고 온라인에서 깃을 사용할 수 있게 만든 서비스가 깃허브입니다. 깃과 깃허브를 사용하면 파일 이름은 그대로 사용하면서 수정 내용만 따로 관리하기 때문에 공동 작업할 때도 편리합니다. 그러므로 프로그램을 개발하면서 여러 소스를 작성하고 관리해야 한다면 깃과 깃허브를 사용하는 것이 좋습니다. 개발자를 꿈꾸고 있다면 깃과 깃허브는 꼭 배워 두길 추천합니다. 프런트엔드 개발을 위한 기술 1절에서도 설명했듯이 프런트엔드 개발을 할 때는 소스를 작성하고 결과를 즉시 웹 브라우저 화면에서 빠르게 확인할 수 있습니다. 최근에는 웹 브라우저에서 표현할 수 있는 기술 개수가 많아지면서 웹 사이트가 아니라 마치 애플리케이션처럼 동작하며 보여 주기도 합니다. 그만큼 자바스크립트로 구현해야 할 기술 개수가 많아졌죠. 순수 자바스크립트로만 처음부터 끝까지 프로그램을 코딩해 개발하는 것은 어려운 일입니다. 따라서 미리 만들어진 자바스크립트의 라이브러리와 프레임워크를 알아두면 좋습니다. 자바스크립트를 배우지 않은 상태에서 제이 퀴리 등의 라이브러리나 리 액트 등의 프레임워크부터 공부할 수도 있습니다. 하지만 저는 자바스크립트 기본 문법을 공부한 후에 라이브러리나 프레임 워크를 배우는 방법을 추천합니다. 자바스크립트의 기본을 알아야 라이브러리나 프레임 워크를 배우기도 쉽고 새로운 기술이 나오더라도 어렵지 않게 시작할 수 있으니까요. 프런트엔드 개발에서 주로 사용하는 자바스크립트 라이브러리와 프레임 워크를 정리해 봤습니다. 제이 퀴리- DOM을 활용해 웹 요소를 조작하기 쉽고 사용하기 편리한 라이브러리 도구입니다. 최근에는 웹 애플리케이션 개발에 적합한 다른 라이브러리나 프레임워크에 자리를 내주고 있습니다. 두 번째 오는 D3. JS인데요. 웹 브라우저에서 실시간으로 변하는 정보를 시각적으로 표시하기에 적합한 라이브 도구입니다. 3 번째로는 부트스트랩인데요. 웹 사이트 디자인을 쉽게 만들어주는 라이브러리 도구입니다. 그밖에 리액터, 앵 귤로, 뷰 정도가 있는데요. 라이브러리 도구와 프레임워크는 여러 가지 차이점이 있지만 가장 큰 차이는 개발 흐름의 주도권을 누가 가지고 있는가에 달렸습니다. 개발자가 코딩할 때 라이브러리는 자신에게 필요한 기능만 사용해도 됩니다. 즉, 개발 주도권이 개발자에게 있죠. 반면에 프레임워크는 개발 주도권이 프레임워크에 있습니다. 그래서 웹 개발을 시작하는 방법부터 기능을 구현하는 모든 것을 프레임워크에서 정해 놓은 대로 따라야 합니다. 오늘 제가 가져온 주제는 어떠셨나요? 다음 시간에는 더 유익한 주제를 들고 오겠습니다.