code를 헤엄치는 인어공쭈

JavaScript - 자바스크립트 메모리 관리와 객체 참조 모델

자바스크립트는 동적 언어이기 때문에 변수의 할당과 해제가 자동으로 이루어진다. 이는 자바스크립트 엔진이 메모리를 관리하는 방식에 의해 가능해진다. 그렇다면, 자바스크립트는 어떻게 메모리를 관리하고, 불필요해진 메모리를 회수하는지에 대해 살펴보자. 1. 자바스크립트 메모리 관리의 기본 개념자바스크립트의 메모리 관리는 크게 두 가지 과정으로 나눌 수 있다:메모리 할당: 프로그램이 데이터를 생성하거나 객체를 생성할 때 메모리를 할당받는 과정이다.메모리 회수: 더 이상 필요하지 않은 메모리를 자동으로 회수하는 과정이다. 이를 **가비지 컬렉션(Garbage Collection)**이라고 한다.프로그래머가 직접 메모리 해제를 명시적으로 처리하는 언어(C, C++ 등)와 달리, 자바스크립트는 자동으로 메모리 관리를..

HTTPS & HTTP 네트워크

개념 설명 HTTP (Hypertext Transfer Protocol)는 클라이언트와 서버 간의 통신을 위한 프로토콜이다. 웹 브라우저를 통해 웹 페이지를 요청하고, 서버는 해당 요청에 대한 응답을 제공하는데 사용된다. HTTP는 클라이언트와 서버 간의 데이터 전송 방식, 헤더와 본문의 구조, 요청 및 응답의 상태 코드 등을 정의하고 있다. HTTPS (Hypertext Transfer Protocol Secure)는 HTTP의 보안 버전으로, 클라이언트와 서버 간의 통신을 암호화하여 보안성을 강화한 프로토콜이다. HTTPS는 HTTP와 동일한 구조와 기능을 가지고 있지만, 데이터의 안전한 전송을 해 SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security..

JavaScript - 자바스크립트의 싱글 쓰레드와 이벤트 루프

이벤트 루프1) 비동기 작업과 호출 스케줄링 자바스크립트는 싱글 쓰레드 환경에서 동작하는 언어이다. 즉, 한 번에 하나의 작업만 처리할 수 있다. 하지만 브라우저 환경이나 Node.js에서 비동기 작업(예: 파일 읽기, 네트워크 요청)을 처리해야 할 때, 자바스크립트는 이벤트 루프(Event Loop)를 이용해 동시성(Concurrency)을 지원한다.이벤트 루프는 자바스크립트의 비동기 처리에서 핵심 역할을 하는 메커니즘으로, 자바스크립트가 멈추지 않고 여러 작업을 처리할 수 있도록 도와준다. 콜스택(Call Stack), 태스크 큐(Task Queue), 그리고 이벤트 루프가 함께 협력하여 이러한 비동기 작업들을 효율적으로 처리한다.흐름을 간단하게 살펴보자면:싱글 쓰레드로 동작하는 자바스크립트는 하나의..

브라우저 랜더링 과정 - CRP(Critical Rendering Path)

브라우저가 웹 페이지를 표시하는 과정은 네트워크 관점과 렌더링 관점에서 나눠서 설명할 수 있다.  네트워크 관점에서는 브라우저가 서버로부터 필요한 리소스를 요청하고 다운로드하는 과정렌더링 관점에서는 다운로드한 리소스를 사용해 브라우저가 화면에 웹 페이지를 그리는 과정 네트워크 관점웹 페이지를 로드하는 과정은 브라우저가 서버로부터 필요한 리소스를 다운로드하는 네트워크 통신 단계입니다. 주요 단계는 다음과 같습니다:1) URL 입력 및 DNS 조회사용자가 웹 브라우저 주소창에 URL을 입력하면, 브라우저는 먼저 DNS 조회를 통해 해당 URL의 도메인 이름을 IP 주소로 변환합니다. 이 IP 주소는 웹 서버가 위치한 곳을 나타냅니다.2) TCP 연결 및 SSL 핸드셰이크브라우저는 서버와 TCP 연결을 맺습니..

