안녕하세요!
이번 글은 Front End 개발자가 되기 위해서 어떠한 순서로 공부를 해야 되는지 알아보려고 합니다!
아래에 나와있는 사진은 https://roadmap.sh/frontend 에서 제공해주는 로드맵입니다.
물론 아래에 나와있는 내용을 전부다 공부를 하고 마스터를 해야 프론트 엔드 개발자가 될 수 있다!는 아닙니다.
다만 이러한 흐름을 알고 아래와 같은 순서로 공부를 한다면 더욱 원활하게 공부가 되고, 서로 다른 언어들의 상관관계를 쉽게 파악할 수 있을 겁니다.
1. Internet
- 프론트 엔드 개발자는 결국 웹 환경에서 개발하는 개발자이므로, Internet이 어떠한 환경이고 어떤 식으로 HTML, CSS, Js 파일들을 실행시키고, 어떠한 순서를 갖고 등의 배경지식을 알아야 합니다.
2. HTML, CSS, JS
- 웹 개발이 건물을 짓는 것과 같다고 비유를 하자면, HTML은 건물의 뼈대라고 할 수 있습니다. 즉 틀이 되면서 밑바탕이 되는 존재입니다.
- CSS는 잘 지어진 뼈대에 어떠한 벽돌, 어떠한 디자인을 넣으면 더 이쁘고 실용성이 좋을지 결정해주는 존재입니다.
- JS는 엘리베이터, 수도, 전기와 같은 건물에 필요한 기능해주는 존재라고 할 수 있습니다.
3. GitHub
- 깃허브는 개발자라면 누구나 알고 있는 버전 관리 툴입니다. 너무 유명해서 자세한 설명은 생략하겠습니다 ㅎㅎ;
(그렇다고 깃허브를 모르시면 절대 안 돼요!https://github.com/)
- 깃허브 설치 방법이나 사용법도 따로 글을 작성할 예정입니다! (언제 할지는 저도 잘...)
4. Package Managers
- npm, yarn, pip, maven 등 다양한 종류가 있고, front end에서는 주로 npm과 yarn을 사용합니다.
(npm : https://www.npmjs.com/ , yarn : https://yarnpkg.com/)
- 패키지 매니저란, 패키지를 설치하고 업데이트, 수정, 삭제를 할 수 있게 해
주는 툴입니다.
- 그럼 패키지는? 특정 기능을 수행하는 코드들의 묶음을 말합니다. (예를 들어 날씨를 가져오는 기능이 필요한데, 외부에서 데이터를 가져와서 그걸 가공해서 보여주는 코드를 직접 작성하지 않고, 날씨 패키지를 다운 받아서 사용하면 됩니다! 아주 좋죠 😊 )
5. CSS Architecture(CSS 방법론)
- CSS 방법론이란, CSS 코드를 작성할 때 어떻게 해야 유지 보수하기가 쉽고, 반복되는 코드 없이 활용성을 높일 수 있을지 등을 이야기하는 것을 말합니다. 대표적인 예로는 BEM, OOCSS, SMACSS 등이 있습니다.
- 대표적인 BEM을 간단하게 살펴보면, Block, Element, Modifier의 약자를 가져온 것인데 말 그대로 css 태그를 작성할때 .block_element--modifier의 형식을 갖는 것을 말합니다. (자세한 설명은 https://junwoo45.github.io/2019-08-29-BEM/의 블로그가 간단하고 쉽게 설명을 해 놓으셨습니다.)
6. CSS Pre-processors(CSS 전처리기)
- 프로젝트가 커지면 커질수록 CSS의 소스코드는 말도 안 되게 길어질 수밖에 없는데, 그중 코드가 반복적으로 사용되는 경우도 많고 색상을 하나하나 #00e012 이런 식으로 작성을 하는 경우가 많습니다. 이러한 중복성과 노가다성(?)을 줄여주기 위해서 CSS를 일반 프로그래밍 언어처럼 변수, 함수 등의 개념으로 풀어가는 것을 CSS 전처리기라고 합니다.
- 종류 : SASS, postCSS, Less, Styluse 등이 있고, 작동원리는 비슷하지만 각각 다른 Syntax를 가지고 있어 각자에 맞는 Compiler를 사용해줘야 합니다.
-- 사용 전
.Header {
width: 100%
}
.Header .H-child-1 {
background: black
}
.Header .H-child-2 {
background: yellow
}
-- 사용 후
.Header
width: 100%
.H-child-1
background: black
.H-child-2
background: yellow
7. Build Tools
- Tack Runner : npm script, gulp가 있는데, 태스크 러너는 빌드하는 과정에서 반복 작업들을 스크립트로 작성해서 실행 해주는 것을 말합니다.
세수를 한다.
1. 물을 튼다
2. 물로 얼굴을 씻는다
3. 폼클랜징으로 얼굴을 닦는다
4. 물로 얼굴을 씻는다
5. 물을 끈다
6. 수건으로 얼굴을 닦는다
'script' : {
"세수" : "물을튼다 && 물로 얼굴을 씻는다 && 폼클랜징으로 얼굴을 닦는다 && 물로 얼굴을 씻는다
&& 물을 끈다 && 수건으로 얼굴을 닦는다"
}이런 식으로 세수하는 과정을 "세수"만 실행함으로써 전 과정을 실행시킬 수 있는 것입니다.
- Module bundler : 모듈 번들러란 웹 애플리케이션을 구성하는(HTML, CSS, JS 등)을 각각의 모듈로 보고 이를 하나의 결과물로 묶는 도구를 말합니다. 그중 대표적인 예로는 Webpack이 있습니다. 모듈 번들러를 쓰는 이유는 큰 프로젝트를 기능별로 쪼게서 모듈로 만들고 그것을 묶기 위함입니다.
8. Framework
- 프런트 엔드 프레임워크로는 React, Vue, Angulor로 크게 3가지로 나뉩니다. 일단 프레임워크란 건물이라고 생각하면 이해하기 쉽습니다. 학교라는 건물에서는 수업이라는 것을 하는데 어떠한 수업을 할지는 수업하는 사람 마음입니다. 회사라는 건물에서는 일을 하는데 어떠한 일을 할지는 일 할 사람 마음입니다. 즉 프레임워크는 수업이나 일을 할 수 있도록 환경을 제공해주는 건물과 같은 존재입니다.
- 프레임워크를 쓰는 이유는 프로젝트가 커지면 당연히 개발하는 사람도 여러 명일 것입니다. 하지만 사람들은 각자 개성이 있고, 코딩하는 스타일도 다를 것입니다. 각자 다른 스타일로 코딩을 해서 프로젝트에 덕지덕지 붙인다면 A란 사람이 B라는 사람이 코딩한 소스를 이해도 못할뿐더러 추가 유지보수가 어려워질 것입니다. 이러한 문제점을 보완하고자 정형화된 환경을 제공하고 그 틀 안에서 개발을 하게 하기 위함입니다.
- React, Vue, Angulor와 같은 프레임워크를 쓰는 이유는 위 이유에 추가 더 있습니다. 프레임워크에서 데이터를 변경했을 경우 화면이 바로 갱신이 되고, 컴포넌트 단위 개발을 하기 편리합니다. (이 내용은 차후에 공부를 하다 보면 무슨 의미 인지 알 수 있다. 지금 단계에서는 이런 이유도 있구나~ 정도로.. ㅎㅎㅎ)
9. 그 이후에 CSS Framework도 있고, 여러 가지 기술들이 있지만 이번 글에서는 저의 실력으로는 Framwork까지만 설명하는 게 맞다고 생각하여 멈추겠습니다.. ㅋㅋㅋㅋㅋ
'Front-End' 카테고리의 다른 글
| 개발 관련 글을 작성하기 전에 말씀드리고 싶은 말. (4) | 2021.10.20 |
|---|