본문 바로가기

TIL62

Code States 25일차 - 객체 지향 JavaScript 클래스와 인스턴스 객체 지향 프로그래밍 객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍이다. 사실, 이미 자바스크립트에는 "객체"라는 개념이 객체 지향 프로그램과 무관하게 이미 존재한다. 따라서 여기서는 용어를 잘 구분하는 것이 중요하다. 앞으로, 그냥 객체가 아닌 "청사진"을 바탕으로 한 객체는 인스턴스 객체(instance object), 줄여서 인스턴스(instance)라고 부른다. 청사진은 클래스(class)라고 부른다. 객체를 어떤 식으로 만드는지 살펴보면, 그냥 일반적인 함수를 정의하듯 만든다. 이때, 함수를 이용하는 방법이 조금 다르다. 그냥 실행하는 것이 아니고 new 키워드를 써서 만든다. 이.. 2021. 8. 23.
Code States 20일차 - React State & Props Props Props의 특징 컴포넌트의 속성(property)을 의미한다. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반한다. 따라서, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다. 객체 형태이다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다. props는 읽기 전용이다. props는.. 2021. 8. 13.
Code States 19일차 - React Router SPA & Routing SPA는 하나의 페이지를 갖고 있지만 사실 한 종류의 화면만 사용하지 않는다. 예를 들어 Twittler 와 같은 SPA를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 더 필요할 수 있다. 또한 이 화면에 따라 "주소"도 달라진다. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 한다. 하지만 React 자체에는 이 기능이 내장되어 있지않아서 직접 주소마다 다른 뷰를 보여줘야 한다. React SPA에서는 라우팅을 위해 React Router 라는 라이브러리를 가장 많이 사용한다. React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다. 라우터 역할을 하는 Br.. 2021. 8. 12.
Code States 19일차 - React SPA SPA의 등장 배경과 개념 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야 한다. 전통적인 웹사이트는 페이지 전체를 로딩하고, SPA는 Menu와 Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않는다. 전통적인 웹사이트에서는 이와 같이 "페이지 전체를 불러오는 행위"를 보통 깜빡인다고 표현한다. 전통적인 웹사이트의 한계와 단점 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 됐다. 하지만 이때마다 Header와 Navigation Bar 등과 같이 중복되는 요소들을 매번 불러 오는 것이 서버와의 불필요한 트래픽.. 2021. 8. 12.
Code States 18일차 - React 기초 JSX란 무엇인가 JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다. React에서 UI를 구성할 때사용하는 문법으로 JavaScript를 확장한 문법이다. 이 문법을 이용해서 React 엘리먼트를 만들 수 있다. JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다. 그래서 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다. 이때 이용하는 것이 바로 "Babel"이다. Babel은 JSX를 브라우저가 이해할 수있는 JavaScript로 컴파일 한다. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다. DOM 그리고 React JSX React에서는 DOM과 다.. 2021. 8. 11.
Code States 17일차 - 고차함수 일급객체 컴퓨터 프로그래밍 언어 디자인에서, 일급 객체(first-class object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. 출처: 일급객체 - 위키백과 일급객체의 특징 변수에 할당(assignment) 할 수 있다. 다른 함수의 인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다. 이는 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 걸 의미한다. 1. 변수에 할당(a.. 2021. 8. 10.

티스토리툴바