코딩 공부 순서 총정리
( 앱 하나 만들고싶은데 뭐부터 해야할지 막막할 때 )
저는 저만의 어플리케이션을 구현해내는 것이 목표입니다.
그래서, 수많은 검색을 통해 우연히 조코딩님 영상을 보게되었고
아주 쉽고 이해하기 쉽게 설명해놓으셨기에
제 블로그에 조코딩님의 내용을 저의 방식대로
다시 정리하고자 합니다.
그럼, 포스팅 시작하겠습니다 !
-요약 정리-
1. 웹부터 시작하세요
2. 프론트엔드 ㅡ▶ 백엔드 순으로 공부하세요
( HTML + CSS ㅡ▶ Javascript ㅡ▶언어 ㅡ▶프레임워크 )
3. 언어는 변수, 조건문, 반복문, 함수만 공부하세요
4. 프레임 워크를 활용해서 만들고 싶은 서비스를 만드세요.
- 목차 -
1. 프로그래밍 언어 공부부터 시작하는 것은 어려울 수 있음2. 웹(Web)으로 시작하시는 것을 추천
3. 개발은 크게 프론트엔드 / 백엔드로 나눌 수 있음
4. 프론트엔드 부터 시작하는 것을 추천
5. 프론트엔드만 할 줄 알아도 API를 잘 쓰면 쓸만한 서비스를 만들 수 있음
6. 백엔드부터는 본격적으로 개발 언어가 사용됨
7. 만들고 싶은 웹 서비스를 만들면서 공부하면 빠른 속도로 실력이 성장함.
8. 마무리하며..
1. 프로그래밍 언어 공부부터 시작하는 것은 어려울 수 있음
여러분은 어떤 목적으로 코딩을 공부하시나요?
코딩을 공부하는 목적은 다양하겠지만,
아마 많은 분들이 자기가 만들고 싶은 게임, 앱 등
서비스를 만들고 싶어서 코딩을 공부하는 분들이 많을 것 같습니다.
그런데 !!
아이러니하게도 그런 목적으로 코딩을 공부하시는 분들이
C언어, Java 등 특정 언어에 집중해서
그 언어의 개념을 깊게 파고
예제들을 꼼꼼히 풀어보면서
공부를 하시는 분들이 많습니다...
물론, 특정언어를 깊게 마스터 하는 것은
어플리케이션을 개발하는데 있어 추후에 큰 도움에 되겠지만,
초보자분들이 그렇게 하시게되면 낮설고 어려워서
코딩 자체에 대한 흥미가 떨어질 수 있습니다.
그래서 저는 처음 시작하시는 분들은
가장 쉽고 익숙한 것 부터 시작해야 한다고 생각합니다.
(유튜버 조코딩님이 이렇게 시작했었다고 하네요)
그래서 저는 그게 바로 웹(Web) 이라고 생각합니다.
웹(Web)이란,
인터넷 익스플로어, 크롬, 사파리 등
인터넷 브라우저를 통해 접속할 수 있는 모든 사이트를 의미합니다.
대표적으로 네이버, 구글, 쿠팡 등이 있습니다.
2. 웹(Web)으로 시작하시는 것을 추천
초보자분들에게 웹을 추천하는 이유는 정말 여러가지가 있는데요.
먼저 웹은 상대적으로 다른 어떤 개발에 비해 난이도가 낮습니다.
게다가 개발에 필요한 도구도 굉장히 많은 편이여서
누구나 쉽게 시작을 할 수 있습니다.
게다가,
웹으로 개발한 서비스는 컴퓨터 뿐만이 아니라
스마트폰, 태블릿 등 다양한 기기에서
인터넷 브라우저만 있다면 어디서든 이용할 수 있습니다.
-중간정리-
1. 프로그래밍 언어 공부부터 시작하는 것은 어려울 수 있음
2. 웹(Web)으로 시작하시는 것을 추천
- 웹이란? 브라우저를 통해 접속할 수 있는 모든 사이트
- 장점 1. 인터넷을 사용해 보았다면 누구나 익숙함
- 장점 2. 난이도가 상대적으로 낮음
- 장점 3. 개발에 필요한 도구가 많음
- 장점 4. PC, 스마트폰, 태블릿, TV 등등 다양한 기기에서 작동함
3. 개발은 크게 프론트엔드 / 백엔드로 나눌 수 있음
그렇다면 웹 개발을 어디서부터 어떻게 공부해야 할까요?
이를 설명드리기 전에 먼저,
기본적인 (웹 및 기타) 개발 분야에 대해 설명드리도록 하겠습니다.
개발은 크게 2가지로 나눌 수 있습니다.
1. Front-End (Client Side)
2. Back-End (Server Side)
1. Front-End (Client Side)
번역하자면, 앞 단 (고객 편)이라는 뜻으로,
우리가 보는 화면을 구성하는 Front-End (Client Side)
우리가 정보를 받고 실제로 눈으로 보는 부분이
클라이언트 사이드 혹은 프론트엔드라고 부릅니다.
2. Back-End (Server Side)
번역하자면, 뒷 단 (제공자 편)이라는 뜻으로,
화면에 보여줄 정보를 저장, 처리, 가공하는 부분을
서버 사이드 혹은 백엔드라고 부릅니다.
Front-End (Client Side)와 Back-End (Server Side)의 개념은
앱, 웹, 윈도우 어플리케이션, 등등
어떠한 어플리케이션이라도
효율적인 구조를 만들기 위해서는
이 둘을 나누어서 개발을 하게 되는데요.
저는 그중에서 Front-End를 먼저 학습하시는 것을 추천 드립니다.
프론트엔드는 개발하기 위해 필요한 사전지식이 상대적으로 적고,
코딩한 대로 화면에 바로바로 나오기 때문에
상대적으로 재미있게 공부하실 수 있습니다.
4. 프론트엔드 부터 시작하는 것을 추천
웹에 프론트엔드,
즉, 여러분이 보는 인터넷 화면을 만들기 위해서는
과연 어떤 것을 공부해야 할까요?
크게 3가지 언어 지식이 필요합니다.
HTML, CSS, Javascript 입니다.
아니, 쉽다면서 무슨 3가지 언어나 배워서 만들어야 하냐?
라고 생각하실 수 있는데요.
그 각각의 개념이 크게 어렵지 않고
유기적으로 연결되어 있어서
차근차근 배우시다보면 크게 어렵지 않습니다.
심지어 HTML, CSS는 마크업 언어라고해서
개발언어 취급도 못 받는 언어이기 때문에
너무 겁먹지 마세요 !
처음 듣는 분들은 어렵게 느껴지실 수 있으니,
제가 비유를 통해 하나씩 설명해 드릴게요.
여러분이 그림을 그린다고 생각해 보겠습니다.
먼저, HTML이라는 언어는
"연필"과 같습니다.
어떻게 그릴지 전체적인 밑그림을 그리는 역할을 합니다.
웹으로 생각해보면,
홈페이지의 제목은 뭐로할지,
로그인창은 어디에 둘지,
이러한 기본적인 웹의 뼈대를 작성하는 언어입니다.
그다음으로 CSS는,
그림에서 물감과 같습니다.
HTML로 그린 뼈대에 색을칠하고
그 위치를 조금씩 수정해 나가면서
화려하게 만드는 역할을 하는 것이죠
웹으로 생각해보면 밑에 사진처럼 되겠죠?
마지막으로, Javascript는
앞서 그린 그림을 움직이게 만드는
플립북같은 역할을 수행합니다.
그래서, 이들을 공부하는 순서는
먼저 상대적으로 쉬운
HTML, CSS를 공부하시면서 화면을 그려보시고
그 다음으로 JavaScript를 추가하여 공부하시는 것을 추천 드립니다.
참고로, Javascript는 (진정한?) 프로그래밍 언어이기에,
굉장히 배울 양이 많습니다!!
그렇기 때문에,,
웹의 요소를 선택하고
제어할 수 있을 정도로만
간단히 공부하고 넘어갑니다 !!
5. 프론트엔드만 할 줄 알아도 API를 잘 쓰면 쓸만한 서비스 만들 수 있음
사실,
프론트엔드의 기초만 알아도 만들 수 있는 것이 많고
활용할 수 있는 분야가 굉장히 넓습니다.
네이버, 구글 등에서 제공하는 API 중
굳이 백엔드가 있지 않아도
그냥 프론트엔드에 한 줄 붙여넣기만 해도
바로 지도가 표시되는 등
굉장히 편리한 API들을 제공하고 있는데요.
(지도 외에도 번역, 채팅, 결제 등)
이를 잘 조합한다면,
상당히 쓸만한 서비스를 만들 수 있습니다.
-중간정리-
3. 개발은 크게 프론트엔드 / 백엔드로 나눌 수 있음
- 프론트 엔드는 우리가 보는 화면처리 (ex. 로그인 화면)
- 백엔드는 데이터베이스 조회 등의 로직 처리 (ex. ID/PW 확인 로직)
4. 프론트엔드 부터 시작하는 것을 추천
- 코딩한대로 화면에 바로바로 표시되어서 재미있음
- HTML(연필), CSS(물감), Javascript(플립북)으로 구성됨
5. 프론트엔드만 할 줄 알아도 API를 잘 쓰면 쓸만한 서비스 만들 수 있음
(API : 미리 만들어 놓은 것을 가져다 쓸 수 있는 기능)
도움이되셨다면, 아래 광고 한번 클릭 부탁드립니다!
저에게 큰 도움이 됩니다 ㅠㅠ!!
6. 백엔드부터는 본격적으로 개발 언어가 사용됨
프론트엔드의 개념이 어느정도 잡히셨다면,
백엔드를 공부해야겠죠!
백엔드 부터는
진정한 프로그래밍 언어가 어느정도 사용됩니다.
그러나,
초기에 프로그래밍 언어를 깊게 공부 할 필요는 없습니다.
마치 이런거죠,
외국인이랑 대화를 하고 싶어서 영어를 배우는데,
영어의 문법, 어원 등 언어적인 것만 깊숙히 안다고 해서
외국인이랑 쉽게 대화를 할 수 있는건 아니죠.
(Korean Language Edu...)
프로그래밍도,
메모리가 어떻게 사용되는지 등
이런 것 까지 깊게 알아야 어플리케이션을 만들 수 있는게 아닙니다.
Javascript, Ruby, Python 등 쉬운 언어를 이용해
가장 기본적인 개념인,
변수, 조건문, 반복문, 함수
이렇게 4가지 개념만 학습하시는 것을 추천드립니다.
왜냐면,
백엔드 로직을 구성하면서
더 필요한 부분이 있다면
그때그때 찾아서 공부하는 것이
훨씬 효율적이기 때문입니다.
상당히 많은 웹 서비스가
앞서서 언급한
4가지 개념만 이해하고 계신다면,
만들 수 있을 정도로
크게 어려운 개념이 필요하지 않습니다.
어느정도 프로그래밍 언어의 기초에 대해 이해하셨다면
이제 백엔드 공부를 시작하시면 됩니다!
*백엔드는 원래 알아야할 것이 많은 분야였습니다.
SQL, Database, Session, Cookie 등등
기본적인 개념을 이해하고 활용할 줄 알아야
백엔드를 구성할 수 있었는데,
이제는 웹 프레임워크에서
그 역할을 해주어서
그 개념을 잘 모르더라도
쉽게 프레임워크의 도움을 받아 개발 할 수 있습니다.
언어별로
Java는 Spring
Python은 DJango
Ruby는 Rails
다양한 프레임워크가 존재합니다.
저는 개인적으로,
초보자분들에게 추천드리고 싶은 프레임워크는
Ruby On Rails 입니다.
제가 배웠던 프레임워크 중
가장 적게 배우고
가장 많은 일을
할 수 있었습니다.
7. 만들고 싶은 웹 서비스를 만들면서 공부하면 빠른 속도로 실력이 성장함.
이렇게
프론트엔드, 백엔드의 개념을
모두 공부하시게 되면,
웬만한 간단한 웹 사이트는 만들 수 있습니다.
그 다음에 만들고 싶은
웹 서비스를
프로젝트 형식으로
완성하는 것을 목표로 공부하다 보면,
공부를 하고 만드는 것 보다
훨씬 더 빠른 속도로
지식을 습득할 수 있고,
자연스레 IT 서비스 전반에 대한
이해도 생기실 겁니다.
-중간정리-
6. 백엔드부터는 본격적으로 개발 언어가 사용됨
- 쉬운 코딩 언어로 기본만 익히고 시작하기
- 변수, 조건문, 반복문, 함수만 알아도 웬만한 건 만들 수 있음
1. 변수 : ~는 ~다의 개념 ex) ID = 'jocoding'
2. 조건문 : 만약 ~라면 ex) ID/PW가 일치하면 로그인 성공 표시
3. 반복문 : ~를 n번 반복해라 ex) 앞으로 이동 10번 반복
4. 함수 : a를 넣으면 b가 나옴 ex) 공격력이 5이면 데미지가 50
7. 프레임워크 : 개발을 도와주는 도구 모음
8. 웹 개발을 도와주는 다양한 프레임워크가 존재함
(추후 소개 포스팅 업로드 예정)
9. 개인적으로 처음 시작하실 때, Ruby On Rails 추천!
(적게 배우고 많은 것을 빠르게 구현할 수 있음)
10. 만들고 싶은 웹 서비스를 만들면서 공부하면 빠른 속도로 실력이 성장함.
8. 마무리하며..
이렇게 전반적인 이해가 되신다면
그 다음으로 (모바일)앱도 만들어 볼 수 있겠습니다.
앱을 만든다는 것은
그 앱의 클라이언트
즉, 프론트엔드 부분을 만드는 것이고
백엔드는 웹에서 만든 것을
그대로 활용할 수 있기 때문에
웹으로 먼저 개념을 잡으시고
그 다음 앱을 만드신다면
초보자분들도 좀 더 수월하게 만드실 수 있을 것 같습니다.
그리고,
게임을 만들고 싶으신 분들은
앞서 배운 프론트엔드 백엔드의 원리는
게임을 만들 때도 적용됩니다.
게임도 클라이언트 사이드
즉, 프론트엔드 부분을 만들게 되면
웹에서 만들었던 백엔드를 활용해서
레벨, 점수를 저장하는 등
로직은 똑같기 때문에
기본적인 것을 웹으로 시작하시고,
앱이나 게임 등 기타 개발로 넘어가실 때,
훨씬 이해도 빠르고 쉽게 배울 수 있을것으로 생각합니다.
이로써,
코딩 전반에 대한 대략적인 부분만 말씀을 드렸는데요.
앞서말한 공부법대로
코딩을 재미있게,
실습 위주로 공부할 수 있는
포스팅을 계속올리도록 하겠습니다.
그럼 파이팅 !!
- 중간 정리 모음-
1. 프로그래밍 언어 공부부터 시작하는 것은 어려울 수 있음
2. 웹(Web)으로 시작하시는 것을 추천
- 웹이란? 브라우저를 통해 접속할 수 있는 모든 사이트
- 장점 1. 인터넷을 사용해 보았다면 누구나 익숙함
- 장점 2. 난이도가 상대적으로 낮음
- 장점 3. 개발에 필요한 도구가 많음
- 장점 4. PC, 스마트폰, 태블릿, TV 등등 다양한 기기에서 작동함
3. 개발은 크게 프론트엔드 / 백엔드로 나눌 수 있음
- 프론트 엔드는 우리가 보는 화면처리 (ex. 로그인 화면)
- 백엔드는 데이터베이스 조회 등의 로직 처리 (ex. ID/PW 확인 로직)
4. 프론트엔드 부터 시작하는 것을 추천
- 코딩한대로 화면에 바로바로 표시되어서 재미있음
- HTML(연필), CSS(물감), Javascript(플립북)으로 구성됨
5. 프론트엔드만 할 줄 알아도 API를 잘 쓰면 쓸만한 서비스 만들 수 있음
(API : 미리 만들어 놓은 것을 가져다 쓸 수 있는 기능)
6. 백엔드부터는 본격적으로 개발 언어가 사용됨
- 쉬운 코딩 언어로 기본만 익히고 시작하기
- 변수, 조건문, 반복문, 함수만 알아도 웬만한 건 만들 수 있음
1. 변수 : ~는 ~다의 개념 ex) ID = 'jocoding'
2. 조건문 : 만약 ~라면 ex) ID/PW가 일치하면 로그인 성공 표시
3. 반복문 : ~를 n번 반복해라 ex) 앞으로 이동 10번 반복
4. 함수 : a를 넣으면 b가 나옴 ex) 공격력이 5이면 데미지가 50
7. 프레임워크 : 개발을 도와주는 도구 모음
8. 웹 개발을 도와주는 다양한 프레임워크가 존재함
(추후 소개 포스팅 업로드 예정)
9. 개인적으로 처음 시작하실 때, Ruby On Rails 추천!
(적게 배우고 많은 것을 빠르게 구현할 수 있음)
10. 만들고 싶은 웹 서비스를 만들면서 공부하면 빠른 속도로 실력이 성장함.
-요약 정리-
1. 웹부터 시작하세요
2. 프론트엔드 ㅡ▶ 백엔드 순으로 공부하세요
( HTML + CSS ㅡ▶ Javascript ㅡ▶언어 ㅡ▶프레임워크 )
3. 언어는 변수, 조건문, 반복문, 함수만 공부하세요
4. 프레임 워크를 활용해서 만들고 싶은 서비스를 만드세요.
배울 수 있는 곳이 정말 많지만 저는 아래 사이트들을 추천드리고 싶습니다.
1. 생활코딩 :
한글로된 영상으로 차근차근 기초부터 배우고 싶으시다면 "생활코딩" 강의를 추천드립니다.
강사님이 설명을 정말 잘해주시고 모든 강의가 무료입니다.
HTML: https://opentutorials.org/course/3084
CSS: https://opentutorials.org/course/3086
Javascript: https://opentutorials.org/course/3085
2. CodeCademy :
영어로 되어있긴 하지만 개념 정리와 함께 미션을 통해 바로 실습을 하며 익힐 수 있어서 빠르게 배울 수 있습니다.
이것도 일부 기능을 제외하고 HTML CSS의 개념은 무료입니다.
HTML: https://www.codecademy.com/learn/learn-html
CSS: https://www.codecademy.com/learn/learn-css
천천히 개념을 하나하나 배우고 싶으시다면 생활코딩 강의를 추천드리며,
빠르게 코딩에 활용할 목적이시면 CodeCademy를 추천드립니다.
물론 둘 다 듣는것도 좋습니다!
HTML, CSS, JS등 프론트 엔드 기술을 학습하신 후에는
프레임워크를 활용하여 웹을 개발해보시는 것을 추천드립니다.
추천 사이트로는
1. 인프런, 구름EDU :
다양한 강좌들이 있으며 한글 강의로만 되어있습니다.
유료도 있지만 무료 강의도 많이 있어 부담없이 배우기 좋습니다.
2. udemy :
영어에 어느 정도 자신이 있으시다면 추천해 드리는 사이트입니다.
전 세계에서 정말 많은 사람이 코딩을 배우는 플랫폼이며 잘 가르쳐주시는 강사님들이 많습니다.
다양한 유료 및 무료 강의가 많이 있습니다.
유료 강의 구매 시 주의 사항으로는
세일을 안하는 날이 더 적을 정도로
세일을 많이 하니 꼭 세일기간을 활용하여
유료강의를 구매하시는 것을 추천드립니다.
#코딩이란,#코딩 배우기,#코딩 자격증,#뽀로로 코딩컴퓨터,#코딩 노트북,#코딩컴퓨터,#코딩 국비지원,#코딩 장난감,#코딩 독학,#코딩 프로그램,#코디엠,#코디엠 주가,#코딩 교육,#코딩 교육이란,#코디엠 주가 전망,#코딩 로봇,#코딩 학원,#코딩파티,#코디아이,#코디엠 거래정지 이유,#코디오반정,#코딩도장,#코딩테스트,#코딩 사이트#조코딩 관상,#조코딩 동물상,#조코딩 파이썬,#조코딩 학교,#조코딩 나이,#조코딩 홈페이지#조코딩 관상,#조코딩 동물상,#조코딩 파이썬,#조코딩 학교,#조코딩 나이,#조코딩 홈페이지
도움이되셨다면, 아래 광고 한번 클릭 부탁드립니다!
저에게 큰 도움이 됩니다 !!😭
