코딩 공부 순서 확실히 알려드립니다!

코딩 공부 순서

 

코딩을 공부하면 많은 취업 기회를 잡을 수 있는 것은 확실한데 코딩 공부를 어디서부터 어떻게 시작해야 할지 감이 안 잡히시죠? 그런 분들을 위해 코딩 공부 순서 확실히 알려드리겠습니다. 낯선 용어들도 정~말 쉽게 설명드리겠습니다!

 

 

코딩 공부 순서: "프론트-엔드 → 백-엔드"

 

코딩 공부 순서를 먼저 큰 그림으로 보고 가고 싶으시다면, 이렇게 이해하시면 됩니다.

 

1. 프론트-엔드(Front-End) 공부 먼저 하고
2. 백-엔드(Back-End) 공부 하기

 

자, 벌써부터 뭔지 모르겠는 용어가 나왔죠? 바로 설명 들어갑니다. 프론트 엔드, 즉 Front End는 쉽게

 

• Front=앞쪽
• End=양쪽(앞쪽과 뒤쪽) 중 한쪽의 끝 면
• Front-End=앞쪽의 끝 면(=겉으로 드러나는 면)

 

이렇게 이해하시면 됩니다. 여기서 '앞쪽의 끝 면'이란 '개발자가 만들어 낸 (앞쪽과 뒤쪽 모두를 가지고 있는) 결과물(예를 들면, 하나의 웹사이트)의 앞쪽 면(=겉으로 드러나는 면)'을 의미합니다.

 

예를 들면, '다음이라는 사이트(=개발자가 만들어 낸 결과물)의 겉면(앞쪽 면) 중 하나인 로그인 화면'이 프론트-엔드의 한 예라고 할 수 있습니다.

 

 

 

개발자가 만들어 낸 결과물의 겉면(로그인 화면)이 이용자의 눈과 맞닥뜨리게 되는 상황(로그인하려고 화면을 바라보는 상황)을 생각하시면 더 쉽게 이해가 가실 겁니다. 이 상황에서 '로그인 화면'이 '프론트-엔드'에 해당하는 것이죠. 이외에도 우리가 컴퓨터나 스마트폰으로 보게 되는 모든 웹사이트 페이지의 화면, 앱(애플리케이션)의 모든 화면을 프론트-엔드라고 이해하시면 됩니다.

---

그래서, 프론트-엔드에 대해 공부한다는 것은 '내가 만들어 낼 결과물의 겉면(앞쪽 면)을 구성하고 채워가는 방법에 대해 알아가는 것'이라고 정리할 수 있습니다.

---

위에서 잠깐 언급했다시피 우리가 일상에서 가장 많이 보는 프론트-엔드(의 결과물)는 아래와 같습니다.

 

1. 인터넷 서핑을 하며 보게 되는 웹사이트 페이지의 화면(간단히 '웹'이라고 지칭)
2. 스마트폰을 쓰며 보게되는 앱의 화면(간단히 '앱'이라고 지칭)

 

그럼, '웹'의 겉면(앞쪽 면=화면)을 구성하는 방법과 '앱'의 겉면(앞쪽 면=화면)을 구성하는 방법 중 어떤 것을 먼저 공부해야 할까요? 많은 개발자 분들이 추천하는 것은 '웹'입니다. 이유는 아래와 같습니다.

 

• '웹(인터넷 사이트-다음, 네이버, 구글, 쿠팡 등)'은 우리에게 익숙하다. (=익숙한 것은 더 편하게 접근할 수 있다.)
• 다른 것을 만드는 것보다 '웹'을 만드는 것이 상대적으로 훨씬 쉽다.
• 쉬운 것부터 해야 흥미를 유지하며 계속 공부를 이어갈 수 있다.

 

 

 

여기까지 오면 자연스레 생기는 질문은 이겁니다.

 

웹 - 인터넷 사이트의 페이지 - 을 만드는 데 필요한, 내가 공부해야 할 코딩 언어는 뭐지?

 

답은, 아래 세 언어입니다. (사실, 이 중 HTML과 SCC는 "개발(프로그래밍) 언어로 취급받지 못할 만큼 쉽다" 정도의 취급을 받습니다.) 이 부분이 바로 코딩 공부 순서의 가장 첫 번째 부분(1,2번을 먼저 공부한 후 3번 공부)입니다.

 