Angular에서 ControlValueAccessor 쉽게 이해하기Angular에서 사용자 정의 폼 컴포넌트를 만들다 보면, Angular의 폼 시스템과 연동해야 하는 경우가 있다. 그때 필요한 것이 바로 ControlValueAccessor이다. 이 인터페이스를 사용하면 Angular 폼 제어기(FormControl, NgModel)가 커스텀 컴포넌트와 원활하게 연결될 수 있다. 쉽게 말해, Angular의 기본 폼 요소(input, select 등)처럼 커스텀 컴포넌트도 동일하게 동작하도록 만들어 주는 역할을 한다. Angular에서 커스텀 폼 컴포넌트가 Angular 폼 제어기(FormControl, NgModel)와 상호작용하는 과정은 ControlValueAccessor의 메서드들을 통해 이루..

과제를 하던중 .bind(this)를 사용하게 되었는데 곰곰히 생각해보니깐 정확한 뜻을 알고 쓴게 아니라 습관적으로 해당 함수를 참조한다 라고만 생각하고 썻던거 같다. 그래서 이번에 디테일하게 개념부터 알아보려고 한다. JavaScript에서 this 키워드는 함수를 호출 할때 결정된다. 함수를 어떤 방식으로 호출하는지에 따라 값이 달라진다는 것이다.  1. 전역 문맥 (Global Context)전역 문맥에서 this는 전역 객체를 참조합니다:브라우저 환경에서는 전역 객체가 window입니다.Node.js 환경에서는 전역 객체가 global입니다.console.log(this); // 브라우저에서는 window 객체를 출력  2. 함수 문맥 (Function Context)기본 함수에서 this는 호출..

앵귤러 개발자로써 까먹은 기본적인 개념들을 한번 정리하는 시간을 가져 보겠다. 앵귤러의 동작원리란?앵귤러 부트스트랩: 브라우저가 HTML(index.html) 파일을 로드하고 앵귤러 애플리케이션이 부트스트랩됩니다.루트 모듈 초기화: main.ts 파일에서 platformBrowserDynamic().bootstrapModule(AppModule)이 호출되어 루트 모듈(AppModule)이 부트스트랩됩니다. AppModule이 부트스트랩되면 Angular는 루트 컴포넌트(AppComponent)를 로드하고, 이를 기반으로 애플리케이션의 나머지 컴포넌트들을 초기화합니다.의존성 주입: 필요한 서비스들이 컴포넌트에 주입됩니다.라우팅 처리: URL에 맞는 컴포넌트가 선택되고 로드됩니다.템플릿 렌더링: 컴포넌트의 ..

문제)배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다.예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다.1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다.2에서 나온 배열의 3번째 숫자는 5입니다.배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요.  문제풀이)function solution(array, commands) ..

https://angular-maps.com/ Angular Google Maps Components angular-maps.com위에서 많은 참고 바람 네이버 지도를 사용하다가 해외 지도가 필요해서 구글맵도 사용하게되었다.네이버 지도 사용방법은 다음시간에 한번 다뤄보겠다. 네이버 지도는 해외 지도를 제공안한다고 한다. 처음엔 뭔가 되는것 같아 보였는데 버그가 하도 많아서 됐다 안됐다 하는거 보고 찾아보고 문의도 해보니깐 지원을 안한다는 날벼락 같은 소리..! 왜 그걸 못봤지...  구글맵은 이전에도 사용해본 경험이 있어서 적용하는데 크게 어렵진 않았다. 사실 apiKey 만 발급받으면 거의 끝!https://developers.google.com/maps/documentation/javascript/g..

https://swiperjs.com/ Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com위에서 많은 참고 바람 이번에 내가 프로젝트에서 사용한 방법은 가장 나에게 익숙한 CDN link 삽입 방법으로 진행했다.install 하는건 버전 때문에 웬만하면 거부감이 드는 맘..위에 사이트에 친절하게 다 나와있긴한데 DOCS 에 대한 부담이 있을수 있으니 간단히 사용법 부터 설명해보겠다. 사용법1) Use Swiper from CDN (주로 index.h..