본문 바로가기

전체 글820

JavaScript 로 단어 유효성 검사, 무의미한 단어 걸러내기 프로젝트를 하다 보면, 사용자가 입력한 단어가 유효한지 검사해야 하는 경우가 많습니다. 특히, 'ㅁㄴㅇ', 'wwwww' 와 같은 무의미한 단어를 어떻게 걸러낼 수 있을까요? 이번 글에서는 간단한 정규식과 사전 API 를 사용해 한글과 영어 단어의 유효성을 검사하는 방법을 소개하겠습니다. 왜 단어 유효성 검사가 필요할까요?단어 유효성 검사는 사용자가 입력하는 단어가 실제로 존재하는 단어인지 확인하는 과정입니다. 예를 들어, 단어 검색기를 만든다고 할 때 무작위 문자가 입력되면 제대로된 결과가 나오지 않거나 에러가 발생할 수 있겠죠. 개발자는 이러한 경우를 별도로 핸들링해야하기 때문에 미리 사전에 유효성을 검사하는 것이 좋습니다. 정규식을 활용한 단어 유효성 검사먼저, 우리는 단어가 한글 또는 영어로만 구.. 2024. 8. 10.
Tailwind CSS로 줄바꿈 방지와 긴 문자열 생략하기 Tailwind CSS 는 간단한 유틸리티 클래스를 제공해 마크업에 쉽게 스타일링을 적용할 수 있습니다. 이번 글에서는 텍스트의 줄바꿈을 방지하고 긴 문자열을 생략(...)하는 방법을 소개하겠습니다.이를 위해 Tailwind CSS 의 whitespace-nowrap와 truncate 클래스를 사용해보겠습니다.  예제 코드아래 코드는 Tailwind CSS를 사용해 줄바꿈이 발생하지 않도록 하고긴 문자열이 있을 때 ...로 생략되도록 설정하는 간단한 예제입니다. 줄바꿈되지 않는 레이블입니다. 이 내용은 매우 긴 설명입니다. 이 설명은 이 컨테이너의 너비를 초과하면 생략 기호로 표시됩니다.   클래스 설명1. whitespace-nowrap이 클래스는 텍스트가 줄바꿈되지 않고 한 줄.. 2024. 8. 7.
TypeScript 타입 종류 한 번에 정리 TypeScript는 JavaScript와 비슷한 프로그래밍 언어로, 데이터 유형을 명시적으로 기재하여 코드를 좀 더 안전하고 수월하게 유지보수 할 수 있도록 도와주는 언어입니다. 그렇다면 타입스크립트가 다루는 타입에는 어떤 것들이 있을까요? 이번 글에서는 원자값 타입, 인터섹션 타입, 인터페이스와 타입 앨리어스, 제네릭 타입에 대해 간단히 알아보겠습니다.  1. 원자값 타입 (Primitive Types)원자값 타입은 가장 기본적인 데이터의 종류라고 생각하면 됩니다.이런 타입들은 더 이상 쪼개질 수 없는 단순한 데이터를 의미합니다. string: 글자들로 이루어진 문자열입니다.let name: string = 'Alice'; number: 숫자 값을 나타냅니다.let age: number = 14; b.. 2024. 8. 6.
React 의 useEffect 를 쉽게 이해해보자! React를 사용하다 보면, 컴포넌트가 화면에 나타나거나 사라질 때, 또는 특정 값이 변경될 때 어떤 작업을 하고 싶을 때가 많습니다. 예를 들어, 데이터를 가져오거나, 타이머를 설정하거나, 특정 작업을 정리(cleanup)해야 할 때 말이죠. 이럴 때 우리가 사용하는 것이 바로 useEffect입니다. useEffect를 사용하면 컴포넌트가 렌더링될 때 또는 특정 값이 바뀔 때 필요한 작업을 자동으로 처리할 수 있습니다. 이번 글에서는 useEffect의 다양한 사용 시점을 알아보고, 실제 예시 코드를 통해 그 사용법을 익혀보도록 하겠습니다.  useEffect의 사용 시점useEffect는 다음과 같은 시점에서 사용됩니다.컴포넌트가 처음 화면에 나타날 때특정 값이 바뀔 때컴포넌트가 매 렌더링마다 실행.. 2024. 8. 6.
React와 Tailwind CSS로 간단한 애니메이션 구현하기 이번 글에서는 React와 Tailwind CSS를 사용해서 간단한 애니메이션과 상태 관리를 구현하는 방법을 알아보겠습니다.  본격적인 설명에 앞서 다음 두 가지 용어를 정리하고 넘어가겠습니다. useState : 컴포넌트 내에서 동적인 값을 저장하고 업데이트할 수 있게 해주는 React의 훅(Hook) 입니다.Tailwind CSS: Tailwind CSS는 클래스 이름만으로 다양한 스타일을 쉽게 적용할 수 있게 도와주는 도구예요. 이번 글에서는 상태에 따라 다른 CSS 애니메이션과 스타일을 적용합니다. 구현 예제 코드아래는 사용자가 텍스트를 입력하고 엔터 키를 누르면, 입력란이 화면 위쪽으로 이동하면서 더 이상 수정할 수 없게 되는 예제 코드입니다.import { useState } from "rea.. 2024. 8. 5.
React Query의 useMutation 구현 예시와 콜백 활용법 React Query는 서버 상태 관리를 간편하고 효율적으로 처리할 수 있는 훌륭한 도구입니다. 그 중에서도 useMutation 훅은 데이터를 업데이트, 삭제 또는 생성하는 비동기 작업을 처리하는 데 주로 사용됩니다. 이번 글에서는 useMutation을 사용하여 파일 업로드 기능을 구현하고 그 개념과 활용 방법을 살펴보겠습니다.   useMutation의 기본 개념useMutation은 서버에 데이터를 전송하거나, 삭제, 업데이트하는 작업을 수행하며 작업의 성공, 실패, 진행 중 상태를 쉽게 관리할 수 있도록 도와줍니다.const mutation = useMutation(mutationFn, { onSuccess: (data, variables, context) => { // 작업이 성공적으로.. 2024. 8. 4.

티스토리툴바