본문 바로가기
3. React Event Handling Event 웹 브라우저에서 DOM 요소와 상호작용하는 것을 이벤트라고 합니다. 예를들어 DOM 요소를 클릭하면 onClick 이벤트를 정의해 상호작용을 하게 됩니다. 리액트 이벤트 시스템 주의사항 이벤트 이름은 카멜 표기법으로 작성 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 DOM 요소에만 이벤트 설정할 수 있다 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 단지 props를 전달해 줄 뿐. 클래스 컴포넌트의 이벤트 핸들링 - state와 메서드 활용 1. 이벤트 발생시 생성되는 e객체를 이용한 이벤트 핸들링 import React, { Component } from 'react'; class EventPractice extends Component .. 2020. 10. 25.
2. React Component 컴포넌트 종류 클래스형 컴포넌트 state 기능 사용가능 라이프사이클 기능 사용가능 임의의 메서드 정의 가능 constructor 작성시 반드시 super(props); 메서드를 호출하여 리액트의 Component 클래스가 지닌 생성자를 호출 render 함수가 반드시 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다 함수형 컴포넌트 클래스형 컴포넌트 보다 메모리 소모가 적음 state, 라이프사이클 대신 hooks 사용 Props properties의 줄인 표현으로 컴포넌트 속성을 읽을 때 사용하는 요소 해당 컴포넌트의 부모 컴포넌트에서 설정하며 컴포넌트 자신은 해당 props를 "읽기전용"으로 사용 defaultProps : 부모컴포넌트에서 따로 props 값을 설정하지 않을 때 보여지.. 2020. 10. 24.
JS - scope, hoisting, closure 자바스크립트 엔진 : compilation의 시작부터 끝까지 전 과정과 자바스크립트의 실행을 책임진다 자브스크립트 컴파일러 : 파싱과 코드 생성의 모든 일을 한다 자바스크립트 compilation 자바스크립트는 인터프리터 언어로 분류되나 컴파일러 언어처럼 자바스크립트 엔진이 소스코드를 다음과 같은 3단계의 compilation 과정을 거친 tokenizing (= lexing) : 문자열을 토큰(의미있는 조각)으로 만드는 과정 parsing : 토큰 배열을 문법구조를 반영한 중첩 원소를 갖는 트리 (AST, abstract syntax tree)로 변환 code-generatoin : AST를 실행 코드로 변환 스코프 변수에 값을 대입하거나 변수의 값을 얻어오기 위해 변수를 검색해야 하는데 어디서 어떻게.. 2020. 10. 24.
Developer Tools Developer Tools이란? 웹 개발하는데 있어서 페이지 확인 및 즉각적인 수정을 할 수 있도록 해주는 개발 도구. 크롬, 파이어폭스, 등 여러 브라우저에 내장되어 있다. https://developers.google.com/web/tools/chrome-devtools 1. Elements panel 정의 Elements panel : 렌더링된 페이지의 html과 html element의 CSS를 확인할 수 있는 panel Elements panel의 style tab을 이용하여 element에 적용된 스타일을 검사할 수 있을 뿐만 아니라 수정도 가능 ctrl + shift + c : 특정엘리멘트 선택 Element tab > style부분의 순서가 의미하는 것 적용된 css 스타일들의 우선순위 .. 2020. 10. 24.
Semantic Web과 Semantic Tag 1. Semantic Web 기존의 웹 기존의 웹에서는 데이터를 검색할때 키워드 검색을 통한 접근이 이루어진다. 이러한 방식은 불필요한 정보 발생을 야기하며 컴퓨터가 필요한 정보를 추출, 해석할 방법이 없어 사용자가 직접 개입해야되는 문제가 있다. Semantic Web 컴퓨터가 정보, 리소스, 정보-리소스 관계등을 이해할 수 있도록 이들을 표현함으써 컴퓨터가 정보자원처리, 데이터통합 및 재사용을 스스로 수행할 수 있도록한다. 2. Semantic Tag developer 뿐만아니라 browser도 해당 HTML element의 의미를 이해할 수 있는 tag. 태그는 HTML 문서 내에서 한 개의 Block을 만드는 태그로 와 같이 레이아웃을 짜거나 구조를 만들때 주로 사용된다. 하지만 이런 태그는 br.. 2020. 10. 24.
CSS 레이아웃 차례 CSS Layout position property display property float property Flex Grid 1. CSS Layout. - HTML elements들을 페이지 임의 위치에 자유롭게 배치하는 것을 CSS Layout이라고 한다. - CSS Layout을 구현하기위해 다음과 같은 방법들이 존재한다. position property display property float property Flexbox, Grid, etc 2. Position property - position property는 HTML element의 포지셔닝되는 방법을 설정합니다 static - 디폴트값, element들은 왼쪽에서 오른쪽, 위에서 아래로 차례대로 생성됩니다 relative .posi.. 2020. 10. 24.

티스토리툴바