EL2A의 티스토리

My Bookmarks

A browser action with a popup dump of all bookmarks, including search, add, edit and delete.

검색, 추가, 편집 및 삭제를 포함하여 모든 책갈피의 팝업 덤프가있는 브라우저 작업.

Page Redder

Make the current page red

현재 페이지를 빨간색으로 만들기

Print this page

Adds a print button to the browser.

브라우저에 인쇄 버튼을 추가합니다.

A browser action which changes its icon when clicked

Change browser action color when its icon is clicked

아이콘을 클릭하면 브라우저 액션 색상 변경

A browser action with a popup that changes the page color

Change the current page color

현재 페이지 색상 변경

BrowsingData API: Basics

A trivial usage example.

사소한 사용 예.

Sample Extension Commands extension

Press Ctrl+Shift+F (Command+Shift+F on a Mac) to open the browser action popup, press Ctrl+Shift+Y to send an event (Command+Shift+Y on a Mac).

브라우저 동작 팝업을 열려면 Ctrl + Shift + F (Mac에서는 Command + Shift + F)를 누르고 이벤트를 보내려면 Ctrl + Shift + Y를 누릅니다 (Mac에서는 Command + Shift + Y).

Content settings

Shows the content settings for the current site.

현재 사이트의 콘텐츠 설정을 표시합니다.

Context Menus Sample

Shows some of the features of the Context Menus API

컨텍스트 메뉴 API의 몇 가지 기능을 보여줍니다.

Context Menus Sample (with Event Page)

Shows some of the features of the Context Menus API using an event page

이벤트 페이지를 사용하여 컨텍스트 메뉴 API의 일부 기능을 보여줍니다.

Cookie API Test Extension

Testing Cookie API

Cookie API 테스트하기

Live HTTP headers

Displays the live log with the http requests headers

http 요청 헤더가있는 라이브 로그를 표시합니다.

JavaScript pause/resume

Pauses / resumes JavaScript execution

자바 스크립트 실행 일시 중지 / 재개

Desktop Capture Example

Show desktop media picker UI

데스크탑 미디어 선택기 UI 표시

My Devices

A browser action with a popup dump of all devices signed into the same account as the current profile.

현재 프로파일과 동일한 계정으로 서명 된 모든 장치의 팝업 덤프가있는 브라우저 조치.

Broken Links

Extends the Developer Tools, adding an audit category that finds broken links on the inspected page.

개발자 도구를 확장하여 검사 된 페이지에서 끊어진 링크를 찾는 감사 범주를 추가합니다.

FirePHP for Chrome

Extends the Developer Tools, adding support for parsing FirePHP messages from server

개발자 도구를 확장하고 서버에서 FirePHP 메시지를 구문 분석하도록 지원 추가

Chrome Query

Extends the Developer Tools, adding a sidebar that displays the jQuery data associated with the selected DOM element.

개발자 도구를 확장하고 선택한 DOM 요소와 관련된 jQuery 데이터를 표시하는 세로 막대를 추가합니다.

tabCast

Creates a WiFi Display Session from the captured tab media stream using chrome.displaySource API.

chrome.displaySource API를 사용하여 캡처 된 탭 미디어 스트림에서 WiFi 디스플레이 세션을 만듭니다.

Document Scanning API Sample

Download Filename Controller

파일 이름 컨트롤러 다운로드

Download Selected Links

Select links on a page and download them.

페이지에서 링크를 선택하고 다운로드하십시오.

Download Manager Button

Browser Action Download Manager User Interface for Google Chrome

브라우저 액션 Download Manager Chrome 용 사용자 인터페이스

Download and Open Button

Download and Open Context Menu Button

다운로드 및 상황에 맞는 메뉴 버튼 열기

Downloads Overwrite Existing Files

All downloads overwrite existing files instead of adding ' (1)', ' (2)', etc.

모든 다운로드는 '(1)', '(2)'등을 추가하는 대신 기존 파일을 덮어 씁니다.

Event Page Example

Demonstrates usage and features of the event page

이벤트 페이지의 사용법 및 기능을 보여줍니다.

Fake Archive Handler App

Demonstrate File System Provider API usage for apps.

응용 프로그램에 대한 파일 시스템 공급자 API 사용을 보여줍니다.

File System Provider API Extension Example

Demonstrate features of the API like mounting, listing directories, etc for extensions.

