전체 글44 HTML정리 기본 개념 정리도 할 겸 다시 알아보자 HTML은 HyperTextMarkupLanguage 이다. 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어이다. 정보를 쉽게 표현하기 위해 구조화한 것이다. 기본구조 html head - meta정보를 가지고 있다 body - 실제로 보이는 부분이다. 계층 구조를 갖고 있다. 시멘틱 태그 좀 더 구분되기 쉽게 태그가 그 의미를 갖고자 하게 하기 위한 태그 태그 의 구조로 되어있다. 태그는 상당히 많으며 https://www.w3schools.com/tags/에서 확인할 수 있다. id는 고유의 값이다. class는 중복해서 사용 가능하다 기본적인 html 개념정리 2020. 1. 7. 템플릿과 symbol 알아보기 기본형으로 Symbol() 은 자기 자신을 제외한 그 어떤 값과도 다른 유일무이한 값이다. 객체 프로퍼티에 대한 식별자로써 사용된다. Symbol()의 파라미터로 심벌의 설명을 정의할 수 있다. toString()을 통해 심벌의 설명을 확인할 수도 있다. MDN에 더 자세한 설명을 확인할 수 있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol 불러오는 중입니다... 템플릿 리터럴 템플릿 리터럴은 홑 , 쌍따옴표가이닌 ` 을 사용해서 문자열로 만들어준다. 이스케이프를 사용하지않고도 개행이 된다. 또 문자열 더하기로 표현 할수있던 표현식을 더 간결하게 보기쉽게 만들어준다. 2020. 1. 5. 개념과 특징 컴파일 언어는 c, c++, java 등의 언어가 대표적이다. 특징은 소스 코드를 실행기 전에 먼저 기계어로 번역하고 실행한다. 여기서 번역하는 행위를 컴파일이라 하며 컴파일을 수행하는 소프트웨어를 컴파일러라 한다. 이는 컴파일하는 데에는 시간이 걸리지만 실행되는 속도는 빠르다. 인터프리터는 javascript, python, perl 등이 대표적이다. 특징은 한줄마다 기계어로 바로 번역해서 실행한다. 프로그램을 번역해서 실행시키는 소프트웨어를 인터프리터라고 한다. 한 줄씩 번역하며 실행하기에 컴파일 언어보다 처리속도가 느린 점이 있다. 특징 1. 자바스크립트는 인터프리터 언어다. JIT 컴파일러 때문에 실행 속도가 느리지 않다. 2. 프로토타입 기반 언어 3. 함수가 일급 객체이다. 이로 인해 함수를 .. 2020. 1. 5. 리액트 뽀개기 (5) 자식에서 부모로 데이터를 전달하는 방법을 알아보자. //App.js class App extends React.Component { parentState = data => { console.log(data); } render(){ return ( ) } } 위의 코드를 보게 되면 Child에 props로 parentState를 전달한다. 그리고 parentState()는 data를 받아서 console에 출력해준다. 다음 Child 컴포넌트를 보자. import React, { Component } from 'react'; class Child extends Component { state = { name : '' } handleChange = e => { this.setState({ name : e.t.. 2020. 1. 2. 리액트 뽀개기 (4) 라이프 사이클을 알아보자. React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 리액트에서 제공하는 라이프 사이클인데 한글로 되어있으니 어렵지 않게 알아볼 수 있다. 찾아보면 render와 getDerivedStateFromProps는 마운트와 업데이트 모두에 속한다. 라이프 사이클의 함수들은 아래와 같다. (16.3 이상의 버전) //Life.js //마운트 constructor(props) {} static getDerivedStateFromProps(props, state){} componentDidMount(){} UNSAFE_compon.. 2020. 1. 2. 리액트 뽀개기 (3) state를 알아보자. state는 클래스에서만 사용이 가능하다 props와 비슷하지만 컴포넌트에 의해 완전히 제어되며 private속성이다. 일단 함수 컴포넌트에서 클래스 컴포넌트로 조금 수정을 했다. import React from 'react'; import logo from './logo.svg'; import './App.css'; import Clock from './Clock'; class App extends React.Component { render() { return ( ); } } export default App; 그리고 Clock이라는 컴포넌트를 만들었다. import React, { Component } from 'react'; class Clock extends Compone.. 2019. 12. 26. 리액트 뽀개기(2) 저번에는 간단하게 JSX에 대해서 알아봤다. 이번엔 props이다 props는 읽기 전용으로 수정할 수 없다고 한다. 사용해보자. //ex1.js import React from 'react'; class Ex1 extends React.Component { render(){ return 안녕하세요. { this.props.name }님; } } export default Ex1; 간단하게 ex1.js에서 만들었다. 이것을 App.js에서 사용할 것이다. import React from 'react'; import logo from './logo.svg'; import './App.css'; import Ex1 from './ex1'; function App() { return ( ); } export .. 2019. 12. 26. 리액트 뽀개기 (1) 리액트를 설치 하면 hello World를 봐야 할 거 같아 출력해 줬다. 일단 이정도 만 해놓고 react 문서를 조금 읽어보자. react의 사용에 있어서 jsx 문법을 사용해야 한다. 기본적인 정보는 아래에서 확인할 수 있다. Introducing JSX – React A JavaScript library for building user interfaces reactjs.org 기본적으로는 1.) html이 아니며 바스 크립트의 문법 확장 2.) 리액트의 "요소"를 만든다. 3.) 자바스크립트 표현식은 {} 사용 4.) 속성으로 표현식을 포함시킬 때는 "" 사용하지 않는다. 5.) camelCase 사용. 6.) 객체로도 사용. 등 이 있다. 또, css를 표현할 때도 const style = { .. 2019. 12. 26. hello react yarn global add create-react-app 리액트를 사용하려면 node가 필요하다. 나의 os는 window 이므로 window만 사용할 것이다. 물론 vscode를 사용할 것이고 여기서 사용하는 터미널을 사용할 것이다. 기본적으로 나는 sourcetree를 이용해서 git에 올리고 있다. ( 작은 것도 일단 올리고 나면..) 새로운 폴더를 열었다 개인적으로는 studyreact라는 폴더를 만들었다. 새로운 터미널을 열어서 리액트를 시작할 것이다. node.js를 설치했다면 npm이 자동 설치될 것이다. (npm이란 모듈을 패키지로 만들어 관리하는 것이다. 자세한 것은 생략한다.) npm을 이용해서 yarn을 설치해 사용할 것이다. (yarn은 npm보다 안정성과 속도 높기도 하며 권장된.. 2019. 12. 26. 이전 1 2 3 4 5 다음
