개요프로젝트에서 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..

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

이벤트란?이벤트(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..

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

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

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

MobX란? 전역 상태 라이브러리 모든 상태 변화가 일어나는 부분을 자동으로 추적해주는 역할 유지보수가 쉬워지도록 상태 로직을 분리하여 모듈화할 수 있음 상태 관리의 단계를 간결하게 해줌 MobX 특징 React에 종속적인 라이브러리가 아님 redux와 다르게 store에 제한이 없음 절대적으로 필요한 경우에만 state 변경 Typescript를 기반으로 만들어짐 기본 동작 원리 및 개념 상태를 변경하기 위한 action이 발생하면 observable(상태)가 update되고, 상태가 변경되었음을 notify해서 필요에 따라 연산된 값(compute values)을 계산하거나 적절한 reaction(반응)을 수행한다. action이 state를 변경하는 단방향 데이터 흐름을 사용 영향을 받는 모든 vi..

[RN] React Native의 정의와 장단점 React Naitve란? 2015년 3월 페이스북에 의해 공개된 오픈소스 모바일 어플리케이션 프레임 워크 사용자 인터페이스를 만드는 React에 기반을 두고 제작 웹 브라우저가 아닌, iOS와 Android에서 동작하는 suji-sw.tistory.com 위의 포스팅을 통해 React Native의 정의와 장점, 단점 등을 알아보았다. React Native 개발자라면 해당 프레임워크가 어떻게 작동 하는지 알 필요성이 있기 때문에 해당 포스팅을 작성하도록 하겠다. React Native의 작동 방식 React Naitve는 크로스 플랫폼 앱 (Cross-Platform App)으로, javascript 언어로 iOS와 Android 플랫폼을 동시에 개발할..