키다리 개발자

브라우저 콘솔을 켜고, this를 치면 window가 나옵니다. 함수 내에 넣어서 사용해도 this는 window 입니다. this는 기본적으로 window라는 사실을 알 수 있습니다. 객체 메서드 a 안의 this는 객체를 가리키고 있습니다. 이것은 객체의 메서드를 호출할때 this를 내부적으로 바꿔주기 때문입니다. 호출하는 함수가 객체의 메서드인지 그냥 함수인지가 중요한데, a2는 object.a를 꺼내온 것이기 때문에 더이상 object의 메서드가 아닙니다. 그래서 window가 출력됩니다. 또한 this를 내부적으로 바꿔주기 위해 생성자 함수(=함수)를 만들어 this를 바꾸어 주어 사용할 수 있습니다. 생성자 함수를 만들때 new로 호출을 해야하는데 그렇지 않으면 기본값인 window를 가르키기..

CSS2와 CSS3의 차이점 기본적인 부분은 크게 바뀌지 않았고, 코딩하는 방법도 기존 그대로이다. 이전 CSS2와 대표적인 차이점은 이미지를 사용하지 않고 그라데이션 등의 표현을 할 수 있게 된 것이 대표적인 차이점으로 표현력이 다양해졌다는 점이다. CSS2에서는 모서리를 둥글게 표현하려면 모서리가 둥글게 처리된 이미지를 준비해야 했지만, 이제는 CSS3만으로도 구현이 가능하게 되었다 . 그외 그림자나 그라데이션을 추가할 수 있으며, 표현력이 다양해지면서 편리하 기능도 크게 늘어났다. 또한, 세분화해서 관리하려는 의도가 있어, 셀렉터나 글꼴, 텍스트 등 다양한 기능이 모듈화 되어 모듈별로 개발이 진행되고 있다. 즉, CSS3는 CSS2와 같은 1가지 사양을 가리키는 명칭이 아니라, 모든 모듈의 대표적인..

HTML5 HTML : 을 사용하여 영역을 구분한다. CSS : 자바스크립트가 담당하던 처리의 일부를 HTML 태그 속성에서 처리한다. JavaScript : HTML5, CSS에서 처리할 수 없는 기능들을 담당하며, 캔버스(Canvas)에서 사용하면 게임 작성도 가능하다. HTML4 HTML : 특정 태그 를 사용하여 영역을 구분한다. CSS : HTML의 태그를 꾸며준다. JavaScript : 데이터를 처리하거나 서버에 요청하는 일을 한다. HTML5에서 추가 된 태그 구조적 태그 - 구역을 나누는 블록 요소 대신 대체 태그 header : 사이트의 소개나 네비게이션 등을 표시 nav : 사이트의 내비게이션 항목을 표시 article : 독립적인 콘텐츠를 표시, 뉴스기사, 블로그의 글 section..

객체 지향 프로그래밍이란? (OOP) 객체 지향 프로그래밍은 현실 세계를 컴퓨터 프로그래밍으로 사고를 하는 패러다임중 하나이다. 프로그래밍에서 필요한 데이터를 추상화하여 상태(state)와 행위(behave)를 가진 객체를 만들고 그 객체들 간의 상호작용을 통하여 프로그래밍 하는 방법이다. 즉 인간 중심적 프로그래밍이라고 볼 수 있다. 장점 ▶코드 재사용 용이 자주 사용되는 라이브러리를 만들어 두면 혹은 남이 만든 라이브러리를 가져와서 이용할 수 있고 상속을 통해 확장해서 사용할 수 있다. ▶유지보수가 쉬움 (중복 소스 관리 및 디버그) 절차 지향 프로그래밍에서는 코드를 수정해야할 때 일일이 찾아 수정해야하는 반면 객체 지향 프로그래밍에서는 수정해야 할 부분이 클래스 내부에 멤버 변수 혹은 메서드로 있기..

SPA SPA는 Single Page Application의 약어입니다. 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다. 요즘 웹에서는 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때마다 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생 할 수 있습니다. 따라서 기존 html의 페이지 전환이 일어날 때마다 바뀌지 않는 부분까지 서버에서 새로 불러와서 보여 주어야 한다면 상당히 비효율 적입니다. 그래서 리액트를 사용하여 필요한 부분만 자바스크립트를 사용하여 업데이트해줍니다. 만약에 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 불러와 애플리케이션으로 사용할 수도 있습니다. Route 다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 합니다. 리액트 라우팅..

CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술입니다. 확장자는 .module.css 파일로 저장하기만 하면 CSS Module이 적용됩니다. className이 하이픈(-)이 포함되어 있는 경우 1 2 3 4 5 6 7 8 9 10 11 12 import React from 'react' import style from './style.module.css'; const Home = () => { return( 하이픈 포함되어 배열로 스타일링 ); }; export default Home; CSS Module이 적용된 스타일 파일을 불러오면 객체를 하나 전달받게 되는데 CSS Module에서 ..

React에서 모든 컴포넌트에 state가 있어야 하는 것은 아니다. 어떤 컴포넌트는 state정보가 없는 stateless 컴포넌트도 있을 수 있다. state가 없을때에도 class형 컴포넌트를 사용해도 된다. 하지만 React에서 함수형 컴포넌트에 hooks 기술이 도입된 이후에는 class형 컴포넌트에서만 사용된 state를 더욱 간결하게 작성할 수 있게 되었다. class형 컴포넌트 위 사진상, class형 컴포넌트를 사용하였지만 class컴포넌트에서만 사용할 수 있는 state와 LifeCycle을 사용하지 않고 오로지 화면에 보여지는 return을 위해서만 존재한다. function 컴포넌트 따라서, 이와 같이 화면에 보이기만 할 때에는 return만 존재하는 함수형 컴포넌트가 코드상 가독성..

상태 State 개념과 React Hooks를 소개하고, useState와 useEffect를 작성하는 방법을 알아보겠습니다. State React에서 핵심 개념 2가지 중 하나인 State 상태 개념은 컴포넌트 자체적으로 보유하고 있는 데이터입니다. 또 다른 하나인 props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식입니다. React Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 랜더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 다양한 작업을 할 수 있게 해 줍니다. React가 지원하는 함수 중 use로 시작하는 것으로 통칭한 명칭입니다. useState useEffect useSta..