목차
코딩/프로그래밍 의미 코딩 독학 시 명심 사항 (그누보드/영카트) 구성 언어 ★ 단계1 - 구성 언어 학습 단계2 - 레이아웃 구조 파악 단계3 - 파일위치 구조 파악 단계4 - 파일간 유기적 연동관계 파악 단계5 - DB 테이블 및 필드 구성 파악 단계6 - 상수, 변수, 함수 파악 단계7 - 스킨 분석/제작 단계8 - 그외 유용한 학습 팁 전문 분야 선택 시 고려사항 프로그래밍 가이드 개발자 영역 선택 관심분야별 학습할 코딩언어 C , C++ , C# 비교 C , JAVA , Python , JavaScript, Ruby 소개 프로그램 언어별 동작 원리 설명 코딩 언어 체계 (공부 순서) 코딩 언어 연습장 IDE (통합개발환경) 소개 프로그래밍 협업 추천
코딩/프로그래밍 의미
(웹디자인・웹퍼블리셔・웹개발자) 되고 싶은데,
뭐부터 할지 막막하시면 읽어보세요.
포토샵 같은 순수 웹디자인 전용 학습 사항은 제외하고,
오로지 (코딩 + 프로그래핑) 관련 공부 가이드입니다.
제 경험, 그외 많은 고수분들의 팁을 모아봤습니다.
※ 공부 목적별 시작 권장 코딩 언어.
https://homzzang.com/b/free-5002
※ 코딩 = 협의의 코딩 + 프로그래밍
※ 협의의 코딩 (Coding)
① 인간의 명령을 컴퓨터가 이해할 수 있는 언어로 표현하는 일.
② 웹디자이너, 퍼블리셔 (Publsher). coder (코더)
③ HTML, CSS, JavaSCript , jQuery, Less, SASS, SCSS 등
※ 프로그래밍 (Programming)
① 원하는 작업을 컴퓨터가 처리하게 명령 쳬계 (= 로직) 짜는 일.
② 프로그래밍 개발자 (Developer), 프로그래머 (programmer)
③ JavaScript , PHP, Python, C, C++, C#, JAVA 등
코딩 독학 시 명심 사항
◎ 목표 정하고 공부 . ★
- 만들어 보고 싶은 게 뭔지 진지하게 고민 후 배울 언어 결정.
- 목표가 없으면 문법은 아는데, 뭘 만들지 모르게 됨. ㅡㅡ;;
◎ 사용 툴(Tool) 정한 후, 익숙해지기 . (예) IDE, 에디터 등.
- 툴에 내장된 편의 기능 활용해서 코딩 속도 높여 생산성 ↑
◎ 예제 직접 타이핑 해보기. + 영타/한타 타이핑 속도 향상 노력.
- 절대 눈으로만 공부 금지.
◎ 안 보고 유사 응용 코드 빠르게 짜보기 .
- 생각의 흐름을 코드로 표현하는 연습.
◎ 퀴즈 연습문제는 직접 풀기 .
- (문제 해결 ・ 검색 능력) 향상에 도움.
◎ (로드・처리) 속도 신경 쓰기.
- 여러 코드 중 어떤 코드가 가장 효과적인지 생각하기.
◎ 전체와 부분 맥락 이해 하기.
- 본인이 지금 공부하는 코드의 용도 정확히 이해하기.
◎ 강의 노트 작성 하며 공부.
- 디지털 노트 활용. (제 경우엔, 홈짱닷컴이 제 강의 노트임.)
◎ 공부 후 바로 뭔가 만들어 보기 .
- 부족한 게 뭔지 알 수 있음.
◎ 매일 꾸준히 코딩 하기.
- 코딩 언어도 언어라, 안 하면 금방 까먹음. 당장 필요한 것부터 공부.
◎ 포트폴리오 만들기.
- 취업이나 의뢰 받을 때 유용.
◎ 기간 정하고 공부 .
- 취미로만 하면 아주 늘어지기 쉬움. 홈짱이 맨날 하는 실수. ㅡㅡ;
◎ T자 전략 으로 공부. -
※ 가로축: 공부 범위 (배경 지식) .
※ 세로축: 공부 깊이 (전문 분야) .
◎ 책 사서 공부하는 대신, 해당 언어 공식 홈페이지 이용 .
- 코딩언어의 세계는 매우 빠르게 변화 발전.
PS. 이미 잘 만들어진 코드 가져다 쓰기.
Template (템플릿)
Framework (프레임워크)
Library (라이브러리)
API (Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)
SPL (Standard PHP Library) : 객체 지향 표준 PHP 라이브러리SDK (Software Development Kit: 소프트웨어 개발 키트)
(예)
HTML CSS : BootStrap
JS : jquery
JAVA : 서블릿(Servlet) + (spring + 전자정부 프레임워크)
Python : Django, FastAPI
Ruby : Rails
(그누보드/영카트) 구성 언어 ★
단계1 - 구성 언어 학습
[브라우저측 언어] - 일반사용자가 소스보기로 코드 확인 가능.
HTML
홈페이지 구조 (= Layout 레이아웃) + 내용 (Contents) https://homzzang.com/b/html
https://developer.mozilla.org/ko/docs/Web/HTML
CSS (C ascading S tyle S heets)
홈페이지 모양 (= 디자인 + HTML 보충)
https://homzzang.com/b/css
https://developer.mozilla.org/ko/docs/Web/CSS
PS. 배워두면 좋은 것들.
① LESS, SCSS (SASS)
② BS3, BS4, BS5 , Material
JavaScript (짧게 JS) ★
홈페이지 동작 (= 동적인 동작/기능 + HTML/CSS 보충)
https://homzzang.com/b/js
https://developer.mozilla.org/ko/docs/Web/JavaScript
PS. 배워두면 좋은 것들.
ⓘ JS 최근 버전 (ES6 이후 것들), TypeScript
jQuery (짧게 JQ)
JS 간편 구현 가능한 JS 기반 라이브러리.
https://homzzang.com/b/jquery
https://jquery.com/
BootStrap (짧게 BS)
HTML CSS JS JQ 기반 반응형 홈페이지 프레임워크 (= 홈페이지 틀 )
※ 아미나 빌더 - (BS3.2 float 기반 Grid 사용)
※ 나리야 빌더 - (BS4.5 flex 기반 Grid 사용.)
※ 아미나와 나리야는 서로 호환 X
https://homzzang.com/b/bs https://getbootstrap.com/docs/3.4/ https://getbootstrap.com/ 4.5[서버측 언어] - 일반사용자가 소스보기로 코드 확인 불가.
PHP ★
홈페이지 작동에 필요한 서버측 웹언어 (= 웹서버와 DB 중계 역할)
(그누보드, 영카트, 제로보도, 워드프레스, 드루팔, 마젠토 등의 기반 언어)
https://homzzang.com/b/php
SQL ★
홈페이지 데이터베이스 (D ATAB ASE : DB) 제어 관리
(MySQL, MariaDB 2종류가 그누보드와 호환 됨.)
https://homzzang.com/b/sql (MySQL, MariaDB 관련)
[데이터 통신] - XML 제외한 나머지는 모두 JS 일종임. (위 언어 먼저 학습 후, 학습 권장)
jQuery
JS와 동일한 기능을 쉽게 구현 가능하도록 만든 JS 라이브러리.
※ Library (라이브러리) : 유용한 코드 모아놓은 함수 모음 파일.
https://homzzang.com/b/jquery
AJAX
전체페이지 새로고침 안 하고도, 특정 내용을 새로고침하거나 특정 페이지를 불러오게 하는 JS 언어
https://homzzang.com/b/js?sca=AJAX
https://homzzang.com/b/jquery?sca=AJAX https://homzzang.com/b/php?sca=ajax
JSON
이름:값 형식으로 데이터를 주고 받을 수 있는 JS 언어.
https://homzzang.com/b/js?sca=JSON
XML
확장형 HTML 언어로, 사용자가 임의로 태그를 생성해 서버간 자유롭게 데이터 전달. (예: RSS)
https://homzzang.com/b/xml (준비 중)
[폴더/파일 퍼미션]
Shell Script
셸이나 명령줄 인터프리터에서 사용하는 스크립트.
※ 위 언어들은 상호 유기적으로 결합해 작동하므로 되도록이면 모두 학습 권장.
단계2 - 레이아웃 구조 파악
(예)
https://homzzang.com/b/g5?sca=layout
단계3 - 파일위치 구조 파악
URL 주소에 찍힌 경로의 파일 열어, 이 파일이 어떤 부분과 연동되는지 분석 !
(예)
https://homzzang.com/b/g5?sca=file
G5 스킨
https://homzzang.com/b/g5?sca=skin
단계4 - 파일간 유기적 연동관계 파악
(예)
G5 시스템
https://homzzang.com/b/g5?sca=system
단계5 - DB 테이블 및 필드 구성 파악
(예)
https://homzzang.com/b/g5?sca=table
단계6 - 상수, 변수, 함수 파악
변수가 어떤 파일에서 사용 가능한지?
G5 코드사전
https://homzzang.com/b/code
단계7 - 스킨 분석/제작
단계8 - 그외 유용한 학습 팁
웹디자인, 웹퍼블리싱 용어 영어로 익히기, 검색하기
관심있는 빌더 제작자 님의 질문답변 내용 자주 보기
질게에 올라온 초심자들 질문에 답변달기 (암기 강화)
전문 분야 선택 시 고려사항
공부하고 싶은 것
공부해야 하는 것
재미를 느끼는 것
수익성 : JavaScript, php, 프로그래밍 (C 계열, Java)
발전성 : 서버/프로그래밍 (Python)
PS.
아래는 참고 삼아 읽어보세요.
프로그래밍 가이드
※ 개발 환경
[개발 환경 궁합]
Linux (OS) + Apache/nginX + PHP + MySQL :개인/소호 Windwos (OS) + IIS + ASP + MSSQL
JVM (Java가상머신) + WAS + JSP + Oracle : 기업/관공서 NodeJS + Express + Angular + MongoDB
[Java 개발 시 배워야 하는 것들]
※ 준비 환경
JYM + WAS + DBMS (※ ORM)
※ 개발도구
Java Web API
= (JDK + Servlet + JSP(※ Tiles) + JDBC )
= Spring
※ 추가로 배워두면 좋은 것들.
Linux + Maven + Git
https://youtu.be/md1-g-n-pag
개발자 영역 선택
[영역 기준]
임베디드 시스템 (Embedded system) : 기기 제어.
엔터프라이즈 시스템 (Enterprise System) - 조직 내부.
게임 (Game) :
응용프로그램 (Application) :
모바일 앱 (Mobile App) :
웹 프런트 (Web Front) :
웹 백엔드 (Web Backend) :
[스킬 기준]
엔지니어 (Engineer) : 기존 솔루션이 특정 환경에서 잘 작동케 조율/예측/검증 개발자 (Developer) : 현실의 문제를 컴퓨터로 해결 가능한 논리 (= 솔루션 프로그램)개발. 프로그매머 (Programmer) : 프로그램의 (입력/연산/출력)을 잘 작동케 하는 사람.
SK 님 (180720) https://youtu.be/YzBITR1upGA
※ 각 용어로 구글링 해보세요.
※ 유명 웹사이트 제작괸 사용된 언어 보기.
※ 프로그래밍 언어 발전 과정 검색 후 공부. (연관 언어 파악)
관심분야별 학습할 코딩언어
[웹 뒷단(Back-end)/서버쪽(Server-side) 프로그래머]
Python (대표 : Django) - (쉬운 편) ★ , Ruby (대표 : Rails) - 첫 입문자에게 추천. (∵ 쉬운 편) , PHP (대표 : Laravel, WordPress, Gnuboard/Youngcart), Java (대표 : Spring) ★ , .Net + SQL (대표: MySQL , MariaDB, Oracle, MsSQL ) DB 지식
cf.
Restful API (언어는 아니지만, Python과 결합해 강력한 기능 수행)node.js
[웹 앞단(Front-end)/클라이언트쪽(Client-side) 프로그래머]
HTML, CSS, JAVASCRIPT 디자인감각
[앱/모바일 프로그래머]
[3D 프로그래머 / 게임 프로그래머]
C , C++ ,C# ,OpenGL, 애니메이션 + 예술적 감각
[고급 프로그래머 (High-Performance Programmer)]
PS1. 코딩언어 인기순위 ★★★
http://pypl.github.io/PYPL.html
https://www.tiobe.com/tiobe-index/
https://insights.stackoverflow.com/survey/2019#most-popular-technologies
https://insights.stackoverflow.com/survey/2020#most-popular-technologies
PS2. 코딩언어 시작결정
https://brunch.co.kr/@yhkang0513/3
http://www.bloter.net/archives/196684
http://devcodehack.com/which-programming-language-should-you-learn-to-make-money/
C , C++ , C# 비교
※ 셋은 다 C가 들어갈 뿐, 좀 많이 다름.
C (1971. ★ 가장 근본적이며 돈이 되는 언어)
가장 원시적, 작은 메모리에 최적. 개발자 작업량 大
※ 프로그램 성능에 초점.
※ 절차적 프로그래밍 언어.
※ 기계엔 Good, 개발자에겐 Bad.
※ Objective-C (1983) → Swift (2014) 순으로 탄생에 영향 줌.
C++ (1983. ★ 셋 중 가장 먼저 시작 권장 언어.)
※ (절차적 중심 + 객체 가미) 프로그래밍 언어.
※ C에서 좀 진보. class 사용 가능. 개발자 작업량 中
※ Java (1995), C# (2002.2), Go 언어 (2009)에 각각 영향 줌.
C# (2002.2)
MS에서 개발. 가장 인간 친화적 언어. 개발자 작업량 小
※ 개발자의 생산성에 초점.
※ 객체지향 프로그래밍 언어.
※ 기계엔 Bad, 개발자에겐 Good.
※ C++ (1983)과 Java (1995.5)의 영향을 많이 받음.
※ Swift (2014) 탄생에 영향 줌.
https://youtu.be/2mbyspvNltg (SK 님)
https://youtu.be/zGrTT4k1-yc (노마드 코더 님)
C , JAVA , Python , JavaScript, Ruby 소개
https://youtu.be/Wbjc8qAqHaI
프로그램 언어별 동작 원리 설명
https://youtu.be/2cgUySLtfFE
C , C++ , GO JAVA , C# , Python , JavaScript
코딩 언어 체계 (공부 순서)
https://youtu.be/ORI4-EXhgC4 (워니 님)
https://youtu.be/TTLHd3IyErM (엘리 님 ★ - 웹개발 공부 순서)
코딩 언어 연습장
HTML・CSS・ JS・JQEURY 연습장 ★https://codepen.io/pen/
그외 유사 사이트 모음
PHP 연습장
https://sandbox.onlinephpfunctions.com/
http://phptester.net/
레플 - 거의 모든 언어 연습장 ★
https://repl.it/ (사용법 )
에디터 다운로드https://homzzang.com/b/free-1572
IDE (통합개발환경) 소개
※ IDE (Integrated Development Environment, 통합 개발 환경)
[유틸]
JAVA : Eclipse
Android : Android Studio
[사이트]
구름IDE : https://ide.goorm.io/
프로그래밍 협업 추천
[페어 프로그래밍 (Pair Programming)]
(A는 설계, B는 코딩) 식으로 서로 역할 바꿔가며 진행.
※ 위계 질서 생겨, 어느 한쪽 위주로 진행 가능성 큼.
[코드 리뷰 (Code Review)] ★
(A는 설계와 코딩, B는 코드 평가) 식을 서로 역할 바꿔가며 진행.
※ 혼자서 해야 할 경우, 약 2주 정도의 시간 지난 후 리뷰 권장.
[해커톤(Hackathon)]
다양한 분야의 전문가 A, B가 모여 정히진 시간에 결과물 도출.
※ 단점: 서로의 사고를 나눌 기회 부족.
SK 님 https://youtu.be/7Ylz7sbR74w
PS.
최종 수정 : 2022.07.18 (월)
