creamymood의 개발 공부 발자취 💭

css를 지피티에만 의존할 수는 없군..나도 어느정도는 할 줄 알아야 하니까, 자주 쓸 것들 정리해두기 🍑 추가될 때 마다 와서 정리해야지 !Tailwind에서 **자주 쓰이는 접두사(클래스 prefix)**랑 기능을 카테고리별로 총정리🎨 색상 관련text-글자 색상text-gray-800bg-배경 색상bg-blue-100border-테두리 색상border-red-300placeholder-input 안 placeholder 색상placeholder-gray-400divide-자식 요소 사이의 구분선 색divide-gray-200 🔡 텍스트 관련text-글자 크기/색text-sm, text-whitefont-폰트 굵기font-bold, font-lightleading-줄 간격(line-height)..

프로젝트를 하면서 파일들을 건드리는 경우가 많은데시키는대로 하기보단 뭐가 뭔지는 알고 공부해야할 필요를 느꼈다. 그 중 vite.config.ts 이 파일이 하는 역할!vite.config.ts 파일은 Vite 프로젝트의 전체 설정을 담당하는 핵심 파일.이 파일을 잘 이해하면, 어떤 설정이든 자유롭게 커스터마이징할 수 있어서 정말 중요하다.vite.config.ts 파일의 역할역할 1. 플러그인 설정Vite는 경량이고 빠른 대신, 필요한 기능은 플러그인으로 추가. 예를 들면:import react from '@vitejs/plugin-react'plugins: [react()]EX: Vite에서 React 문법(JSX) 을 사용하려면 꼭 이 플러그인을 추가해야 함 역할 2. 경로(alias) 설정예:..

프로젝트 하며 몰랐던 용어들을 하나 둘 씩 알게되서 정리해보기 개발에서 **컨벤션(convention)**이란,팀이나 조직, 또는 커뮤니티 내에서 코딩 스타일, 규칙, 방법 등을 미리 정해놓은 약속이다. 예를 들어,변수 이름 짓는 방식(카멜 케이스, 스네이크 케이스 등)들여쓰기(indentation) 크기나 방법함수나 파일 이름 규칙주석 작성 방식코드 작성 순서나 구조이런 것들을 모두 포함한다컨벤션을 지키면,코드가 일관성 있고 읽기 쉬워져서 유지보수가 편해지고여러 명이 협업할 때 혼란이 줄어들고버그 발생 가능성도 줄어드는 장점이 있어요.즉, 개발자들이 ‘이렇게 하자!’ 하고 미리 정한 코딩 약속이라고 생각하면 됨팀마다, 언어나 프레임워크마다 다를 수 있지만, 중요한 것은 모두가 합의하고 지키는 것

프로젝트를 하고 팀원들과 같이 작업을 하며점점 코드 양도 많아지고 경로가 깊어지는 현상으로, 경로 앞에@를 설정하는 걸 우리 팀에서 도입하기로 했다 간단히 공부 해보기 위한 기록절대경로 @ 설정하는 방법 (Vite 기준)❶ vite.config.ts 또는 vite.config.js 열기vite.config.ts 파일을 열기// vite.config.tsimport { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import path from 'path' // ⭐️ 이거 꼭 추가해야 함!export default defineConfig({ plugins: [react()], resolve: { alias: { '@'..

