지미뉴트론 개발일기

안녕하세요.이번 시간에는 자바스크립트에서 이미지 파일을 base64로 인코딩하거나base64 인코딩을 다운받을 수 있는 파일로 디코딩하는 방법에 대해서간단한 예제로 다루어보도록 하겠습니다.  이미지 파일 -> base64 인코딩이미지 파일을 input으로 받아 base64로 인코딩하는 함수 예시는 다음과 같습니다.function convertImageToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = (erro..

타입스크립트에서 as 타입 형태로 타입을 지정하는 타입 단언 문법이 있습니다.이번 글에서는 이러한 타입 단언을 사용할 수 있는 대표적인 경우 몇 가지를예시 코드를 통하여 정리해보도록 하겠습니다.  1. DOM 요소를 다루는 경우웹 개발을 진행하는 과정에서 DOM 요소를 많이 다루게 되는데요.이 과정에서 가져온 DOM 요소의 타입이 null인 경우도 고려하여HTMLElement | null로 타입을 인식하는 것이 기본적입니다. 이러한 경우, null의 가능성을 배제하여 코드를 작성하고 싶다면타입 단언을 사용하여 이 과정을 구현해볼 수 있습니다.// getElementById의 결과가 null인 경우를 배제하여 컴파일러가 인식const inputElement = document.getElementById("..

리액트에서 부모 컴포넌트의 일부 정보가 변동되어 렌더링이 다시 되는 과정에서자식 컴포넌트도 기본적으로는 다시 렌더링되게 됩니다. 그러나, 항상 자식 컴포넌트들이 지속적으로 렌더링되어 불필요한 과정이 많다면효율성이 좋지 않고 긴 지연 시간을 발생시킬 수 있습니다. 이 과정에서 자식 컴포넌트가 변경되지 않았을 때는, 자식 컴포넌트의 재렌더링을방지하여 최적화를 할 수 있는 기능을 React.memo가 제공하고 있습니다. 이번 글에서는 React.memo 기능의 사용 방법을 간단한 예제를 통하여이해를 해보는 시간을 가져보도록 하겠습니다.  기본 사용 예제React.memo에는 자식 컴포넌트의 선언 시에 감싸주는 방식으로 선언을 진행하면 되며,기본적으로 자식 컴포넌트의 props가 변경되었는지 여부를 판단하여재렌..

리액트로 구현을 진행할 때, 현재 url 정보가 필요한 경우가 있습니다.이 경우, react router에서 제공하는 useLocation hook을 사용하면 쉽게 구현할 수 있는데요.이번 글에서는 이 기능에 대해서 간략한 예제를 통해 살펴보도록 하겠습니다.  사용 예시다음과 같은 url 예시가 있다고 가정해 보겠습니다.https://example.com/products?category=shoes&color=red#reviews여기서 사이트 주소 뒤의 /products 는 경로에 해당하고,? 뒤에 있는 ?category=shoes&color=red 는 쿼리에 해당하며, # 뒤에 있는 #reviews는 해시 값에 해당하는 상황입니다. 이 경우, 위의 값들을 다음 코드 예제를 통해 추출할 수 있습니다.imp..

리액트에서 렌더링 과정 외에서 발생하는 작업인 사이드 이펙트를 처리할 수 있는 훅인useEffect의 사용 방법을 예제 코드를 중심으로 간략하게 정리해보도록 하겠습니다.  useEffect 기본 예제기본적으로 특정 변수의 값이 변경되었을 때마다원하는 이펙트를 실행하게 하는 역할을 수행합니다. 예를 들어, MyVariable이라는 변수가 변경될 때마다console.log의 이펙트 부분이 실행되는 예시는 다음과 같습니다.useEffect(() => { console.log(`변수의 값이 ${MyVariable}로 변경되었습니다.`);}, [MyVariable]); 위 코드를 함수 컴포넌트 내에 포함시켜주면,해당 변수의 값이 바뀔 때마다 해당 로그가 출력되게 됩니다. 만일, 변수 여러 개에 의존성을 모두 걸..

자바스크립트에서 GPT 등의 openai 모델에 대한 API를 호출하는 방법을 간략한 코드 예제로 쉽게 정리해보도록 하겠습니다. 1. 프롬프트 준비 우선, 프롬프트 목록에 대한 리스트를 아래와 같은 양식으로 준비해 줍시다. const messages = [ { role: 'system', content: "답변은 항상 한국어로 해주세요."} { role: 'user', content: "Who is the first president of USA?"} ] 2. GPT 호출 파라미터 준비 이후, openai api 호출을 위한 json input 양식을 준비해줍시다. 예시는 다음과 같습니다.(위에서 정의한 messages 변수를 사용합니다.) const gptInput = { model: 'gpt-3.5-..

리액트에서 페이지 이동을 구현하는 과정에서 useNavigate는 매우 유용하게 사용됩니다. 상세한 이해를 위하여 해당 훅의 사용 방법에 대하여 간략하게 요약해보도록 하겠습니다. 1. 설치 및 임포트 방법 useNavigate는 react-router-dom 라이브러리에 포함된 훅으로, 해당 라이브러리가 설치되지 않은 경우, 먼저 설치를 진행해주셔야 합니다. // npm을 사용하는 경우 npm install react-router-dom // yarn을 사용하는 경우 yarn add react-router-dom 임포트 및 훅 사용을 위하여 객체를 선언하는 코드 예시는 다음과 같습니다. import { useNavigate } from 'react-router-dom'; const navigate = u..

javascript에서 비동기 처리를 하는 과정에서 필수적인 개념인 Promise 객체, async 및 await의 개념들을 간단한 예시를 통하여 이해를 해보는 시간을 가져보도록 하겠습니다. Promise 객체 Promise는 자바스크립트에서 비동기 작업을 표현하는 객체입니다. 비동기 작업이 완료된 후에 요청이 성공하면 결과값을 반환해주고, 실패한 경우에는 이유를 처리할 수 있는 방법을 제공하는 원리입니다. 해당 객체는 세 가지 상태를 가질 수 있는데요. 아직 요청을 처리하고 있는 중이라면 pending, 요청의 결과값을 성공적으로 받았다면 fulfilled, 요청이 실패하였다면 rejected의 상태를 가지게 됩니다. Promise 객체의 선언 방식은 다음과 같이 정리할 수 있습니다. const pro..

리액트의 대표 필수 개념이지만 혼동되기 쉬운 props와 state의 차이를 간단한 예제를 기준으로 이해해보도록 하겠습니다. Props props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 때 사용되며, 읽기 전용으로 자식 컴포넌트에서는 수정이 불가능합니다. 코드에서 사용되는 방식의 예시 코드 스니펫은 다음과 같습니다. function Welcome(props) { return Hello, {props.name}; } function App() { return ; } App 컴포넌트는 Welcome 컴포넌트에 name이라는 prop을 전달할 것입니다. Welcome 컴포넌트는 이 prop을 사용하여 동적으로 데이터를 렌더링하게 됩니다. 최종 출력 결과는 Hello, Jimmy 텍스트가 h1 태..

JavaScript에서 자주 사용되는 기능 중 하나인 Method Chaining에 대하여 간략하게 설명을 해본 뒤, 예제를 통하여 쉽게 이해를 해볼 수 있도록 정리해 보겠습니다. 메서드 체이닝(Method Chaining)이란? JavaScript의 method chaining(메서드 체이닝)은 객체 지향 프로그래밍 스타일 중 하나로, 객체의 메서드를 연속적으로 호출할 수 있게 해주는 기능입니다. 이를 통해 코드의 가독성을 향상시키고, 더욱 간결한 코드를 작성할 수 있지만, 한 번에 너무 많은 체이닝을 사용하면 혼란을 가중시킬 수 있으므로, 유의할 필요가 있습니다. 메서드 체이닝은 object.method1().method2().method3()와 같은 식으로 연속된 메서드 적용을 의미하는데, 아래의 ..