LocalStorage, SessionStorage, Cookies 모두 웹 브라우저에서 사용되는 데이터 저장 방식입니다.그렇다면 각각의 특징은 무엇일까요? Cookies서버와 클라이언트 간 상태 정보를 유지하거나 사용자의 이전 상태를 기억하기 위해 사용최대 4Kb의 데이터만을 저장할 수 있으며, 만료 날짜가 지나면 자동으로 삭제됨HTTP 헤더를 통해 서버와 클라이언트 간에 주고받을 수 있음ex) 광고 7일동안 보지 않기 기능, 자동 로그인 LocalStorage브라우저가 닫혀도 데이터가 유지되는 스토리지 (로컬 환경에서만 컨트롤)저장용량은 브라우저에 따라 다르지만 일반적으로 5MB ~ 10MB시간 제한이 없고 브라우저가 꺼져도 삭제되지 않음 (= 삭제하려면 직접 지워줘야 함)ex) 사용자 테마local..

이벤트란?이벤트(event)란, 웹페이지에서 발생하는 사용자 상호 작용을 말함즉, 사용자가 어떤 행동을 취하거나 브라우저에서 자체적으로 발생하는 상황을 말함마우스 이벤트: click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout키보드 이벤트: keydown, keyup, keypress폼 이벤트: submit, change, input포커스 이벤트: focus, blur윈도우 이벤트: load, resize, scroll 이벤트 핸들러란?Javascript에서 이벤트를 다룰 때 이벤트 핸들러를 사용함이벤트 핸들러 → 이벤트가 발생했을 때 실행되는 함수즉, 사용자의 동작으로 인해 어떤 이벤트가 발생했을 때 그로 인해 어떤 일이 발생될 것인지 정..