union이랑 intersection은 합집합과 교집합으로 이해 하면 된다! Union : 합집합 union 하나하나 내부의 속성이 다있는게 합집합이 아니라..A에도 속할 수 있고, B에도 속할 수 있고, 둘 다 에도 속할 수 있는 모든게 union.처음에 혼자 공부할 때는, (...)let union1: Union1 = { // ✅ name: "", color: "",};let union2: Union1 = { // ✅ name: "", language: "",};let union3: Union1 = { // ✅ name: "", color: "", language: "",};let union4: Union1 = { // ❌ name: "",};이게 이해가 잘 안됐다.. 둘 다 포함..

TypeScript 공부하기 - 타입 스크립트 등장 배경과 타입스크립트의 장점, 타입 스크립트의 동작 원타입스크립트의 등장 배경자바스크립트는 동적 타입 시스템으로 다소 자유롭고 유연한 타입 시스템을 가진 프로그래밍 언어다.초기에 단순한 종류의 상호작용을 위해 개발되었기 때문에, 그다creamymood.tistory.com타입스크립트의 등장 배경은 다음과 같았다. 타입스크립트는 타입 검사를 해주는 똑똑한 자바스크립트고, 보다 본격적으로 타입스크립트 문법을 살펴보기 전에.핵심인 이 "타입"들에 대해서 또 한번 짚어볼 개념이 있다. 앞서 살펴본 여러가지 타입들.. 이 타입들은 결국 모두 집합이다. 이 말은, 타입끼리 서로 관계와 연관성이 있다. (예를 들어, 숫자 타입에는 1, -10, 100 이러한 많은 숫..

몇가지 타입들을 익혔으니 눈으로 보기보다 익숙해지기 위해서직접 코드 치면서 연습해보기 ~1. 제일 쉬운. 숫자 카운터 만들기 연습부터. 리액트때 조금 단련이 되어 있어서 역시나 문법은 어렵진 않았고(1) useState나 (2) Props에 타입을 정해주는 부분을 배웠다. (1) useState에 타입 지정해주기 const [count, setCount] = useState(0);import { useState } from "react";function Counter() { const [count, setCount] = useState(0); //이부분! const handleIncrease = () => { setCount(count + 1 ) } const handl..

1. void 타입 void 타입은 일반적으로 값을 반환하지 않는 함수에서 사용 한다. (참고로 값을 반환하지 않는 함수를 보이드 함수(Void Function)라고 한다.) 보통 타입스크립트에서 이렇게, 반환하지 않는 함수를 정의할 때 사용한다.function func2(): void { console.log("hello");} 값을 반환하지 않는 함수는 실제로 undefined를 반환하기 때문에void 타입 변수에는 undefined 이외에 다른 타입 값은 담을 수 없다.function hello(msg: string): void { console.log(`Hello ${msg}`)}const hi: void = hello('world') // Hello worldconsole.log(hi) //..

any와 unknown 둘 다 상위 타입으로, 느낌이 비슷했다...특히 any는 뭔가. 어떤 것이든~ 이런 느낌이라, 이해하기 쉬웠는데unknown은 이해하기가 어려웠는데, 아래처럼 이해해본다면 다소 쉬웠다.더보기any의 비유:“나 다 알아서 할 수 있어! 걱정 말고 그냥 줘~”→ 무조건 받아서 아무 데나 막 씀. 설사 틀려도 컴파일러는 모름.예시: 친구한테 “이거 써!” 하고 연필인지 칼인지도 안 보고 막 쓰는 느낌타입스크립트 입장에서 보면: “그래, 니 마음대로 해. 책임도 니가 져.” unknown의 비유:“일단 받을게, 근데 뭔지 확인하고 써볼게!”→ 뭐든 받을 수는 있지만, 쓸 땐 조심해서 검사하고 써야 함.예시: 누군가 상자를 줬을 때, "일단 고마워~ 그런데 열어보고 칼이면 조심하고, 연필..

오 뭔가 진짜 와닿지 않은 enum 타입.실제로 사용해보면 조금은 와닿을까 ?공부하고 나니 조금은 적응 완..enum은 타입 스크립트에 있는 특이한 타입인데이해하기 위해서는 주로 어떨 때 쓰이는지 알고 이해하면, 보다 쉽게 이해할 수 있었다. 예제는 다음과 같다. 역할을 정리하는 타입을 만든다고 할 때,enum Role { ADMIN, USER, GUEST,}이렇게 고정된 역할들 리스트를 만들어줄 수 있고,enum Role { ADMIN = 0, USER = 1, GUEST = 2,}이런식으로 각 멤버에게 숫자도 할당 할 수 있다. * 참고로 이렇게 직접 지정하지 않아도, enum은 0부터 1씩 늘어나는 성질 때문에enum Role { ADMIN, // 0 할당(자동) USER, // ..