전체 글83 [React] memo, useCallback 사용해보기 React.memo, useCallback, useMemo 는 리액트 성능 향상을 위해서는 빠지지 않고 등장하는 기능들이다. 이번에는 memo, useCallback를 사용해서 컴포터넌트의 리렌더링 발생을 줄여나가는 방법에 대해서 알아보려고 한다. 예제로 사용 될 컴포넌트는 다음과 같다. 기능은 각 버튼 클릭 시 클릭한 횟수를 보여주는 아주 간단한 기능이다. 그리고 두개의 버튼을 클릭한 횟수 전체를 보여주는 sum 도 제공한다.import "../App.css";import { useState } from "react";const Performance1 = () => { const [sum, setSum] = useState(0); const [count1, setCount1] = useState(0.. 2025. 4. 16. [Node] 이메일 전송 이메일을 보내기 위해서는 SMTP를 사용해야 한다. 지메일 또는 네이버에서는 기본적으로 SMTP 서버를 활용해서 메일을 전송하게 된다. 지메일의 SMTP를 사용하기 위해서는 앱 비밀번호를 생성해야 한다.프로필에서 계정 관리보안2단계 인증하단에 앱 비밀번호💡 앱 비밀번호 위치는 달라질 수 있음. 비밀번호를 기억해놓자. 🎈 nodemailer노드에서 메일 전송을 위해서는 nodemailer 라이브러리를 사용하면 간편하게 메일을 전송할 수 있다.설치아래와 같이 설치해준다.yarn add nodemailernpm install nodemailer 사용방법메일을 보내기 위해서는 먼저 transporter 객체를 생성해주어야 한다.const transporter = nodemailer.createTranspo.. 2025. 4. 13. [Javascript] 소수점 표현 자바스크립트에서는 정수와 실수에 대해서 분리하지 않고 오로지 number 타입만 가지고 있다. 즉, 모든 숫자는 실수라고 생각하면 된다. 🎈 실수의 계산정수값에 대한 계산은 오차가 발생하지 않는다. 아래와 같이 1 더하기 1은 항상 2가 나온다. 절대 3이 나올 수 없다.1 + 1 === 2 // true 하지만 실수값에 대한 계산은 우리가 생각하는 값과 차이가 존재한다. 현실세계에서 아래와 같이 0.1과 0.2를 더하면 누구나 0.3이라고 대답할 것이다. 하지만 자바스크립트로 아래의 코드를 실행해보면 false가 나오는 것을 확인할 수 있다.0.1 + 0.2 === 0.3 // false 이는 소수의 표현 방식이 우리와 다르기 때문이다.컴퓨터는 2진법을 사용한다.10진법의 소수 중 일부는 2진법 변.. 2025. 4. 11. [Javascript] 클립보드 🎈 Document.execCommand예전에는 Document.execCommand 메서드를 사용해서 복사 및 붙여넣기 기능을 사용하였다. 아래는 복사 버튼을 클릭 시, id가 email인 태그의 값을 복사하는 기능이다. email@email.com 복사 Document.execCommand 메서드를 활용해서 다음과 같이 복사 기능을 사용할 수 있다. 복사 버튼 클릭 후 붙여넣기 기능을 수행하면 email@email.com가 클립보드에 정상적으로 복사된 것을 확인할 수 있다. 📯 Document.execCommand의 문제점 첫번째, Dom을 대상으로만 사용이 가능하다. 위의 코드를 보면 알 수 있듯이, Dom이 선택 된 상태에서만 가능하기 때문에 강제로 선택상태로 만든 후 복사가 완료되면 선.. 2025. 4. 6. [Playwright] 클립 보드 허용 🎈 클립보드 테스트 하기 복사, 붙여넣기 등 클립 보드를 활용한 기능을 테스트해야하는 경우가 존재한다. 아래는 간단하게 복사 버튼을 누른 후 붙여넣기 버튼을 클릭했을 때 p 태그에 Hello world 텍스트가 보여지도록 하는 코드이다.더보기 복사 붙여넣기 브라우저를 통해서 실행해보면 정상적으로 Hello world가 출력되는 것을 확인할 수 있다.✨ 대부분의 브라우저에서는 보안상의 이유로 https 또는 localhost에서만 작동합니다. 이를 바탕으로 복사 버튼 클릭 후 붙여넣기 버튼을 클릭했을 때 텍스트가 정상적으로 보여지는지를 플레이라이트로 테스트 코드를 구성하였다.test('copy and paste', async ({ page }) => { await page.goto('htt.. 2025. 4. 6. [Playwright] 조건문, 반복문 사용 시 주의사항 🎈 조건문 사용 시 주의사항플레이라이트에서 boundingBox 함수는 요소의 좌표와 사이즈를 반환해준다. 이는 화면에 그려진 후 측정가능하기 때문에 await을 사용해야 한다.await page.locator('div').boundingBox(); boundingBox의 반환값을 보면 다음과 같다. 요소가 화면에 보이지 않는 경우 null을 반환하게 된다.Promise 이를 사용해서, 만약 width의 값이 1000이하 인지를 테스트해야한다고 해보자. boundingBox가 null일 수 있기 때문에 아래와 같이 조건문을 통해서 검증을 진행하도록 작성하였다.test('bounding box', async ({ page }) => { await page.goto('http://127.0.0.1:550.. 2025. 3. 30. 이전 1 2 3 4 5 ··· 14 다음
