• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

49,348  
목차
  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, FastAPI
  • Ruby : Rails

 

 

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

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

 HTML
 CSS
 JavaScript
 jQuery
 BootStrap

 apache
 또는,
 nginX
 G5.X 이하 - PHP
 G6.X 이상 - Python + FastAPI + Jinja
 MySQL
 또는,
 MariaDB
 입력/출력  요청접수
 결과반환.
 웹서버와 DB 중계
 연산
 데이터 저장

PS1. 그누보드6 구성 언어 자세히 보기 

PS2. 그누보드에 사용되는 건 아니지만, 각 부위에 상응하는 그외 용어/언어.
   IIS  JSP
 Python
 Java
 ...
 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 (워니 님)

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 (월)



분류 제목 조회
news 나리야빌더 BS5 버전 Marigold (마리골드/매리골드/메리골드) 테마 출시
73
73
news 구글 '제3자 쿠키' 퇴출, 광고판 지각변동
142
142
news 그누보드6 드디어 나왔네요.
153
153
news 카카오 인코더 (Cacao Encoder)에 내장된 파인드 매치팝 (Find matchpop) 악성 광고프로…
232
232
news 오래된 그누보드에 광고 악성코드 심는 해킹주의
679
679
news 구글 AI 검색봇 바드(Bard) 오픈 공개
453
453
news 영카트5 KG이니시스 결제 사용자 필독
320
320
news 이글루스 블로그 서비스 종료일 (2023.06.16)
368
368
news 크롬 브라우저에서 클린업(CleanUp:악성코드검사 기능) 제거됨
1,001
1,001
news LG유플러스 유선 인터넷 접속 장애 있었나봐요.
460
460
news 중국 해커 조직 대한민국 공공기관 홈페이지 해킹 공격 전쟁 선포
645
645
news 그누보드4 cheditor (체에디터) 해킹 피해 예방 조치 (= 보안공지)
947
947
news (다음/카카오) 데이터센터에 화재 발생해 장애 발생
388
388
news 충격!! 「독도.com」도메인 일본 외무성으로 연결
794
794
news 그누보드(영카트) 5.5.1 정식 버전 출시
818
818
news 엠봉 (http://bhu.co.kr/) 사이트 폐쇄 (2022.02.18)
1,251
1,251
news 그누보드(영카트) 5.5.0-beta (이니시스 통합인증) 버전 출시
758
758
news 그누보드5/영카트5 통합. (즉, 그누보드5 === 영카트5)
910
910
news 나리야 영카트 버전은 BS5 적용
1,056
1,056
news 호스팅이즈 (hostingis.com) 호스팅 - 2022년 06월 서비스 중지.
1,378
1,378
1/2
목록
찾아주셔서 감사합니다. Since 2012