728x90

전체 글 161

[알고리즘]백준 1238: 파티

다익스트라 알고리즘최단경로 → 다익스트라(Dijkstra) 알고리즘다익스트라 알고리즘은 한 정점에서 각 정점까지의 최단경로를 찾는 알고리즘으로 우선순위큐를 사용하는 경우 O(MlogN)의 시간복잡도를 가진다.(이때, N: 정점의 개수, M: 간선의 개수)  로직초기화시작 정점까지의 거리는 0으로 초기화후, 우선순위 큐에 넣음시작 정점 외의 다른 정점까지의 거리를 무한대로 초기화(dist 배열)인접한 정점의 거리 update우선순위큐에서 정점을 뽑아, 현재 정점으로 설정현재 정점에서 인접한 정점까지의 거리 update(시작 정점 → 인접한 정점까지의 거리보다 현재 정점을 거쳐서 가는 경우가 더 빠르다면, dist 배열을 초기화하고 우선순위큐에 넣음)우선순위큐가 빌때까지 2번을 반복 코드import java..

알고리즘/백준 2024.06.23

[알고리즘]백준 10986: 나머지 합

처음에는 슬라이딩 윈도우 기법으로 풀었으나 이 경우 시간복잡도가 O(N^2)으로 N의 최대값이 10^6이기 때문에 시간초과가 발생했다.import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import java.util.Arrays;import java.util.StringTokenizer;public class Main { static int N,M; static int[] numbers; static int answer; public static void main(String[] args) throws IOException { BufferedReader br = ..

알고리즘/백준 2024.06.19

React의 상태 관리 라이브러리

📖props-drilling 데이터가 상위 컴포넌트에서 하위 컴포넌트로 전달되는 과정에서 중간 컴포넌트들을 거치면서 발생하는 문제로, 중간 컴포넌트가 많아지면 코드가 복잡해질 수 있다. props-drilling 문제를 해결하기 위해 다음과 같은 라이브러리들을 사용할 수 있다. ✏️React Context API react에서도 React Context API라는 자체적인 전역 상태관리 API를 제공해준다. 단, React Context API를 사용하면 리액트 앱 최상단에 Provider가 배치된다. Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다. context를 구독하는 컴포넌트들을 Provider의 value prop이 바뀔 때마다 다시 렌더링된..

📕CS 2024.04.19

React 컴포넌트의 라이프사이클

📖라이프사이클React 컴포넌트는 라이프사이클을 가진다. 라이프사이클은 컴포넌트가 생성되고 소멸되기까지의 일련의 과정을 말한다. 라이프사이클 안에서는 각 시점에 자동으로 호출되는 함수가 있는데 이를 라이프사이클 메서드라고 한다. 🔎Mount >  Update, Re-render > Unmount✏️MountDOM이 생성되고 웹 브라우저 상(화면)에 나타남. Mount 시에는 다음의 메서드들이 차례대로 호출된다.constructor: 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드render: UI를 렌더링 하는 메서드componentDidMount: 컴포넌트가 웹 브라우저 상에 나타난 후..

📕CS 2024.04.19

www.naver.com을 주소창에 입력하면 어떻게 될까요?

"면접을 위한 CS 전공지식 노트"를 읽고 공부한 내용입니다. ❓ www.naver.com을 주소창에 입력했을 때, 화면이 그려지기까지의 과정을 설명해 보세요. www.naver.com을 입력하면 크게 1)리다이렉션-2)캐싱-3)DNS-4)IP 라우팅-5)TCP 연결-6)요청과 응답-7)브라우저 렌더링이 발생한다. 리다이렉션은 사용자가 처음 요청한 URL과 다른 URL로 보내는 것을 뜻하며, URL이 잘못됐을 때 혹은 사용자 권한에 따라 적절한 페이지로 안내되는데 사용된다. (HTTP 3.xx 코드 응답) 캐싱은 요청에 대한 응답을 저장해뒀다가 재요청시에 이를 활용하는 것이다. 캐싱에는 브라우저 캐시와 공유캐시가 있다. 브라우저 캐시는 쿠키, 로컬스토리지 등을 포함한 캐시이다. 예를 들어, 어떤 사이트를..

