HTML+CSS+JAVASCRIPT

https://ko.legacy.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 위와같은 react 자습서를 기반으로 작성하였습니다. 1. 함수 호출 function formatName(user){ return user.firstName +' ' + user.lastName; } const user = { firstName:'Harry', lastName:'Potter' } const element = ( Hello, {formatName(user)}; } formatName에서 user을 받아와, user.firstName 과 l..

1. Component : 작은 컴포넌트들이 모여 큰 컴포넌트를 만들고, 큰 컴포넌트들이 페이지들을 만든다. React component : function으로 생각하면 된다. (Props) 속성들을 입력 받아, 그에 맞는 react element를 만든다. 2. Props (Property: 속성) : React component의 속성을 의미한다. 붕어빵틀에서 들어가는 재료 -> 컴포넌트에 전달할 다양한 정보를 담고 있는 js 객체 네개의 틀이 비슷하고, 형태가 비슷하지만 각각 다른 이미지와 텍스트를 사용한걸 보면, 각각의 props를 사용한 걸로 알 수 있다. 3. Property 특징 및 적용 특징: Read only -> 값을 변경 할 수 없다 //Pure Code function sum(a,b..

1. React의 Elements의 정의 -> Elements are the smallest building blocks of Reack apps. (리액트 앱을 구성하는 가장 작은 블록들) 리액트의 element는 dom element의 가상 형태를 의미한다 -> react elements는 javascript 객체 형태로 존재한다. //html component로 들어가있는 code { type: 'button', props:{ className: 'bg-green', children:{ type: 'b', props:{ children: 'Hello, element!' } } } } html 태그 이름이 문자열로 들어가는 경우, element는 해당 태그 이름을 가진 DOM노드를 나타내고, prop..

사용자 interface를 위한, React : javascript library - library : 제어권한이 개발자들한테 있다. JSX: A Syntex Exentansion of JavaScript const element = Hello, world js + html 코드가 합쳐져있는 jsx 코드이다. -> XML & HTML 코드를 javascript 로 바꾸는 과정에서 JSX를 사용한다. //JSX 사용한 코드 const element = { kakao Cloud School } //JSX 사용하지 않은 코드 const elemnet = React.createElement( 'h1', { className : 'kakao'}, 'kakao Cloud School' ) react element ..

1. 객체의 정의 JS에는 8가지 자료형이 있다. 이중에 7가지는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 원시형(primitive type)이라 부른다. 다른 1가지는 다양한 데이터를 담을 수 있다. 이를 객체형이라 부른다. 객체형? 키로 구분된 데이터 집합/ 복잡한 개체 (entity)를 저장할 수 있다. 중괄호를 이용해 만들 수 있고, 중괄호 안에 key: value 쌍으로 구성된 property를 여러개 넣을 수 있다. {key(문자형): value(모든 자료형),....,key:value} 2. 객체의 선언 let user = new Object(); // java에서 사용하던 객체 생성자 문법 let user = {}; // 객체 리터럴 문법 {중괄호}를 이용해 객체 선언 -> ..

1. 스크립트 후 language 속성 type 속성 외부 스크립트 - 외부 자바스크립트 파일을 가져올 수 있건, 외부 URL을 속성으로 가져올 수 있다. ! 복수의 스크립트를 삽입 할 수 있다 2. 변수 let const - java와 동일하게 한번 값 할당 시, 바꿀 수 없는 상수를 정의 var 등을 이용하여 선언할 수 있다. 3. browser과의 상호작용을 위한 함수 (1) alert() : 확인(OK)를 누를 때까지 메시지를 보여주는 창을 출력한다. (2) prompt(): 브라우저에서 제공하는 prompt 함수는 두개의 인수를 받는다. -> 함수 실행시 텍스트 메세지와 입력필드, 확인 및 취소 버튼이 있는 모달 창을 출력 let age = prompt('나이를 입력해주세요.',[default]..

Java Script 란? - 페이지에 새로운 html 추가 & html/css 수정하기 - User의 행동에 반응 - Network-> 원격 서버에 요청, 파일 다운로드, 업로드(Ajax/comet 사용) - 쿠키 가져오거나 설정하기, 사용자에게 질문&메시지 출력 - Client에 데이터 저장하기(local storeage) ‼️ JS 주의점 ‼️ - disk 저장된 임의의 파일 r/w 불가. 복사&실행 시 제약 ( os가 지원하는 기능을 하지못한다) - 태그를 통해서만 접근이 가능하다 - domain/protocol/port 가 다르면 접근 불가 -> 사용자의 보안을 위해, 동일 출처 정책 (same origin policy) 에 따라 제한 JS만의 강점 - html/css와 완전 통합 가능 - 간..

1. HTML 의 기본 구조 1번: 현재 문서가 HTML5 언어로 작성한 웹 문서라는 것을 의미한다. 2번: head는 문서와 관련된 정보, 문서에 사용할 외부 파일 링크 등을 표시해준다. (웹 상에서는 보이지 않는다!) -> 을 이용하여 표시해준다. 3번: 한글로 표시하기 위하여, UTF-8 세트를 사용한다. 4번: ... 로 문서 제목을 표시해준다. 5번: 실제 브라우저에 표시될 내용을 입력한다. 2. HTML 시멘틱 태그 Semantic Tag란? -> 태그를 이용하여 구조 및 역할, 내용 등을 정확하게 알 수 있도록 한다. .. : 본문영역 .. :헤더 영역 ..: 푸터 영역 .. : 내비게이션 영역 ..: 독립적인 컨텐츠 영역 .. : 컨텐츠 분할 영역 ..: 사이드바 영역 .. : 여러 소스를..