확장을 위해 마운트, 디렉토리 나열 등과 같은 API의 기능을 보여줍니다.

Advanced Font Settings

Customize per-script font settings.

스크립트 별 글꼴 설정을 사용자 정의하십시오.

Typed URL History

Reads your history, and shows the top ten pages you go to by typing the URL.

기록을 읽고 URL을 입력하여 이동하는 상위 10 개 페이지를 표시합니다.

CLD

Displays the language of a tab

탭의 언어를 표시합니다.

Detect Language

Detects up to 3 languages and their percentages of the provided string

제공된 문자열의 최대 3 개 언어 및 해당 백분율을 탐지합니다.

AcceptLanguage

Returns accept languages of the browser

브라우저의 언어를 받아 들인다.

Minimal Localized Hosted App

This is the minimal set of data required to upload a localized hosted application to the web store.

로컬 라이즈 된 응용 프로그램을 웹 저장소에 업로드하는 데 필요한 최소한의 데이터 집합입니다.

Idle - Simple Example

Demonstrates the Idle API

유휴 API를 보여줍니다.

Test IME

A simple IME that converts all keystrokes to upper case.

모든 키 입력을 대문자로 변환하는 간단한 IME입니다.

Message Timer

Times how long it takes to send a message to a content script and back.

콘텐츠 스크립트로 메시지를 보낸 후 다시 보내는 데 걸리는 시간입니다.

Native Messaging Example

Send a message to a native application.

기본 응용 프로그램에 메시지 보내기

Notification Demo

Shows off desktop notifications, which are "toast" windows that pop up on the desktop.

바탕 화면에 팝업되는 "토스트 (toast)"창인 바탕 화면 알림을 표시합니다.

Omnibox Example

To use, type 'omnix' plus a search term into the Omnibox.

사용하려면 검색 주소창에 'omnix'와 검색어를 함께 입력하십시오.

Blank new tab page

Override the new tab page with a blank one

새 탭 페이지를 공백으로 덮어 씁니다.

iGoogle new tab page

Override the new tab page with iGoogle

iGoogle로 새 탭 페이지 재정의

Page action by content

Shows a page action for HTML pages containing a video

동영상이 포함 된 HTML 페이지에 대한 페이지 작업을 표시합니다.

Page action by URL

Shows a page action for urls which have the letter 'g' in them.

'g'문자가있는 URL에 대한 페이지 작업을 표시합니다.

Animated Page Action

This extension adds an animated browser action to the toolbar.

이 확장 프로그램은 애니메이션 브라우저 액션을 툴바에 추가합니다.

Top Chrome Extension Questions

Sample demonstration of the optional permissions API.

선택적 사용 권한 API의 샘플 데모.

Keep Awake

Override system power-saving settings.

시스템 절전 설정을 무시하십시오.

Block/allow third-party cookies API example extension

Sample extension which demonstrates how to access a preference.

환경 설정에 액세스하는 방법을 보여주는 샘플 확장.

Block/allow referrer API example extension

Sample extension which demonstrates how to access a preference.

환경 설정에 액세스하는 방법을 보여주는 샘플 확장.

Process Monitor

Adds a browser action that monitors resource usage of all browser processes.

모든 브라우저 프로세스의 리소스 사용을 모니터하는 브라우저 조치를 추가합니다.

Show Tabs in Process

Adds a browser action showing which tabs share the current tab's process.

현재 탭의 프로세스를 공유하는 탭을 보여주는 브라우저 액션을 추가합니다.

Stylizr

Spruce up your pages with custom CSS.

맞춤 CSS로 페이지를 멋지게 꾸밀 수 있습니다.

Tab Capture Example

Capture a tab and play in a

탭을 캡처하여

Tab Inspector

Utility for working with the extension tabs api

확장 탭 API 작업을위한 유틸리티

Keyboard Pin

Creates a keyboard shortcut (Alt + Shift + P) to toggle the pinned state of the currently selected tab

현재 선택된 탭의 고정 된 상태를 토글하기 위해 키보드 단축키 (Alt + Shift + P)를 생성합니다.

Test Screenshot Extension

Demonstrate screenshot functionality in the chrome.tabs api.

chrome.tabs API에서 스크린 샷 기능을 시연합니다.

Tabs Zoom API Demo

This extension allows the user to explore features of the new tabs zoom api.

이 확장 프로그램을 통해 사용자는 새 탭 zoom api의 기능을 탐색 할 수 있습니다.

