치춘짱베리굿나이스

My first RayCaster with miniLibX 와! 수학! 기하와벡터! 팀 ⌜ ⌟ (웃음) 단언컨대 최고의 팀원이었습니다 감사합니다 HE IS GOD. 제 블로그 오시는 분들 제 컵디 팀원분 진짜 레전드고수왕고수킹갓엠페러코드마스터십니다 클러스터에서 마주치시면 싸인 받아놓으세요 주의사항 주의사항단 4시간동안은 빡세게 하기 파트 나누지 않고 둘이 만나서 같이 붙어서 할것 하루에 4시간씩 투자할 것 사전에 공부해야 할 내용 Lodev Raycasting 정리 참고자료 Raycasting #define screenWidth 640 #define screenHeight 480 #define texWidth 64 #define texHeight 64 #define mapWidth 24 #define m..

undefined Boolean(undefined) //false Number(undefined) //NaN String(undefined) //"undefined" 선언은 되었지만 값이 할당되지 않은 상태 ⇒ 초기화하지 않은 변수 Boolean 문맥에선 false 반환 Number 문맥에선 NaN 반환 null Boolean(null) //false Number(null) //0 String(null) //"Number" 아무런 값도 나타나지 않음 값 자체가 없다는 뜻 (undefined) 이 아니라 값은 존재하지만 어떠한 유효한 값도 아니라는 뜻 Boolean 문맥에선 false 반환 Number 문맥에선 0 반환 NaN Boolean(NaN) //false Number(NaN) //NaN Strin..

DOM 정의 Document Object Model, 웹 페이지에 대한 인터페이스이다 웹 브라우저는 HTML 문서를 읽어들이고, 문서의 내용을 선언된 형식대로 파싱하여 어떻게 페이지를 렌더링할 지 결정한다 문서에 대한 파싱이 끝난 뒤에는 렌더 트리가 생성되며, 이 트리에는 웹 페이지에 표시될 HTML 요소들과 스타일 요소들이 트리 구조로 표현된다 예시 안녕하세요 방가방가 html 파일의 내용은 웹 브라우저에 의해 파싱되어 DOM 형태로 메모리에 올라가고, DOM은 노드로 구성된 논리 트리로 표현된다 가장 최상단에 위치한 루트 태그인 html 태그는 트리의 루트가 되고, 하위 태그들은 자식 요소가 된다 DOM === html ? DOM은 html 파일로부터 생성됨에도 불구하고 항상 1대1로 매치되진 않는다..

둘 다 html 태그의 속성을 의미하지만 세부적으로 다른 특성을 띈다 Attribute html 문서에서 각 원소 태그에 추가적인 정보를 주기 위한 요소이다 위의 예시에서 className, src가 Attribute이며, “test-div” 와 “./testimg.jpg”는 각각 div attribute와 img attribute의 value가 된다 Property html이 아닌, html DOM에서의 속성 (DOM이란? html DOM) 간단하게 말해서 자바스크립트 등의 스크립트 언어를 통해 DOM의 노드들을 수정할 수 있고, Property 또한 자바스크립트에서 동적으로 조작할 수 있다 위의 예시에서 html에 명시된 value attribute는 “안녕하세요” 인데, input 태그의 특성상 v..

vw / vh v = viewport (현재 보여지는 화면 크기) vw = 뷰포트 너비에 비례 vh = 뷰포트 높이에 비례 예시: 3vw = 뷰포트 너비의 3% vw, vh는 부모의 너비 / 높이와 무관하다 vmin / vmax vmin = 뷰포트 너비 / 높이 중 작은 것에 비례 vmax = 뷰포트 너비 / 높이 중 큰 것에 비례 em / rem em = 부모의 폰트 크기에 비례 rem = 최상위 요소 (대체로 html) 의 폰트 크기에 비례 예시: 부모의 폰트 크기가 12px일 때, 3em = 12 * 3 = 36px 브라우저 기본 폰트 사이즈는 100%에서 16px이다 ex 현재 폰트의 x 높이값 (알파벳 x의 높이 값) 또는 em의 절반 ch 현재 폰트의 0 너비값 (숫자 0의 너비 값) 참고자료..

react-modal 설치 $> npm install --save react-modal # 또는 yarn add react-modal npm 링크 react-modal 용례 모달 띄우기 import Modal from 'react-modal'; const testPage = () => { return ( Hello World! ); } 코드를 실행시키고 해당 페이지를 렌더링해 보면 모달 창이 렌더링된 것을 볼 수 있다 내부에 다른 컴포넌트를 넣거나, 여러 태그를 조합하여 렌더링할 수 있다 모달이 하나의 컨테이너라고 생각하면 된다 버튼으로 모달 껐다 켰다 하기 import Modal from 'react-modal'; const App = () => { const [isOpen, setIsOpen] = u..

Styled Components 설치 $> npm i styled-components npm 링크 styled-components 용례 html 태그에 스타일 적용하기 import styled from 'styled-components'; const TestDiv = styled.div` background-color: magenta; `; const Styled = { TestDiv }; export default Styled; styled-components 라이브러리를 불러와서, 스타일을 적용하고자 하는 태그를 불러온다 예시에서는 div에 스타일을 적용하고자 했으니 styled.div를 불러오면 되고, body에 적용을 원할 경우 styled.body 이런 식으로 가져오면 된다 불러온 컴포넌트에 따..

긴자리 계산 문제 두 수 A, B를 입력받아, A+B, A-B, A×B를 구하는 프로그램을 작성하시오. 입력 첫째 줄에 A가, 둘째 줄에 B가 주어진다. 각각의 수는 10진수로 1,000자리를 넘지 않으며 양수와 음수가 모두 주어질 수 있다. 출력 첫째 줄에 A+B, 둘째 줄에 A-B, 셋째 줄에 A×B를 출력한다. 각각을 출력할 때, 답이 0인 경우를 제외하고는 0으로 시작하게 해서는 안 된다(1을 01로 출력하면 안 된다는 의미). 풀이 const bigint = () => { let input = require("fs") .readFileSync("/dev/stdin") .toString() .trim() .split("\\n") .map(BigInt); console.log( `${input[0]..