EL2A의 티스토리

전남나주시 한전KDN에서 진행했던 컨퍼런스

평생 개발자로 먹고 살 수 있다 :-)

1. 태아 작명법의 새로운 용도
태아 작명법 서적을 구입하자. 그러면 변수명을 뭐로 지어야 할지에 대한 고민을 덜 수 있을 것이다. Fred는 멋진 이름이며 입력하기도 쉽다. 입력이 쉬운 변수명을 원한다면 asdf를 사용해 보기 바란다.

2. 단일 문자 변수명
변수명을 a, b, c 등으로 정한다면 간단한 텍스트 편집기로 해당 인스턴스를 검색하는데 애를 먹게 된다. 뿐만 아니라 그 변수가 무엇에 쓰이는 것인지 추측할 수 없게 방지하는 역할도 한다. 포트란(FØRTRAN)에서는 오랫동안 I, j, k를 인덱스 변수로 사용해왔다. 혹시라도 이러한 훌륭한 전통을 조금이라도 깨뜨리려는(예를 들어, ii, jj, kk 등으로 이름을 변경하려는) 사람이 있는가? 스페인 종교재판에서 이교도에게 어떠한 형벌을 가했는지를 그에게 경고하자.

3. 창의적 오타
어쩔 수 없이 뭔가를 설명하는 변수명이나 함수명을 사용해야 하는 상황이라면 오타라는 무기를 선택하자. 몇몇 함수명과 변수명에 오타를 내고 다른 곳에서는 오타를 사용하지 않는다면(예를 들어, SetPintleOpening과 SetPintalClosing처럼) grep이나 IDE 검색 기술을 효과적으로 무력화할 수 있다. 이 방법은 생각보다 놀라운 효과를 발휘한다. 각기 다른 theatres/theaters(둘 다 극장을 의미)에 tory나 tori같이 국제적인 취향도 추가해본다.

4. 언어를 혼용하라
두 언어(사람의 언어나 컴퓨터의 언어)를 무작위로 배치하자. 만약 상사가 자신의 언어를 사용할 것을 강요한다면 어떻게 할것인가? 상사에게 나만의 언어를 사용해야 생각을 더 잘 정리할 수 있다고 설명하자. 신사적인 설명으로 해결되지 않는다면? 언어 차별 행위에 대해 이의를 제기하고, 당장 고용주를 고소를 할 수도 있으며 거액의 배상금을 내야 하는 상황에 처할 수 있다고 협박하자.

5. 정말 멋진 이름
의미상으로 전혀 관계없는 이름을 변수명으로 사용해보라.

marypoppins = (superman + starship) / god; 
이 글을 읽는 사람은 자신도 모르게 단어의 뜻에 더 집중하게 되고, 실제 로직은 이해하기가 어려워진다.

