분류 전체보기

리액트 - 컴포넌트

본 글은 를 참고해 공부한 내용을 정리한 글입니다. 컴포넌트 일반적으로 컴포넌트는 자바의 AWT, Swing처럼 화면 UI를 처리하는 클래스를 의미한다. 하지만 리액트에서는 리액트 프레임워크가 제공하는 컴포넌트와 사용자가 정의하는 컴포넌트 2가지를 포함하는 개념이다. 리액트 컴포넌트 리액트 컴포넌트는 리액트 프레임워크에서 제공하는 것으로 HTML5의 각 태그에 대응된다. const h1 = Hello world! HTML 태그처럼 보이지만 JSX문으로, h1 컴포넌트이다. h1 컴포넌트를 React.createElement로 생성하면 const h1 = React.createElement('h1', null,'Hello world!') 컴포넌트 타입을 위와 같이 입력해주어야 한다. 이는 컴포넌트를 일일이..

리액트 - JSX 구문

본 글은 를 참고해 공부한 내용을 정리한 글입니다. JSX 리액트에서 가상 DOM 객체를 만들어주는 함수는 React.createElement이다. 이를 이용해서 go to google 위의 HTML 코드를 리액트 방식으로 구현하면 아래와 같다. const CE = React.createElement const rootVirtualDOM = CE('ul', null, [ CE('li', null, [ CE('a', {href: 'http://www.google.com', target: ' _blank'}, [ CE('p', null, 'go to google') ]) ]) ]) 매번 React.createElement를 호출해야 하는 것도 번거롭고, HTML 코드에 비해 요소 간의 관계를 파악하기 힘들다..

리액트 동작 원리 - 가상 DOM

본 글은 를 참고해 공부한 내용을 정리한 글입니다. react와 react-dom 패키지 react react는 공통으로 사용하는 기능을 제공하는 패키지이다. 컴포넌트, JSX, 리액트 훅 등 렌더러에 무관한 기능이 포함된다. react-dom react-dom 패키지는 앱이 동작하는 환경에 특화된 기능을 제공하는 패키지이다. react-dom/client, react-dom/server, react-native 등이 있다. 문서 객체 모델 브라우저는 HTML 형식의 문자열을 분석해 특정한 자바스크립트 객체 조합으로 바꾼다. 이 객체는 자신의 특징에 맞는 인터페이스를 구현하는데, 이를 총칭해 문서 객체 모델(Document Object Model, DOM)이라 한다. document.createEleme..

윈도우는 필기 앱이 없다고? 장점만 뽑아서 극복하자! - 원노트, inkodo, drawboardPDF 활용법

노트북도 되고 태블릿도 되는 매력에 혹해서 2 in 1 노트북을 구매하셨다면 쓸만한 노트 필기 앱을 찾으려고 고생 좀 하셨을 겁니다. 대부분은 필기량이 많은 학생 분일 것입니다. 하지만 윈도우엔 "이거다! 유레카!"를 외칠만 한 필기 프로그램은 없다고 생각합니다. 저마다 장점, 단점이 명확해서 선뜻 하나만 골라 사용하기가 어렵습니다. 한 달동안 2 in 1 노트북을 사용하면서 태블릿 기능을 활용하려고 애를 쓰다가 내린 결론은, "여러 프로그램의 장점만 살려서 활용하자!" 였습니다. A 기능이 필요할 때는 A 프로그램을, B 기능이 필요할 때는 B 프로그램을 사용하는 것입니다. 저는 '윈도우 노트 필기 프로그램'이라고 검색하면 1, 2, 3등으로 나오는 세 가지 프로그램을 활용하고 있습니다. 원노트(One..

비주얼 스튜디오에서 여러 프로젝트 한 파일에 만들기

C, C++을 사용하는 교재나 강의를 공부하다보면 예제를 따라하고, 문제를 풀게 된다. 프로그램 하나를 다 쓰고 나서 다음 파일로 넘어갈 때 코드를 다 지우고 같은 파일에 다음 코드를 작성하거나, 새로운 프로젝트를 만들어서 새 파일에 코딩하는 방법이 있다. 그런데 비주얼 스튜디오에서 코드를 작성하려면 솔루션을 만들고 내부에 프로젝트를 만들어야 한다. 서로 전혀 다른 두 프로그램을 저렇게 따로 작성하고 싶다. 하지만 이런 형태로 프로젝트를 구성하면 이렇게 main 함수가 이미 정의되었다는 오류가 발생한다. 해결하는 방법은 의외로 간단하다. 파일 - 추가 - 새 프로젝트를 누른다. 그러면 익숙한 새 프로젝트 만들기 창이 나온다. 한 가지 다른 점은, 원래 프로젝트 이름을 적으면 똑같은 이름으로 자동으로 타이..

포르잔 C++ 바이블 ch12 연습문제 & 프로그래밍 문제

연습 문제 1번 Base 클래스와 Base 클래스를 상속받는 Derived1과 Derived2 클래스가 있다고 합시다. 이 클래스를 다형성 관계로 활용하려고 합니다. 각 클래스에 가상 print 함수와 가상 소멸자가 있는 경우의 가상 테이블을 그림으로 표현하세요. 2번 다음과 같은 두 클래스가 있다고 합시다. 두 클래스가 다형성을 갖게 스택 메모리 위에 인스턴스화하는 코드를 작성하세요. 다형성을 활용한다는 것은 부모 클래스에 대한 포인터를 사용한다는 것입니다. 다만 객체의 실체를 스택 메모리에 만들어서 활용하라는 것이 문제의 포인트입니다. class First { private: int fr; public: First(int fr); virtual ~First(); virtual void print() ..

포르잔 C++ 바이블 Ch.11 연습문제 & 프로그래밍 문제

연습문제 1번 다음과 같이 2개의 클래스를 정의했을 떄, 위임(delegation)을 사용해서 두 클래스의 set 함수와 print 함수를 정의해주세요. //First 클래스 선언 class First { private: int a; public: void set(int a); void print() const; }; //Second 클래스 선언 class Second :public First { private: int b; public: void set(int a, int b); void print() const; }; 풀이. //First 클래스의 메소드 정의 void First::set(int a2) { First::a = a2; } void First::print() const { cout

[C++]vector를 2차원으로 선언하는 방법

c 스타일 배열을 2차원으로 선언하는 방법은 간단하다. arr[i][j]와 같이 선언하면 된다. 벡터를 2차원으로 선언하려면 어떻게 해야 할까? 2차원 배열은 크기가 i*j인 표의 형태로 이해하기 마련이다. 실상은 i개의 배열이 있고, 각각의 원소가 j개의 배열을 가리키고 있는 형태이다. 다시 말해 배열이 배열을 담고 있는 형태이다. arr[][0] arr[][1] arr[][2] arr[0] → arr[0][0] arr[0][1] arr[0][1] arr[1] → arr[1][0] arr[1][1] arr[1][2] arr[2] → arr[2][0] arr[2][1] arr[2][2] arr[3] → arr[3][0] arr[3][1] arr[3][2] 벡터도 이와 같이 벡터가 벡터를 담은 형태로 선언..