서스포PAR

📑 Vite소개 - https://ko.vite.dev/ ViteVite, 프런트엔드 개발의 새로운 기준ko.vite.dev Vite는 차세대 프론트엔드 툴로 빠른 개발 서버와 빠른 번들링을 제공합니다. 👍 [ 더 빠른 서버 개발, 모던한 설계와 최적화 ] 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다. - 번들링 없이 모듈을 바로 브라우저에서 로드한다. - 개발 서버를 실행할 때 Vite는 전체 프로젝트를 번들링하지 않고 필요한 파일만 서버에서 제공하므로 서버 시작 속도가 매우 빠르다.- 핫 모듈 교체(HMR : 코드를 수정하면 페이지를 새로 고침하지 변경된 부분만 즉시 반영 ) 성능도 Vite가 CRA보다 훨씬 빠릅니다. - 최신 브라우저의 ES Module을 활용하여 번들링에..

commit 을 진행할때 템플릿을 설정하고 팀원들과 공유하는 내용을 명확하기 전달하기! 💖 COMMIT CONVENTIONhttps://www.conventionalcommits.org/en/v1.0.0/ Conventional CommitsA specification for adding human and machine readable meaning to commit messageswww.conventionalcommits.org 커밋 메시지 위에 구축된 간소화된 규칙입니다. 명확한 커밋 기록을 생성하기 위한 간단한 규칙 집합을 제공하여 자동화 도구를 더 쉽게 작성할 수 있도록 합니다. 이 규칙은 커밋 메시지에 기능, 수정 사항 및 호환성을 깨뜨리는 변경 사항을 설명합니다. 🔊 .gitmess..

📑 React.js 소개 - https://ko.react.dev/리액트는 SPA(Single Page Application)을 위한 자바스크립트 라이브러리입니다. 2013년 페이스북(현 메타)에서 공개하였습니다. 리액트는 웹 UI를 작성하기 위한 목적으로 만들어졌으며 순수하게 자바스크립트만을 이용해서 만들 수 있고, UI영역의 재사용을 위해 '컴포넌트'라는 작은 단위 기반으로 개발을 하는데요. 이렇게 만들어진 여러 개의 컴포넌트를 조합하여 UI를 작성하게 됩니다. 라이브러리(Library)란 단순 활용가능한 도구들의 집합이다.개발자가 만든 클래스들의 나열로, 다른 프로그램들에서 사용자가 원하는 방식으로 사용할 수 있도록 제공하는 방식이다. 라이브러리 기능으로 코드 재활용성, 추상화, 모듈화, 유연..

📑 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 객체의 메소드를 상속받아 프로퍼티를 참조하는 데 사용된다. 이후 프로퍼티의 참조가 끝나면 사용된 임시 객체는 자동으로 삭제됩니다. 숫저, 문자열. 불리언 등 원시 타입의 프로퍼티에 접근하려고 할 때 생성되는 임..