split 함수: 문자열을 구분자로 잘라서 각각의 문자열을 배열로 저장할 수 있는 메소드논리연산자`&&` : a와 b가 모두 true인 경우 true`||` : a 또는 b 둘 중에 하나가 true인 경우 true`!` : a가 true가 아닌 경우 true스프레드 연산자'펼쳐주는 연산자'스프레드 연산자를 사용하면 배열, 문자, 객체 등의 반복 가능 객체(Iterable Object)를 각각 개별 요소로 분리할 수 있다ex) `Math.max(...arr)`, `[...arr]` apply()주어진 this 값과 배열로 제공되는 arguments로 함수를 호출함`func.apply(thisArg, [argsArray])` array 중복 요소 제거arr의 중복 요소를 제거한 뒤 출력하세요.const ar..

개요프로젝트에서 UI 요소를 선택할 때, 기존에는 UI 요소의 이름만 보고 선택하는 방식이였기 때문에 가시성이 떨어짐UI 요소의 이미지를 함께 보여준다면 사용자가 쉽게 선택할 수 있을 것이고 가시성이 올라갈 것이라 판단!따라서 UI 요소의 DOM을 캡처하여 썸네일을 보여주는 기능 구현 화면 캡처 라이브러리 조사화면(DOM) 캡쳐 및 저장 기능을 구현하기에 앞서, React에서 어떤 라이브러리를 제공하고 있는지 알아보자!또 그들의 장단점은 무엇인지 그래서 어떤 라이브러리를 사용하는 것이 좋은지 각자 판단해보기 ❤️‍🔥 `html2canvas`, `dom-to-image`, `html-to-image` 1. html2canvas장점널리 사용되고 검증된 라이브러리로, 오랜 기간 동안 많은 프로젝트에서 사용됨..

개요사이드 프로젝트 내에서 Axios Interceptors 초기 설정 기능을 맡았는데, 먼저 공부하는 시간을 갖는 것이 좋을 것 같아 작성한 내용이다!블로그에서도 글을 옮기면 좋을 것 같아 이렇게 포스팅을 한다 ~! 먼저 기능 개발 이전에 관련 정보들에 대해 먼저 알아보자! `Fetch API` VS `AXIOS`Fetch APIbody 안에 정보url은 () 안에 인자로body는 stringify()const url = '요청할 주소';const options = { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json;charset=UTF-8' }, body: JSO..

Next.js라는 프레임워크를 들어본 적이 있을 것이다! 모르면 이 글을 참고하자 ~  [React] Next.js 프레임워크의 정의와 장단점Next.js란 ? React에서 SSR(서버 사이드 렌더링)을 간편하게 해주는 프레임워크특별한 설정 없이 SSR, SEO부터 `Typescript`까지 생산에 필요한 많은 기능들을 제공해주는 강력한 React 프레임워크더보기SSsuji-sw.tistory.com 어쨌든 Next.js의 SSR는 기본적인 사전 렌더링 방식으로, 사용자 요청 시마다 서버에서 페이지를 새롭게 렌더링 하는 방식이다.사용자가 요청을 보낼 때 마다 서버에서 컴포넌트를 렌더링하고, 데이터를 불러와 화면을 업데이트해주는 SSR 에 대해 알아보자!  SSR 란 ? `SSR(Server-Side R..

웹 문서는 브라우저에 표시되어야 할 정보를 담고 있음.이때 정보란 ? 브라우저가 해석할 수 있는 프로그래밍 언어로 되어 있으며, 서비스를 제공하는 회사 혹은 서버에 저장되어 있음!사용자 URL을 통해 브라우저에 접근하여 웹 문서를 요청한다면 ? 이때, 브라우저가 사용자가 보기 편하게 예쁘게 표시하는 과정을 랜더링(Rendering)이라고 한다! CSR 란 ? `React`가 사용하는 기본적인 랜더링 방식으로, 브라우저가 `Javascript`를 실행하여 화면에 랜더링하는 방식맨 처음 사용자가 URL을 요청하게 되면 웹 문서가 가지고 있는 모든 정보, 링크, 페이지까지도 한번에 다 받아옴따라서 초기 화면 로드가 느림그렇지만, 로드가 되고 나면 사이트 내에서 돌아다닐 때는 로드되는 과정이 없어지므로 사용성이..

Scope범위, 영역을 뜻하는 말로 변수 접근 규칙에 따른 유효 범위자바스크립트는 기본적으로 함수가 선언되는 동시에 자신만의 Scope를 갖음그 범위를 벗어나면 오류 발생 ❗️지역 변수(Local variable)function solve() { let x = 3; // 지역 변수 console.log(x);}solve(); // ✅ OKconsole.log(x)// ❌ 에러 발생// 변수 x의 스코프는 solve() 함수 내에서만이다. // 변수가 유효한 범위 내에 있지 않기 때문에 정의되지 않았다는 오류 발생{ } 중괄호로 감싼 코드를 블록문(Block Statement)블록문 안에 선언된 변수를 로컬 변수 혹은 지역 변수(Local variable)지역 변수는 블록문 내에서만 사용할 수 있는 변수 ..

개요사이트 프로젝트 내에서 Axios Interceptors 초기 설정 기능을 맡아 개발하고 있는데,Postman을 사용해서 테스트해봤을 때는 문제가 발생하지 않았었는데, React 내 서버와의 연결 테스트에서 CORS 에러가 발생하였다 !  이게 도대체 뭔지, 왜 발생하는 건지 궁금해서 대충 찾아봤는데 ..client : `localhost:3000` 포트 사용server: `localhost:8080` 포트 사용서로 다른 도메인에서 요청을 하고 있기 때문에 보안상 브라우저에서 이가 제한되어 CORS Error 발생한 것이라고 한다.그렇다면 조금 더 자세하게 알아보자❗ CORS란?`CORS: Cross-origin-resource-sharing` ⇒ 교차(엇갈린) 출처 리소스 공유 정책Server와 C..

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는 레이아웃과 관련된 속성에 의해 발생하며, 다음과 같은 요소들이 이..