코드로 우주평화

Tailwind CSS 는 간단한 유틸리티 클래스를 제공해 마크업에 쉽게 스타일링을 적용할 수 있습니다. 이번 글에서는 텍스트의 줄바꿈을 방지하고 긴 문자열을 생략(...)하는 방법을 소개하겠습니다.이를 위해 Tailwind CSS 의 whitespace-nowrap와 truncate 클래스를 사용해보겠습니다.  예제 코드아래 코드는 Tailwind CSS를 사용해 줄바꿈이 발생하지 않도록 하고긴 문자열이 있을 때 ...로 생략되도록 설정하는 간단한 예제입니다. 줄바꿈되지 않는 레이블입니다. 이 내용은 매우 긴 설명입니다. 이 설명은 이 컨테이너의 너비를 초과하면 생략 기호로 표시됩니다.   클래스 설명1. whitespace-nowrap이 클래스는 텍스트가 줄바꿈되지 않고 한 줄..

TypeScript는 JavaScript와 비슷한 프로그래밍 언어로, 데이터 유형을 명시적으로 기재하여 코드를 좀 더 안전하고 수월하게 유지보수 할 수 있도록 도와주는 언어입니다. 그렇다면 타입스크립트가 다루는 타입에는 어떤 것들이 있을까요? 이번 글에서는 원자값 타입, 인터섹션 타입, 인터페이스와 타입 앨리어스, 제네릭 타입에 대해 간단히 알아보겠습니다.  1. 원자값 타입 (Primitive Types)원자값 타입은 가장 기본적인 데이터의 종류라고 생각하면 됩니다.이런 타입들은 더 이상 쪼개질 수 없는 단순한 데이터를 의미합니다. string: 글자들로 이루어진 문자열입니다.let name: string = 'Alice'; number: 숫자 값을 나타냅니다.let age: number = 14; b..

React를 사용하다 보면, 컴포넌트가 화면에 나타나거나 사라질 때, 또는 특정 값이 변경될 때 어떤 작업을 하고 싶을 때가 많습니다. 예를 들어, 데이터를 가져오거나, 타이머를 설정하거나, 특정 작업을 정리(cleanup)해야 할 때 말이죠. 이럴 때 우리가 사용하는 것이 바로 useEffect입니다. useEffect를 사용하면 컴포넌트가 렌더링될 때 또는 특정 값이 바뀔 때 필요한 작업을 자동으로 처리할 수 있습니다. 이번 글에서는 useEffect의 다양한 사용 시점을 알아보고, 실제 예시 코드를 통해 그 사용법을 익혀보도록 하겠습니다.  useEffect의 사용 시점useEffect는 다음과 같은 시점에서 사용됩니다.컴포넌트가 처음 화면에 나타날 때특정 값이 바뀔 때컴포넌트가 매 렌더링마다 실행..

이번 글에서는 React와 Tailwind CSS를 사용해서 간단한 애니메이션과 상태 관리를 구현하는 방법을 알아보겠습니다.  본격적인 설명에 앞서 다음 두 가지 용어를 정리하고 넘어가겠습니다. useState : 컴포넌트 내에서 동적인 값을 저장하고 업데이트할 수 있게 해주는 React의 훅(Hook) 입니다.Tailwind CSS: Tailwind CSS는 클래스 이름만으로 다양한 스타일을 쉽게 적용할 수 있게 도와주는 도구예요. 이번 글에서는 상태에 따라 다른 CSS 애니메이션과 스타일을 적용합니다. 구현 예제 코드아래는 사용자가 텍스트를 입력하고 엔터 키를 누르면, 입력란이 화면 위쪽으로 이동하면서 더 이상 수정할 수 없게 되는 예제 코드입니다.import { useState } from "rea..