Top Sites

Shows the top sites in a browser action

브라우저 작업에서 상위 사이트를 표시합니다.

NTP prototyping extension

extension to prototype new NTP designs

새로운 NTP 디자인 프로토 타입 확장

Console TTS Engine

A "silent" TTS engine that prints text to a small window rather than synthesizing speech.

음성을 합성하지 않고 작은 창에 텍스트를 인쇄하는 "자동"TTS 엔진.

WebNavigation Tech Demo

Demonstration of the WebNavigation extension API.

WebNavigation 확장 API의 데모.

Webview transparency

Sample of the webview.captureVisibleRegion api

webview.captureVisibleRegion API의 샘플

Merge Windows

Merges all of the browser's windows into the current window

모든 브라우저 창을 현재 창에 병합합니다.

Simple Background App

Calculator

A simple calculator.

간단한 계산기.

App Launcher

Get access to your apps in a browser action

브라우저 조치로 앱에 액세스하십시오.

Chromium Buildbot Monitor

Displays the status of the Chromium buildbot in the toolbar. Click to see more detailed status in a popup.

툴바에 Chromium 빌드 봇의 상태를 표시합니다. 팝업에서 자세한 상태를 보려면 클릭하십시오.

Google 캘린더 체크 도우미(Google 제공)

캘린더 어디에서나 다음 모임까지 남은 시간을 신속하게 살펴볼 수 있습니다. 캘린더로 이동하려면 버튼을 클릭하세요.

CatBlock

I can't has cheezburger!

나는 cheezburger를 가질 수 없다!

Catifier

Moar cats!

무아 고양이!

Chromium Search

Add support to the omnibox to search the Chromium source code.

검색 주소창에 Chromium 소스 코드를 검색하도록 지원을 추가합니다.

Email this page (by Google)

This extension adds an email button to the toolbar which allows you to email the page link using your default mail client or Gmail.

이 확장 프로그램은 도구 모음에 기본 이메일 클라이언트 또는 Gmail을 사용하여 페이지 링크를 이메일로 보낼 수있는 이메일 버튼을 추가합니다.

Chrome Sounds

Enjoy a more magical and immersive experience when browsing the web using the power of sound.

소리의 힘을 사용하여 웹을 탐색 할 때 더욱 매력적이고 몰입 한 경험을 즐기십시오.

Google Document List Viewer

Demonstrates how to use OAuth to connect the Google Documents List Data API.

OAuth를 사용하여 Google 문서 목록 데이터 API를 연결하는 방법을 보여줍니다.

Google Mail Checker

Gmaill 받은편지함에서 읽지 않은 메일의 수를 나타냅니다. 또한 버튼을 클릭하여 받은편지함을 열 수도 있습니다.

Imageinfo

Get image info for images, including EXIF data

EXIF 데이터를 포함한 이미지의 이미지 정보를 얻으십시오.

Chromium IRC App

Managed Bookmarks

Adds bookmarks configured by your system administrator to Chrome.

시스템 관리자가 구성한 북마크를 Chrome에 추가합니다.

Mappy

Finds addresses in the web page you're on and pops up a map window.

현재있는 웹 페이지의 주소를 찾아지도 창을 엽니다.

Google Maps

News Reader (by Google)

Displays the latest stories from Google News in a popup.

Google 뉴스의 최신 기사를 팝업으로 표시합니다

News Reader

Displays the first 5 items from the 'Google News - top news' RSS feed in a popup.

'Google 뉴스 - 인기 뉴스'RSS 피드의 처음 5 개 항목을 팝업으로 표시합니다.

Sample - OAuth Contacts

Uses OAuth to connect to Google's contacts service and display a list of your contacts.

OAuth를 사용하여 Google 주소록 서비스에 연결하고 주소록 목록을 표시합니다.

Per-plugin content settings

Customize your content setting for different plugins.

다른 플러그인에 대한 콘텐츠 설정을 맞춤 설정하십시오.

Proxy Extension API Sample

Set Chrome-specific proxies; a demonstration of Chrome's Proxy API

Chrome 관련 프록시를 설정합니다. Chrome의 프록시 API 데모

Speak Selection

Speaks the current selection out loud.

현재 선택 내용을 소리내어 말하십시오.

Talking Alarm Clock

A clock with two configurable alarms that will play a sound and speak a phrase of your choice.

