1. props 전달 class Board extends React.Component { renderSquare(i) { return ; } } class Square extends React.Component { render() { return ( {this.props.value} ); } } 자습서는 코드를 이렇게 바꾸라고 안내한다. 당연하지만 제대로 될 리가 없다. value를 찾을 수 없다고 아우성을 친다. React에서 Props를 정의하는 방법의 안내를 참조하여 보면, Props의 타입을 정의해줘야 한다고 나와있다. interface SquareProps { value: number; } 리액트 컴포넌트 타입스크립트로 작성하기 를 참조하면, type 키워드를 사용하는 방법도 있다고 한다. ty..
자습서 : https://ko.reactjs.org/tutorial/tutorial.html 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 1. 프로젝트 생성 npx create-react-app tic-tac-toe --typescript 먼저 위 커맨드로 자습서의 틱택토용 리액트 앱 생성. 그러나 타입스크립트 템플릿을 사용해서. cd src rm -f * 그리고 위 커맨드를 사용해서 src 디렉토리 내의 모든 파일 삭제. (자습서에 있는 내용) 2. 처음 예제 코드 (1) createRoot 함수가 없다?! 시작부터 벌써 에러가 터지고 있다. 해당 타입을 가진 'createRoot' 속성이..
var = 재선언 가능한 변수. (위험?) let = 재선언 불가능한 변수. (재선언 시도시 문법 에러) const = let과 같으나, 재할당 역시 불가능.
42서울에서 배우는 C++ 과제의 기준이 C++98 이므로, C++98의 OCCF에 대해여 정리. Orthodox Canonical Class Form (OCCF) 정식 클래스 형식 OCCF는 아래 네 가지의 형태를 명시적으로 정의하여 선언하는 것을 가리킨다. 기본 생성자 기본 소멸자 복사 생성자 할당 연산자 오버로딩 class A { A(); ~A(); A(const A &a); A &operator= (const A &a); }; 위와 같은 선언이 모두 들어간 것을 OCCF라고 부른다. 이것은 클래스 객체에 포인터 또는 참조 형식이 있을 때, 깊은 복사 또는 얕은 복사를 비롯하여, 여러가지 잠재적인 버그를 해결하는데에 도움을 준다. C++11에서는 위와 같은 C++98의 정식 클래스 형태에서 &&로 ..
런타임 다형성 (Runtime Polymorphism) Subtyping. (상속 등) 동적 지명 (Dynamic dispatch) 가상 함수. 컴파일 타임 다형성 (Compile-Time Polymorphism) 인자(매개변수) 다형성 (Parameteric polymorphism) 정적 지명 (Static dispatch) 컴파일 타임에 완전히 처리되는 다형성의 형태. C++의 템플릿 또는 다른 언어들의 제네릭. 함수 및 연산자 오버로딩도 해당. 임시 다형성 (Ad-hoc Polymorphism) 함수 및 연산자 오버로딩
‘const’ 키워드는 해당 객체가 변형될 수 없는 것을 가리킴. 객체가 const 포인터 또는 레퍼런스에 담겼을 경우, const 멤버 함수만 호출할 수 있음. 비 const 멤버 함수를 호출하려고 하면 컴파일 에러 발생. 그런데 C++에서는 const의 위치에 따라서 의미가 변할 수도 있음. const는 개발 하면서 넣을 곳에 그때 그때 최대한 빨리 넣어주어야 한다. 나중에 한꺼번에 const를 추가하는 것은 비용이 많이 들고, 어렵다. 인자 (Parameter) 인자로 무언가를 넘길 때, 세 가지 중 하나로 넘기게 됨. 포인터 레퍼런스 값 void pass_by_pointer( std::string *sptr ); void pass_by_reference( std::string &sref ); vo..
쓸 데 없이 보안을 중시하는 성격인데도 꼴에 NAS 한 번 써보겠다고 집에다가 ASUSTOR NAS를 구매해서 설치했다. 그리고 NAS에 접속은 Let’s Encrypt + 도메인을 연결한 후, 리버스 프록시를 활용하고 있다. ASUSTOR NAS에서 리버스 프록시를 사용해서 끝점을 연결한 모습. 위 사진과 같이 리버스 프록시를 활용하여 접속하며, 공유기에서 포트 포워딩은 딱 두 개만 해둔 상태이다. TCP 80 -> 11110 TCP 443 -> 11111 그래서 다른 포트들은 원천적으로 NAS에 접속할 수 없게 되어있다. 하지만 그래서 꽤 답답한 문제가 하나 생겼는데, ASUSTOR NAS의 앱 스토어에서 제공하는 앱들은 거의 대부분이 리버스 프록시를 고려해서 만들어진 앱이 아니라는 점이었다. 리다이..
2D 극좌표계 좌표를 반지름 길이와 각도로 쓰는 좌표계. 삼각함수를 활용해서 𝑥, 𝑦 좌표를 구할 수 있음.
구면 좌표계 구면좌표계 = 3D 극좌표계 3D (왼손) 직교좌표계에서 구면좌표계 𝑥 = 𝑟 sin 𝜃 cosϕ 𝑦 = 𝑟 cos 𝜃 𝑧 = 𝑟 sin 𝜃 sinϕ P ( 𝑟, 𝜃, ϕ ) = ( 𝑟 sin 𝜃 cosϕ , 𝑟 cos 𝜃 , 𝑟 sin 𝜃 sinϕ) 1. 𝑥 먼 tensiya.tistory.com 구면좌표계(3D 극좌표계)를 사용한 간단한 3인칭 카메라. 적당히 위와 같이 바닥이랑 캡슐을 하나 만들고, Main Camera를 캡슐의 차일드로 옮겨서 적당히 플레이어 객체와의 상대 위치(localPosition)을 설정. Rotation은, 어차피 나중에 LookAt 함수를 활용해서 카메라를 회전 시킬 것이기 때문에, 따로 회전시키지 않음. 대충 만든 Third Person Script 에서 ..
구면좌표계 = 3D 극좌표계 3D (왼손) 직교좌표계에서 구면좌표계 𝑥 = 𝑟 sin 𝜃 cosϕ 𝑦 = 𝑟 cos 𝜃 𝑧 = 𝑟 sin 𝜃 sinϕ P ( 𝑟, 𝜃, ϕ ) = ( 𝑟 sin 𝜃 cosϕ , 𝑟 cos 𝜃 , 𝑟 sin 𝜃 sinϕ) 1. 𝑥 먼저 Y축에서 나온, 위도를 나타내는 각도 𝜃가 회전. X축 또는 Z축 상관 없이, 𝑟 sin 𝜃 임. 그러나 최초 계산은 X축이 기준. 이후 경도를 나타내는 각도ϕ가 있음. X축이 기준이므로, X축으로의 위치를 나타내면 cosϕ. 2. 𝑦 Y축에서 나온 각도 𝜃에 대하여, Y축에서의 위치가 필요하므로, cos 𝜃 사용. 3. 𝑧 𝑟 sin 𝜃 까지는 𝑥의 계산과 동일. 𝑥의 cosϕ 값은 X축 기준이므로, Z축에 대해 계산하기 위해선 sinϕ로 ..
(나중에 내가 보기 위한 메모용 포스트) 포스팅 작성 현재 기준, code-server는 윈도우용 설치 키트를 공식적으로 제공하지 않음. 따라서 편하게 설치할 수 있는 리눅스/유닉스/macOS 계열과는 다르게, 불편하게 수동으로 설치해줘야 함. 1. 사전 준비 (1) 버전에 맞는 node.js 설치 현재 최신 버전인 3.12.0 기준으로, node.js 버전은 14.x 버전이 필요함. https://github.com/cdr/code-server/blob/main/.node-version 위 주소에서 필요한 node.js 버전을 확인할 수 있음. 현재 최신 LTS버전은 16.x, 최신 버전은 17.x 버전임. 그러나 현재 code-server가 요구하는 14.x는 LTS이긴 하지만, 오래된 버전이므로 수..
1. 사전 준비 IIS와 ARR, URL Rewrite 모듈 설치 필요. 아래 링크들을 사용해 설치. Application Request Routing : The Official Microsoft IIS Site URL Rewrite : The Official Microsoft IIS Site 2. 사이트 추가 컨텐츠 경로는 적당히 빈 디렉토리 추천. 역방향 프록시용 규칙이 들어가는 web.config가 해당 컨텐츠 경로에 저장됨. 포트와 서버 이름, SSL 인증서 등 바인딩은 알아서 설정. 3. 프록시에서 헤더 유지 옵션 1. 사진 처럼, 왼쪽의 연결 탭에서 서버 컴퓨터를 선택. 2. 그런 다음 창에서 구성 편집기 선택. 3. 섹션은 system.webServer/proxy 로 선택. 4. preser..
