목차
- 코딩/프로그래밍 의미
- 코딩 독학 시 명심 사항
- (그누보드/영카트) 구성 언어 ★
- 단계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 (Cascading Style Sheets)
홈페이지 모양 (= 디자인 + 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
② HTML5 APIs, Vue.js, React.js, Angular, jQuery
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★
홈페이지 데이터베이스 (DATABASE : 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
셸이나 명령줄 인터프리터에서 사용하는 스크립트.
그누보드에선 퍼미션 설정할 때 사용. (예: /perms.sh)
※ 위 언어들은 상호 유기적으로 결합해 작동하므로 되도록이면 모두 학습 권장.
단계2 - 레이아웃 구조 파악
홈페이지 주요 레이아웃이 head. index. tail 등 어떤 파일들에 각각 들어있는지 확인
(예)
G5 레이아웃
https://homzzang.com/b/g5?sca=layout
단계3 - 파일위치 구조 파악
빌더 구성 파일들이 각각 어떤 역할 하는지 파악. (디렉토리 구조 및 파일 이해)
URL 주소에 찍힌 경로의 파일 열어, 이 파일이 어떤 부분과 연동되는지 분석 !
(예)
G5 파일
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 테이블 및 필드 구성 파악
테이블이 어떻게 만들어지는지,
테이블과 필드 구성이 어떻게 되어 있는지 확인
(예)
G5 DB테이블
https://homzzang.com/b/g5?sca=table
단계6 - 상수, 변수, 함수 파악
상수, 변수, 함수가 어떤 파일에서 정의되는지?
변수가 어떤 파일에서 사용 가능한지?
함수를 사용하기 위해 어떻게 해야 하는지 파악.
상수, 변수, 함수를 빨리 찾아쓸 수 있도록 DB 구축.
(예)
G5 코드사전
https://homzzang.com/b/code
단계7 - 스킨 분석/제작
1 ~ 6 이해가 어느 정도 되었으면,
아이템을 정해 줄기차게 소스 분석 및 직접 만들어 볼 것 !!
단계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 (이것도 인기 있음. 채팅 등 실시간 처리에 탁월한 서버 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
vs.
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
Python : Python Shell (무료). cf. PyCharm (유료 - 전문가용)
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 (월)