6. 소문자 l과 숫자 1은 닮았다
Long 상수를 표현할 때 소문자 l을 사용해 보라. 예를 들어, 10l로 표기하면 10L이 아닌101로 착각하기 쉽다. uvw wWgq9 2z 5s il17|!j oO08 `’” ;,. m nn rn {[()]} 등의 문자를 명확하게 구분해주는 폰트를 멀리하자. 창의력을 발휘해보자.

7. 삼천포로 인도하는 이름
메소드의 이름이 의미하는 것보다 더 많은(혹은 더 적은) 동작을 수행하도록 프로그래밍하자. 간단한 예로 isValid(x)라는 메소드에 기능을 추가해 x값을 이진수로 변환하고 결과를 데이터베이스에 저장하도록 구현한다면 모두를 깜짝 놀랄 것이다.

8. 길고 비슷한 변수명변수명이나 클래스명은 되도록이면 길게 만들고 두 개 이상의 이름이 필요할 경우 한 글자만 바꿔놓거나 대소문자만 다르게 한다. 변수명 swimmer와 swimner는 좋은 예다. 대부분의 폰트로는 ilI1|나 oO08를 명확하게 구별하기 어렵다는 점을 악용하자. 예를 들어, parselnt와 parseInt 혹은 D0Calc와 DOCalc를 명확히 구분하기 어렵다. 이 중에서도 l은 얼핏 보기에 1과 구별하기 힘들기 때문에 변수명으로 사용하기 가장 좋은 알파벳 중 하나다. 뿐만 아니라 대부분의 폰트에서 rn은 m처럼 보이는 경우가 많다. 따라서 swimmer와 쉽게 구별하기 어려운 swirnrner도 좋은 변수명이다. HashTable과 Hashtable처럼 한 글자의 대소문자만 살짝 변경해서 변수명을 만드는 것도 좋은 방법이다.

파일을 불러올 위치로 이동한다.

cd /d/htdocs/chat/

저장소와 연결하며 가져온다.

git clone https://github.com/test

경로를 확인하고 잘 이동한다.

ls

마스터가 된다.

git init

파일을 잘 다시 가져오로려면 pull 한다.

$ git pull

수정한 파일이 있는지 확인한다.

$ git status

수정한 파일이 있으면 add 시켜준다.

$ git add html/index.php

커밋한다.

git commit

커밋 메세지를 입력하고 커밋을 하면 된다.

git commit -m "good submit"

푸쉬한다.

git push

-----------------------------------------------------------------------------------------------

※ GIT BASH 한글 깨짐이 발생할 경우 우클릭하여 option 들어가서 캐릭터셋을 바꿔준다.

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조개 이라고 해도, 말도 안되는 복잡성이 다가 오지 않는다. 이유는 무엇일까? 생각해 보자.

슬럼프

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

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

계단

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

애플리케이션 만드는 순서

_구상
무엇을 만들 것인가

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

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

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

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

- 위 과정이 꼭 순서대로 이루어지는것은 아님
- 구상~테스트까지 과정 계속 반복
- 잘 만들기 위해서는 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 파일을 출력할것이다.

일단 준대로 돌아가게만 만들면 

-> 초급

수행속도와 알고리즘 최적화를 고민하면 

-> 중급

프로그램의 사용용도와 목적 편의성을 고려하면 

-> 고급

1. 파일 - 셋팅 - Install

emmet

검색하여 설치

2. FTP 검색

Remote-FTP

검색하여 설치

3. File - Open folder 설정

Auto Indent On Paste는 붙여넣기한 코드를 자동으로 들여쓰기 하는건데 이미 들여쓰기 된 코드의 경우 이상하게 출력이되어서 저는 꺼놨습니다.

폰트는 Font Family에 올바른 폰트명을 입력하면 됩니다.

Line Height는 줄 간 높이를 결정합니다. 폰트의 영향도 받는것 같으니 시행착오를 통해 최적값을 찾으시면 되겠습니다.

Preferred Line Length는 워드랩을 설정할 때 줄 바꿈할 길이입니다.

Scroll Past End를 설정하면 문서를 더 아래로 스크롤 할 수 있도록 해줍니다. 계속 코드를 적어나갈 때 커서위치가 너무 아래에만 있게되는데 전체적으로 위로 올려서 중간쯤에서 적어나갈 수 있게 되지요.

Show Indent Guide는 들여쓰기 라인을 표시해주는 실선을 보여줍니다. if문이 여러개 있을 때 진가가 발휘되지요.

Show Invisible은 탭이나 공백문자, 줄바꿈 문자를 표시하는 기능입니다.

Show Line Numbers는 줄 번호를 좌측에 표시해줍니다.

Soft Wrap은 화면 크기에 따라 줄을 바꾸는 기능입니다.

Soft Wrap At Preferred Line Length는 위에서 설정한 길이에서 줄바꿈을 합니다.

그 외에 탭 간격을 조절할 수 있습니다.

출처 : http://dovetail.tistory.com/62