Closure란?💡 함수가 종료된 이후에도 그 함수 내부의 지역 변수를 기억하고 접근할 수 있도록 하는 개념‘함수’를 지칭하고, 또 ‘그 함수가 선언된 환경과의 관계’의 개념자신이 선언될 당시의 환경을 기억하는 함수내부 함수가 외부 함수의 context에 접근할 수 있는 것Closure = 폐쇄 ⇒ 스코프를 이용하여 변수의 접근 범위를 ‘폐쇄’하는 것외부 함수 스코프에서 내부 함수 스코프로 접근 불가능내부 함수에서는 외부 함수 스코프에서 선언된 변수에 접근 가능 Closure 코드 예시function closureFunction() { let a = 10; // 지역 변수 return function innerFunction() { console.log(a); }}const myFunc = closu..

AI가 소프트웨어 개발에 미치는 영향은 실로 크고, 특히 프론트엔드 개발에서는 ChatGPT나 GitHub Copilot 같은 AI 도구들이 큰 도움이 되고 있습니다. 하지만 AI가 개발자를 대체할 수 있을까? 라는 질문은 여전히 많은 개발자들의 고민 중 하나일 것입니다. 그보다는 AI가 개발자의 부족한 부분을 채워주고, 함께 더 나은 결과를 만들어갈 수 있을까?를 생각해 보는 것이 더 의미가 있습니다. 그렇다면 AI가 개발자의 효율성을 어떻게 높이고, 개발자가 더 창의적인 작업에 집중할 수 있게 돕는 협업 도구로서 어떤 역할을 할 수 있을까요?!  AI가 코드 작성에 미치는 영향프론트엔드 개발에서 AI 도구들은 코드 작성 과정에서 개발자들의 생산성을 크게 높여줄 뿐만 아니라, 오류 상황에서 빠르게 오류..

Reflow와 Repaint란 무엇인가?Reflow와 Repaint는 브라우저의 렌더링 과정에서 발생하는 중요한 작업입니다.웹페이지의 DOM이나 스타일이 변경될 때 브라우저는 해당 내용을 반영하기 위해 다시 계산하고 화면을 갱신합니다.Reflow레이아웃이 변경될 때 발생합니다. 요소의 크기, 위치, 또는 폰트 크기 등이 변할 때, 브라우저는 해당 요소와 그 주위의 레이아웃을 다시 계산해야 합니다.Repaint스타일의 시각적 속성(예: 색상, 테두리, 그림자 등)이 변경되면 Repaint가 발생하여 해당 요소가 다시 그려집니다. 하지만 레이아웃을 다시 계산하지는 않습니다.  Reflow & Repaint를 유발하는 스타일 요소들Reflow는 레이아웃과 관련된 속성에 의해 발생하며, 다음과 같은 요소들이 이..

1. readline 모듈이란?readline 모듈은 Node.js에서 제공하는 기본 모듈로, 터미널에서 입력과 출력을 처리할 수 있도록 도와줍니다. 주로 CLI(Command Line Interface) 프로그램에서 사용자로부터 입력을 받고, 이를 처리하거나 결과를 출력하는 데 사용됩니다.주요 기능콘솔 입력 처리: 사용자로부터 실시간으로 입력을 받을 수 있음.입력된 데이터 처리: 줄 단위로 입력을 받아, 각 입력마다 이벤트를 발생시켜 특정 작업을 수행.질문 및 응답: 사용자의 입력을 기다렸다가, 입력된 값에 따라 동작을 처리하는 기능. 2. readline 사용 방법Node.js에서 readline을 사용하려면 먼저 모듈을 불러와야 합니다. 아래는 간단한 예제입니다. const readline = re..

들어가며 HTML이 처음 등장한 1991년에는 CSS가 없었으나, 디자인에 대한 요구가 커지며 CSS 탄생함그러나 웹이 복잡해지고 동작 기능 요구가 증가하며 HTML과 CSS만으로는 모든 스타일을 제어할 수 없어짐이를 해결하기 위해 여러 가지 스타일 구성 방식이 나타났으며 크게 CSS-in-JS와 CSS-in-CSS가 생김 CSS 문제점Global namespace: 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 하는 문제Dependencies: css 간의 의존관계를 관리하기 힘든 문제Dead Code Elimination: 기능 추가, 변경, 삭제 과정에서 불필요한 CSS를 제거하기 어려운 문제Minification: 클래스 이름의 최소화 문제Sharing Consta..

env란? 어플리케이션 및 웹 개발 중 외부에 공개되면 안되는 정보 (예: 포트 번호, 데이터베이스 관련 정보, 토큰, API 키 등)가 존재하게 될텐데, 이러한 정보가 하드 코딩으로 구성 파일에 포함되면 깃허브나 기타 오픈소스에서 관련 정보들이 노출될 위험이 있습니다. 또한, 서버나 토큰 정보가 수정될 경우 하드코딩을 하였기 때문에 코드를 다시 수정하여 배포해야 하는 문제점도 발생합니다. 이때 이러한 문제를 해결하기 위해 env 파일을 사용합니다. env 파일을 사용하게 되면 외부에 공개되면 안되는 정보들을 구성 파일에 하드코딩하지 않고 사용할 수 있게 됩니다. 외부 파일(.env)에 환경 변수를 정의하여 변수로 받아오는 이유는 보안성과 유지보수성을 높이기 위함입니다. React에서 .env 파일 생성..

브라우저란 ? 쉽게 말해, 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고 문서 검색을 도와주는 응용 프로그램이다. 브라우저의 종류로는 Google Chrome, Apple Safari, Nava Whale, Microsoft Edge 등이 있다. 사용자가 특정 웹사이트를 접근한다고 가정할 때 다음과 같은 과정을 거칠 수 있다. 사용자가 브라우저를 실행 접속하고 싶은 사이트의 url를 주소창에 입력 브라우저는 입력된 url의 서버에게 사이트 정보를 받아와 이를 화면에 표시 표현된 정보를 사용자가 활용 즉, 사용자가 보고자 하는 페이지를 서버에 요청하고 서버로부터 받은 응답(HTML, CSS, Javascript 등)을 브라우저에 표시하는 것이다. 브라우저의 랜더링 원리 브라우저가 화면에 나타나는 요..

AJAX란? 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 로드하지 않고 필요한 일부 페이지의 데이터만을 로드하는 기법 자바스크립트를 사용하여 웹 서버와 클라이언트 간 비동기적으로 XML 데이터를 교환하고 조작하기 위한 웹 기술 하이퍼텍스트 표기 언어(HTML)만으로는 어려운 다양한 작업을 웹 페이지에서 구현해서 이용자가 웹 페이지와 자유롭게 상호 작용할 수 있도록 구현하는 기법 비동기란 ? 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미 AJAX의 동작 원리 클라이언트에서 서버로 데이터 요청, 그에 대한 결과를 반환받음 = 서버와 클라이언트의 통신 사용자에 의한 요청 이벤트 발생 요청 이벤트가 발생하면 이벤트 핸들러에 의해..

HTTP란? HTTP(Hyper Text Transfer Protocol): 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약이며 브라우저로 데이터를 전송해주는 용도로 많이 사용 기본 포트인 80번 포트에서 서비스 대기 중이며, 클라이언트가 TCP 80 포트를 사용해 연결하면 서버는 요청에 응답함 HTTP는 정보를 "텍스트"로 주고 받음. 따라서 전송 신호를 인터셉트하는 경우 데이터 유출이 발생할 수 있음. 프로토콜이란 ? : 컴퓨터 내부에서 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계를 의미한다. HTTP의 구조 HTTP는 애플리케이션 레벨의 프로토콜로 TCP/IP 위에서 작동함 HTTP는 상태를 가지고 있지 않는 Stat..

Swift 란? https://developer.apple.com/kr/swift Swift - Apple Developer Swift는 iOS, iPadOS, macOS, tvOS 및 watchOS를 위한 강력하고 직관적인 프로그래밍 언어입니다. Swift 코드 작성은 대화식으로 재미있고, 구문은 간결하면서도 표현력이 풍부하며, Swift에는 개발자들이 좋 developer.apple.com Swift는 Apple에서 개발한 프로그래밍 언어로, iOS, macOS, watchOS 및 tvOS 앱을 개발하는 데 사용된다. Swift는 C 및 Objective-C와 호환되며, 안전하고 빠른 코드 작성을 위해 설계되었다. Swift의 특징 안전 중심 설계(SAFE) 안전하게 코드를 작성할 수 있는 기능 제공..