본문 바로가기

분류 전체보기

(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화면이 변경될때 함..
캐스케이딩 엘리먼트는 다양한 CSS 선언의 영향을 받는다. 이 때 충돌을 피하기 위해서 우선순위를 정하는데 이를 캐스케이딩이라고 함. 캐스케이딩에는 다음과 같이 세가지 규칙이 있음. 중요도 - css가 어디에 선언 되었는지에 따라서 우선순위가 달라짐 명시도 - 대상을 명확하게 특정할수록 명시도가 높아지면서 우선순위가 높아짐 소스순서 - css 선언을 나중에 할수록 우선순위가 높아짐 css는 다양한 위치에서 기술될수 있는데, 그 위치에 따라서 우선순위가 달라진다. css가 기술될 수 있는 위치는 아래와 같고, 우선순위는 아래로 내려갈수록 높다. (저작자 CSS의 !important가 제일 높음) 브라우저의 CSS (예 제목) 사용자 CSS 일반선언 (오페라에서 제한적으로 사용되는 기능) 저작자 CSS 일반선언 ( h..