서스포PAR

📑 Rendering 브라우저가 HTML, CSS, JavaScript를 파싱하여 사용자에게 화면을 보여주는 과정을 의미합니다. 크게 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR), 정적 사이트 생성(SSG) 등으로 나뉩니다. 렌더링은 HTML 파싱을 통해 DOM 트리를 만들고, CSSOM과 결합하여 렌더 트리를 구성하며, 레이아웃 계산과 페인팅 단계를 거쳐 화면에 최종적으로 그려집니다. https://www.youtube.com/watch?v=BEwv4to9OWY ✅ 서버 사이드 렌더링 ( SSR - Server Side Rendering )요청이 올 때 마다 해당하는 HTML 문서를 그때 그때 서버에서 완성된 HTML을 생성하여 브라우저로 반환한다.SSR을 사용하면 각..

📑 Next.js 소개 - https://nextjs.org/Next.js는 React를 기반으로 하는 풀스택 웹 개발 프레임워크입니다. 웹 애플리케이션 개발에 필요한 틀을 제공하며, 서버 사이드 렌더링(SSR), 정적 웹사이트 생성, API 라우팅 등 다양한 기능을 지원하여 개발 생산성을 높입니다. 또한 Next.js는 번들링, 컴파일 등의 작업을 추상화하고 자동으로 처리해, 개발자가 설정에 시간을 들이지 않고 애플리케이션 개발에 집중할 수 있도록 돕는다. 페이지 라우팅 (Page Routing): 별도의 설정 없이 간단하게 페이지 간 이동을 구현할 수 있다.빌트인 성능 최적화: Next.js는 자동으로 성능을 최적화하여 빠른 페이지 로딩을 지원한다.동적 HTML 스트리밍: 서버에서 HTML을 ..

2023년 학점은행제를 위하여 독학사 시험은 준비하게 되었다. 6월 12일에 결과가 나왔고 6과목중 3개 합격 3개 과락의 결과. 4개가 합격이 목표였던 나에게는 다소 아쉬운 결과였다. [자료구조] 어렵게 출제되었다. 통수맞은 나의 뒷통수가 아리다... 훑쩍 자신있던 과목이었는데 보자마자 머리가 ^^... 하얗게 물들어버렸다... 어려웠다구!! [C프로그래밍] 코딩접자 ^^...(FE 1년차) [이산수학] 사람들이 쉽다하였지만 수포자였고 공부할 시간이 없어서 공부를 전혀 하지 않은 상태로 시험을 보았다. 결과를 본 지금은 공부를 하고가 합격반열에 넣을 걸... 하면서 후회중이다. 공부하지 않은 상태로 저정도 점수라면 좀 더 공부했으면 60점 넘었을텐데... 아쉽다. [웹프로그래밍] 웹프로그래밍은 HTML..

🎡 Array.prototype 메소드 모든 Array 인스턴스는 Array.prototype으로부터 메소드와 프로퍼티를 상속받습니다. 이렇게 상속받은 Array.prototype 메소드는 크게 다음과 같이 구분할 수 있습니다. 1. 원본 배열을 변경하는 메소드 2. 원본 배열은 변경하지 않고 참조만 하는 메소드 3. 원본 배열을 반복적으로 참조하는 메소드 💖 자바스크립트 원본 배열을 반복적으로 참조하는 Array.prototype 메소드 더보기 더보기 메소드 설명 forEach() 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행함. map() 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행 결과를 새로운 배열로 반환함. filter() 해당 배열의..

