본문 바로가기

분류 전체보기23

웹 스토리지의 모든 것: 저장 방식, 비교, 실무 활용과 면접 전략 웹 스토리지는 클라이언트 측에서 데이터를 저장할 수 있는 다양한 기술을 의미하며, 사용자 경험을 향상시키고 서버 요청을 줄이는 데 중요한 역할을 합니다. 오늘날 대부분의 웹 애플리케이션에서는 localStorage, sessionStorage, Cookie뿐 아니라, 대용량 및 구조화 데이터를 위한 IndexedDB까지 활용됩니다. 이 네 가지 방식은 기능, 보안, 저장 방식, 브라우저 처리 방식에서 각각 다른 특성을 가지고 있으며, 실무와 면접 모두에서 명확한 이해가 필요합니다.웹 스토리지란 무엇인가? (개념과 기술 진화)웹 스토리지(Web Storage)는 브라우저가 클라이언트 측에서 데이터를 저장할 수 있도록 제공하는 기능입니다. 대표적인 저장 방식은 다음과 같습니다:localStorage: 브라우.. 2025. 5. 4.
CORS와 SOP 완전정리: React·Next·Spring 연동 가이드 CORS(Cross-Origin Resource Sharing)는 브라우저에서 발생하는 보안 정책인 SOP(Same-Origin Policy, 동일 출처 정책)를 우회하기 위한 메커니즘입니다. 프론트엔드와 백엔드를 분리해 개발하는 환경, 특히 React, Next.js와 Spring Boot를 함께 사용하는 구조에서는 CORS 문제가 매우 흔하게 발생합니다. 본 글에서는 SOP와 CORS의 개념, CORS 요청 흐름, 그리고 실무에서 발생하는 에러 사례 및 해결 전략을 구조적으로 정리합니다.SOP(Same-Origin Policy)와 CORS란 무엇인가?SOP(Same-Origin Policy)는 웹 브라우저의 보안 정책으로, 출처(origin)가 다른 리소스에 대한 접근을 제한합니다. 출처는 프로토콜,.. 2025. 5. 4.
자바스크립트 Promise와 async/await 개념 정리 자바스크립트(JavaScript)에서 비동기 처리(asynchronous programming)는 사용자 경험(UX)과 시스템 안정성에 큰 영향을 미치는 핵심 개념입니다. 특히 네트워크 요청, 타이머, 파일 처리처럼 시간이 걸리는 작업을 효과적으로 다루기 위해, JS는 오랜 시간 동안 콜백(callback), Promise, async/await 등의 방식을 발전시켜 왔습니다. 이 중에서도 Promise는 콜백 헬을 해결하고 코드의 흐름을 구조화하는 데 중심적인 역할을 하며, 이후 async/await로 자연스럽게 이어졌습니다. 본 글에서는 Promise의 개념과 동작 방식, 콜백/async와의 비교, 실무 활용법과 면접 대응 전략까지 학습과 실전에 도움이 되도록 정리합니다.Promise란 무엇이며 왜 .. 2025. 5. 4.
프론트엔드 E2E 테스트: 개념, 도구, 실무 전략 정리 프론트엔드 개발이 점점 복잡해짐에 따라, 기능이 정상적으로 작동하는지 전체적인 사용자 흐름을 테스트하는 E2E(End-to-End) 테스트의 중요성이 더욱 강조되고 있습니다. 단순히 버튼 하나가 클릭되는지를 넘어서, 사용자 관점에서 실제 시나리오를 자동화로 점검하는 것은 서비스 품질과 유지보수성 모두에 영향을 줍니다. 이 글에서는 E2E 테스트의 개념, 대표적인 도구, 실무에서의 적용 방법과 면접 대응 전략까지 체계적으로 정리합니다.E2E 테스트란 무엇인가?E2E(End-to-End) 테스트는 시스템의 시작부터 끝까지 실제 사용자와 동일한 방식으로 기능을 검증하는 테스트 방식입니다. 예를 들어, 사용자가 로그인하고 상품을 장바구니에 담고 결제하는 과정을 브라우저를 통해 자동으로 테스트하는 것이 이에 해당.. 2025. 5. 4.
자바스크립트 싱글 스레드 동작 원리 정리 자바스크립트(JavaScript)는 대표적인 싱글 스레드(Single Thread) 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있는 구조를 가졌습니다. 그럼에도 불구하고 브라우저 환경에서 동시적으로 여러 작업을 수행하는 것처럼 보이는 이유는 자바스크립트의 이벤트 루프(Event Loop)와 비동기 처리 모델 덕분입니다. 본 글에서는 자바스크립트가 싱글 스레드임에도 어떻게 논블로킹 방식으로 여러 작업을 효율적으로 처리하는지 그 원리를 설명하고, 실무와 면접 대비에 도움이 되는 개념 정리를 제공합니다.자바스크립트는 왜 싱글 스레드인가?자바스크립트는 초기 설계부터 UI와 사용자 입력을 안전하게 다루기 위해 싱글 스레드 모델로 만들어졌습니다. 스레드가 여러 개일 경우, DOM을 동시에 수정하면서 충돌이.. 2025. 5. 3.
타입 vs 인터페이스 완전정리 (정의, 차이, 실무 예시) TypeScript는 자바스크립트에 정적 타입 시스템을 도입해 코드 품질을 높이고 오류 가능성을 줄여주는 강력한 도구입니다. 특히 대규모 프로젝트나 협업 환경에서는 코드의 일관성과 명확한 계약(contract)을 위해 타입 정의가 매우 중요해집니다. TypeScript에서 타입을 정의하는 대표적인 방법으로는 type과 interface가 있으며, 둘은 문법적으로 유사해 보이지만 실제로는 사용 목적, 기능 지원, 확장성 등 여러 차이점이 존재합니다. 실무에서는 이 둘을 상황에 따라 구분해서 사용해야 하며, 프론트엔드 개발자 면접에서도 단골로 출제되는 항목입니다. 본 글에서는 type과 interface의 정의, 기능적 차이, 실제 사용 예시, 실무 적용 기준과 면접 대응법까지 모두 정리합니다.타입과 인터페.. 2025. 5. 3.

티스토리툴바