[Study] 개발 공부41 sort를 사용한 특수 조건 우선 정렬 sort 사용법 관련해서 공부가 필요해서 정리 목표: Post의 특정 조건(예: 북마크)을 가장 우선적으로 비교하고, 그 후 시간 비교(최신순)를 수행한다. 북마크가 최우선 정렬되어야 하며, 북마크끼리도 시간순 정렬이 되어야한다. Q1: new Date에서 getTime()을 해야하는 이유?A1: new Date는 Date 객체로만 바꿔줄 뿐이고 비교는 불가. getTime()을 사용하면 날짜를 숫자 값으로 변환하여, 두 날짜의 차이를 정확하게 비교할 수 있다.type Post = { id: number; title: string; upload_date: string; // 날짜는 ISO 8601 형식의 문자열 bookmark: boolean; // 북마크 여부};// 예제 데이터const p.. 2025. 1. 3. [Study] 웹 브라우저 동작 원리 브라우저의 기본 동작 원리사용자가 URL을 통해 1. 웹 페이지에 접속하면, 브라우저는 2. DNS(Domain Name System) 서버를 통해 도메인 이름을 IP 주소를 변환한다. 이 IP 주소를 통해 3. 서버와 연결한다. 브라우저는 설정된 연결을 통해 웹 페이지의 4. HTML 문서 요청하고, 이를 받아온다.그러면 렌더링 엔진은 HTML과 CSS, JavaScript를 파싱(Parsing)하고 그 결과물을 바탕으로 페이지를 그려내는 역할을 한다. HTML, CSS, JavaScript의 브라우저에서의 렌더링 원리1. HTML 파싱 및 DOM(Document Object Model) 생성파싱은 문서의 텍스트를 분석하여 의미 있는 구조로 변환하는 과정이다.브라우저는 HTML의 문자열들을 파싱하여 파.. 2024. 12. 20. [React] dangerouslySetInnerHTML: DOM에서 innerHTML 사용하기 아래와 같이 태그가 포함된 문자열 배열을 HTML로 렌더링하면 태그가 그대로 출력된다.details: [ "Recoil 사용하여 전역 상태 관리", "AWS S3 Bucket을 이용한 이미지 URL 생성 및 업로드", "Vite 기반 ESLint와 TypeScript를 적용한 개발 환경 구성"] 이처럼 React는 기본적으로 HTML 태그를 포함한 문자열을 일반 텍스트로 처리한다.따라서 같은 태그가 포함된 문자열을 그대로 전달하면 HTML로 해석되지 않고 단순한 텍스트로 렌더링된다.이를 해결하기 위해 React에서 HTML로 렌더링하도록 명시적으로 지시하는 방법이 dangerouslySetInnerHTML이다. __html: HTML 문자열을 지정하는 속성. 따라서 여기에 문자열을 넣어주면 된.. 2024. 12. 10. [React] Lenis로 부드러운 스크롤 효과 추가하기 1. Lenis?일반적인 스크롤 이벤트의 딱딱한 움직임 대신, 부드럽게 감속하거나 가속되는 애니메이션 효과를 추가할 수 있는 라이브러리아래 링크에 사용하는 방법이 기재되어 있다.https://github.com/darkroomengineering/lenis GitHub - darkroomengineering/lenis: How smooth scroll should beHow smooth scroll should be. Contribute to darkroomengineering/lenis development by creating an account on GitHub.github.com 2. 사용하기Git에 기재된 코드에 Lenis 인스턴스를 생성하여 감속 효과를 정의해보았다.Typescript 사용 .. 2024. 11. 28. 이전 1 2 3 4 5 6 7 ··· 11 다음