🎡 Array.prototype 메소드 모든 Array 인스턴스는 Array.prototype으로부터 메소드와 프로퍼티를 상속받습니다. 이렇게 상속받은 Array.prototype 메소드는 크게 다음과 같이 구분할 수 있습니다. 1. 원본 배열을 변경하는 메소드 2. 원본 배열은 변경하지 않고 참조만 하는 메소드 3. 원본 배열을 반복적으로 참조하는 메소드 💖 자바스크립트 원본 배열은 변경하지 않고 참조만 하는 Array.prototype 메소드 더보기 더보기 메소드 설명 join() 배열의 모든 요소를 하나의 문자열로 반환함. slice() 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 추출하여 만든 새로운 배열을 반환함. concat() 해당 배열의 뒤에 인수로 전달받은 배열을..

 🎡 Array.prototype 메소드 모든 Array 인스턴스는 Array.prototype으로부터 메소드와 프로퍼티를 상속받습니다. 이렇게 상속받은 Array.prototype 메소드는 크게 다음과 같이 구분할 수 있습니다. 1. 원본 배열을 변경하는 메소드 2. 원본 배열은 변경하지 않고 참조만 하는 메소드 3. 원본 배열을 반복적으로 참조하는 메소드 💖 자바스크립트 원본 배열을 변경하는 Array.prototype 메소드 더보기 메소드 설명 push() 하나 이상의 요소를 배열의 가장 마지막에 추가하고, 배열의 총 길이를 반환함. pop() 배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환함. shift() 배열의 가장 첫 요소를 제거하고, 그 제거된 요소를 반환함. unshift(..

 🎡 래퍼 객체(wrapper object) const str = "문자열"; // 리터럴 문자열 생성 const len = str.length; // 문자열 프로퍼티인 length 사용 예제에서 생성한 문자열 리터럴 str은 객체가 아닌데도 length 프로퍼티를 사용할 수 있습니다. 프로그램이 문자열 리터럴 str의 프로퍼티를 참조하려고 하면, 자바스크립트는 new String(str)을 호출한 것처럼 문자열 리터럴을 객체로 자동 변환해주기 때문입니다. 이렇게 생성된 임시 객체는 String 객체의 메소드를 상속받아 프로퍼티를 참조하는 데 사용된다. 이후 프로퍼티의 참조가 끝나면 사용된 임시 객체는 자동으로 삭제됩니다. 숫저, 문자열. 불리언 등 원시 타입의 프로퍼티에 접근하려고 할 때 생성되는 임..

https://tlsdnjs12.tistory.com/42 [Javascript] Date Constructor 🎠 자바스크립트에서의 날짜 표현 ​자바스크립트에서는 Date 객체를 사용하여 매 순간 변화하는 시간과 날짜에 관한 정보를 손쉽게 얻을 수 있다. Date 객체는 연월일, 시분초의 정보와 함께 밀 tlsdnjs12.tistory.com 💖 자바스크립트 Date.prototype getter 메소드 Date.prototype getter 메소드는 날짜와 관련된 정보를 받아오기 위한 메소드입니다. 가장 많이 사용되는 대표적인 getter 메소드는 다음과 같습니다. 더보기 메소드 설명 값의 범위 getDate() 현지 시각으로 현재 일자에 해당하는 숫자를 반환함. 1 ~ 31 getDay() 현지 시..

 💖 자바스크립트 Math 메소드 종류 Math 메소드는 수학에서 자주 사용하는 상수와 함수들의 미리구현해 놓은 메소드 입니다. 더보기 메소드 설명 Math.min(x, y, ...) 인수로 전달받은 값 중에서 가장 작은 수를 반환함. Math.max(x, y, ...) 인수로 전달받은 값 중에서 가장 큰 수를 반환함. Math.random() 0보다 크거나 같고 1보다 작은 랜덤 숫자(random number)를 반환함. Math.round(x) x를 소수점 첫 번째 자리에서 반올림하여 그 결과를 반환함. Math.floor(x) x와 같거나 작은 수 중에서 가장 큰 정수를 반환함. Math.ceil(x) x와 같거나 큰 수 중에서 가장 작은 정수를 반환함. Math.abs(x) x의 절댓값을 반환함..

 알고리즘 문제를 풀다보면 메소드 관련이 많이 나와 헷깔리는 부분이 많았다. 더 나은 문제풀이와 커리어를 쌓기위해 메소드를 정리하도록 마음 먹었다. 💖 자바스크립트 String.prototype 메소드 종류 String 메소드는 String 객체에 정의된 문자열과 관련된 작업을 할 때 사용하는 메소드입니다. 더보기 메소드 설명 indexOf() String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환함. lastIndexOf() String 인스턴스에서 특정 문자나 문자열이 마지막으로 등장하는 위치의 인덱스를 반환함. charAt() String 인스턴스에서 전달받은 인덱스에 위치한 문자를 반환함. charCodeAt() String 인스턴스에서 전달받은 인덱스에 위치한 문..