코딩 입문하기 : 웹/앱 개발 뭐부터 공부해야 할까? (조코딩 유튜브로 공부하기)

저는 UX기획에 관심이 있어서

예전부터 웹/앱 개발을 공부해보고 싶었는데요!

HTML 이나 CSS만 학교 수업에서 맛보기로 배워 본 정도..(슈퍼 문과)

그래서 하루에 조금씩이라도 시간을 내서

프로그래밍을 조금씩 배워서 언젠가는 프로젝트를 하나 만드는 걸 목표로 하려고 해요.

 

뭐부터 공부해야 하나 고민하고 있는데

유튜브 알고리즘이 어떻게 알았는지

코딩관련 유튜버인 조코딩님 채널이 뜨더라구요..!

(링크 클릭하면 바로 연결됩니다)

 

영상만 보고 넘어가는 것보다

이렇게 적어보면 좀 더 기억에 잘 남을 거 같아서

영상 내용 정리해가며 적어보는 용으로 블로그에 남겨봅니다.

 

---

 

먼저, 웹개발을 해보면서 기본적인 부분을 익히고,

앱개발도 해볼 수 있습니다.

 

💻📲웹/앱 개발 2가지 구분

1.프론트엔드  2.백엔드

 

일반적으로 프론트엔드와 백엔드를 나누어서 개발합니다.

 

1. Front-End (Client Side) 
프론트엔드 (클라이언트 사이드)

우리가 보는 화면을 구성
정보를 받고 실제로 정보를 눈으로 보는  부분

ex) 네이버 메인 페이지

이와 같이 UI들의 위치, 보여지는 모습을 개발하는 것이

프론트엔드 개발

 

 

2. Back-End (Sever Side)

백엔드 (서버 사이드)

 

화며에 보여줄 정보를 저장, 처리, 가공하는 부분

 

ex) Front-end의 로그인 페이지에서

아이디와 비밀번호를 입력하면,

Back-end에서 데이터 베이스를 검사하고 일치하는 정보가 있는지 확인.

일치하는 정보를 찾으면 '로그인 성공 화면'을 표시하라고

Back-end가 Front-end에 알려주는 것.

 

ex) 데이터들을 웹 화면에 보여주기 위한 프로세스를 개발하는 것이라고 볼 수 있다.

 

 

코딩 입문하시는 분들은

프론트엔드를 먼저 개발하는 것을 추천한다고 합니다.

공부할 것이 상대적으로 적고,

코딩한 것을 화면에서 바로 바로 확인할 수 있어서

재밌게 공부할 수 있기 때문인데요!

 

 

💻웹개발 : 프론트엔드 개발을 위해 필요한 언어

1. HTML
2. CSS

2. Javascript

 

각각의 언어는 유기적으로 연결되어 있어

비교적 쉽게 배울 수 있습니다.

 

HTML과 CSS는 마크업 언어라고 하여,

개발 언어 취급도 못 받는 쉬운 언어라고 하네요...

 

 

각 언어들을 그림을 그린다고 설명하면,

 

1. HTML = 연필

전체적인 밑그림을 그리는 역할

기본적인 웹의 뼈대를 작성하는 언어

 

ex) 홈페이지 제목은 뭘로할지,

로그인창은 어디에 둘지

기본적인 UI들의 위치의 밑그림

 

2. CSS = 물감
HTML로 그린 뼈대에 색을 칠하고 위치를 수정하면서

화려하게 만드는 역할

 

ex) 로그인 버튼은 무슨 색으로 할지 등과 같이

UI들의 디자인적 요소를 더하는 작업

 

3. Javascript = 애니메이션

HTML과 CSS로 그린 그림을 움직이게 만드는 역할

프로그래밍 언어로 공부할 양 多

 

 

웹/앱 개발 입문하여 재밌게 배우고 싶으신 분들은

상대적으로 쉬운 HTML, CSS를 공부하고

Javascript를 추가하여 공부하는 것을 추천한다고 하네요.

Javascript는 일단은 웹의 요소를 선택하고

제어할 수 있을 정도로만 간단히 공부하는 것으로

시작하는 것이 좋습니다.

 

프론트엔드의 기초만 할 수 있어도,

네이버가 구글에서 제공하는

API(미리 만들어 가져다 쓸 수 있는 기능)들을 이용해

쓸만한 서비스를 만들 수 있습니다!

 

 

 

💻백엔드는 어떻게 공부하죠?

프론트엔드로 프로그래밍 언어의 기본을 익히고

백엔드 공부를 시작하면 됩니다.

 

백엔드는 본격적으로 개발 언어가 사용됩니다.

일단은, 쉬운 개발 언어들을 사용해

변수, 조건문, 반복문, 함수

4가지 개념만 먼저 학습하는 것을 추천합니다.

 

이후에 백엔드 로직을 공부하면서,

필요한 부분을 찾아가며 공부하는 것이 더 효율적입니다!

 

원래는 SQL, Database, Session, Cookie 등

(뭔지 모르겠는데...) 알고 활용할 수 있어야 백엔드를 구성할 수 있었는데,

 

이제는 개발에 필요한 것들을 미리 만들어 놓은 도구 모음인

웹 프레임워크의 도움을 받아 쉽게 작업이 가능해졌습니다!

 

 

💻프레임워크의 종류

1. Spring (Java언어로 작업)

2. Djanga (Python언어로 작업)

3. Rails (Ruby 언어로 작업)

 

이외에도 다양한 프레임 워크가 존재합니다.

 

초보자에게 추천하는건

Ruby on Rails !

 

가장 적게 배우고 가장 많은 일을 할 수 있었던 프레임워크라고 하네요.

 

이렇게 프론트엔드와 백엔드를 공부하면,

간단한 웹사이트는 만들 수 있습니다!

 

만들고 싶은 웹 서비스를 프로젝트로 완성해가는 목표로

공부하면 더 빠르게 지식을 습득할 수 있고,

전반적인 IT서비스에 대한 이해도 생길 것입니다.

 

 

💻변수, 조건문, 반복문, 함수?

1. 변수 : ~는 ~다 (ex. ID = abc123)

2. 조건문 : 만약 !라면 (ex. ID/PW가 일치하면 로그인 성공 표시)

3. 반복문 : ~를 n번 반복해라 (ex. 앞으로 이동 10번 반복)

4. a를 넣으면 b가 나옴 (ex. 공격력이 5이면 데이미지가 50)

 

 

💻'웹'개발과 '앱'개발 뭐가 다르지?

 

앱을 만드는 건 앱의 프론트엔드 부분을 만들고,

백엔드는 웹에서 만든 것을 그대로 활용할 수 있습니다!

즉, 모바일 최적화된 UI 구성만 따로 하는 것입니다.

 

 

 

*본문 내용은 조코딩님 유튜브 내용을 정리한 것입니다.

 

자세한 내용, 더 많은 내용은 링크를 참고하세요.

https://www.youtube.com/watch?v=wpUiN5hBnyc&app=desktop