본문 바로가기

전체 글

 (149)
브라우저 렌더링 과정 렌더링 단어 그대로 렌더링이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서들을 브라우저가 화면에 그려주는 동작을 말한다.각 브라우저는 렌더링을 하기 위해 각각의 렌더링 엔진을 가지고 있으며 브라우저마다 종류가 다를 수 있다. 브라우저 기본 구조 사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 등 페이지 뷰 이외의 다른 부분 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작 제어 렌더링 엔진: HTML, CSS를 파싱해 화면에 요청한 컨텐츠를 표시 통신: HTTP요청과 같은 네트워크 호출에 사용됨 JS 엔진: 자바스크립트 코드를 해석하고 실행 UI 백엔드: 기본적인 위젯(콤보 박스:드롭다운 목록과 텍스트 상자와 조합한 것 등)을 그림 자료 저장소: 자료를 저장하는 계..
parseInt() 문자열 숫자로 변환 parseInt(string, radix); 문자열을 해석(parse)해서 정수(integer)를 리턴 string이 0x로 시작하면 16진수로 간주 string이 0으로 시작하면 8진수로 간주 그외는 10진수로 간주 alert(parseInt(5)); // number, 5 alert(parseInt(5.5)); // number, 5 alert(parseInt('30 40 50')); // number, 30 alert(parseInt(' 40 ')); // number, 40 alert(parseInt('50 codingeverybody')); // number, 50 alert(parseInt('codingeverybody 50 ')); // NaN alert(parseInt(010)); // n..
... 객체 spread const a = { b:1 , c:2 } const b = a; a===b; true a와b가 달라야만 불변성을 유지할수 있음 const c = {...a}; c {b:1, c:2} c === a false 배열도 가능 const d = [1,2,3] const e === d; e ===d true const f = [...d] f (3)[1,2,3] d === f false 이 포스팅은 제로초님 강의를 듣고 만들었습니다.
window 객체 window는 브라우저에서 제일 중요한 객체 입니다. 콘솔창에 console.dir(document) 입력하면 document 객체가 나옵니다. 거기에는 document는 html의 태그들을 가르킵니다. body태그도 있어요. html과 자바스크립트는 다른 언어입니다. html 태그들을 자바스크립트로 통역해주는 역활이 Dom객체입니다.( document object model) 이 포스팅은 제로초님 강의를 듣고 만들었습니다. 제로초님 너무 감사합니다.
자바스크립트로 구구단 만들기 연습 프로젝트 (제로초) 프로젝트를 진행하기 전에 먼저 순서도를 그리는 것을 추천 합니다. while(true){ let 숫자1 = Math.floor(Math.random()*9) +1 let 숫자2 = Math.floor(Math.random()*9) +1 let 결과 = 숫자1 * 숫자2 let 조건 = true; while (조건 ){ let 답 = prompt(String(숫자1) + "곱하기" + String(숫자2) + "는?") if(결과 === Number(답)){ arert("딩동댕") 조건=false; } else { alert("땡") } } } Math.random을 화면에 쳐보면 0부터 1까지의 소수점 자리가 나온다. 거기에 9를 곱해주면 0부터 8까지 소수점 자리가 나옵니다. 그래서 Math.floor..
리액트 setState를 연속으로 사용할때 (prevState) class형 this.setState(( => { result: '홈런!', tries: [...tries, { try: value, result: '홈런!' }], }); this.setState((prevState) => { return { result: '홈런!', tries: [...prevState.tries, { try: value, result: '홈런!' }], } }); 함수형 setState를 사용해야 한다. hooks setTries(prevTries => ([ ...prevTries, { try: value, result: `${strike} 스트라이크, ${ball} 볼입니다.`, } ]));
자바스크립트 예제 const title = document.querySelector("#title"); function handleResize(){ console.log("I have been resized") } window.addEventListener("resize", handleResize) const title = document.querySelector("#title"); function handleResize(){ console.log("I have been resized") } window.addEventListener("resize", handleResize()) 이 두가지의 차이는 handleResize와 handleResize( )이다. handleResize를 넣게 되면 window화면이 변경될때 함..

티스토리툴바