구성 가능한 두 개의 경보가있는 시계로 소리를 내고 선택한 구문을 말합니다.

TTS Debug

Tool for developers of Chrome TTS engine extensions to help them test their engines are implementing the API correctly.

Chrome TTS 엔진 확장 프로그램 개발자가 엔진 테스트에 도움이되는 도구를 사용하면 API를 올바르게 구현할 수 있습니다.

TTS Demo

Demo Chrome's synthesized text-to-speech capabilities.

데모 Chrome의 합성 텍스트 음성 변환 기능.

Sandboxed Frame

Demonstrate use of handlebars inside a sandboxed frame

샌드 박스 프레임 안에 핸들 바를 사용하는 방법을 보여줍니다.

Tab Shortcuts

Allows pinning and duplication of tabs via keyboard shortcuts.

키보드 단축키를 통해 탭을 고정 및 복제 할 수 있습니다.

Event Tracking with Google Analytics

A sample extension which uses Google Analytics to track usage.

Google 애널리틱스를 사용하여 사용을 추적하는 샘플 확장 프로그램입니다.

Getting started example

This extension shows a Google Image search result for the current page

이 확장 프로그램은 현재 페이지에 대한 Google 이미지 검색 결과를 보여줍니다.

1. FrequencyOf 라는 프로젝트 폴더를 먼저 만든다.

2. 아래 사이트에서 소스를 복사한다.

https://developer.chrome.com/extensions/getstarted

3. 이름 및 아이콘 값을 수정한다.

4. popup.html 파일을 만들어서 클릭했을때 열리는 페이지를 만든다.

5. 크롬 확장프로그램에서 개발자모드로 접속하여 '압축해제된 확장 프로그램 로드' 를 클릭하여 폴더를 선택한다.

6. 프로그램 개발

개인적인 프로그램

-> 나만을 위한, 개인을 위한 프로그램. 보편적이지 않기 때문에 다른사람들이 쉽게 사용할 수 없을수도 있지만,

한시간동안 해야할 일을 10분만에 할 수 있도록 시간을 절약이 가능.

ex) 페이스북 신청자 구분, 유튜브 리스트 등

웹 환경을 경험하며, 필요한 프로그램을 직접 만들어서 사용한다.

개인적인 이러한 프로그램은 한줄짜리가 될 수도 있다.

사용자가 나이기 때문에 보안이나 여러가지 예외에 시간을 아낄수가 있다.

나는 이 프로그램을 나쁘게 안쓸것이기 때문에.

1. 개인적인, 많은 짧은 프로젝트를 진행해보자

2. 자신의 지식을 보편적으로, 다른사람이 봐도 이해할 수 있도록 정리해 놓자.

아는 지식을 계속해서 꺼내고 사용을하고 인지를 해야 잊지 않을 수 있다.

나중에 포트폴리오가 될 수도 있다. 블로그를 하자.

코드의 이미지는 계산기. 계산하는 원리도 중요하지만, 진짜 필요한것은 결과값.

계산기를 사용하는 주기성을 갖는다면... 반복이 된다면, 프로그램을 짜서 만들어 보자.

건물과 코딩의 차이.

-> 만약 건물을 수정해달라고 하면 물리적인 어려움이 따르지만, 코딩의 경우에는 복잡성의 어려움이 따른다.

프로그램의 복잡성.

-> 체크박스가 50개면 1000조개의 경우의 수가 발생한다. 그러나 1000조개 이라고 해도, 말도 안되는 복잡성이 다가 오지 않는다. 이유는 무엇일까? 생각해 보자.

슬럼프

-> 자신이 알고있는 복잡성의 인식과 실제 복잡성과의 갭이 클 경우 슬럼프가 올수도 있다.

       -> 개발자가 처음 성큼성큼 잘하다가 갈수록 옛날같지 않으면, 슬럼프가 온것이 아니라 복잡성의 갭이 발생한 것일수도 있다.

계단

-> 학습은 학습자 스스로가 계단을 만들어 한계단씩 올라가며 성장해야 한다.

객체 : 연관된 메소드와 그 메소드가 사용하는 변수들을 분류하고 그룹핑하는것의 대상

은닉화, 캡슐화 : 둘다 같은말로써, 내부의 동작 장법을 모르더라도 사용자는 사용할 수 있도록 만드는것

인터페이스 : 부품을 서로 교환할 수 있도록 규격을 만들어 놓는것

