본문 바로가기

전체 글60

Array method 총정리 하기 Array 객체 총정리하기 Array 객체 생성 방법 ⭐⭐⭐⭐⭐ ①. 생성자를 이용한 배열 객체 생성// 요소들을 직접 전달하여 배열 생성const arr1 = new Array(1, 2, 3, 4, 5);console.log(arr1); // [1, 2, 3, 4, 5]// 숫자 하나만 전달하면 길이가 해당 숫자인 빈 배열 생성const arr2 = new Array(5);console.log(arr2); // [empty × 5]console.log(arr2.length); // 5②. 리터럴 문자를 사용한 배열 객체 생성// 대괄호를 사용한 배열 리터럴const arr1 = [1, 2, 3, 4, 5];console.log(arr1); // [1, 2, 3, 4, 5]// 빈 배열const arr2.. 2025. 6. 18.
상위 호환성과 하위 호환성에 대해서 상위 호환성과 하위 호환성에 대해서 하위 호환성✅ 새 버전의 소프트웨어나 시스템이 이전 버전에서 작성된 데이터나 기능을 그대로 사용할 수 있는 경우를 말한다. 자바 스크립트는 하위 호환성을 보장하는 언어이다. 개발자는 지금 사용하는 코드가 미래에 브라우저가 업데이트 되더라도 실행되는 것을 보장 받을 수 있기 때문에, 유지보수비용을 크게 줄일 수 있다. 하지만 예외는 있다. 자바스크립트의 새로운 기능을 통과시키는 TC39 위원회에서는 하위 호환성을 깨는 결정을 결정한 적이 있다. 예를들어 ES5에서 Strict Mode가 도입되면서, with문 사용이 금지되는 사례이다. 또 미래에 끼칠 영향을 생각하여 변수명으로 class, let, yield와 같은 예약어 사용이 금지되었다. 상위 호환성 ✅ 이전 버.. 2025. 6. 16.
객체지향 프로그래밍(OOP)에 대해서 📌 객체지향 프로그래밍(Object-Oriented Programming) 객체지향 프로그래밍이란? 등장배경에 대해서먼저 객체지향 프로그래밍이 등장학기 전에 절차지향 프로그래밍 방식이 주류를 이루는 시기가 있었다. 프로그램은 위에서 아래로 순서(절차)대로 실행되는 구조였고, 복잡한 문제를 해결하기 위해서는 많은 함수와 조건문, 반복문이 사용되었다. 하지만 소프트웨어가 점점커지고 복잡해지면서 문제가 발생하기 시작했다. 코드의 재사용성이 낮고, 같은 로직을 반복해서 작성코드 수정이 어렵고, 한 부분을 고치면 다른 곳에서 예기치 못한 문제가 발생결과적으로, 협업이 어려워 졌고 전체 구조를 이해하지 않으면 일부 기능을 수정하기 어려운 문제가 발생했다.// 공통 변수let cashlet productCountl.. 2025. 6. 11.
인증/인가와 쿠키와 세션에 대해서 Auth란?웹 개발에서 Auth란 웹페이지 이용자의 신원을 확인하는 인증(Authentication)과 인증된 사용자가 무엇을 할 수 있는지 권한과 절차를 검사하는 단계인 인가(Authorization) 두가지로 구분된다.인증 Authentication인증은 웹사이트를 사용 할 수 있는 신원을 확인하는 작업이다. 예를들어 포털사이트에 게시물을 읽거나, 댓글을 작성하려고 할 때 "로그인이 필요합니다"와 같은 문구를 맞닥뜨리게 되는 상황이다. 서버 입장에서는 현재 게시글을 이용하려는 요청이 포털사이트 이용자로 제한되어있기 때문에 인증이 필요한 상황이다.인가 Authorization인가은 로그인에 성공한 유저가 일반 게시글에 접근은 가능하지만 특정 게시물에 접근하려고 할 때 "접근 권한이 없습니다"라는 경고창.. 2025. 6. 6.
브라우저에 화면이 나타날때까지 어떤 일이 일어 날까? 📌 브라우저 렌더링 과정에 대해서 🌐 웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 현대 웹 개발에서 성능은 단순한 속도 문제가 아니라, 사용자 경험(UX)의 핵심입니다. 이 글에서는 브라우저가 웹페이지를 표시하는 전 과정을 단계별로 정리해보겠습니다. 브라우저 렌더링 전체 흐름탐색(Navigation)사용자가 URL을 입력하거나 링크를 클릭하면 탐색이 시작됩니다. DNS 조회 → TCP 핸드셰이크 → TLS 협상 단계를 거쳐 서버와 연결합니다.응답(Response)서버로부터 HTML 등의 데이터를 수신합니다. 이 때 TTFB(Time To First Byte)가 첫 체감 속도에 큰 영향을 줍니다.구문 분석(Parsing)HTML은 DOM으로, CSS는 CSSOM으로 파싱되어 구조화됩니다. 프.. 2025. 5. 19.
[프로젝트] 프로젝트구조 및 코드 컨벤션 https://llddang-blog.tistory.com/87📁폴더&파일 프로젝트 구조 - App routersrc/ : 루트 경로app/ : 페이지 및 layout 경로page.tsx 및 error.tsx, layout.tsx 등 next.js에 기본으로 기원하는 routing 파일들만 존재.components/ : 페이지에서 사용될 컴포넌트들의 모음layouts/ : 페이지의 layout에 사용될 컴포넌트 모음 (ex: Header, Footer, Sidebar 등)페이지의 layout 요소에 들어갈 컴포넌트특정 컴포넌트의 layout 요소를 저장하지 ❌ui/ : shadcn 에서 가져오는 공통 컴포넌트들의 모음commons/ : 프로젝트에서 사용할 공통 컴포넌트들의 모음프로젝트의 공통 컴포넌트라.. 2025. 4. 2.