브라우저 저장소는 브라우저에서 데이터를 클라이언트 측에 저장하기 위한 기술이다. 이를 통해 웹 애플리케이션은 서버와 상호작용하지 않고도 데이터를 저장하고 관리할 수 있다. 브라우저 저장소의 종류는 Web Storage와 Cookie 두 가지로 나뉘고, Web Storage는 Local Storage와 Session Storage로 나눌 수 있다.  Web Storage웹 데이터를 클라이언트에 저장하기 위한 key-value 형태의 저장소로, Cookie의 단점을 보완하고자 HTML5에 추가된 스펙이다.저장된 데이터는 클라이언트(브라우저)에 존재할 뿐 서버로 전송되지 않는다. 따라서 네트워크 트래픽에 영향을 주지 않는다.쿠키에 비해 용량 제한이 넉넉하다. (서버로 전송되지 않고 그저 클라이언트 측에 데이터..

MPA와 SPAMPA(Muliple Page Application)새로운 페이지를 요청할 때마다 서버에 정적 리소스를 요청ex.JSP, PHP SPA(Single Page Application)모든 정적 리소스를 최초 한 번에 다운로드ex. React, Vue, Next, Nuxt 🤷🏻‍♂️ MPA는 SSR, SPA는 CSR?일반적으로 MPA는 SSR, SPA는 CSR 방식을 많이 사용하나, 고정된 규칙은 아니다. 예외가 되는 사례들을 살펴보자. - SSR을 사용하는 SPANext.js는 기본적으로 SPA임에도 불구하고, SSR과 CSR을 혼합한 하이브리드 렌더링 방식을 사용한다. - CSR을 사용하는 MPA일부 MPA는 초기 HTML을 서버에서 제공하고, 나머지 상호작용을 위해 JavaScript를..

1주차-문자열덧셈계산기-레포지토리 프리코스 1주차 미션을 진행하며 신경 쓴 부분, 그리고 그 과정에서 배우고 느낀 점들을 작성해보려 한다.   구현할 기능 설계 및 정리우선 나는 프리코스 목표로 '구현에 앞서 문제에 대한 적절한 해결 방안을 설계하는 연습하기'를 다짐하였기 때문에 냅다 생각나는 대로 코드를 짜는게 아니라 문제를 요구사항과 함께 충분히 분석하고 설계하는 과정에 투자를 많이 하려고 하였다. 💡 설계입력 받은 문자열에 대해 인덱스를 증가시키며 한 자씩 읽으면서, case별로 함수를 만들어 처리한다./가 나올 경우, +4자리까지 읽어서 커스텀 구분자의 지정 형식에 맞는지 확인한다.숫자가 나오면 배열에 넣어놓고, 그 다음 자리를 확인하여 숫자면 다시 배열에 넣는다.숫자가 아닌 문자가 나오면 구분..

Reflow와 Repaint 브라우저의 렌더링 과정에서 렌더 트리가 생성된 후, 뷰포트를 기반으로 요소(노드)들의 위치, 크기 등을 계산하는 과정을 Layout 단계, 이를 바탕으로 화면에 요소들을 픽셀화하여 그리는 과정을 Paint 단계라고 한다.(브라우저의 렌더링 과정에 대해 더 자세히 알고 싶다면 여기를 참고) Reflow는 Layout과,Repaint는 Paint와 연관되어 있는데, 쉽게 말해 Reflow는 레이아웃이 변경되었을 때, 각 요소들의 위치나 크기 등을 다시 계산하는 과정이고, (변경 시 영향을 받은 모든 노드의 수치를 계산 -> 렌더트리 재생성) Repaint는 Reflow가 일어나고 화면을 다시 그리는 과정을 말한다.  Reflow와 Repaint가 발생하는 시점Reflow 발생 예..

브라우저가 웹 페이지를 불러올 때는 웹킷(Webkit), 게코(Gecko) 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진은 HTML, CSS, JavaScript와 같은 웹 페이지를 이루는 요소들을 파싱하고, 이를 브라우저 화면에 표시하는 역할을 한다. 이 과정은 크게 DOM, CSSOM, 렌더트리 그리고 레이아웃을 포함하며 이러한 프로세스를 CRP(Critical Rendering Path)라고 한다. ✅ CRP(중요 렌더링 경로)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킨다.  1. DOM 생성브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성한다.✅ DOM(Document Object Model..

https://school.programmers.co.kr/learn/courses/30/lessons/12916 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr입력으로 주어진 문자열 내에 p와 y의 개수를 비교하는 문제이다.   처음 나의 풀이function solution(s){ var answer = true; var p = 0; var y = 0; s = s.toLowerCase(); s.split('').forEach(i => { if (i === 'p') p += 1; if (i === 'y') y..