이다닷

event state props var _title, _desc = null; if(this.state.mode === 'welcome') { _title = this.state.welcome.title; _desc = this.state.welcome.desc; } else if (this.state.mode === 'read') { _title = this.state.contents[0].title; _desc = this.state.contents[0].desc; } ➡️render 함수 내에서 if 문을 사용하여 event를 발생 자동 event 설치 {this.state.subject.title} ➡️우리가 이런식으로 event를 주고, a태그를 클릭하면, a 태그의 특성상 페이지가 reroad..

state와 props의 차이점 Props component를 사용하는 사용자는 props를 문법적으로 제공받아서 component를 조작할 수 있게 된다. 📌따라서 props는 component 사용자에게 중요한 정보이다. State 📌반대로 state는 사용자가 몰라야하는 내부적으로 사용되는 것들을 모아놓은 것이다. ➡️➡️결과적으로 우리가 사용하는 component가 좋은 부품이 되기 위해서는 component를 사용하는 외부의 props와 그 props에 따라서 그 컴포넌트를 실제로 구현하는 내부의 state라는 정보가 철저하게 분리되어야 한다. constructor(props){ super(props);{ } } ➡️render() 함수 앞에 나오면서 props의 값을 초기화 해준다. const..

각 component를 각각 파일로 분리하는 방법 ➡️분리한 파일의 맨 위에는 항상 Component라는 클래스를 로딩해주는 코드를 작성해야 한다. ⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️ import React, { Component } from 'react'; ➡️component를 분리하기 위해서 만든 파일을 가져왔을때 외부에서 어떤 내용을 사용할 수 있게 할것인지 정해준다. 📌export default 클래스 이름; ex) export default TOC; ➡️각 component들을 불러와서 사용할 js 파일에서 각 component 파일을 가져와서 사용하려면 아래의 코드를 추가해준다. import 파일 이름 from "파일 경로"; ex) import TOC from "./componen..

props 이용법 {this.props.값의 이름} ex) {this.props.name} 결과 코드 import React, { Component } from 'react'; import './App.css'; class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); } } class TOC extends Component { render() { return ( HTML CSS Javascript ); } } class Content extends Component { render() { return ( {this.props.title} {this.props.desc} ); } } class A..

본래 HTML 코드 WEB world wide web! HTML CSS Javascript HTML HTML is HyperText Markup Language. 컴포넌트를 만드는 방법 App.js 파일 내용 ➡️react라는 class 안에 있는 component를 가져와서 새로운 App라는 클래스에 상속해준다는 의미. ➡️그리고 그 component라는 class에는 render이라는 메소드를 가지고 있다. import React, { Component } from 'react'; import './App.css'; class App extends Component { render(){ return ( Hello, React!! ); } } export default App; HTML 코드를 reac..

순서도 프로그래밍에서는 절차가 매우 중요하다. 코드를 에디터에 입력하기 전에 내가 만들 프로그램이 어떤 절차로 돌아갈지 미리 생각해야 한다. 여기에서는 먼저 끝말잇기가 어떤 식으로 진행되는지 말이나 그림으로 표현해보자. 끝말잇기 게임으로 순서도 작성해보기 1. 세 명의 참가자가 있다고 가정해보기(A, B, C) 2. A가 '자바 스크립트'라는 제시어를 말한다. 3. B가 '트집'이라고 말한다. 4. C가 '집합'이라고 말한다. 5. 다시 A가 '합체'라고 말한다. 6. 무한 반복된다. 프로그래밍적으로 이 순서도를 보았을때는 많은 오류가 있다. 오류 1. 참가자가 3명이 아닐 수도있다. 오류 2. 모든 참가자가 답을 말하는 것이 아니다. 프로그래밍적으로 순서도를 적을때 생각해 보아야 할 규칙 📌 1. 프로..

HTTP HTTP(HyperText Transfer Protocol)는 웹 브라우저와 웹 서버가 데이터를 주고받을 수 있게 디자인 된 통신 규약이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 이 규약을 암호화하여 보안을 확보한 규약은 HTTPS라 한다. => 데이터를 주고 받는다? HTML, 이미지, 영상, 음성 파일 등을 주고 받는다! HTTP 통신 HTTP에서는 클라이언트가 서버에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환한다. 서버는 응답 메시지를 반환한 후에 초기 상태로 돌아간다. 이러한 특징으로 인해 HTTP를 stateless 규약이라고도 한다. HTTP 요청 HTTP 요청 메시지는 요청 행, 요청 헤더, 메시지 본문으로 구성된다. 요청 행 : 요청 메소드, ..

객체 리터럴 객체를 구성하는 속성의 이름과 실제 값을 한 쌍으로 묶어 표현하는 '객체 리터럴'을 이용하면 객체를 생성할 수 있다. 이때 속성의 이름을 키(key), 속성의 실제 값을 밸류(value)라고 한다. const cat = { name : "국희", town : "부천" } => name과 town은 키, "국희"와 "부천"은 밸류! 📌키는 중복될 수 없다. 그러나 밸류는 같은 것이 있어도 상관 없다. 속성 참조하기 객체 안의 속성 값을 참조할 때에는 도트(.) 연산자 또는 대괄호([]) 연산자를 사용할 수 있다. // 도트 연산자 사용 console.log(cat.town) cat.scratch() // 대괄호 연산자 사용 console.log(cat['name']) cat['eat']() 스..

Element.classList 웹 요소로부터 클래스 콜렉션을 반환하는 읽기 전용 속성이다. 사용방법 const 이름 = document.querySelector('이름') 메소드 종류 메소드 기능 사용 예 add 지정한 클래스 값 추가 add("new_class") remove 지정한 클래스 값 제거 remove("old_class") item 인덱스를 이용해 클래스 값 반환 item(1) toggle 클래스 값 토글링(=있으면 제거, 없으면 생성) toggle("some_value") contains 지정한 클래스 값 존재 여부 확인 contains("is_contains") replace 기존 클래스를 새 클래스로 대체 replace("old", "new") 배열의 개념과 사용법 배열이란? 배열은 ..

내장 생성자 (= 빌트인 객체) 처음부터 사용할 수 있는 기본 객체 및 생성자를 제공한다. Date Date는 날짜와 시간을 처리하는 다양한 메소드가 정의된 내장 생성자이다. Date를 통한 객체생성은 다음과 같은 형태로 이루어진다. const now = new Date() // 코드가 실행되는 시점의 날짜와 시간 정보를 담은 객체 const then = new Date(2005, 5, 10) // 2005년 6월 10일의 날짜와 시간 정보를 담은 객체 Date 객체 주요 메소드 메소드 기능 특이사항 getFullYear 연도를 뜻하는 숫자 값 반환 getMonth 월을 뜻하는 숫자 값 반환 0부터 시작하므로 1월이면 0 반환 getDate 날짜를 뜻하는 숫자 값 반환 getDay 요일을 뜻하는 숫자 값..