본문 바로가기

분류 전체보기

 (200)
💥 브라우저 렌더링 과정에 대해 알아보자 ! 안녕하세요 김한서입니다.✏️ 브라우저 렌더링이란?웹 브라우저에서는 HTML, CSS와 그것의 동작을 수행하고 제어하는 자바스크립트가 함께 실행된다.브라우저 렌더링은 브라우저(크롬, 사파리 등)가 HTML, CSS, JavaScript로 작성된 텍스트 문서에 대해 파싱(해석)하고 이를 화면에 그리는(렌더링하는) 일련의 과정을 말한다. 중요 렌더링 경로(Critical Rendering Path, CRP)라고도 하며 이를 최적화 하는 것은 렌더링 성능을 향상시킨다.결국 렌더링 성능 최적화를 위해, 그리고 화면에 의도한대로 렌더링시키기 위해서는 렌더링 과정을 알아야 한다. 브라우저가 HTML, CSS, JS로 작성한 텍스트 문서를 어떻게 파싱하고 브라우저에 렌더링 하는지 알아보자.  전체적인 flow는 다음과..
성능 좋게 DOM을 조작해보자! 안녕하세요! 웹파트 OB 김채현입니다. 자바스크립트의 기능 중 하나로 DOM을 조작하는 것이 있습니다.이번 2주차 과제에서도 반복적으로 DOM에서 노드를 추가해서 보여주는 기능을 구현해야 했습니다.그렇다면 효율적으로 DOM을 조작할 수 있는 방법으로무엇이 있는지 한번 알아보고 싶어서 아티클을 작성하게 되었습니다. DOM이란?DOM은 The Document Object Model로, HTML, XML 문서의 프로그래밍 인터페이스입니다.DOM은 nodes와 objects로 문서를 표현하는데,웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 합니다. 웹 페이지는 일종의 문서로, 웹 브라우저를 통해 그 내용이 해석되어웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도..
🌐 브라우저 렌더링 과정과 DOM 안녕하세요! 물결웹팟 OB 박채연입니다. 😊 이번 주차 공유과제 주제로 '브라우저 렌더링 과정과 DOM'을 다루려고 하는데요!저는 평소에 자바스크립트 코드를 작성하면서 하면서 우리가 작성하는 이런 파일들 화면에 어떻게 그려지고, 또 다양한 브라우저에서 동작하는지 개인적으로 궁금했던 부분이라렌더링, DOM과 관련된 부분을 깊게 공부해보고자 해당 주제를 선정하게 되었습니다. 🔧   🏷️ 브라우저 렌더링 과정   우선, 브라우저 렌더링 흐름에 대해 살펴보겠습니다! (1) 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다. (2) 그러면, 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSS 오..
자바스크립트 - 함수 호스팅, 화살표 함수 자바스크립트 함수자바스크립트에서 함수는 특정 작업을 수행하는 코드 블록이다. 함수를 사용하면 코드의 재사용성과 가독성을 높일 수 있다.  일반적으로는 functon 키워드를 사용하여 선언할 수 있다.function add(a, b) { return a + b;}console.log(add(2, 3)); * 함수는 선언하기 전에 호출할 수 있다. (함수 선언식은 호이스팅이 되기 때문이다.)* 선언된 함수는 해당 스코프 어디에서든 사용할 수 있다.* 호이스팅이란? 자바스크립트가 코드 실행 전에 함수 선언과 변수 선언을 최상위로 끌어올리는 것을 의미한다.그래서 함수 선언식으로 작성된 함수는 코드의 어디서든 호출이 가능하다. * 함수가 전역 스코프에서 선언되었다 -> 코드 전체에서 사용 가능* 함수가 특정..
리액트가 처음인 당신께... 안녕하세요 웹파트 OB 손지유입니다.리액트 공부 4일차... 오늘은, 리액트가 처음인 저를 위한 아티클을 써보려고 합니다!혹시 저처럼 리액트가 처음이신 분들이 있다면 도움이 되길 바라며...그럼, 우리 함께 공부해봐요╰(*°▽°*)╯[목차]STEP1 : 리액트란 무엇인가? 기초 필수 개념 뿌시기!1. 리액트는 무엇일까?2. 리액트를 왜 쓸까?3. 리액트를 쓰려면 알아야 하는 것들4. 리액트의 특징 STEP2: 리액트의 핵심! 중요한 개념 맛보기~1. 컴포넌트 간 데이터 전달 (Props)2. 리액트 훅(Hooks)3. 리액트 컴포넌트 라이프사이클4. 리액트의 "키(Key)" 개념 STEP3: 리액트 파고들기...! 심화 개념을 쉽게 이해해 보자 :)1. 리덕스(Redux) / Context API 심화:..
자바스크립트 reduce 메서드 알아보기 안녕하세요 ! 웹 YB 김가현입니다.2주차 공유과제로는 reduce 메서드에 대해 작성해보려고 합니다.문법이 복잡할 것 같고 …. 코드를 봐도 잘 와닿지 않아서 자주 손이 가는(?) 메서드는 아니었는데요 ,,저와 같이 하나 하나 뜯어봅시다 !!!!  Array.prototype.reduce() reduce는 '줄이다' 라는 의미를 가지고 있다.이 의미에서 알 수 있듯 배열의 각 요소를 순차적으로 처리하며 하나로 줄이는(reduce) 작업을 수행한다. 기본 문법arr.reduce(callback[, initialValue]) 가장 기본적인 형태이다. callback -> 콜백함수에는 다음 4가지의 인수를 받을 수 있다.누적 값 (accumulator)현재 값 (currentValue)(optional) 현..
동적 필터링 구현 안녕하세요 웹 OB 이예림입니다..!  과제를 구현하던 중, 아래와 같이 각각의 함수로 필터링하는 방식이 매우 비효율적으로 느껴졌는데요,🤔 필터링을 재사용한 것처럼, 동적으로 접근하는 방식이 있지 않을까? 라는 의문으로 해당 주제를 접하게 되었습니다.  const selectedGender = getSelectValue("sel_gender"); const selectedRole = getSelectValue("sel_role"); const inputName = getInputName(); const inputEnName = getInputValue("enNameInput"); const inputGithub = getInputValue("githubInput"); const inputWe..
객체를 얼려주세요. Object.freeze() 안녕하세요 웹파트YB 강민하 입니다 ! ! 자바스크립트의 객체는 매우 미끌미끌 유연하기 때문에 필요에 따라 잘 얼려주는게 중요하답니다. JS의 객체는 기본적으로 변경 가능한(mutable) 데이터 구조이다. 즉, 객체의 속성에 대한 추가, 수정, 삭제가 자유롭다는 것을 의미한다. 하지만, 필요에 따라 객체를 불변(immutable)으로 만들어야 할 때가 있다.예를 들면, 설정 관련 데이터라던가 사용자에게 보내는 메세지 ... 등등 데이터의 무결성을 보장해야할 때 객체를 불변으로 만들어야 한다. var,let 말고 const 쓰면 해결되는거 아닌가요 ? 우선 const로 선언된 변수는 재할당이 불가능 하다.하지만 객체와 배열같은 참조형 데이터에서는 값이 훅훅 변할 수 있다.const number = 42;..

티스토리툴바