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

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

49,341  
목차
  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 (월)



분류 제목 조회
sports 축구 U23 대한민국, 승부차기 끝에 호주 제압하고 WAFF (서아시아 잼피언십) 우승
19
19
sports 축구 월드컵 2차 예선 태국 원정 0:3으로 이기긴 했지만...
27
27
sports 김은선 프로 님이 알려주는 올바른 골프 스윙 자세
35
35
sports 토트넘, 플럼에 3:0 개쳐발림. ㅡㅡ;
62
62
sports 토트넘 손흥민, 아스톤빌라 상대로 리그 14호골
67
67
sports 손흥민을 지도한 역대 토트넘 감독들
74
74
sports 토트넘 손흥민, 크리스탈 팰리스 상대로 13호골 팀 승리 쐐기골
89
89
sports 차기 한국 축구 국가대표팀 감독은 누가 돼야 하나? 끝장 투표 설문 중
109
109
sports 토트넘, 울버햄튼에 져서 5위로 추락
143
143
sports 이강인의 손흥민 향한 하극상에 재조명 받는 벤투 감독
180
180
sports 토트넘, 손흥민 극적 어시스트로 브라이튼 잡고 4위로 도약
191
191
sports 2023 아시안컵 4강 이란 vs 카타르 하이라이트
97
97
sports 2023 아시안컵 4강 요르단 vs 대한민국 하이라이트
104
104
sports 프로 골퍼 김은선 님 멋진 경치 골프 필드샷
64
64
sports 카타르, 승부차기로 우즈베키스탄 제압하고 2023 아시안컵 4강 진출
58
58
sports 토트넘, 경기 막판 에버튼에 통한의 동점골 허용
121
121
sports 일본, 이란에 역전패 당해 2023 아시안컵 4강 실패
67
67
sports 대한민국 축구, 심장에 너무 치명적이네요.
79
79
sports 대한민국 2023 아시안컵 4강 상대는 요르단
70
70
sports 토트넘이 브렌트퍼드 제압하고 4위로 올라갔네요.
118
118
1/15
목록
찾아주셔서 감사합니다. Since 2012