• Q&A
  • 회원가입
  • 로그인

[web] (웹디자인・웹퍼블리셔・웹개발자) 코딩/프로그래밍 공부 방법 7단계 ★

17,745  
목차
  1. 코딩/프로그래밍 의미
  2. 코딩 독학 시 명심 사항
  3. (그누보드/영카트) 구성 언어 ★
  4. 단계1 - 구성 언어 학습
  5. 단계2 - 레이아웃 구조 파악
  6. 단계3 - 파일위치 구조 파악
  7. 단계4 - 파일간 유기적 연동관계 파악
  8. 단계5 - DB 테이블 및 필드 구성 파악
  9. 단계6 - 상수, 변수, 함수 파악
  10. 단계7 - 스킨 분석/제작
  11. 단계8 - 그외 유용한 학습 팁
  12. 전문 분야 선택 시 고려사항
  13. 프로그래밍 가이드
  14. 개발자 영역 선택
  15. 관심분야별 학습할 코딩언어
  16. C , C++ , C# 비교
  17. C , JAVA , Python , JavaScript, Ruby 소개
  18. 프로그램 언어별 동작 원리 설명
  19. 코딩 언어 전체 체계
  20. 코딩 언어 연습장
  21. IDE (통합개발환경) 소개
  22. 프로그래밍 협업 추천

 

코딩/프로그래밍 의미

 

(웹디자인・웹퍼블리셔・웹개발자) 되고 싶은데, 

뭐부터 할지 막막하시면 읽어보세요.

포토샵 같은 순수 웹디자인 전용 학습 사항은 제외하고, 

오로지 (코딩 + 프로그래핑) 관련 공부 가이드입니다.

제 경험, 그외 많은 고수분들의 팁을 모아봤습니다.

 

※ 공부 목적별 시작 권장 코딩 언어.

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

Ruby : Rails

 

 

(그누보드/영카트) 구성 언어 ★

브라우저 서버
 웹서버  서버 처리 언어  데이터베이스

 HTML
 CSS
 JavaScript
 jQuery
 BootStrap

 apache
 또는,
 nginX
 PHP  MySQL
 입력/출력  요청접수
 결과반환.
 웹서버와 DB 중계
 연산
 데이터 저장

 
PS.
그누보드에 사용되는 건 아니지만,
각 부위에 상응하는 그외 용어/언어.
   IIS  JSP
 Python
 Java
 ...
 mariaDB
 mssql
 mogoDB
 ...


단계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 - 그외 유용한 학습 팁


1. 
웹디자인, 웹퍼블리싱 용어 영어로 익히기, 검색하기

2.
관심있는 빌더 제작자 님의 질문답변 내용 자주 보기

3.
질게에 올라온 초심자들 질문에 답변달기 (암기 강화)
 

 

전문 분야 선택 시 고려사항

  1. 공부하고 싶은 것
  2. 공부해야 하는 것
  3. 재미를 느끼는 것
  4. 수익성 : JavaScript, php, 프로그래밍 (C 계열, Java) 
  5. 발전성 : 서버/프로그래밍 (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

디자인감각

 


[앱/모바일 프로그래머]

 

App(앱) 종류 : Native App / Web App / Hybrid App

 

Objective-C (오브젝트C) - iOS 쪽,

Swift (스위트트) - iOS 쪽 (※ 최근, 인기)

 

Java (자바) - Android 쪽

Kotlin (코틀린) -  Android 쪽. (※ 최근, 인기),


모바일 웹 사이트를 위한 HTML / CSS. + 서버 쪽 지식

 


[3D 프로그래머 / 게임 프로그래머]

 

C ,

C++,

C#,

OpenGL,

애니메이션 + 예술적 감각

 


[고급 프로그래머 (High-Performance Programmer)]

 

C,

C++,

C#,

Java,

수학과 양적 연구의 배경 지식

 


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

 

코딩 언어 연습장

 

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.

최종 수정 : 2021.07.16 (금)



찾아주셔서 감사합니다. Since 2012