TS 14

[Taskify] 이미지 확장자 제한 추가

오전 스크럼 회의 때 카드 이미지에 대한 이슈가 있었습니다. 담당 팀원분이 바쁜 관계로 제가 수정하기로 했습니다.  제가 작성한 로직은 아니지만, 서로서로 돕는 게 팀이죠😊   🚫 문제 상황 이미지를 등록한 상태로 카드를 생성했지만, 화면에 보여지는 카드는 이미지가 없이 렌더링 됩니다. 💡 해결 방법 에 accept 속성을 사용해 이미지 확장자를 제한해 보겠습니다❗테스트해보니 svg 형식을 업로드하면 이미지가 안 보이는 것 같습니다.gif, jpg, png 확장자의 경우 잘 렌더링 되는 것을 확인했습니다. 결과를 확인해 보겠습니다.깔끔하게 해결! ... 이면 좋겠지만, 파일 선택창 하단에 사용자 지정 파일을 선택할 수 있게 되어있네요..🤔한 번 눌러봐야겠죠? 슬픈 예감은 항상 틀린 적이 없네요....

[Taskify] 대시보드 상세 페이지

오늘은 대시보드 페이지를 개발해 봤습니다.우선 전반적인 코드를 먼저 보여드리고 작업하면서 있었던 문제들과 해결한 방법에 대해서 설명해 볼게요! GET Columnsimport axios from '@/lib/instance';import { GetColumnParams, GetColumnsResponse } from '@/type/column';const getColumns = async ({ teamId, dashboardId,}: GetColumnParams): Promise => { try { const response = await axios.get(`/${teamId}/columns/`, { params: { dashboardId, }, }); ..

[Taskify] Chip(공통 컴포넌트) 추가

오늘은 공통 컴포넌트 Chip을 개발해 보겠습니다.// Chip.tsimport { ReactNode } from 'react';type ChipType = 'tag' | 'status' | 'status-option';export interface ChipProps { children: ReactNode; chipType: ChipType;}export const bgTag = ['orange', 'green', 'pink', 'blue'];// Chip.tsximport clsx from 'clsx';import { ChipProps } from '@/type/chip';import { PropsWithChildren } from 'react';import styles from './Chip.mo..

[Taskify] 버튼(공통 컴포넌트) 추가

프로젝트에서 공통으로 사용하는 버튼 컴포넌트 개발을 맡게 되었습니다.아래 보이는 버튼들을 모두 하나의 버튼 컴포넌트로 관리해야 한다니... 일단 도전!// Button.tsximport styles from "./Button.module.css";import { PropsWithChildren, ReactNode } from "react";import clsx from "clsx";interface ButtonProps { children: ReactNode; classes?: string | string[]; disabled?: boolean; handler: () => void;}function Button({ children, classes, disabled, handler,}: Pr..

[프로젝트] Taskify (태스키파이) 소개

드디어 중급 프로젝트 시작이다!! 지난 초급 프로젝트는 팀원들 모두 첫 프로젝트를 진행하는 상황이라 소통과 일정 관리, 그리고 업무 분담 면에서 많은 어려움이 있었습니다. 작업이 겹치거나 누락되는 경우도 있었고, 서로의 의견을 조율하다가 오전을 모두 사용한 적도 있었습니다. 이런 경험은 당시에는 힘들었지만 팀 프로젝트에서 무엇이 중요한지를 배우는 값진 기회였습니다. 중급 프로젝트를 시작하며 설레는 마음도 크지만 긴장감도 함께 느껴집니다.이전 경험을 바탕으로 소통을 더욱 원활히 하고 일정 관리와 업무 분담을 철저히 계획해 프로젝트를 성공적으로 마무리하며 팀원들과 함께 좋은 결과를 만들어내고 싶습니다. 이번에는 더 나은 협업을 통해 성장과 성취를 모두 이루는 뜻깊은 시간을 기대해 봅니다✨✨ 기술 스택Next..

[TS] 타입스크립트 !(Non-null assertion operator)

타입스크립트를 사용하다 보면 종종 변수나 객체가 null 또는 undefined일 가능성을 처리해야 하는 상황을 마주하게 됩니다. 이때 non-null assertion (!) 연산자를 활용하면 코드의 가독성을 유지하면서 특정 값이 반드시 null 또는 undefined가 아님을 컴파일러에게 확신시킬 수 있습니다. 목차 1. Non-Null Assertion(!)이란? 2. Non-Null Assertion(!) 적용 3. Non-Null Assertion(!) 주의점 4. Non-Null Assertion을 대체할 방법 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. non-null assertion이란?Non-Null Assertion(!)은 TypeScript에서 사용되는 특별한 연산..

[TS] any 타입 - 편리함과 위험함 사이

any 타입은 TypeScript에서 가장 강력하면서도 동시에 논란이 많은 타입 중 하나입니다. 편리할 수 있지만, 잘못 사용하면 코드의 안정성과 가독성을 크게 떨어뜨릴 수 있습니다. any 타입의 역할과 왜 최대한 사용을 지양해야 하는지에 대해 알아보겠습니다. 목차 1. any 타입이란? 2. any 타입의 장점 3. any 타입 사용해도 될까? 4. any 타입 대체하는 방법추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. any 타입이란?any는 TypeScript의 최상위 super(모든 것을 허용하는) 타입입니다. 변수를 any 타입으로 지정하면 그 변수는 모든 타입을 허용하고, 타입 검사를 건너뛰기 때문에 자바스크립트와 동일하게 작동하게 됩니다. 이는 TypeScript가 엄격한 ..

[TS] 타입 추론과 타입 단언

타입스크립트(TypeScript)는 정적 타입 시스템을 통해 코드의 안전성을 높이고, 버그를 줄이는 데 유용한 언어입니다. 그중에서도 타입 추론과 타입 단언은 TypeScript의 강력한 기능입니다. 목차 1. 타입 추론 (Type Inference) 2. 타입 단언 (Type Assertion) 3. 타입 추론과 단언의 차이 4. 타입 추론과 단언 혼합 사용추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 타입 추론  (Type Inference)타입 추론은 변수나 함수의 타입을 명시적으로 지정하지 않아도, TypeScript가 자동으로 타입을 결정하는 기능입니다. TypeScript는 코드 작성 시에 데이터의 초기 값을 기반으로 타입을 추론해 변수의 타입을 설정합니다. 이 기능 덕분에..

[React & TS] Kakao 지도 API 추가

1. 애플리케이션 추가 및 키 발급 Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com위 주소에서 애플리케이션을 등록하고 로컬 환경을 도메인으로 추가했다.  키도 발급 완료했으니 공식 문서를 보면서, 화면에 지도를 띄워보겠습니다. 2. 지도를 그리는 JavaScript API 불러오기index.html에 직접   서버를 실행시켜 확인해 보니, 내 api key가 개발자 도구에 그대로 노출되고 있었다. 3. API Key env로 관리하기API Key를 Github이나 서버에서 개발자 도구로 확인하지 못하게 하기 위해 .env에서 환경변수로 관리하기로 했..

[React & TS] 프로젝트 생성, 초기 설정

1. 프로젝트 생성터미널을 이용해 프로젝트를 생성합니다.npm create vite@latest ts_project -- --template react-ts 위 명령어에서 ts_project는 프로젝트 폴더 이름입니다. 원하는 이름으로 변경할 수 있습니다.프로젝트 폴더가 생성되었다면 폴더로 이동 후 패키지를 설치합니다.cd ts_projectnpm install 설치가 완료되면, 프로젝트의 기본 구조와 주요 파일들이 자동으로 생성됩니다. 2. 프로젝트 구조Vite와 TypeScript 템플릿을 사용해 생성된 프로젝트는 기본적인 파일 구조가 설정되어 있습니다.src: 소스 코드가 포함된 폴더로, 컴포넌트와 유틸리티 파일들을 여기에 배치합니다.assets: 이미지, 아이콘, 폰트등 정적 파일을 저장하는 폴더..