당 떨어질 땐 초코딩

: 폼 만들기 속성 설명 method 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정 get - 주소 표시줄에 사용자가 입력한 내용이 그래도 드러남 post - 사용자가 입력한 내용이 드러나지 않음 name 폼 이름 지정 action 서버 상의 프로그램 지어 target 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 autocomplete 자동완성 기능 : 폼 요소에 레이블 붙히기 , : 폼 요소 그룹으로 묶기 - : 와 사이의 폼들을 하나의 영역으로 묶고 외각선을 그려줌 - : 로 묶은 그룹에 제목을 붙여 줌 : 입력 항목 - type 속성 유형 설명 hidden 사용자에게는 보이지 않지만 서버로 넘겨지난 값 text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자..

텍스트 : 제목 표시 - 일반 텍스트보다 크고 진하게 표시 - ~ 까지 사용 -> 이 가장 크게 표시되고 이 가장 작게 표시 : 단락 만들기 - 텍스트를 표시할 때 가장 많이 사용 #단락 : 앞뒤에 줄바꿈이 있는 텍스트 덩어리 : 줄 바꾸기 - 닫는 태그 ()가 없음 : 분위기 전환을 위한 수평 줄 넣기 - 텍스트 단락의 주제가 바뀔 때 분위기 전환용으로 사용 - 닫는 태그 없음 - 기본으로 가로선이 삽입되지만, CSS를 이용해 가로선을 없앨 수 있음 : 인용문 넣기 : 입력하는 그대로 화면에 표시 , : 글씨를 굵게 - 중요도를 높이고 싶으면 중복 사용 가능 - 은 강조 할 때 사용 - 는 단순히 굵게 표시 , : 이탤릭체(비스듬이)로 표시 - 는 단순히 이탤릭체로 표시할 때 사용 -은 흐름상 특정 부..

Front-End : 사용제에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)을 제공 - 사용자의 요청에 반응해서 동작 - 클라이언트의 입장에서 개발 역할 - HTML : 웹 콘텐츠를 잘 보여주기 위해 구조를 만듦 - CSS : 적절한 배치와 일관된 디자인을 제공 가독성 - Javascript : 사용자 요청을 반영 키보드, 마우스 등 반응이 일어났을 때 Back-End : 정보를 처리하고 저장하여, 요청에 따라 정보를 내려줌 - 서버 입장에서 개발 기술 - 프로그래밍 언어 ex) Java, Python, PHP, Javascript 등 - 웹의 동작 원리 - 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식 - 운영체제, 네트워크 등에 대한 이해 - 프레임워크에 대한 이해 ex) S..

인터넷 : TCP/IP 기반의 네트워크가 전세계적으로 확대되어 하나로 연결된 네트워크의 네트워크 - 네트워크들의 네트워크 -> 네트워크의 결합체 HTTP : 서버가 클라이언트가 인터넷상에서 데이터를 주고 받기 위한 프로토콜 - 인터넷에서 서로 통신하기 위해 사용 - 어떤 종류의 데이터도 전송 가능 ex) 이미지, 동영상, 문서 등 유상태 방식 (Stateful) : 접속이 계속 유지된 상태를 가짐 - 클라이언트와 서버간의 지속적으로 데이터를 주고받을 수 있음 - 채팅이나 온라인 게임 등에 적합 무상태 방식 (Stateless) : 접속이 계속 유지되지 않음 - 연결을 끊어버리기 때문에 클라이언트의 이전 상황을 알 수 없음 - 쿠키와 같은 기술이 등장 URL (Uniform Resource Locator)..