React Query는 서버 상태 관리를 간편하고 효율적으로 처리할 수 있는 훌륭한 도구입니다. 그 중에서도 useMutation 훅은 데이터를 업데이트, 삭제 또는 생성하는 비동기 작업을 처리하는 데 주로 사용됩니다. 이번 글에서는 useMutation을 사용하여 파일 업로드 기능을 구현하고 그 개념과 활용 방법을 살펴보겠습니다.   useMutation의 기본 개념useMutation은 서버에 데이터를 전송하거나, 삭제, 업데이트하는 작업을 수행하며 작업의 성공, 실패, 진행 중 상태를 쉽게 관리할 수 있도록 도와줍니다.const mutation = useMutation(mutationFn, { onSuccess: (data, variables, context) => { // 작업이 성공적으로..

React Query는 서버 상태 관리를 위한 도구로, 그 중 useQuery 훅은 서버에서 데이터를 가져오고, 그 데이터를 상태로 관리하며, 데이터를 가져오는 동안 로딩, 에러 처리 등을 쉽게 할 수 있도록 도와줍니다. 이번 글에서는 useQuery 훅을 사용하여 데이터를 조회하고, 상태를 관리하는 방법에 대해서 알아보겠습니다.   useQuery의 기본 사용법const { data, error, ... } = useQuery(queryKey, queryFn);queryKey:이 키는 React Query가 캐시를 식별하고 관리하는 데 사용됩니다. 동일한 키를 가진 쿼리는 캐시된 데이터를 공유하게되죠.queryFn:데이터를 조회하는 함수입니다. 이 함수는 서버에서 데이터를 가져오고, 그 결과를 반환합니..

JavaScript에서 함수를 사용할 때, 객체를 파라미터로 전달하는 경우가 많습니다. 이때 구조분해 할당(destructuring assignment)을 사용하면 코드가 더 간결하고 가독성이 좋아집니다. 이번 글에서는 구조분해 할당을 이용해 함수에서 객체의 특정 속성만 사용하는 방법을 알아보겠습니다. 1. 구조분해 할당으로 매개변수 간편하게 처리하기구조분해 할당을 사용하면, 필요한 속성만 손쉽게 추출할 수 있습니다. 아래는 예시입니다.function printMovie({ title, director }) { console.log(`Title: ${title}, Director: ${director}`);}const movie = { title: "Inception", director: "Chri..

Next.js 를 새롭게 배우고 있는데 함수를 Import 하다가 뭔가 생긴게 이상하다 싶어서 알게된 Default Import와 Named Import. 그래서 알게된 것을 글로 정리 해보았다.  Default ImportDefault Import는 파일에서 하나의 컴포넌트를 기본으로 내보내고, 이를 가져올 때 사용하는 방식이다. 예를 들어, components/todo.tsx 파일에서 Todo 컴포넌트를 기본으로 내보낼 수 있다. // components/todo.tsxexport default function Todo() { return Todo Component;} 그리고 아래 예시처럼 Todo 컴포넌트를 가져올 수 있다.// app/page.tsximport Todo from "../com..

글또와 반상회글또라는 개발자 글쓰기 커뮤니티가 있습니다. 현재 9기의 참여자 수는 450여 명입니다. 이번 글또 9기는 세 차례 반상회가 열렸는데요. '백엔드 반상회', '프론트 반상회', 그리고 마지막으로 제가 준비위로 참여한 '데이터AI 반상회'입니다. 데이터AI 반상회는 데이터 직군과 AI 직군을 묶은 반상회입니다. 이번 데이터AI 반상회는 약 60~70여 명이 참여했는데요. 반상회라는 단어가 낯설 수 있을 텐데, 쉽게 말해 커뮤니티 내의 소규모 콘퍼런스라고 볼 수 있습니다.  회고 인터뷰이번 회고는 가상의 인터뷰 형식으로 진행합니다. 최근에 [우주로부터의 귀환] 이라는 책을 읽었는데요. 지구로 돌아온 우주비행사들을 인터뷰하는 부분이 나옵니다. 그 형식에 영감을 받아 제 회고 글에도 인터뷰 형식을 ..

현재 개발자 글쓰기 커뮤니티 '글또' 9기에 참여하고 있습니다. 이번 9기에서는 유데미에서 지원을 받아 관심 있는 강의를 무료로 들을 수 있었는데요. 제가 두 번째로 선택한 강의는 [기획부터 개발까지 한방에 도전하는 플러터(Flutter) 수익형 기초 앱 개발]입니다. -> 강의 링크 작년에 플러터를 잠깐 만져본 적이 있는데, 아무래도 앱스토어와 플레이스토어에 모두 출시를 할 수 있는 크로스 플랫폼이라는 장점이 매력적으로 다가왔습니다. 그래서 이번에는 수익화까지 기대할 수 있는 강의를 선택하였습니다.   강의 소개 역시나 1000명이 넘는 수강생이 들었을 정도로 인기 강의라는 것을 알 수 있었는데요. 이 강의를 통해서 배울 수 있는 것들은 다음처럼 명시되어 있습니다. - 네이티브 앱 개발, 웹앱 개발, ..