Programming160

• 

  브라우저에서 JavaScript의 동작 원리 JS는 단일 스레드 기반으로 동작한다. 즉, 한 순간에 하나의 실행 흐름만 가질 수 있고, 실행할 함수들은 콜 스택(Call Stack) 에 쌓였다가 위에서부터 하나씩 처리된다. 이런 구조에서는 어떤 작업이 오래 걸리면 그동안 스택이 막혀 화면 렌더링, 클릭 처리 같은 UI 작업까지 멈추는(“blocking”) 문제가 생긴다.그래서 브라우저는 JS 엔진(V8 등) 바깥에, 시간이 걸리는 일을 대신 처리하는 별도의 실행 환경을 제공한다. 흔히 Web APIs라고 부르는 영역인데, 여기에는 setTimeout 같은 타이머, 네트워크 요청(fetch/XHR), DOM 이벤트 감지(click/scroll), 파일/스토리지 접근 등이 포함된다. 핵심은, JS 엔진이 직접 오래 걸리는 일을 “병렬로 처리”하는 게 .. Programming/Javascript, Typescript 2026. 1. 13.

• 

  OAuth(Open Authorization)란 OAuth하면 떠오르는 건 소셜 로그인이다. 주로 소셜 로그인에 쓰이는 것이 맞지만, 그곳에만 쓰이는 것은 아니다. 제3자의 클라이언트에게 보호된 리소스를 제한적으로 접근하게 해주는 프레임워크를 OAuth라고 한다. 2007년 여러 오픈소스 개발자와 소셜미디어 종사자 등이 모여 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준의 필요성을 논의하다 개발했다고 한다. 이후 구글 등이 후원하면서 공식 프로토콜로 발전할 수 있었다. OAuth 1.0에는 모바일 미지원, 보안, 복잡성 등의 문제가 있었는데, 이를 보완하기 위해 2012년 OAuth 2.0이 개발되었다.. Programming/ETC 2026. 1. 12.

• 

  Debounce와 Throttle이란 프론트엔드 개발자 실무 면접에 자주 등장하곤 하는 두 개념이다. 작업을 의도적으로 지연시킨다는 점에서는 동일하다. 쓰로틀은 일정한 시간 간격을 두고 정기적으로 함수를 실행하고, 디바운스는 사용자가 함수 실행을 여러 번 할 때 대기했다 마지막 함수만 실행하는 걸 말한다. 나는 주로 lodash를 사용해 구현했는데, lodash는 사용하지 않는 추세다 보니(유지보수, 무거움 문제) 앞으로 직접 구현하면 좋을 듯하다. Debounce검색 박스의 제안, 텍스트 필드의 자동 저장, 버튼의 더블 클릭의 제거가 모두 debounce를 이용하는 사례다. function debounce(callback, delay) { let timer; return function () { clearTimeout(timer).. Programming/Javascript, Typescript 2026. 1. 9.

• 

  CSR, SSR, ISG, SSG 렌더링이란 CSR(Client Side Rendering) 비어 있는 HTML와 JS 파일만 서버가 클라이언트로 보내주고, 클라이언트(브라우저)가 JS로 DOM을 조작하여 HTML과 JS를 추가한다. 장점: 서버에 부담이 적다. 페이지 전체가 재로드 되지 않으므로 UX가 부드럽다.단점: 첫 로드 때 시간이 오래 걸린다. JS가 비활성화 되어 있는 경우에는 웹사이트가 제대로 동작하지 않는다. SSR(Server Side Rendering) 서버가 HTML을 최대한 렌더링한 후 브라우저로 보내주고, 클라이언트는 필요한 인터랙션 등의 JS 동작을 받은 HTML에 붙여 완성한다(hydration). 장점: 페이지 첫 로드가 빠르다. SEO 유리. JS 비활성화되어 있어도 보다 많은 콘텐츠를 제공할 수 있다.단점: 서버에 .. Programming/ETC 2026. 1. 8.

• 

  웹 브라우저에 URL을 입력하면 어떤 일이 생길까? 웹 브라우저에서 사용자가 특정 URL을 입력하면, 먼저 DNS(Domain Name System) 를 통해 해당 도메인에 대응하는 서버의 IP 주소를 조회한다. 이 과정에서 브라우저와 운영체제는 여러 계층의 캐시를 우선 확인한 뒤, 필요한 경우 실제 DNS 서버에 질의를 수행한다.URL에서 도메인 뒤에 이어지는 슬래시(/) 이후의 경로(path) 는 서버 내부의 특정 리소스(웹 페이지, API 엔드포인트 등)를 식별하기 위한 경로를 의미한다.웹사이트가 HTTPS를 사용하는 경우, 브라우저와 서버는 TLS(Transport Layer Security) 프로토콜을 통해 통신을 시작하며, 이 과정에서 암호화에 필요한 키를 교환하고 이후의 데이터 전송을 안전하게 암호화한다.브라우저는 일반적으로 TCP/IP(Tr.. Programming/ETC 2026. 1. 7.

• 

  [SSAFYCIAL] 다른 붙캠 말고 싸피 ~ ♪ ♫ 많은 개발 부트캠프 중 싸피를 선택한 이유! 안녕하세요, SSAFY 수료생 기자단 김혜린 기자입니다! SSAFY 7기에 입과할 무렵, 개발자로 진로를 정하고다양한 부트캠프들 중 어떤 부트캠프에 입과할 지 고민중이었는데요현업 개발자로 일하는 요즘도, SSAFY를 선택한 걸 참 잘했다고 생각하는데요 :) 모두가 알고 있는 뻔한 장점 보다는1년의 과정을 수료 후 개발자가 된 사람의 입장에서 느끼는찐 장점들만 모아 정리해봤습니다! 1. 좋은 동료와 선생님들 SSAFY에 합격하기까지 과정은 절대 쉽지 않았던 것 같아요. 서류 전형 → 온라인 테스트 → 대면 면접까지, 준비할 것도 많고, 과정도 길어 체력, 멘탈 둘 다 많이 소모됐는데요.그 과정 속에서 함께 선발된 동료들은 비슷한 목표·열정·의지를 가진 사람들이었고, 그래서인지 자연스럽게 서로에게 큰 힘이 .. Programming/SSAFY 2025. 11. 26.

• 

  JavaScript 디자인 패턴 책 (한빛미디어)를 읽고 19개의 패턴의 간단한 정의와 예시들을 정리해본다.생성 패턴객체를 생성하는 방법을 다루는 패턴 생성자 패턴*ES6의 class 문법을 사용 객체 지향 프로그래밍을 위한 문법적 설탕(syntactic sugar)으로, constructor 메서드를 통해 객체 초기화를 수행하고 new 키워드를 사용하여 인스턴스를 생성하는 구조이다. class 내부에서 속성과 메서드를 정의하며, 상속 및 캡슐화 같은 OOP 개념도 자연스럽게 표현할 수 있다.class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello.. Programming/Javascript, Typescript 2025. 7. 6.