📕CS 2024.04.14

프론트엔드 성능 최적화

프론트엔드 성능 최적화 방법을 로딩 최적화, 렌더링 최적화 관점에서 정리해보았다. 📖로딩 최적화 방법 🔎화면이 그려지기까지 과정 domContentLoaded domContentEventLoaded는 웹 페이지의 DOM 트리가 완전히 로드되고 파싱되었을 때 발생하는 이벤트이다. domContentEventLoaded 이벤트는 이미지, 스타일시트 및 하위 프레임 로딩을 기다리지 않고 발생하며, 웹 페이지의 초기화 및 설정 작업을 수행하기 적절한 시점이다. load load 이벤트는 웹 페이지와 그 안에 있는 모든 리소스(이미지, 스타일시트, 스크립트 등)가 완전히 로드되었을 때 발생한다. 페이지가 완전히 로드된 후에만 실행되어야 하는 작업이 있는 경우에 유용하다. 🔎블록 리소스 블록 리소스란 웹 페이지의 ..

💻웹(Web) 2024.04.12

AJAX: SSR과 CSR

📖AJAX(Asynchronous Javascript and XML) AJAX는 언어나 프레임워크가 아닌 구현하는 방식을 의미 AJAX는 웹(Web)에서 화면을 갱신하지 않고, 데이터를 서버로부터 가져와 처리하는 방법을 의미 JavaScript의 XMLHttpRequest(XHR) 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회한다. 화면갱신이 없으므로 사용자 입장에서는 편리하지만, 동적으로 DOM을 구성해야 하므로 구현이 복잡하다. ❗일반 요청에 대한 응답 data를 입력 후 event 발생 Ajax를 적용하지 않은 요청은 서버에서 data를 이용하여 logic 처리 logic 처리에 대한 결과에 따라 응답 page를 생성하고 client에 전송(화면 전환이 일어남) ❗Ajax 요청에 대한 응답 ..

📕CS 2024.03.17

[JavaScript]JavaScript

📖JavaScript 프로토타입 기반의 스크립트 프로그래밍 언어로 객체지향 개념을 지원한다. 웹 브라우저가 JavaScript를 HTML과 함께 다운로드하여 실행한다. 웹 브라우저가 HTML 문서를 읽어 들이는 시점에 JavaScript Engine이 실행된다. 대부분의 JavaScript Engine은 ECMAScript 표준을 지원한다. *JavaScript의 선언 🔎==연산자와 ===연산자의 차이 ===는 타입이 포함된다. 🔎JavaScript 객체 객체는 이름과 값으로 구성된 프로퍼티(Property)들의 집합 전역 객체를 제외한 JavaScript 객체는 프로퍼티를 동적으로 추가하거나 삭제할 수 있다. JavaScript의 함수는 일급 객체이므로 값으로 사용할 수 있다. 따라서 프로퍼티의 값으로..

[HTML]HTML5

📖HTML HTML = Hypertext Markup Language의 약자 문서를 Web Browser에 표현할 때 tag를 사용한다. : 현재 문서가 HTML 문서임을 정의 이력서 아래 정보는 거짓이 없습니다. 사진 성명 홍길동 주민번호 000000-000000 생년월일 2000년 01월 01일 주소 서울시 강남구 역삼동 77-1 연락처 집 02-1234-5678 이메일 honggd@naver.com 핸드폰 010-9876-5432 🔍img 태그 alt 속성 사용: alt 속성은 이미지에 대한 대체 텍스트를 제공하는 속성이다. 이미지가 로드되지 못했을 때나 스크린 리더 사용자에게 이미지를 설명해주는 역할을 한다. 따라서 모든 태그에 alt 속성을 포함시키는 것이 좋다. 🔍form 태그 사용자로부터 데..

728x90