Muscardinus

1. Regular function call (일반 함수 실행 방식) 위 코드의 결과 값은 15이다 this가 실행되는 곳은 맨 마지막 줄의 printAge 함수이다. 특별한 것 없이 함수 이름 만을 이용하여 실행하는 경우, 즉 일반 함수 실행 방식에서는 해당 함수의 this 값은 Global Object 이다. 브라우저에서는 window 객체이다. Chrome Console 창 사용 1탄에 있었던 코드를 다시 보자 (출력 값: 15) this가 사용되는 함수는 muscardinus라는 객체의 printAge 라는 속성으로 할당되어 있다. 하지만 항상 기억해야할것! 함수의 선언이나 할당은 this의 값과 무관하다 해당 함수의 실행되는 부분은 맨 마지막 줄이고 일반 함수 호출 방식으로 실행된다. 그렇기에 ..

JavaScript를 하는 많은 개발자들이 가장 두려워하는 파트이다. 그것은 바로 "This"! 실제로 현업에 오랫동안 종사하신 개발자들 중에도 "This"에 관하여 제대로 알 지 못하는 사람들이 많다는 것을 얼핏 들은 적이 있다. 하지만 본 개발자 '는 모든 것을 알지는 못 하더라도 아는 것 만큼은 제.대.로 아는 것을 추구하기에 용기 내어 이 글을 작성한다. (아직 배워가는 과정이므로 틀린 것이 있다면 꼭 댓글을 달아주시기를 부탁합니다!) 자 이제 시작해보자 JS의 모든 함수(arrow function 제외) 내부에서는 별도의 변수 선언 없이 this keyword를 사용할 수 있다 (keyword라 하면, JS에 내장된 명령어이다) (주의!!) function 키워드를 이용해 생성한 일반 함수와는 ..

State state는 말 그대로 상태를 뜻 한다. Component 내부에서 가지고 있는 Component의 상태값이다 state는 화면에 보여줄 Component의 상태를 지니고 있는 객체이다 state는 Component 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다 State 객체 Class Component state import React from 'react'; class State extends React.Component { constructor() { super(); this.state = { color: 'red' }; } render() { return ( Class Component | State ); } } export default State; state를 ..

Why Router? SPA (Single Page Application) SPA는 Page가 한 개인 Application이다 한 개의 웹페이지(html) 안에서 여러 개의 페이지를 보여주는 방법을 위해서 Router를 사용한다 Routing Routing이란 다른 경로(주소)에 따라 다른 View(화면)을 보여주는 것 이다 React 자체에는 이러한 기능이 내장되어 있지 않다 ----> React가 framework이 아닌 Library인 이유 중 하나 React-router는 React의 라우팅 기능을 위해 가장 많이 사용되는 Library이다 React Router Example Routes.component.jsx import React from 'react'; import { BrowserRo..

Component Component: 재활용 가능한 UI 구성 단위 특징 1. 재활용하여 사용할 수 있다 2. 코드 유지보수에 좋다 3. 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다 4. 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트) Class vs Functional Component 컴포넌트는 두 가지 방식으로 선언할 수 있다 Class Component import React from 'react' class Component extends React.Component { render() { return ( This is Class Component! ) } } export default Component 특징 render 함수 가 꼭 있어야 하..

대부분의 인터넷 사용자들은 원하는 정보를 취득하기 위해 Google/ Naver 와 같은 검색사이트를 이용한다. 웹사이트는 검색엔진에서의 노출은 중요하다. 당연한 것이 검색엔진에 노출되지 않는 웹사이트에는 접속하는 이도 없기 때문이다. (마치 나의 블로그 처럼.....) SEO(검색엔진 최적화: Search Engine Optimization) 같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하여 알 맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다. 검색엔진은 Robot이라는 프로그램을 이요해 매일 전세계의 웹사이트 정보를 수집한다. 이것을 클롤링이라하며 검색엔진의 크롤러가 이를 수행한다. 그리고 검색 사이트..

float 요소 none(기본값)/ left/ right float로 인하여 부모가 잃은 height는 overflow:hidden으로 보완

인라인 요소 한줄에 여러 개 배치 기본 너비값은 컨텐츠의 너비값 크기값을 가질 수 없음 상하 margin은 가질 수 없음 좌우는 가능 블록 요소 한줄에 한개만 배치 기본 너비값은 전체(부모 width) 크기값을 가질 수 있음 상하좌우 margin가질 수 있음 인라인 블록 요소 한줄에 여러 개 배치 기본 너비값은 컨텐츠의 너비값 크기값을 가질 수 있음 상하좌우 margin은 가질 수 있음