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

[talk] (웹디자인・웹퍼블리셔・웹개발자) 코딩 공부 방법 7단계 ★

(웹디자인・웹퍼블리셔・웹개발자) 되고 싶은데, 뭐부터 할지 막막하시면 읽어보세요.

포토샵 등 웹디자인 전용 학습 사항은 제외하고, 오로지 코딩 관련 공부 가이드입니다.

 

코딩 독학 시 명심 사항 

 

1. 목표 정하고 공부.  - 만들어 보고 싶은 게 뭔지 고민.

2. 예제 직접 타이핑 해보기. - 절대 눈으로만 공부 금지.

3. 공부 후 바로 뭔가 만들어 보기. - 부족한 게 뭔지 알 수 있음.

4. 매일 꾸준히 코딩 하기. - 코딩 언어도 언어라, 안 하면 금방 까먹음. 

5. 포트폴리오 만들기. - 취업이나 의뢰 받을 때 유용.

6. 기간 정하고 공부. - 취미로만 하면 아주 늘어지기 쉬움. ㅡㅡ;

7. T자 전략으로 공부. - ※ 가로축: 공부 범위. / 세로축: 공부 깊이.

8. 책 사서 공부하는 대신, 해당 언어 공식 홈페이지 이용. - ∵ 변화 빠름.


 

1.

웹언어 기초 학습 (= 그누보드5・영카트5 구성 언어)

[브라우저측 언어] - 일반사용자가 소스보기로 코드 확인 가능.

 

HTML

홈페이지 레이아웃 뼈대 태그 (Layout)
https://homzzang.com/b/html

https://developer.mozilla.org/ko/docs/Web/HTML

 

CSS 

홈페이지 주요 디자인 (CSS : Cascading Style Sheets)

https://homzzang.com/b/css

https://developer.mozilla.org/ko/docs/Web/CSS

JS , JQ 

홈페이지의 역동적인 동작 및 기능  (JS : JavaScript , JQ : jQuery)

https://homzzang.com/b/js
https://homzzang.com/b/jquery

BS

HTML CSS JS JQ 기반한 반응형 홈페이지 프레임워크 (= 뼈대 = 골격 = 틀) (BS : BootStrap)

https://homzzang.com/b/bs


[서버측 언어] - 일반사용자가 소스보기로 코드 확인 불가.


PHP

홈페이지 작동에 필요한 서버측 웹언어 (= 웹서버와 DB 중계 역할)

(그누보드, 영카트, 제로보도, 워드프레스, 드루팔, 마젠토 등의 기반 언어)

https://homzzang.com/b/php

SQL

홈페이지 데이터베이스 (DATABASE : DB) 제어 관리

(MySQL, MariaDB 2종류가 그누보드와 호환 됨.)

https://homzzang.com/b/sql

 


[데이터 통신]  - XML 제외한 나머지는 모두 JS 일종임. (위 언어 먼저 학습 후, 학습 권장)

 

jQuery

JS와 동일한 기능을 쉽게 구현 가능하도록 만든 JS 라이브러리 (= 함수 모음 파일) 

 

AJAX

전체페이지 새로고침 안 하고도, 특정 내용을 새로고침하거나 특정 페이지를 불러오게 하는 JS 언어

 

JSON

이름:값 형식으로 데이터를 주고 받을 수 있는 JS 언어.

 

XML

확장형 HTML 언어로, 사용자가 임의로 태그를 생성해 서버간 자유롭게 데이터 전달. (예: RSS)

 


[폴더/파일 퍼미션]

 

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 이해가 어느 정도 되었으면,
아이템을 정해 줄기차게 소스 분석 및 직접 만들어 볼 것 !!

 


 

PS. 그외 팁


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

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

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

 

 

 

코딩 언어 전문 분야 선택 시 고려사항

 

만들고 싶은 것.

공부하고 싶은 것.

공부해야 하는 것.

재미를 느끼는 것.

돈이 될 수 있는 것.

향후 발전 가능한 것.

 

 

 

PS.

아래는 참고 삼아 읽어보세요. 

 

개발자 영역 선택

 

임베디드 / 어플리케이션 / 프런트엔드 / 백엔드 / 엔터프라이즈 / 시스템

 

※ 각 용어로 구글링 해보세요.

 

관심분야별 학습할 코딩언어

뒷단(Back-end)/서버쪽(Server-side) 프로그래머

 

Python (대표 : Django),
Ruby (대표 : Rails) - 첫 입문자에게 추천 ,
PHP (대표 : 워드프레스, 그누보드),
JAVA (대표 : Spring),
.Net + SQL (대표: MySQL, MariaDB ) 데이터베이스에 대한 지식

cf.

Restful api (언어는 아니지만, Python과 결합해 강력한 기능 수행)

node.js (이것도 인기 있음. 채팅 등 실시간 처리에 탁월한 서버 JS)

 


앞단(Front-end)/클라이언트쪽(Client-side) 프로그래머

 

HTML, CSS, JAVASCRIPT + 디자인감각

 


모바일 프로그래머

 

오브젝트C, JAVA(안드로이드). Kotlin(코틀린), 모바일 웹 사이트를 위한 HTML / CSS. + 서버 쪽 지식

 


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

 

C/C++/C#, OpenGL, 애니메이션 + 예술적 감각

 


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

 

C/C++/C#, JAVA , 수학과 양적 연구의 배경 지식

 


코딩언어 인기순위 ★★★

 

https://www.tiobe.com/tiobe-index/

https://insights.stackoverflow.com/survey/2019#most-popular-technologies

https://insights.stackoverflow.com/survey/2020#most-popular-technologies

 


코딩언어 시작결정

 

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

가장 원시적, 작은 메모리에 최적. 개발자 작업량 大

(기계엔 Good, 개발자에겐 Bad)

 

C++

C에서 좀 진보. class 사용 가능. 개발자 작업량 中

 

C#

MS에서 개발. 가장 진보된 C언어. 개발자 작업량 小

(기계엔 Bad, 개발자에겐 Good)

 

 

 

C , JAVA , Python , JavaScript, Ruby 

 

 

프로그램 언어별 동작 원리

 

C , C++ , GO
vs
JAVA , C# , Python , JavaScript

 

 

코딩 언어 전체 체계

 

 

코딩 언어 연습장

 

HTML・CSS・ JS・JQEURY 연습장 ★
https://codepen.io/pen/

그외 유사 사이트 모음


PHP 연습장

http://phptester.net/

 

레플 - 거의 모든 언어 연습장 ★

https://repl.it/ (사용법)

 

에디터 다운로드
https://homzzang.com/b/free-1572

 



이름
비밀번호
자동등록방지

방문자 수

오늘 343
어제 1,588
최대 2,271
전체 864,797
Since 2012