클래스 : 연관되어 있는 변수와 메소드의 집합

- 클래스 : 설계도

- 인스턴스 : 제품

Calculator c1 = new Calculator();

-> Calculator = 설계도

-> c1 = 제품

-> 데이터타입 = 사용자정의타입

변수 : 상태

메소드 : 행동

-> 하나의 클래스를 바탕으로 서로 다른 상태를 가진 인스턴스를 만들면 서로 다른 행동을 하게 된다는것.

-> -> 하나의 클래스가 여러개의 인스턴스가 될 수 있다는 점이 객체 지향이 제공하는 가장 기본적인 재활용성

객체의 구성원 : 변수, 메소드

static을 맴버(변수,메소드) 앞에 붙이면 클래스의 맴버가 된다.

메소드 : 객체의 동작

입력과 출력 : Javascanner 을 이용한 입력, 출력

객체 지향 프로그래밍 : 설계, 부품화, 캡슐화, 인터페이스

1) 설계 : 추상화하여 설계

2) 부품화 : 레고조립처럼 부품으로 만들어서 조립

3) 캡슐화(은닉화) : 부품이 어떻게 만들어졌는지 모르더라도 사용법을 알면, 사용할 수 있도록 내부의 동작방법을 숨기고 사용방법만 노출

4) 인터페이스 : 부품과 부품을 서로 교환할 수 있도록 만들어 놓는 틀(껍데기)

클래스와 인스턴스 그리고 객체

1) 클래스 : 연관되어 있는 변수와 메소드의 집합

2) 인스턴스 : 클래스는 설계도, 인스턴스는 제품

3) 객체 : 변수는 상태, 메소드는 행동

클래스 맴버와 인스턴스 맴버 : 지역변수, 전역변수와 비슷한 맥락

유효범위 : 지역변수, 전역변수와 비슷한 맥락

초기화와 생성자

1) 생성자 : 어떤 일을 시작하기 전에 준비를 하는것

  ※ 특징 : 생성자의 이름은 클래스의 이름과 동일하다, 값을 반환하지 않는다.

상속 : 재활용성을 위해 물려주는것

상속과 생성자 : super는 상위클래스를 가리키는 키워드, super 사용법

오버라이딩 : 상속받은 메소드를 재정의

오버로딩 : 인자수에 따라 실행방법을 다르게

클래스 패스 : 클래스 경로에 관해서

패키지 : 패키지 경로 및 특정 패키지 로드 방법

API와 API 문서 보는 법 : 자바 시스템을 제어할 수 있도록 자바에서 제공하는 명령어를 의미한다. 예를들면 System.out.println(""); 같은거

접근 제어자 : public는 제일많이 오픈, private는 제일많이 닫힘

abstract : 추상 메소드, 예를 들면

public abstract int a();

이런식으로 메소드를 선언만하고 이것을 상속받고 오버라이딩하여 사용이 가능

final : 상수를 지정, PI:3.14 같은거, 변하지 않는수

인터페이스 : 껍데기, 특정 메소드를 사용하도록 강제

다형성 : A obj = new B(); 같은거

예외 : try, catch로 예외처리, throw 또는 throws 같은것으로 던질 수 있음

Object 클래스 : 모든 클래스는 Object 를 상속받은 상태임.

예를들면 class O extends Object {} 처럼 항상 상속 받으나 extends Object 부분은 숨겨진거

상수와 enum

상수 : 변하지 않는 수, 한번 정의하면 그 값이 안바뀜

enum : 많은곳에서 사용하던 디자인 팬턴을 자바언어가 채택해서 문법으로 단순화시킨것

참조 : 복제는 복사를 의미함, 참조는 symbolic link 같은거, 바탕화면 바로가기같이 원본이 바뀌면 같이바뀜

제네릭 : 클래스 내부에서 사용할 타입을 외부에서 지정하는 기법

class Person<T> {

  public T info;

}

이런식으로 < > 를 써서 사용

Collections Framework : 배열은 처음 갯수를 지정하면 수정할 수 없지만. 이것은 수정가능, 하지만 사용하는 문법이 배열과 조금 다름

-> apply는 내장되어있는 메소드이다. 그 메소드를 사용하여 배열을 인자로 넣어서 실행할 수 있다.

arguments (인자)

클로저

클로저는 내부함수가 외부함수의 맥락에 접근할 수 있는것을 가르킨다.

 - 흔히들 많이 착각하는 실수!

