웹 개발을 배우고 싶지만 어디서 부터 어떻게 시작해야 하는지 막막한가요?

웹 개발은 장기적인 여정으로 학습해야 할 것이 많습니다. 하지만 차근차근 단계별로 학습한다면 여러분들도 웹 개발자가 될 수 있습니다. 검색을 통해 몇몇 정보는 얻었지만 방향을 잡기 힘든 여러분에게 필요한 웹 개발을 위한 로드맵을 소개합니다. 

여러분들이 들어봤던 프로그래밍 언어나 도구가 어떤 역할을 하는지 정확히 알아보며 어떤 방향성을 잡고 어떤 순서로 학습할지 알아봅시다!

먼저, 웹 개발자에 대해 아무것도 모르는 초보 웹 개발자로서 따라야 할 단계는 다음과 같습니다.

   <웹 개발 로드맵>

  1. 웹 개발에 대한 이해

- 웹 사이트 작동 방식

- 프론트 엔드 vs 백 엔드

- 생산성을 높이는 텍스트 편집기

  2. 웹 개발자라면 알아야 할 사전지식

- 학습 도구 소개

- 기본 지식

  3. 프론트엔드 개발자를 위한 지식

- HTML, CSS 와 JavaScript

- Sass, 반응 형 디자인, JavaScript

- Typescript, Webpack, React, Angular

  4. 백엔드 개발자를 위한 지식

- 서버 및 데이터베이스, 프로그래밍 언어

1, 2 단계를 학습하고 프론트엔드와 백엔드의 기본사항을 알아본 후 어느 쪽에 집중할지 여부를 결정하는 것을 추천 드립니다.

    1. 웹 개발이란 무엇일까요?

     1. 웹 사이트 작동 방식

• 웹 사이트는 컴퓨터 서버에 저장되는 파일 모음입니다. 이 서버는 인터넷에 연결되어 있어 컴퓨터나 휴대전화 브라우저(browser)를 통해 해당 웹 사이트를 로드할 수 있습니다. 이때 브라우저를 클라이언트(client)라고 합니다. 간단한 소규모 비즈니스 웹 사이트 및 블로그는 모두 브라우저에서 액세스 할 수 있으며 이것들은 모두 웹 개발자가 만든 것 입니다.

      2. 프론트엔드와 백엔드의 차이점

• 프론트엔드는 주로 클라이언트 측을 다룹니다. 브라우저에서 볼 수 있는 부분을 담당하고 있기에 ‘front 엔드’라고 합니다.
• 백엔드는 브라우저에서 볼 수 없는 부분을 담당하고 있습니다. 웹사이트에서 실제로 볼 수 없지만 사이트의 작동에 있어 큰 기능을 담당하고 있습니다.

     3. 텍스트 편집기

• 웹 사이트를 만들 때 가장 필수적인 도구는 텍스트(코드) 편집기 입니다. 코드 편집기는 모든 코드를 작성하는 곳이고 터미널은 코드를 실행하는 곳입니다. 가장 인기있는 코드 편집기는 VS Code입니다. 코드 편집기를 적절하게 사용한다면 생산성을 크게 높일 수 있습니다.

    2. 웹 개발자라면 알아야 할 사전지식

     1. 학습 도구와 기본 지식

• Git/ Git Hub: 팀끼리 협업을 하기 위해 사용하는 도구입니다. 효과적인 서비스 개발 및 운영을 위해 꼭 필요한도구입니다.
• SSH: 내 컴퓨터 터미널에서 서버 컴퓨터의 터미널에 접속할 수 있게 해주는 프로토콜입니다.
• 기본 터미널: 터미널에 대한 기본적인 사용법을 알아야 합니다. 특히 Vim은 꼭 쓸 수 있어야 합니다.
• 자료 찾기: 오류가 났을 때 자료를 찾아 스스로 해결할 수 있는 능력을 기르는 것이 중요합니다. 개발자들이 가장 많이 참고하는 사이트는 스택오버플로우입니다.

스택오버플로우 둘러보기: https://stackoverflow.com/

• 디자인 패턴: 사용자에게 접근성 있는 웹 사이트를 만들기 위해 필요합니다. 접근성 문제를 해결하는 방법, 건너뛰기 링크를 다루는 방법, 내비게이션 영역 및 랜드마크의 효율적인 활용법, 버튼이나 폼을 유지하는 방법을 적용하기 위해 학습합니다.
• 문자 인코딩: 컴퓨터는 문자를 이진수로 바꾸어서 저장하거나 처리합니다. 이 때 어떤 이진수 숫자가 어떤 문자로 바꿔야 하는지는 미리 정해놓은 규칙들을 문자 인코딩이라 합니다.
• HTTP/ HTTPS 프로토콜 및 API: HTTS는 서로 다른 컴퓨터가 통신으로 연결될 수 있도록 하는 프로토콜인 HTTP에 S(Secure)가 붙은 것으로 신뢰할 수 없는 사이트를 구분하고 보안기능을 추가하기 위해 도입되었습니다. 구글에서 HTTPS 웹 사이트를 이용하면 검색 순위 결과에 가산점을 부여하며 HTTPS 사용을 권장하여 HTTPS를 사용한 웹사이트가 검색결과가 더 많이 노출됩니다.

    3. 프론트엔드 개발자를 위한 지식