ref (reference) : DOM에 이름을 다는 방법 - DOM을 직접 건드려야 할 때 사용 사용 방법 1. props를 설정하듯이 DOM에 ref 속성 추가 2. ref 값으로는 콜백 함수 전달 - 콜백 함수 : ref를 파라미터로 가짐 {this.input=ref}}> DOM을 꼭 사용해야 하는 상황 - 어쩔 수 없이 DOM에 직접적으로 접근해야함 -> ref 사용 1. 특정 input에 포커스(커서) 주기 import React, {Component} from 'react'; import './ValidationSample.css'; class ValidationSample extends Component{ state = { password : '', clicked : false, valida..

state : 컴포넌트 내부에서 읽고, 업데이트 가능 - 언제나 기본 값을 미리 설정해야 사용 가능 -> 초기화 - 객체 형식으로 생성 및 갱신 - 값 갱신 가능 -> setState( ) 함수 사용 constructor( ) : state 초기값을 내부에서 설정할 떄 사용 - MyComponent.js import React, { Component } from 'react'; import PropTypes from 'prop-types'; class MyComponent extends Component { constructor(props){ super(props); this.state = { number : 0 //state에 number값을 0으로 설정 } } render() { return ( 숫자..

props (properties) : 컴포넌트 속성을 설정할 때 사용 - 부모 컴포넌트가 자식 컴포넌트에 주는 값 - 값을 받아오기만 할 뿐, 수정 불가 - MyComponent.js import React, {Component} from 'react'; class MyComponent extends Component { render(){ return ( 안녕하세요 제 이름은 {this.props.name} 입니다. ) } } export default MyComponent; - App.js import React, { Component } from 'react'; import MyComponent from './MyComponent'; class App extends Component { render(..

JSX : 자바스크립트 확장 문법 1 2 3 4 5 6 7 8 9 10 11 12 13 import React, { Component } from 'react'; class App extends Component { render() { return ( ); } } export default App; cs - 위와 같이 작성한 코드는 babel-loader를 사용하여 자바스크립트로 변환함 장점 - 보기 쉽고 익숙함 -> HTML 코드와 비슷함 기본 문법 1. 컴포넌트에 여러 요소가 있다면, 무조건 부모 요소 하나로 감싸야 함 1 2 3 4 5 6 7 8 9 10 11 12 13 14 class App extends Component { render() { return ( Hello React! Welcom..

const : 상수 - 상수 : 값을 할당 받고, 한 번 할당한 값은 바꿀 수 없음 - 초기화 시, 값을 대입하지 않으면 에러 발생 let : 변수 - 변수 : 이름이 붙은 값 - 다른 값을 대입해야 하는 상황이 생겼을 때 사용 #const와 let은 블록 스코프를 가짐 -> 블록 안에서만 접근 가능 - 블록 : 문을 중괄호 '{ }'로 묶은 것 - 스코프 : '범위' 라고 생각하면 됨 Q. 변수와 상수 중 어떤 것을 써야 하나요? A. 될 수 있으면 변수보단 상수를 사용하는 것을 권장 이유 : 상수를 사용하면 값을 바꾸지 말아야 할 데이터에서 실수로 값을 바꾸는 일이 줄어 듦 var : 변수 - 함수 스코프를 가짐 -> 어디서든 접근 가능 - var를 이용해 변수를 선언하면, 자바스크립트는 같은 변수를..

truffle npm install truffle -g ganache : 우리가 개발 목적으로 사용할 로컬 및 메모리 블록 체인 http://truffleframework.com/ganache Ganache | Truffle Suite Deploy contracts, develop your decentralized applications (dapps), and run tests on smart contracts. Available as a desktop application & command-line tool. www.trufflesuite.com metamask : 이더리움 블록체인을 사용하기 위한 특별한 브라우저 확장 프로그램 - 개인계좌와 로컬 이더리움 네트워크에 연결하고 메타마스크를 사용하여 스마..

Block Chain : 정보를 변조하기 어려운 형태로 공유하는 시스템 - 공유 : P2P 네트워크를 이용해 각 노드가 정보를 서로 복사해 가며 동기화 하는 것 -> 데이터를 복사해 공유하는것이 아님! - 해시 함수라고 하는 암호 기술을 사용해 시간대별로 몇 개의 트랜잭션이 덩어리(블록)를 만들면서 사슬처럼 연결되어 저장 - 마이닝(채굴) : 거래 정보가 블록으로 만들어져 P2P로 전파될 때 그 블록이 올바른지를 검증 블록체인 흐름 1. 가상 화폐를 거래하고 싶은 사람은 가상 화폐의 가치에 해당하는 트랜잭션을 생성 2. 트랜잭션은 모든 노드에 전파되고, 채굴에 성공한 노드의 블록에 포함 3. 이 블록은 다시금 모든 노드로 전송되고, 각 노드는 그 블록을 자신의 기록 영역에 저장 P2P(Peer-to-Pe..

Arrow Function (화살표 함수) - function 키워드가 없어도 함수를 만들 수 있음 - return을 사용하지 않아도 식을 계산한 값이 자동으로 변환 -> 이를 화살표(=>)를 사용하여 모든 함수 정의를 한줄로 끝냄 var lordify = firstName => '캔터베리의 ${firstName}' //예전 방식 var lordify = function(firstName, land) { if (!firstName) { throw new Error('lordify에 이름을 넘겨야 합니다') } if (!land) { throw new Error('영주에게는 영지가 있어야 합니다') } return '${land}의 ${firstName}' } //새로운 방식 var lordify = (f..

Redux - 상태 관리의 로직을 컴포넌트 밖에서 처리 - 목표 : 플럭스를 기반으로 애플리케이션 안에서 변경된 데이터가 어떻게 흘러가는지 더 명확히 표현하도록 해줌 - 디스패처를 없애고 애플리케이션 상태를 불변 객체 하나로 표현함으로써 플럭스의 개념을 더 단순화함 - 모든 상태 데이터를 한 객체에 모으게 함으로써 애플리케이션에서 상태를 보는 관점을 단순하게 유지 ARS 순서로 실행 Action : 객체 형태로 되어 있고, 상태를 변화시킬 때 참조하여 변화를 일으킴 - 상태를 바꿀 때는 객체 전체를 바꿔치기 하는 방식을 사용하는데, 바꿀 대상을 지정해줌 - 애플리케이션 상태 중에서 어떤 부분을 바꿀지 지시하고 그런 변경에 필요한 데이터 제공 - event가 하는 일이랑 똑같다고 봐도 됨 ex) 버튼에서 ..

React DOM 1 npm install react react-dom --save cs "dependencies"에 설치 된 것을 확인 할 수 있다 Bable 및 Webpack 설치 1 npm i -D babel-core babel-loader babel-preset-es2015 babel-preset-react webpack webpack-dev-server cs "devDependencies"에 설치 된 것을 볼 수 있다

DOM (Document Object Model) : HTML 문서 객체 1. HTML DOM - 웹 페이지가 로드되면 브라우저는 페이지의 문서 객체 모델 (DOM)을 만든다 HTML DOM 객체 트리 - 객체 모델을 사용하면 자바스크립트는 동적 HTML을 만드는데 필요한 기능들 ㉠ 자바스크립트는 페이지의 모든 HTML 요소와 속성을 변경 및 제거 할 수 있다. ㉡ 자바스크립트는 페이지의 모든 기존 HTML 이벤트에 반응할 수 있다. ㉢ 자바스크립트는 페이지의 모든 CSS 스타일을 변경할 수 있다. ㉣ 자바스크립트는 페이지의 새로운 HTML 이벤트를 생성할 수 있다. - HTML DOM 메서드는 HTML 요소에서 수행할 수 있는 작업이며, 속성은 사용자가 설정하거나 변경할 수 있는 HTML 요소의 값임 ..

React : 사용자 인터페이스를 개발하기 위한 자바스크립트 라이브러리 - 컴포넌트 기반 #컴포넌트 : 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여줌 - DOM 관리와 상태값 업데이트 관리를 최소한으로 하고, 오직 기능 개발과 사용자 인터페이스 개발에 집중할 수 있도록 도와줌 1. node.js 설치 2. CRA(Create React App) 설치 1 npm install -g create-react-app cs 3. 파일 경로 설정 후, App 생성 1 create-react-app 앱 이름 cs 4. 서버 돌리기 1 npm start cs 위의 사진처럼 http://localhost:3000/ 이 뜨면 성공!

https://api.jquery.com/ jQuery : 자바스크립트 라이브러리 - 목적 : 웹 사이트에서 자바스크립트를 사용하는 것이 훨씬 쉬워지도록 하는 것 - 여러 줄의 자바스크립트 코드를 필요로 하는 많은 일반적인 작업을 한 줄의 코드로 작업할 수 있는 메서드로 실현 가능 - 기능 1. HTML/DOM 조작 : 특정 요소를 쉽게 찾고, 내용 변경이 간단 2. CSS 조작 : 특정 요소에 대한 스타일의 변경 등의 작업이 간단 3. HTML 이벤트 : 이벤트를 간단히 처리 4. 효과 및 애니메이션 : 웹 페이지 상의 효과나 애니메이션이 가능 5. AJAX : 네트워크를 통하여 서버와의 정보 교류를 쉽게 함 다운로드 1. cmd 창 열기 2. npm install jquery 입력 3. 사용 - HT..

객체 : 실제 생활에 존재하는 모든 사물은 하나의 객체에 해당하며, 각 객체는 교유의 특성 값을 가지며, 고유한 행동을 함 - 속성(property) : 객체를 특정 지워주는 값 - 객체의 속성은 마치 변수에 값을 할당하는 것과 유사 - 메서드(method) : 객체가 취하는 모든 행동(동작 또는 함수) -> 객체가 가지고 있는 동작 - 함수가 어떤 객체의 동작을 나타내는 함수로 정의될 떄, 그 함수를 그 객체의 메서드라고 함 -> 상황에 따라 다르게 부를 따름임 사용자 정의 객체 : 사용자가 직접 객체를 정의하여 사용 1. 리터럴 객체 정의 - 기본 형식 var 객체 이름 = { 객체.속성 : 속성 값, ..... , 객체.메서드 = : function( ) { //함수문 } }; var myCar =..

함수 : function 키워드로 정의 - 함수 선언 또는 함수 표현식을 사용 할 수 있음 함수 선언 1. 기본 형식 function 함수이름 (매개변수1, 매개변수2, ....., 매개변수n) { //실행될 함수 문장 } 2. Function( ) 생성자 function myFunction(a, b){ return a * b; } 3. 함수 값으로 사용 가능 function myFunction(a, b) { return a * b; } var x = myFunction(4, 5) * 2; 4. 함수는 객체이다 - typeof 연산자는 함수에 대해 'function'을 반환한다 function myFunction(a, b) { return arguments.length; //arguments.length..

배열 : 서로 관련된 수많은 변수들을 묶어 하나의 이름으로 공유하고 일련번호에 의해 변수를 구분하는 방법 생성 1. 리터럴 : 배열에 들어가는 값들을 배열 선언과 함께 할당 2. Array 객체 : 실제 대이터 값이 없는 상태의 배열을 생성하고, 필요에 따라 값을 채워나가는 방식 3. 리터럴 + Array : 2가지를 혼합하여 하나의 문장으로 정의 //리터럴 var fruits = ["apple", "banana", "orange", "pear"]; //Array 객체 var friends = new Array(); //새로운 객체 생성 friends[1] = "홍길동"; friends[2] = "신사임당"; friends[3] = "이순신"; //리터럴 + Array var colors = new Ar..

자료형 : 프로그래밍 언어에서 조작할 수 있는 데이터의 유형 숫자형 : 정수나 실수 문자열형 : 문자열 부울형 : 참 혹은 거짓 (true or false) 심볼형 : 유일하고 변경 불가능한 기본 값 객체형 : 객체를 정의 배열형 : 값들의 집합체 함수 : 실행 가능한 코드의 집합체 undefined : 값이 정해지지 않은 상태 null : 값이 없음 (공백) // 숫자형 var num1 = 123; // 정수 var num2 = 123.45; // 실수 // 문자열형 var str1 = "Hello world"; // 큰따옴표 var str2 = 'Hello world'; // 작은 따옴표 var str3 = String("Hello world"); // String() 함수 사용 var str4 = ..

Angular에 부트스트랩을 사용하는 방법은 여러가지가 있지만, 간단하게 파일 경로만 설정해서 가져오는 방법을 써보자! 1. 디자인을 골라와서 파일을 저장 2. 프로젝트 생성 (자세한 방법은 아래 링크에) http://cho-coding.tistory.com/134 [ANGULAR] BASIC THINGS 1. node.js 설치 2. cmd 창 열기 설치한 node 버전 확인 - node -v Angular CLI 설치 - npm install -g @angular/cli #예시 프로젝트 : https://github.com/iamshaunjp/angular-2-playlist 원하는 디렉터리로.. cho-coding.tistory.com 3. 프로젝트를 생성하면 위와 같이 기본적으로 생기는 파일이 있..

Firebase https://console.firebase.google.com/ 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com 1. 프로젝트 생성 - 프로젝트 추가 - 프로젝트 이름 : connect - 프로젝트 ID : 자동생성된다 - 애널리틱스 및 청구지역 : 대한민국 - 컨트롤러 간 약관에 동의 - 프로젝트 만들기! 생성 완료! - 웹 앱에 Firebase 추가 클릭 - 여기서 var config 안에 내용만 복사 Angular 1. 프로젝트 생성 (자세한 방법은 아래 링크에) http://cho-coding.tistory.com/134 [ANGULAR] BASIC THINGS 1. node.js 설치 2. ..

1. node.js 설치 2. cmd 창 열기 설치한 node 버전 확인 - node -v Angular CLI 설치 - npm install -g @angular/cli #예시 프로젝트 : https://github.com/iamshaunjp/angular-2-playlist iamshaunjp/angular-2-playlist Assets and files to follow along with The Net Ninja Angular 2 playlist on YouTube - iamshaunjp/angular-2-playlist github.com 원하는 디렉터리로 이동 후 프로젝트 파일 생성 - ng new [파일이름] 서버 열기 (생성한 폴더 디렉터리 이동) - ng serve - http://lo..