전체 글
-
[ JS ] 요소의 좌표Javascript/이론 2023. 4. 15. 21:32
요소의 좌표는 창 기준(client), 문서 기준(page) 이 두 기준을 따라 계산됩니다. 즉 문서 기준인 pageX, pageY는 스크롤에 영향받지 않지만 clientX, clientY는 스크롤에 따라 그 값이 변경됩니다. 요소의 좌표 얻기 요소의 좌표는 element.getBoundingClientRect()를 통해 얻는 DOMRect 클래스의 인스턴스를 통해 얻을 수 있습니다. DOMRect의 주요 프로퍼티는 아래와 같습니다. x와 y – 요소를 감싸는 네모의 창 기준 X, Y 좌표 width와 height – 요소를 감싸는 네모의 너비, 높이(음수도 가능) 아래는 파생 프로퍼티입니다. top과 bottom – 요소를 감싸는 네모의 위쪽 모서리, 아래쪽 모서리의 Y 좌표 left와 right – ..
-
[ JS ] 브라우저 창 사이즈와 스크롤Javascript/이론 2023. 4. 15. 20:57
브라우저 창 사이즈 JS에서 브라우저 창의 너비와 높이를 얻기 위해서는 document.documentElement.clientHeight와 같이 window가 아닌 document.documentElement를 사용합니다. 그 이유는 window.innerHeight와 같은 방식이 스크롤바를 차지하는 영역을 고려하지 않기 때문입니다. window.inner... : 전체 창 너비 document.documentElement.client... : 전체 창 너비 중 스크롤바가 차지한 영역을 제외한 너비 문서 전체의 크기(가려져 있는 부분까지)를 구할 경우에 아래와 같이 구해야합니다. 그 이유는 아주 오래전부터 논리적이지 않은 방식이로 이어져온 것이기에 알아볼 필요가 없으니 그냥 받아들이시면 됩니다. let..
-
[ JS ] 요소의 크기와 상대위치Javascript/이론 2023. 4. 15. 20:29
위 이미지 중 첫번째 이미지는 브라우저에 출력되는 요소의 예시이며 각 css 프로퍼티를 나타냅니다. 두 번째 이미지는 js에서의 크기, 위치에 관련된 프로퍼티를 나타냅니다. js에서 요소의 크기, 위치를 나타내는 각 프로퍼티에 대해 정리하기전에 offsetParent에 대해 알아두어야 합니다. offsetParent는 offsetTop, offsetLeft 등의 프로퍼티가 계산되는 기준이될 수 있는 가장 가까운 조상요소이며, 아래 세 가지의 기준 중 하나에 속합니다. CSS position 프로퍼티가 absolute나 relative, fixed, sticky인 가장 가까운 조상 요소 나 , 혹은 1. 크기 1) offsetWidth, offsetHeight : border를 포함한 최외각 너비와 높이 ..
-
[ React ] 모듈 번들러 없이 [ import { } from 'react' ] 구문이 작동하는 이유는 뭘까?문득 든 의문점 2023. 4. 1. 21:51
의문점 리액트 앱에서 모듈 번들러를 따로 설치하지 않았는데도 불구하고 [ import { } from 'react' ] 구문이 작동하는 이유는 뭘까? 결론 npx create-react-app을 이용해 생성된 앱은 webpack을 기본 모듈 번들러로 구성됩니다. 즉, npm start 등의 명령어를 통해 앱을 실행하면 webpack은 백그라운드에서 자동으로 시작되며 코드 번들링, 모듈 가져오는 등의 역할을 합니다.
-
[ JS ] .push()를 통한 배열 업데이트 - Cannot read properties of undefined (reading '0')Errors 2023. 3. 30. 01:03
에러 발생 상황 react 튜토리얼의 tic-tac-toe 제작 중 임의로 [...history, newSquare]을 history.push(newSquare)로 바꾸었을 때 발생 원인 [...history, newSquare]대신 history.push(newSquare)를 사용했으며, history가 초기화 되기 전에 호출되었습니다. [...history, newSquare]을 사용하는 경우 최소한 하나의 요소 이상은 초기화 되어 있으므로 에러가 발생하지 않으며, 추가적으로 조건문을 통한 초기화 여부 확인을 통해 에러를 방지할 수 있습니다.
-
[ React ] props는 argument와 어떤 차이를 가질까?문득 든 의문점 2023. 3. 28. 13:30
의문점 위 이미지는 react quick start의 share data between component 부분에서 제공하며, 다른 두 버튼에서 하나의 count값을 사용하는 예시의 이해를 돕습니다. 아래 코드는 이와 관련된 react 코드입니다. import { useState } from 'react'; export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( Counters that update together ); } function MyButton({ count, onClick }) { return ( Clicked {cou..
-
[ JS ] trigger HTTP requestJavascript/이론 2023. 3. 22. 22:25
1. XMLHttpRequest obj 사용 XMLHttpRequest의 instance 생성 open() 메서드를 통한 서버 연결. GET, POST 등 method와 url을 인자로 전달. setRequestHeadr() 메서드를 통한 헤더 설정 XMLHttpRequest의 obj의 propety인 onreadystatechange를 통한 response 정의 send()메서드를 통한 request 전송 const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com/api/data'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = fu..
-
[ NodeJS 기본 ] 파일 입출력 구현과 보안Node.js/nodeJS 기본 2023. 3. 20. 17:37
아래는 사용자 입력에 대한 출력 및 수정 삭제를 구현한 코드입니다. 홈에서는 쓰여진 글의 목록을 출력 및 글쓰기 화면으로의 접근, 쓰여진 글 보기 등 을 가능하게 했으며, 각 글에 접근해 수정 혹은 삭제가 가능도록 하였습니다. let http = require("http"); let fs = require("fs"); let URL = require("url"); let qs = require("querystring"); let path = require("path"); let sanitizeHtml = require("sanitize-html"); let tp = require("./lib/template.js"); let app = http .createServer((req, res) => { let..