※ 이 글을 쓰는 사람은 SW 비전공자입니다.
※ 개인 공부를 위해 정리하는 글이며, 작성한 코드들은 효율성, 깔끔함(?) 등과는 거리가 멀 수 있습니다.
1편 : 2021.04.11 - [코딩/Web & Java Script] - [웹코딩]Front end 및 Back end 개념, 공부 방향
2편 : 2021.04.12 - [코딩/Web & Java Script] - [웹코딩] HTML(Hyper Text Markup Language) - 1 : 기초
3편 : 2021.04.19 - [코딩/Web & Java Script] - [웹코딩] HTML(Hyper Text Markup Language) - 2 : 문단, 정렬, 이미지
4편 : 2021.04.20 - [코딩/Web & Java Script] - [웹코딩] HTML(Hyper Text Markup Language) - 3 : Table
참고 : 2021.04.22 - [코딩/Web & Java Script] - [웹코딩] VS Code의 HTML 파일 개발 환경 설정 방법
티스토리는 사용자가 HTML, CSS 를 설정하여 자기 블로그를 자유 자재로 편집할 수 있게 해준다. 네이버 블로그에 비해서 굉장히 자유도가 높아 좋으나 웹 코딩을 모르면 전혀 편집할 수가 없다. 그래서 앞으로 웹 코딩에 대해 조금씩 공부해보려고 한다.
웹코딩을 할줄 알면 웹기반의 스마트폰 앱까지 만들 수 있어 유용할 것 같다. 일단 내 목표는 티스토리 블로그의 HTML 편집에 익숙해지고 나아가 특정 서비스를 웹 기반의 어플리케이션으로 제작해보는 것이다. 이번 포스팅에서는 기본적인 웹 코딩의 용어개념과 공부 방향에대해 정리하려고 한다. 아래 내용은 유튜브의 '조코딩' 채널을 참고하였다
1. 웹 코딩 개발 분야
웹 코딩 분야는 크게 Front end와 Back end로 나뉘어진다.
1) Front end :
- 웹페이지의 눈에 보이는 부분을 담당한다.(우리가 흔히 보는 네이버 포탈 사이트같은)
- 웹페이지의 눈에 보이는 부분을 개발하는 언어를 Markup Langauge라고 한다.
- Markup Langauge : HTML ,CSS
HTML : 웹의 스케치, 뼈대를 의미 함.
CSS : HTML에서 스케치한 뼈대를 색칠하고 이쁘게 만드는 부분
- Java Script : 웹을 요소를 선택하고 제어할 수 있는 언어(일단 웹 요소를 선택하고 제어할 수 있는 정도만 알면 된다고 함)
- 최근에는 API(Application Programming Interface)라고 하여 미리 만들어 놓은 기능을 개발자들이 그대로 사용할 수 있게 만듬.
- 구글, 네이버 또는 증권사 등 각각 API를 제공함. 아마도 파이썬의 모듈과 같은 개념인듯 하다.
2) Back end :
- 웹페이지의 눈에 보이는 부분은 아니지만 서버를 담당하는 부분이다.
- 즉, 클라이언트 사이드(사용자)가 Front-end(눈에 보여지는 UI)를 통해 요청한 정보를 어떠한 로직을 통해 제공하는 것.
- 서버, API 개발, DB 개발 등이 해당되는듯 하다.
3) Full-stack
- 영상에서 Full-stack은 다루진 않지만 가끔 회사 채 공고에서 Full-stack 개발자를 채용한다는 구인글을 본적이 있어서
찾아봄.
- Full stack은 Front-end와 Back-end를 아울러 이야기하는 것이라고 한다. Full-stack 개발자는 Front end부터 Back end까지 모두 처리할 수 있는 역량을 가진 개발자인 것이다.
4) Webview(웹뷰)
최근 찾아보니 스마트폰 App 개발에 있어 웹페이지 기반의 웹을 개발할 수 있다고 한다. 쉽게 말하면 스마트폰 App 안에 위에서 서명했던 HTML을 호출하는 것이다. 웹뷰 기반 앱을 제작하면 현재 자신의 Titsory 블로그도 안드로이드 앱을 통해 실행시킬 수 있다. 생각해보니까 한국인이면 대부분 사용하는 카카오톡 어플 내부 '뉴스탭'은 웹뷰 기반의 개발인 것을 알앗다.
2. 웹 공부 방향
1) Front end
: HTML -> CSS -> JAVA Script 순으로 공부 예정
2) Back end
: 조코딩 유튜브 영상(하단 링크 기재)에서는 Ruby on rails를 추천하나, 나는 파이썬 웹프레임워크인 Django를 활용해볼 예정이다.
SQL을 알고 있으면 좋은 것 같아서 이전에 공부했던 SQLite도 활용 가능한지 확인해볼 예정.
3) 공부 참고 사이트
-. 코드카데미 : www.codecademy.com/
-> HTML 과정이 코드카데미를 활용하면 4시간이면 끝난다고 한다.
Learn to Code - for Free | Codecademy
Learn the technical skills you need for the job you want. As leaders in online education and learning to code, we’ve taught over 50 million people using a tested curriculum and an interactive learning environment. Start with HTML, CSS, JavaScript, SQL, P
www.codecademy.com
-. 생활코딩 : opentutorials.org/course/1
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그
opentutorials.org
※참고자료 : 조코딩 유튜브 채널
www.youtube.com/watch?v=wpUiN5hBnyc
'코딩 > Web' 카테고리의 다른 글
| [웹코딩] HTML(Hyper Text Markup Language) - 4 : form, textarea (0) | 2021.04.25 |
|---|---|
| [웹코딩] VS Code의 HTML 파일 개발 환경 설정 방법 (0) | 2021.04.22 |
| [웹코딩] HTML(Hyper Text Markup Language) - 3 : Table (1) | 2021.04.20 |
| [웹코딩] HTML(Hyper Text Markup Language) - 2 : 문단, 정렬, 이미지삽입 (0) | 2021.04.19 |
| [웹코딩] HTML(Hyper Text Markup Language) - 1 : 기초 (1) | 2021.04.12 |