1. HTML = 연필 ← 인터넷 사이트 페이지(화면)의 각 부분(ex. 제목, 각종 메뉴 등)을 그리고 배치하는 역할
2. CSS = 물감 ← 연필로 그린 각종 메뉴 등에 색을 칠하는 역할
3. JS = 움직임을 부여 ← 앞에서 연필과 물감으로 그린 것을 움직이게 만드는 역할 
4. [↑JS는 '자(J)바 스(S)크립트'라고 읽습니다. 참고로, 자바 스크립트는 개발 언어로 취급을 받는 수준의 언어이고, 프론트 엔드와 백 엔드 모두에서 활용됩니다.]

 

그럼 이 세 가지 언어를 공부하는 방법에는 어떤 것이 있을까요?

 

유튜브에 올라와 있는 강의 영상들을 활용해 코딩 공부를 하거나,

(온·오프라인) 코딩 학원을 통해 코딩 공부를 하는 방법이 있습니다.

 

스스로 규칙적으로 공부를 하는 성향이라면 유튜브를 통해 충분히 코딩 공부를 할 수 있고,

그것이 안 된다면 온·오프라인 코딩 학원의 도움을 받는 것이 낫다고 생각합니다.

 

 

코딩 공부 순서: "이제는 백-엔드?"

 

HTML, CSS, JS 공부를 통해 프론트 엔드의 개념을 어느 정도 잡게 되었다면 이제 백 엔드 공부를 시작하시면 됩니다. 아, 그전에 백 엔드(Back-End)라는 용어에 대해 설명드려야겠네요!

 

• Back=뒤쪽
• End=양쪽(앞쪽과 뒤쪽) 중 한쪽의 끝 면
• Front-End=뒤쪽의 끝 면(=겉으로 드러나지 않는 면)

 

백 엔드 역시 '웹'의 측면에서 설명해보겠습니다.

 

1. '웹'의 프론트 엔드(겉으로 드러나는 면)인 인터넷 사이트 화면, 예를 들면 로그인 화면에서 사용자가 ID와 PW를 입력했다고 칩시다.

 

2. 이렇게 프론트 엔드에서 입력된 정보는 이제 백 엔드(겉으로 드러나지 않는 뒤쪽 면) 내의 코딩 언어(지금의 경우는 조건문 = '만약 ~라면')를 통해 전달되어 백 엔드 쪽에 있는 데이터베이스에 도달하게 됩니다. (이 과정은 겉으로 드러나지 않는 면이기 때문에 사용자의 눈을 통해 관찰되지는 않습니다.)

 

3. 사용자가 입력한 ID와 PW 정보가 백 엔드 쪽에 있는 데이터베이스의 정보와 일치하면, 백 엔드는 (여기서도 역시 코딩 언어를 통해) 프론트 엔드 쪽으로 '로그인을 허용한다'는 신호를 보내게 되고, 인터넷 사이트 화면(프론트 엔드)에는 이제 로그인 성공 후에 나타나기로 되어 있는 (프론트 엔드) 화면이 뜨게 됩니다. (만약 입력된 정보와 저장되어 있는 정보가 일치하지 않는다면 '비밀 번호가 틀렸습니다'라는 안내 메시지가 나오는 화면이 웹사이트 화면 - 이 역시 프론트 엔드 - 이 뜨겠죠?)

---

그래서, 백-엔드에 대해 공부한다는 것은 '프론트 엔드(겉으로 드러나는 면)의 뒤쪽(겉으로 드러나지 않는 면)에서 일어나야 하는 일들을 구성하는 방법에 대해 알아가는 것'이라고 정리할 수 있습니다.

---

 

 

그럼, 백 엔드를 구성하기 위해 공부해야 할 코딩 언어에는 어떤 것들이 있을까요? 이 부분 역시 상대적으로 쉬운 언어들을 먼저 공부하시면 됩니다. 대표적으로 아래 세 가지 언어가 있습니다.

 

• Ruby(루비)
• Javascript(자바스크립트, 프론트 엔드에서도 살짝 언급했었죠?)
• Python(파이썬)

 

이 세 언어를 공부하실 때는 가장 기본적이고 많이 사용되는 개념인 변수, 조건문, 반복문, 함수를 집중적으로 공부하시면 됩니다. 이 외의 개념은 필요할 때마다 찾아서 공부하시면 됩니다. 이렇게 코딩 공부를 하시는 게 공부의 효율성을 높일 수 있는 방법입니다.

 

여기까지, 코딩 공부 순서에 대해 정리해봤습니다. 이 포스팅이 여러분에게 도움이 되었길 바라면서, 마지막으로 코딩 공부 순서를 정리해드리겠습니다. 코딩 공부를 시작하시는 분들 모두 파이팅!입니다.

 

프론트 엔드 공부(HTML과 CSS→JS 순)

→ 백 엔드 공부(Ruby, Javascript, Python 등)