함수는 객체다. 자바스크립트가 다른 언어와의 차이점은 함수가 값이 될 수 있다는 점이다.

함수는 함수의 리턴 값으로도 사용할 수 있다.

함수를 배열의 값으로도 사용할 수 있다.

콜백 : 값으로서 함수를 사용할 수 있기 때문에 내장함수의 동작방법을 값을 전달함으로써 동작 방법을 바꿀 수 있다

애플리케이션 만드는 순서

_구상
무엇을 만들 것인가

_기획(계획)
구상을 바탕으로 세부적인 실행 계획을 세워가는 단계
'무엇을 만들 것인가'를 보다 분명하게 정의하고 또 어떤 기능들이 존재하고 어떤 사용성을 가져야 하는지 정의

_디자인
웹사이트를 아름답게 보이게 하는것
사용자가 편리하도록 편의성 향상시키도록 하는것

_개발(프로그래밍)
실제 서비스가 동작하도록 하는 일

_테스트
버그 찾는일
놓쳤던 부분 찾는 일

- 위 과정이 꼭 순서대로 이루어지는것은 아님
- 구상~테스트까지 과정 계속 반복
- 잘 만들기 위해서는 start small!
처음부터 작게 만들어서 끊임없이 개선하라
- 개발은 복잡하기때문에 작은 것이라도 완성하는것이 가장 중요하다
- 사용자들이 활동하는 과정에서 생겨나는 여러가지 필요들 또는 여러가지 문화들을 잘 뒷받침해주는게 좋은 접근방법이 아닐까
- 처음부터 모든 기능을 만들기보다는 최소한의 기능으로 시작해서 필요하다고 생각하는 기능은 신중하게 추가하는게 좋은 접근방법이 아닐까2
- start small하게 시작하자

 - 구상 - 

크크크 전략

http://goo.gl/ZuuCbh

 - 기획 - 

기획 단계에서 - UI 모델링 - 사용자의 입장에서 동작하는 기능을 가상으로 만들어 보는 것.

모델링을 하는 방법 

1. 손그림 ( 가장 간단하고 손쉽게 할 수 있음)

2. Pencil Tool을 사용

 - http://pencil.evolus.vn/ (다운로드)

 - https://opentutorials.org/course/221/1416 (강좌)

3. 파워포인트 (소프트웨어 기획)

- 인터넷과 웹의 역사 -

