본문 바로가기

분류 전체보기

 (200)
로컬스토리지, 세션스토리지, 쿠키 안녕하세요 웹파트 YB 한수정입니다!2주 차 실습과 과제를 하면서 로컬스토리지에 대해 찾아보게 되었고 그러면서 새롭게 세션스토리지도 있다는 걸 알게 되어 이 두 가지 개념에 대해 공유 과제를 작성하게 되었습니다.  로컬스토리지(LocalStorage)로컬스토리지는 사용자의 브라우저에 데이터를 영구적으로 저장하는 공간입니다. 페이지를 닫거나 브라우저를 종료해도 데이터가 사라지지 않고 남아 있으며, 사용자가 직접 삭제하거나 브라우저의 캐시를 지우기 전까지 유지됩니다. // 로컬스토리지에 'test'라는 키로 1을 저장한다localStorage.setItem('test', 1);// 브라우저를 닫았다가 다시 열어도 이 코드를 실행하면 '1'을 출력한다alert(localStorage.getItem('test'..
나랑 약속해줘.. Promise..🤫 안녕하세요 웹파트 35기 YB 최민입니다 !   오늘은 Promise라는 자바스크립트 비동기 처리에 사용되는 객체에 대해 소개해드리려고 합니다 !저도 Promise라는 것을 사실 처음 들어봤는데 비동기 처리에 대해 알아보다가 궁금해져서 공부해봤습니다 우선 본격적으로 Promise에 소개하기 전에 비동기 처리가 무엇인지 먼저 설명해드리도록 하겠습니다 ~ @@ ✅ 비동기 처리란 ?특정 작업의 완료를 기다리지 않고 다른 작업을 동시에 수행할 수 있도록 하는 것 병렬로 작업을 동시에 처리하기 때문에 프로그램의 흐름이 멈추거나 지연되지 않는다고 합니다따라서 Task1,2,3,4가 병렬적으로 동시에 처리되게 되고 총 코드 실행 시간은 획기적으로 줄어듭니다 !  ✅ 비동기 처리의 사례// #1console.log('..
유사배열 객체(Array-like Objects)와 배열 메서드 안녕하세요 웹파트 YB 박희선입니다 🤤이번 공유과제에서는 2주차 과제를 진행하며 제가 다시한번 개념을 정리한, 유사배열객체에 대해 설명드리도록 하겠습니다 !    유사배열객체 유사 배열 객체는 배열처럼 동작하지만 진짜 배열(Array)은 아닌 객체를 말합니다. 유사배열객체는 다음과 같은 특징을 갖고 있습니다.length 속성을 가지며, 정수형 인덱스(0부터 시작)를 갖고있다.배열 메서드를 지원하지않는다. push, pop 같은 대부분의 배열 메서드와 속성을 직접적으로 사용할 수 없다. DOM 요소 리스트, 합수의 인자 객체, 문자열 등이 해당한다.배열은 다양한 메서드를 사용할 수 있지만, 이로 인해 추가적인 메모리 공간이 필요합니다. 따라서 유사 배열 객체는 배열보다 메모리와 성능 면에서 이점을 가지기..
일급 객체와 JS 함수 뜯어보기 안녕하세요 웹 파트 YB 곽지욱입니다 😀 이번 공유 과제에서는 지난 세미나에서 언급된 일급 객체와 JS 함수에 대해서 알아보았습니다 😃일급 객체 일급객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 일급객체란 구체적으로는 다음과 같은 조건을 만족하는 객체를 일급 객체라고 한다.무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.변수나 자료구조(객체, 배열 등)에 저장할 수 있다.함수의 매개변수에 전달할 수 있다.함수의 반환 값으로 사용할 수 있다.자바스크립트의 함수는 위의 조건을 모두 만족하는 일급 객체이다.다른 건 다 직관적으로 이해할 수 있겠지만, 헷갈릴 수 있는 1번 조건에 대해 알아보자.// 1. 무명의 리터럴로 생성 후 즉시 실행 (IIFE - ..
<img> vs background-image 안녕하세요 ....? 🙄 웹 YB 김가현입니다. 웹 개발을 하다보면 이미지를 다루는 경우가 정말 많은데요 ..! 이 이미지를 업로드 하는 방식에는 두 가지가 있습니다.1. HTML에서 태그를 이용하는 방법2. CSS의 background-image를 이용하는 방법 혹시 이 두가지 방법의 차이점을 알고 계신가요 ?저는 주로 첫번째 방법을 주로 이용하는 것 같은데요 ..! 태그를 이용하는 것이 더 익숙해서 별 생각없이 해당 방식으로 이미지 마크업을 해온 것 같아요.  이번 글을 통해 두 방법의 차이점을 알아보고 앞으로는 상황에 맞는 방법을 선택해서 사용하고자 합니다 💪🏻 1. alt 속성의 유무첫번째는 alt 속성의 유무 입니다. 두 가지 경우의 문법을 살펴보면 태그에는 alt 속성이 존재하는 반면..
CSR vs SSR 차이 및 특징 ( + SPA, MPA ) 두가지를 비교하기 전에!먼저 SPA/MPA 의 차이점을 톺아보자 우리는 웹 애플리케이션을 개발한다고 하면 대부분 React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 사용해 SPA를 개발합니다.  🍀 SPA (Single Page Application) 여기서 SPA 란? SPA는 단일 페이지 애플리케이션으로, 하나의 HTML 페이지에서 모든 콘텐츠를 로드하고 페이지 간 이동 시 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트하는 방식입니다. 초기 로딩 시 필요한 리소스를 한 번에 가져오며, 이후에는 JavaScript를 사용해 페이지를 동적으로 변경합니다.  🍀 MPA(Multi Page Application) MPA 란?MPA는 다중 페이지 애플리케이션으로, 각 페이지..
🌐WAI-ARIA : 웹 접근성을 높이는 필수 도구 안녕하세요! WEB OB 김채현입니다.이번에 html 태그를 작성하면서 웹 접근성에 관심이 생겨서 WAI-ARIA를 공부해봤습니다.🤗🤗 🤔 WAI-ARIA란?Web Accessibility Initiative - Accessible Rich Internet Applications WAI-ARIA는 W3C에서 웹 접근성을 담당하는 기관(WAI)가 제정한 RIA 환경의웹 접근성에 대한 표준 기술 규격으로 요소에 적용하여 추가 의미를 제공하고 접근성이 부족한 곳의 접근성을 개선할 수 있는 추가 HTML 속성 세트를 정의합니다.복잡한 웹 애플리케이션과 동적인 사용자 인터페이스(UI)에서 보조기술이 콘텐츠를 더 잘 이해할 수 있도록추가적인 의미(semantics)를 제공하는 것이 WAI-ARIA의 목표입니다..
transform은 왜 composite만 하는가? 왜 repaint와 reflow를 건너뛰는가? 웹파트 문성희입니다.들어가며1주차 세미나의 CSS강의에서 transform이 렌더링이 더 빠르다? 라는 심화 내용이 있었다.그리고 나는 왜 transform은 composite만 수행하고, reflow와 repaint는 건너뛰는지에 대한 의문이 생겨 이에 대해 알아보고자 한다. 웹 페이지를 렌더링하는 과정에서 transform 속성은 Reflow나 Repaint를 건너뛰고 Composite 단계에서만 처리된다. 이 특성 덕분에 transform은 성능 최적화에 매우 유용한 속성이라고 한다. 그렇다면, 왜 transform은 Reflow와 Repaint를 발생시키지 않는지를 알아보자.렌더링 엔진질문을 해결하기 위해서는 브라우저에 렌더링 과정에 대해 알아야 하는데 그전에 렌더링 엔진에 대해 먼저 알아보자.?..

티스토리툴바