웹개발 스터디 : 1화 - 개발환경 만들기
유료강의를 직접 구매해서 진행하는 웹개발 스터디이야기
시작하는 글
과연 우리는 HTML과 CSS에 대해서 얼마나 잘 알고 있을까? UI 디자이너가 더이상 디자인만 해야하는 상황을 넘어서게되면서. HTML과 CSS, 자바스크립트로의 실력이 점차 당연해지는 시대가 오고있다. 그런 면에서 스스로가 갖고있는 기초지식들을 다잡고, 신규 기술을 배워나가는 과정이 매우 중요해졌다.그래서 필자 역시도 기존에 공부해왔던 내용들을 정리하는 한편. - 해외 강의자료들 중. 정말 잘 정리된 강의를 구매해 - 해당 내용을 다시 게시글로 정리하기 시작했다.
https://www.udemy.com/the-complete-web-development-bootcamp/
이 게시글에서는 해당 강좌를 기반으로 영어로된 내용을 한글로 번역하여 정리해보았다. 또한 핵심적인 내용이라면, 해당 내용에서 포함하지않는 부분도 추가로 작성해 놓았으니. 원본 강의가 궁금한 분이라면, 해당 강의를 구매해서 들어보기를 권한다.
강의에 사용되는 기본자료 모음집
친절하게도, 강의를 시작하기 앞서서 강좌에서 필요한 자료링크들을 따로 정리해준다. 담겨있는 정보들이 엄청 고급 정보가 있다기보다는, 구글링해서 검색하는 시간을 아끼기 위한 정리본으로 보인다. 해당 페이지는 강좌 구매자만 확인할 수 있지만, 그리 중요한 정보가 아니므로, 필자가 따로 구글 문서에 따로 정리를 해두었다. 영어라서 좀 압박일순 있지만, 굳이 안읽어도 이 강의기록은 충분히 이해할 수 있으니. 굳이 읽고싶은 사람만 보는거로 해두자.
프론트엔드 웹개발
웹개발을 위한 환경구성 (Setup for Development )
기본적으로 구글 크롬 브라우저를 사용하고, Atom 텍스트 에디터를 사용한다며. 설치를 추천한다. 필자의 경우 Intelli J IDEA를 사용하고있으나. 해당 강의에 맞춰서 동일한 프로그램을 사용하기로했다.
ATOM 텍스트 에디터를 사용할 때, 꼭 필요하다고 여겨지는 패키지 (플러그인) 들의 목록을 함께 이야기해준다. 가능하면 전부깔아주자.(일부는 버전별 차이 때문에 제대로 동작하지 않는 경우도 있으니 주의)
Atom 에디터 패키지 설치하기
Atom 에디터를 설치후 실행하면 다음과같은 화면이 나온다. 여기서 '패키지 설치하기'를 눌러주면 된다.
인스톨러를 열어보면 검색기가 나온다. 여기에 다음 목록을 검색해서 하나씩 설치해주자.
1. 강의 진행을 위한 필수 플러그인 목록
atom-beautify
atom-ternjs
autoclose-html
emmet
linter*
linter-jshint
linter-csslint
linter-eslint
pigments
2. 선택 사항.
atom-html-preview
language-ejs
Sublime-Style-Column-Selection
설치하다보면 요런 화면들이 나오는데 - 해당 패키지를 사용하기 위해서는 '연관된 기능들을 설치해야한다'는 이야기다. 가능하면 모두 YES를 눌러 설치해주자.
프론트엔드 웹개발
인터넷은 어떤 원리로 동작할까? (How Does the Internet Actually Work?)
인터넷에 대한 간단한 이론적인 설명. 인터넷은 결국 거대한 하나의 선으로 연결된 컴퓨터 / 서버들일 뿐이라는것.
인터넷 연결을 위해서는 크게 3단계가 필요하다.
1. 사용자가 도달하고자하는 목적지의 '이름'을 DNS 서버에 전달하기
2. 사용자가 도달하고자하는 목적지의 'IP 주소'를 전달받기
3. 목적지의 주소에 있는 '서버'로 연결하기
그 과정을 돕기위해 존재하는게
1. 인터넷 서비스 제공자 : KT, SKT, LGT 등등 - 인터넷 서비스를 제공하는 회사들
2. DNS 서버 : 영문 / 한글 주소를 IP 주소로 변환해주는 변환기
3. 우리가 직접 접속하기 위한 단말기 (모바일. PC 기기 등)
4. 접속에 도달하기 위한 최종 목적지의 서버
이 단계를 다시 정리해보면 다음과 같다.
1. 사용자가 "나는 OO 사이트로 가고싶은데. 여기 주소가 어디에요? " 라고 물어보면.
2. 인터넷 서비스 제공자를 통해 DNS 서버로 접속해서. 'OO서비스의 IP주소가 어딥니까?' 라고 대신 알아봐준다.
3. 그럼 얘네 IP 주소가 XXX. XXX. XXX. XXX 요 번호다. 라고 사용자의 단말기에 주소를 전달받고
4. 사용자는 최종적으로 자신이 원하는 주소에 있는 서버에 접속해서 웹브라우저 화면을 보게된다.
생각해보면 꽤나 중요한 지점!
위의 내용은 인터넷의 통신방식이라던가. 웹브라우저가 정보를 불러오는 방식에 대한 내용이다. 기본만 배우고싶은 사람이라면 빠르게 넘어가고싶은 사람이라면, 상관하지 않아도 되는 부분이긴 하다.이 단계가 중요한 이유는 나중에 배우게될 GA (구글 애널리틱스)라던가, GTM (구글 태그마스터) 등과 연관이 있다.
GA나 GTM과같은 서비스들은 사용자와 서버의 통신 과정의 중간에 데이터를 입력해, 원하는 내용을 뽑아오게된다. 그러니 이런 내용을 이해하려면. 웹브라우저의 동작방식과, 유저 에이전트에 대한 이해가 필요하기 때문이다.
프론트엔드 웹개발
웹사이트는 어떤 원리로 동작할까? (How Do Websites Actually Work?)
HTML과 CSS, 그리고 Java Script가 왜 필요하고. 어떤 식으로 동작하는지에대한 이야기
1. HTML은 웹사이트의 구조를 다루기위한 언어이고. 한번 만들어지면 내용이 변하기가 어렵다.
2. CSS는 만들어진 구조 내에서 인테리어를 하는 것과 마찬가지로, 색상이나 비례, 스타일 등을 다룬다.
3. Java Script는 만들어진 건물 내에서 전기나, 수도처럼, 기능에 관련된 내용을 갖고있고. 정보 전달이나 입력, HTML 구조변형을 위해서도 사용된다.
구글 크롬 브라우저의 개발자도구를 사용하는 경우, 웹사이트의 내용을 맘대로 변경할 수 있다. 그 이유는 우리가 보게되는 '사이트의 내용'이 사실 실시간으로 주고받는 데이터가 아니라. 이미 서버에서 받아놓은 데이터이기 때문이다.
HTML로 되어있는 내용을 - 개발자도구를 통해서 '임의로 수정'하는 경우. 해당 데이터는 실제 사이트의 서버 내용에는 영향을 주지 않는다. 말 그대로 받아온 데이터를 사용자의 기기 환경에서만 임시로 변형해보는 방식이기 때문이다. 그래서 새로고침을 눌러보면 결국 원본 서버의 내용대로 결과가 다시 변하게된다.
이 과정을 통해서, 우리는 웹사이트라는게 실시간으로 데이터를 주고받는게 아니라. '웹사이트를 그려내기위한 정보를, 서버에서 받아오는 과정'과 '서버에서 받아온 정보를 렌더링 엔진으로 그려내는 과정' 으로 이뤄져있다는걸 추측할 수 있다.
강의에선 나오지 않는 웹 브라우저에 대한 기본상식
1. 웹브라우저는 기본적으로 웹 IP 주소를 받아서 원하는 서버에 접속하기 위한 도구다.
2. 웹브라우저는 HTML과 CSS, Java Script를 읽어서 최종적인 웹사이트의 결과값을 '렌더링'해준다.
3. 웹브라우저는 각각 웹엔진을 갖고있고, 이 기능 중에 그림을 그려주는것은 '렌더링 엔진(Rendering Engine)'이라 불린다.
4. 웹브라우저마다 다른 렌더링 방식을 갖고있다. 그래서 동일한 웹사이트라도 여러 브라우저마다 조금씩 다른 결과물이 보이게된다.
5. 세상에는 많은 브라우저들이 서로 경쟁을 하고있고. 그중 최소 4개 이상의 브라우저가 주요하게 쓰이고있다.
6. 웹디자이너는 대부분의 브라우저에서 접속했을 때, 가능하면 문제가없는 수준에서 웹사이트를 보여주기 위해 노력해야한다. 이것을 크로스 브라우징 (Cross Browsing) 이라고 한다
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