앞서 언급한 디자인 패턴에서 MVC, MVP, MVVM 등의 다양한 패턴이 등장하면서 프론트와 백엔드의 경계가 분명해지고 있습니다. 프론트 개발자는 단순히 페이지의 겉모습을 꾸미는 것이 아닌 사용자 입장에서 어떻게 사용성을 높일 것인지 연구합니다.

• HTML: HTML는. 웹 사이트를 볼 때 브라우저에 로드되는 기본 파일 유형입니다. HTML 파일은 페이지의 모든 콘텐츠를 포함하며 태그를 사용하여 다양한 유형의 콘텐츠를 나타냅니다.
• CSS: CSS를 사용하면 HTML 콘텐츠의 스타일을 멋지고 멋지게 꾸밀 수 있습니다. 색상, 사용자 정의 글꼴을 추가하고 웹 사이트의 요소를 원하는대로 레이아웃 할 수 있습니다. CSS로 애니메이션과 모양을 만들 수도 있습니다!

• Javascript: JavaScript를 사용하면 웹 사이트를 동적으로 만들 수 있습니다. 즉, 사용자 또는 기타 소스의 다양한 입력에 응답합니다. 예를 들어 사용자가 클릭하면 페이지 상단으로 다시 스크롤되는 "맨 위로 이동"버튼을 만들 수 있습니다.
• Sass: CSS의 단점을 보완하여 콘텐츠 스타일을 보다 직관적으로 만들 수 있습니다.

• 반응형 디자인: 개발자가 만든 스타일이 휴대전화, 태블릿 등의 모든 기기에서 잘 보이는 역할을 합니다. 유연한 크기 조정 사용과 특정 장치 및 너비에 대한 스타일 설정이 가능합니다.

• React, Angular, Vue: 인기있는 프레임 워크입니다. 사용자들에게 빠르고 정확한 서비스 제공을 위해 이용합니다. 하나의 프레임 워크를 배우면 다른 프레임 워크를 더 쉽게 배울 수 있습니다.

    4. 백엔드 개발자를 위한 지식

    백엔드는 다양한 언어로 만들어 낼 수 있습니다. 백엔드의 주요 구성요소 세 가지입니다.

    * 웹 서버의 엔진은 어떤 것으로

    * 어떤 언어로 개발

    * 어떤 데이터베이스를 사용

           1. 서버

서버는 웹 사이트 파일, 데이터 베이스 및 기타 요소가 저장된 컴퓨터 입니다. 기존 서버는 Linus 또는 Windows와 같은 운영체제에서 실행되지만 웹 사이트 파일을 저장하려면 AWS(Amazon Web Services) 또는 Netlify와 같은 서버가 필요합니다.

2. 프로그래밍 언어

웹에서 주로 사용되는 프로그래밍 언어로는 PHP, Python, Ruby, C#, Java가 있습니다. Node.js는 서버에서 JavaScript 코드를 실행할 수 있는 런타임(웹 엔진) 환경입니다. 백엔드 역시 프론트 엔드와 마찬가지로 프레임 워크를 통해 앱을 훨씬 빠르게 제작할 수 있습니다.

• C#: 웹 앱을 만드는 데 사용되며 게임 개발 및 모바일 앱 제작에도 사용됩니다.
• Java: 가장 많이 사용하는 언어로 웹 앱과 안드로이드 앱 제작에 사용됩니다.
• Node.js: 다른 어떤 백 엔드보다도 빠르게 웹 서비스를 구축할 수 있습니다.
• PHP: 웹 개발의 원조로 오래된 언어입니다. 보안이 취약하다는 분석도 있지만 진입 장벽이 낮고 오래된 만큼 방대한 자료가 있어 입문자에게 인기있는 언어입니다.
• Python: 유명하고 입문자들도 쉽게 접근할 수 있는 언어입니다. 개발 효율성이 높아 다양하게 쓰이고 있습니다.
• Ruby: 순수 객체 지향 언어이며 초보자에게 친숙한 언어입니다. 다만 개발에 필요한 자료를 찾기 힘들 수 있습니다.

3. 데이터베이스

데이터베이스는 웹 사이트에 대한 정보를 저장합니다. 대부분의 데이터 베이스는 SQL을 의미합니다. SQL은 데이터를 생성하고 읽고 업데이트 및 삭제하기 위해 사용됩니다.