1) 학습한 내용
Bootstrap
프론트엔드 오픈 소스 툴킷으로 Sass 변수와 믹스인, 반응형 그리드 시스템, 광범위한 사전 제작된 컴포넌트, 그리고 강력한 JavaScript 플러그인이 있는 Bootstrap으로 반응형 모바일 우선 사이트를 디자인하도록 나왔다.
Bootstrap 이용법
- Bootstrap 사이트로 들어간다.
혹은 CDN via jsDelivr 영역에서 코드를 복사한다.
2.다운받은 코드나 복사한 코드를 다음과 같이 붙여넣는다.
부트스트랩의 특징
웹페이지를 쉽게 만들 수 있다.
-
부트스트랩을 다루기 위해서는 HTML과 CSS에 대한 어느 정도의 지식이 필요.
-
웹페이지는 HTML태그로 뼈대가 만들어지며 태그에 CSS선택자를 추가하고, 이 CSS 선택자에 대해 스타일시트에서 속성과 값을 선언해서 레이아웃을 만들게 된다.
반응형웹 -
부트스트랩을 이용하면 쉽게 반응형앱을 만들 수 있다는 장점.
-
레이아웃이 박스처럼 나눠져 있기 때문에 굳이 미디어쿼리를 쓰고 디바이스별로 크기를 나누지 않아도 클래스명만 잘 넣어도 반응형웹을 쉽게 만들 수 있습니다.
모바일 중심이다. -
부트스트랩은 계속 업그레이드 되고 있는데, 3 버전에서는 더욱 모바일 중심으로 프레임워크으로 발전되었다.
많은 자바스크립트 플러그인의 지원 -
정형화된 디자인에서 탈피했다.
부트스트랩에 대한 간단한 강좌 영상
ps. 프론트엔드, 백엔드에 관한 것
프론트 엔드란?
사용자가 웹 사이트 또는 웹 애플리케이션의 URL을 입력하거나 모바일 애플리케이션을 다운로드할 때, 사용자들은 아주 깔끔한 레이아웃을 가진 인터페이스를 보게 된다. 이렇게 사용자가 마주보는 인터페이스를 테크롤로지 분야에서 ‘프론트엔드’라고 부른다.
프론트엔드는 사용하기 쉽고 완전한 기능을 갖춘 인터페이스를 갖추었을 때에만 사용자들의 참여를 이끌어내기 때문에, 아주 중요한 요소라고 할 수 있는데, 서비스의 경쟁력을 유지하기 위해서는, 매끄럽게 동작하는 강력한 프론트엔드를 구축하는 것이 매우 중요하다.
프론트엔드 개발에서 사용하는 언어
HTML
HTML은 하이퍼텍스트와 마크업 언어로 구성되어 있다. 하이퍼텍스트는 페이지들 사이의 링크를 정의해 줍니다. 반면에 마크업 언어는 웹페이지의 구조를 정의하는데 사용된다.
CSS
CSS는 종속 스타일 시트(Cascading Style Sheets)의 약자로, CSS는 개발자가 웹페이지에 다양한 스타일을 적용할 수 있게 해줌으로써 애플리케이션 페이지를 표시하는 프로세스를 단순하게 만들어주는 디자인 언어다. CSS는 HTML보다 독립적으로 작동해서 각 웹페이지들을 보완해 준다.
Javascript
자바스크립트는 어마어마할 정도로 인기가 많은 언어로써, 사용자들을 위해 상호작용하는 애플리케이션을 만들 수 있도록 도와준다. 또한, 웹사이트의 기능성을 향상시키는데 사용되며, 웹 기반의 소프트웨어 또는 게임들을 실행할 수 있게 한다.
프론트엔드 개발에서 사용되는 기술
AngularJS
앵귤러JS는 오픈소스 자바스크립트 프레임워크로써, 주로 싱글 페이지 웹 애플리케이션(SPA)을 만드는 데 사용된다. 앵귤러JS는 계속해서 발전하고 있으며, 개발자가 웹 애플리케이션을 더욱 잘 만들 수 있게 해주는 프론트엔드 개발 테크놀로지들 중 하나다. 앵귤러 JS는 정적(static) HTML을 동적(dynamic) HTML로 변환해주는 기능이 있다. 또한 오픈소스 테크놀로지이기 때문에, 누구나 자유롭게 사용할 수 있고, 변경할 수도 있다.
ReactJS
리액트는 프론트엔드 개발에서 사용할 수 있는 유연하고 효과적인 선언형(declarative)의 자바스크립트 라이브러리다. 뛰어난 사용자 인터페이스를 만드는 데 도움이 되죠. 리액트는 컴포넌트 기반의 오픈소스 라이브러리이며, 애플리케이션의 반응형 뷰 레이어(view layer)다. 이 기술은 페이스북이 개발해서 유지관리를 해오고 있다.
Bootstrap
부트스트랩은 반응형 웹 애플리케이션 및 웹사이트를 개발하기 위해 사용되는 오픈소스 무료 도구다. 부트스트랩은 가장 인기 있는 자바스크립트, CSS, HTML 프레임워크이며, 모바일 우선의 반응형 웹사이트를 구축할 수 있게 해준다.
백엔드
용어 자체에서 알 수 있듯이, 백엔드는 웹사이트나 웹 애플리케이션 또는 모바일 솔루션의 프로세스와 관련된 서버측(server-side)과 데이터베이스를 관리해주는 테크놀로지다. 프론트엔드가 눈에 직접적으로 보여지는 영역이였다면, 백엔드는 눈에 보이지 않는 서버에서 작용하는 기술을 다룹니다.
백엔드 개발이란?
백엔드는 소프트웨어 개발 프로세스에서 서버 측 개발 분야다. 백엔드에서는 데이터를 저장하고 관리하며, 웹사이트의 클라이언트 측(client-side)에서 모든 것이 매끄럽게 작동할 수 있게 해준다.
백엔드는 사용자들이 직접 보거나 상호작용할 수는 없지만, 소프트웨어 개발의 일부분인 것은 맞다. 백엔드에서는 프론트엔드에 있는 사용자들이 취하는 행동들을 처리한다. 즉, 사용자들은 백엔드에 간접적으로 액세스하는 것이죠. 백엔드 개발에는 사용자 인터페이스가 없는 시스템 컴포넌트 작업, API작성, 라이브러리 생성, 데이터베이스 통합 등 다양한 활동들이 포함되어 있다.
백엔드 개발에서 사용되는 언어들
PHP
특별히 웹 애플리케이션 개발을 위해서 고안된 서버 측 스크립트 언어다. PHP는 서버 측에서 실행되기 때문에, 특히 서버 측 언어로서 많은 인기를 얻고 있다.
Node.js
: 노드는 크로스 플랫폼의 오픈소스 런타임(run time) 환경으로써, 브라우저의 외부에서 자바스크립트 코드를 실행할 수 있게 해준다. 노드는 프로그래밍 언어도 아니고, 프레임워크도 아니다. 노드는 모바일이나 웹 어플리케이션용 API와 같은 백엔드 서비스 개발을 위해서 사용된다. 이미 페이팔, 우버, 월마트, 넷플릭스 등 포춘지 선정 500대 기업에서 많이들 사용하고 있다.
Javascript
앞서 프론트엔드 때 소개해드렸던 자바스크립트는, 프론트엔드 백엔드 모두에서 사용할 수 있는 프로그래밍 언어다.
C++
C++은 가장 널리 사용되는 프로그래밍 언어로 백엔드 언어로도 쓰일 수 있다.
Java
자바는 가장 인기 있는 프로그래밍 언어들 중 하나이며, 개발자 커뮤니티에서 널리 사용되고 있으며 자바의 컴포넌트는 쉽게 사용할 수 있기 때문에 확장성이 아주 뛰어난 플랫폼이라고 말할 수 있다.
Python
파이썬은 개발자들이 시스템을 효율적으로 통합하고, 빠르게 작업할 수 있게 해주는 최고의 프로그래밍 언어다.
백엔드에서 사용되는 기술
Express
익스프레스는 웹 애플리케이션 구축에 사용되는 노드(Node.js)용 무료 오픈소스 프레임워크다. 익스프레스는 MIT의 라이선스에 의해 공개되고 있으며, API를 만들고 웹 애플리케이션을 구축할 수 있게 해준다.
Laravel
라라벨은 무료이며, 오픈소스인 PHP 웹 프레임워크다. 캐싱(caching), 라우팅(routing), 인증(authentication), 세션(session)과 같은 대부분의 웹 개발에서 사용되는 공통 작업들을 심플하게 만들어준다. 또한, 어플의 기능에 영향을 주지 않으면서 프로그래머에게 개발 프로세스를 간단하게 해준다.
C#
C#은 유연하면서도 강력한 프로그래밍 언어다. 다양한 종류의 애플리케이션을 만드는 데 사용될 수 있는데, 이 기술은 개발 도구, 웹사이트, 컴파일러와 같은 다양한 프로젝트에 사용되고 있다. C#은 객체지향(object-oriented) 프로그래밍 언어를 만드는 데 도움이 된다.
과제
아래는 부트스트랩 홈페이지에 관한 링크다.
부트스트랩 페이지 소스코드
2) 학습내용 중 어려웠던 점
부츠스트랩은 프레임워크라서 라이브러리와는 달리 주어진 명령어를 통해서 웹페이지를 만드는 도구다. 프레임워크는 정해진 틀 내에서 사용되어지기 때문에 자유롭지 않았다. 게다가, 웹 개발자들의 경우에는 경력이 많을수록 부츠스트랩을 사용하지 않는다는 것으로 알고 있다.
(이것은 내 개인적 생각에 불과하니 양해 바란다.)
3) 해결방법
부츠스트랩은 라이브러리와는 달리 정해져 있는 틀이 있기 때문에 Document 페이지를 통해서 그리고 유튜브에 나온 작성법과 이용법을 숙지한다면 익숙해지는데 시간이 오래 걸리지 않을 것이다. 애초에, 프레임워크도 개발자가 이용하라고 만들어진 도구다. 이는 도구 숙지법을 알아야하는 것과 같다.
4) 학습소감
부츠스트랩 수업은 코드를 따라 작성하려는 것이 아니라 코드를 갖다 붙여서 그걸로 웹페이지를 만들어내는 것이라 숙지법을 알고 있다면 익숙해지는 데 시간이 오래 걸리지 않을 거라고 하지만, 결국에는 어떤 도구든 많이 사용해봐야 익숙해지는 것은 똑같다.