웹(W3이라고도 부른다)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간이다. 
HTML이라는 언어로 작성한 문서를 이 웹에다 모아놓으면, 
사용자는 링크를 통해 연결된 문서로 이동해가며 원하는 정보를 찾을 수 있다. 
이러한 문서를 흔히 '웹 페이지'라고 부르며, 웹 페이지를 모아놓은 것을 ‘웹 사이트’라고 한다. 
우리가 웹 브라우저 주소창에 입력하는 영어 단어(예를 들면 http://www.naver.com/)는 
해당 문서가 존재하는 위치를 의미한다. 
그리고 주소를 입력하고 여러 문서를 찾아 정보를 얻는 행위를 웹 서핑이라고 부른다.

인터넷 : 정보를 운반할수 있도록 깔려있는 도로같은 개념

웹 : HTML로 만들어진 웹 페이지를 주고 받을 수 있도록 도로위에서 다니는 대중교통 같은 시스템

웹브라우저 <----------------------------------> 웹서버

                       데이터를 주고 받음

                       HTTP : 이 데이터를 주고받는 규약

                       HTML : 웹페이지의 정보를 담고 있음

- 서버와 클라이언트 -

클라이언트 <- 웹브라우저                        서버 <- 웹서버

클라이언트가 서버에게 "요청" 하면 서버는 클라이언트에게 "응답" 하는 구조를 가지고 있다.

웹서버종류 : Apache, Nginx, lls 등

- 윈도우에 웹서버 설치 -

비트나미 다운로드

https://bitnami.com/stack/wamp -> No thanks 클릭

설치할 때 PhpMyAdmin 빼고 다 체크 풀고 설치해도 됨.

- 서버와 클라이언트의 관계 -

1. 웹브라우저가 웹서버에게 '요청' 을 함

2. 그 웹서버는 웹서버에 저장되어 있는 웹 페이지를 읽어서 '응답' 함

그 응답은 'HTML' 값을 주게 됨

- HTML

HyperText Markup Language

- Hypertext

: 문서와 문서간 링크로 연결되어 있는 시스템을 하이퍼텍스트라고 함.

- ul, li 태그

: li 태그는 리스트를 나타내는 태그

: ul 태그는 리스트 그룹을 묶음

: ol 태그는 리스트에 숫자를 붙임

- <!DOCTYPE HTML>

: 표준안으로서, 작성한 태그의 형식을 나타냄

1. HTML 5

: <!DOCTYPE HTML>

2. HTML 4.01 strict

: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">

3. XML 1.1

: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1/EN" "http://w3.org/TR/xhtml11/DTD/xhtml11.dtd">

- HTML 사전

A ~ Z까지 모음

https://opentutorials.org/course/1058

- header, nav, article

용도에 맞게 태그를 묶음

- 웹브라우저

       - 클라이언트 사이드 언어

       : HTML, CSS, Javascript

- 웹서버

       - 서버 사이드 언어

       : PHP, MySQL

- CSS

:  디자인을 위한 언어, 스타일을 내기 위한 언어

- 선택자 (selector)

: h1 {color:red} 에서 "h1" 부분이 선택자

- 서술 (description)

: h1 {color:red} 에서 "color:red} 부분이 선택자

- 로그인 기능 만들기 -

- 사용자 입력값을 php 로 읽어서 비교

8-1.php

<form action="8-2.php">

       <p>비밀번호를 입력해주세요.</p>

       <input type="text" name="password">

       <input type="submit">

</form>

8-2.php

<?php 

$password = $_GET["password"]; // password 에 전에 입력한 폼의 password 값을 넣는다.

       if($password == "1111") {

               echo "비밀번호 맞음";

} else {

       echo "비밀번호 틀림";

}

?>

- UI

: User Interface

- API

: Application Programming Interface

: 운영체제가 미리 만들어 놓은 것들을 호출하는 명령어

- 프로그래밍 접근방법 -

1. "적정" 용도의 언어를 "적정" 수준으로 배워야 한다. 

언어를 공부하는 이유는 무언가를 구현하는데 생기는 문제를 해결하기 위해 공부한다.

2. API를 "탐험" 해봐야 한다.

프로그래밍 언어로 API를 조합해서 애플리케이션을 만들어본다.

3. 그것을 좋아할 관객을 찾는다. (매우 중요함)

4. 한계를 경험해본다.

한계를 충분히 경험하고 그것으로 인해서 절망감이 충분히 성숙했을때, 밑의 분야를 접했을때 박하사탕을 눈으로 먹은것처럼

시야가 뻥 뚫릴 수 있고, 막연히 둥둥둥 떠다니던 생각들 또는 가능성들이 이런 분야를 만나면서 견고하게 운집되는 경험을 할 수 있다.

       (1) 알고리즘

       (2) 데이터 스트럭쳐

       (3) 디자인 패턴

       (4) 프레임워크

       (5) 컴퓨터 구조

- PHP 실습 -

- id값이 비어서 에러날 수 있는 것을 안전하게 함

<?php

if(empty($_GET['id']) == false ) {

       echo file_get_contents($_GET['id'].".php");

}

?>

-> 만약 id 값이 비어 있는 것이 거짓이라면, => id 값이 있다면

id값.php 파일을 출력할것이다.

EgovFrame - New Core Project

프로젝트 네임을 jamjalee.egovframework.project-010 입력

체크 안하고 Finish

src/main/java 오른클릭 New - Package - example01 생성

생성된거 오른클릭 New - Class - 이름 HelloWorldApp - public static void main(String [] args) 체크하여 생성

// End of main() // End of class HelloWorldApp ( 소스코드가 길어졌을때 괄호종료를 정확히 구분하기 위하여 미리 적어놓는 습관이 좋다. )

System.out.println("jamjalee 잠자리");  입력

방금만든 프로젝트 빌드

우클릭 - Run as - Maven Build - Run

방금만든 클래스 우클릭 - Run as - Java Application

실행 확인

example03도 만듬

Bean, Eng, Kor을 복사하여 붙여넣기 이후 HelloApp 를 만든다.

위처럼 적는다.

※ context-hello.xml 같은  물리적인 파일은 대소문자 섞지말고 소문자로만 쓰도록 한다.

src/main/resources 에 XML File를 만든다.

파일명은 context-hello.xml

그리고 Finish

빌드하고 실행!