본문 바로가기

STUDY/Fullstack-Bootcamp

[풀스택 부트캠프] 섹션 1. 웹 기본

1. 강의 소개

1) 우리가 다뤄볼 내용
- 웹 개발 : 프론트엔드 개발(html, css, js), 백엔드 개발
- 앱 개발 : 안드로이드와 아이폰 개발 => hybrid 앱으로 개발할 예정

2) Skills

- HTML : 버튼, 메뉴 등 화면 구현하는 데에 필요한 프로그래밍 언어.
- CSS : 색깔, 크기, 높이, 이미지 배경, 글자 색깔, 글자 크기 등 다양한 속성을 지정해줌. mark-up language.
- JavaScript(JS) : 웹 문서의 동적 효과, 페이지 전환 효과, 애니메이션 효과 등등 UI 효과를 줄 때 사용. 요즘은 확장이 되어서 프로그램을 짤 때 사용되는 언어로서도 사용되고 있다.
- Ruby : 웹 어플리케이션을 만들기 위해서 만들어진 프로그래밍 언어다. Rails 라는 프레임워크를 사용하여 실제로 웹사이트에 우리가 만든 코드들을 구현할 수 있다.
- React Native : App을 개발하기 위한 도구. 


3) 앞으로 사용할 도구
- Cloud 9
- Amazon Web Service
- Chrome
- Terminal (Command)
- Android Studio, Xcode 등등...



2. 웹에 대한 이해

1) WEB의 기원 / WWW
- WWW : World Wide Web
- 우리가 페이지를 펼쳐보게 되면 그것이 바로 웹페이지다.
- 페이지의 링크를 누르면 다른 페이지로 이동할 수 있다. 이렇게 계속 또 다른 페이지로 이동할 수 있는데 이 는 마치 복잡하게 연결된 거미줄 같아서 'Web'이라고 불린다.
- Web site : 웹페이지들이 여러 개가 있는 하나의 장소

2) 앱/웹 서비스의 기본적인 구조
- backend : 사용자에게 어떠한 데이터를 제공하기 이전에 가공하는 단계
- frontend : 눈에 보이는 부분을 개발.
- server : 어떤 페이지를 요청하게되면 알맞는 페이지를 보내주는 컴퓨터.
- client : 사용자의 컴퓨터.
- database : 데이터들을 효율적으로 관리하고 저장하는 곳.
- file server : 파일을 보내주는 서버.
- worker : 지속적으로 사용자들에게 데이터를 제공할 필요가 있을 때 사용.
- client(mobile app) : 모바일이 클라이언트의 역할을 하게 되고, 모바일 단말기가 데스크탑을 대신하게 되고 서버에 접속할 수 있게 되면 그것이 모바일 앱이 된다.

3) 프론트엔드 개발
- HTML : 화면의 구조(레이아웃)을 만들어 준다. 화면의 틀(골격)을 작업한다.
- CSS : 골격에 인테리어 공사를 한다.
- JavaScript : HTML과 CSS가 사용자와 상호작용하도록 해준다. (NodeJS라는 것도 나와서 백엔드 개발까지 가능하다.) 

4) 백엔드 개발
- 우리는 Ruby와 Rails를 이용할 예정
- Ruby라는 언어를 이용해서 웹 어플리케이션을 손쉽개 개발하게 도와주는 도구 Rails(Ruby 전용 도구)를 사용하는 것이다. (다른 언어와 도구 예시 : 'php - laravel', 'python - django') 



3. 모바일 앱 개발에 대한 이해

1) Standalone
- 모바일 앱 개발은 서버로부터 정보를 받아와서 그걸 가공 후 화면에 보여주는 역할을 하기 때문에 일반적으로 클라이언트 개발에 속한다.
- 앱에 보여지는 정보가 어디서부터 오느냐에 따라 나눌 수 있다. 네트워크가 필요없는 앱들을 Standalone 앱이라고 말한다.
- Standalone이 아닌 앱은 Java, Phython, Ruby와 같은 언어를 이용하여 서버 백엔드를 거쳐서 여러 사용자에게 정보가 제공되어야 한다.

2) 모바일 앱 개발
- 개발할 그 앱이 어떤 운영체제에서 실행되는지가 가장 중요하다. ex) Android, iOS
- iOS는 주로 swift라는 언어를 이용하여 앱을 개발한다. swift 전에는 objective-c라는 언어를 이용했었다.
- Android는 주로 JAVA라는 언어를 이용하여 앱을 개발한다. 
- Window phone은 C#이라는 언어를 주로 이용하여 앱을 개발한다.
- 각각 운영체제(OS)에 맞는 언어와 도구를 이용하여 개발해야 한다. 

3) 모바일 하이브리드 앱 개발
- native 앱 : 해당 운영체제에서 앱 개발을 지원하는 언어와 개발도구로 개발하는 방식
- hybrid 앱 : 중간에 통역을 할 수 있는 도구를 하나 더 두어서, 하나의 언어로 서로 다른 운영체제에서의 앱을 개발하는 방식(통역의 도구로 react-native를 이용할 수 있음)
- react-native : 페이스북 회사에서 페이스북 모바일 앱을 통합해서 개발하고 관리하기 위해서 만들어진 개발환경과 그 규칙 그리고 도구들(framework)이다. 하이브리드 앱 개발 프레임워크.