📝SVN, GIT 커밋
──── 제목 ────
─ Body
# ✨feat : 기능 (새로운 기능)
# 🐛fix : 버그 (버그 수정)
# 📝docs : 문서 (문서 추가, 수정, 삭제)
# 🎨style : 스타일 (코드 형식, 세미콜론 추가: 비즈니스 로직에 변경 없음)
# ♻️refactor : 리팩토링
# ✅test : 테스트 (테스트 코드 추가, 수정, 삭제: 비즈니스 로직에 변경 없음)
# 🔨chore : 기타 변경사항 (빌드 스크립트 수정 등)
# 이모지 참조 > https://gitmoji.dev/
─ Footer
# 이슈번호
# 무엇을 수정했는지
# 왜 수정했는지
🔗 참고 및 출처
https://hyeonsook95.github.io/2021/08/16/git-commit/
for (int i = 0; i < fruits.size(); i++)
→ for (int fruitIndexNum = 0; fruitIndexNum < fruits.size(); fruitIndexNum++)하지만 그 자체로 이해가 되는 수준의 코드면 굳이 할 필요는 없다 → 유연하게 처리
return fruits.size() + vegitables.size();
→ int totalFruits = fruits.size()
int totalVegitables = vegitables.size()
int totalCount = totalFruits + totalVegitables
return totalCount하지만 그 자체로 이해가 되는 수준의 코드면 굳이 코드를 늘릴 필요는 없다 → 유연하게 처리
int totalFruits = fruits.size() // 과일 총 개수
/** ──── 오늘 산 과일과 야채의 총 개수 구하기 ──── **/
int totalFruits = fruits.size()
int totalVegitables = vegitables.size()
int totalCount = totalFruits + totalVegitables
return totalCount
<HTML>
<body>
<div>테이블</div>
/** 과일 테이블 **/
<table>
...
</table>
</body>
</HTML>
class name의 경우 BEM Naming Convention을 사용한다고 한다
블록(B), 블록 내부 요소(E) 수정자인 스타일 변경(M) → button__icon--large
근데 BEM은 점점 늘어날 수록 헷갈려 보이기 때문에 개인적으로는 kebab-case가 더 나아보인다
/** ──── Fetch Data ──── */
/** ──── 상태관리 함수 ──── */
/** ──── 상태관리 ──── */
/** ──── PAGE ──── */
| [공통개발] SVN, Git 주석 달기 (0) | 2024.03.24 |
|---|---|
| [공통개발] 나만의 Clean Code (0) | 2024.03.21 |
| [공통개발] [Next.js] [React] Naming Convention (네이밍 컨벤션), 프로젝트 구조, Code-Map (코드 한글 변환, 프론트 코드 관리) (0) | 2024.01.24 |
| [공통개발] 개발 프로세스 (분석 / 설계 / 협업 / 개발 / 테스트 / 배포) (0) | 2023.09.27 |
| [공통개발] Java 자바 Naming Convention (네이밍 컨벤션), JavaDoc (함수 및 클래스 문서), Swagger (API 문서) (0) | 2022.08.01 |
const config: Config = {
...
darkMode: "media",
plugins: [],
...
}
export default config
...
<div className="bg-red-500 dark:bg-blue-800">
Testing Dark Mode
</div>
// darkMode: "class"
// darkMode: "media"tailwind.config.ts에서 darkMode를 media로 설정시 dark: 라고 적은 CSS가 우선이 된다 (default : class)
<span className="text-[1200px]"> Hello </span>- [${원하는 값}]을 이용해 넣을 수 있다
<!-- 같은 크기로 나눈다 -->
<div>
<div className="flex">
<div className="flex-grow"/>
<div className="flex-grow"/>
</div>
</div>
<!-- 같은 크기로 나누지 않고 같은 row에만 둔다 -->
<div>
<div className="flex">
<div className="flex-1"/>
<div className="flex-1"/>
</div>
</div>
<!-- 비율로 나눈다 -->
<div>
<div className="flex">
<div className="basis-1/4"/>
<div className="basis-3/4"/>
</div>
</div>bootstrap의 row는 flex와 동일하게 적용되며 col의 경우는 flex-grow이다
| [Tailwind] 테일윈드 배열 원하는 곳에 CSS 적용, 배열 빈 값에 CSS 적용, 문자열 일부분 CSS 적용, 반응형 크기별 CSS 적용, 반응형 모바일(가로, 세로) [3.4.1 version] (0) | 2024.03.20 |
|---|---|
| [Tailwind] 테일윈드란?, React Tailwind 적용시키기 [3.4.1 version] (0) | 2024.03.20 |
<ul>
{[1, 2, 3, 4].map((i) => (
<div
key={i}
className="flex justify-between my-2 odd:bg-blue-50 even:bg-yellow-50 first:bg-teal-500 last:bg-amber-50"
>
<span className="text-gray-500">Grey Chair</span>
<span className="font-semibold">$19</span>
</div>
))}
</ul>
결과화면
<ul>
{["a", "b", "c", ""].map((c, i) => (
<li className="bg-red-500 py-2 empty:bg-blue-800" key={i}>
{c}
</li>
))}
</ul>
결과화면
return (
<div className="flex flex-col space-y-2 p-5 ">
<p className="first-letter:text-7xl first-letter:hover:text-purple-400">
Hello everyone!
</p>
</div>
)
결과화면 ( 호버 X / 호버 O )
<div className="
bg-white
sm:hover:bg-pink-800
sm:bg-red-400
md:bg-teal-400
lg:bg-indigo-400
xl:bg-yellow-400
2xl:bg-pink-500
p-6
rounded-3xl
shadow-xl"
>sm, md, lg, xl, 2xl별로 CSS를 달리 적용할 수 있다
<div className="portrait:bg-indigo-600 landscape:bg-teal-500 p-6 pb-14 xl:pb-40">
<span className="text-white text-2xl">Profile</span>
</div>반응형과 비슷한 느낌인데 핸드폰의 가로랑 세로에 따라 CSS를 달리 적용할 수 있습니다
| [Tailwind] 테일윈드 다크모드 적용, 사용자 임의 값을 넣기, Flex Box(플렉스박스) [3.4.1 version] (0) | 2024.03.20 |
|---|---|
| [Tailwind] 테일윈드란?, React Tailwind 적용시키기 [3.4.1 version] (0) | 2024.03.20 |
CSS 프레임워크로서 빠르게 퍼블리싱을 할 수 있게 도와줍니다
비슷한 프레임워크로 BootStrap이 있습니다 현재는 BootStrap을 제치고 현재 1위 CSS 프레임워크입니다
그냥 Next.js를 사용하고 Next.js에서 기본적으로 채용한 Tailwind를 사용하는게 맘 편하다
React 프로젝트 생성 (타입스크립트 포함 버전)
// 프로젝트 생성
npx create-react-app my-react-app --template typescript
// 프로젝트로 이동
cd my-react-app
tailwind package 설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
tailwind.config.js 수정
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
공통 CSS 파일을 만들어 tailwind 적용시키기
// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
공통 CSS 파일 import 해서 사용하기
import './index.css'
....
🔗 참고 및 출처
https://velog.io/@ahn0min/create-react-app에서-Tailwind-CSS-적용해보기
create-react-app에서 Tailwind CSS 적용해보기
필자는 create-react-app 과 Tailwind를 사용하는 방식에 맞게 작성하였다.create-react-app을 사용하여 기본적인 개발환경을 직접 구축할 필요없이 편리하게 사용하겠다.css framework인 tailwind를 사용하기위
velog.io
https://tailwindcss.com/docs/installation
Installation - Tailwind CSS
The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.
tailwindcss.com
// 'status'의 타입은 리터럴 타입 "loading"으로 고정
const status = "loading" as const;
// [1,2,3]만 허용
const numbers = [1, 2, 3] as const;리터럴 타입의 값을 그대로 타입으로 사용하게 만드는 역할이며 해당 값이 변하지 않을 "상수"임을 나타내며 TypeScript 컴파일러에게 값의 재할당이나 변경을 방지합니다
function liveDangerously(x?: number | null) {
// No error
console.log(x!.toFixed());
}!의 경우 해당 값은 Null이나 Undefined가 아니라는 강제성을 부여하는 명시입니다
데이터를 fetch한 이후에 undefined일수도 있다고 에러를 잡아줄 때 있는데 반드시 있는 경우라면 !을 이용해 처리가 가능합니다
function printName(obj: { first: string; last?: string }) {
// ...
}
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });? 을 이용해 "값이 없을 수 있다"라고 선언 가능
import {
GraphQLDecimal,
transformToDecimal,
} from 'prisma-graphql-type-decimal';
import { Decimal } from '@prisma/client/runtime/library';
import { Transform, Type } from 'class-transformer';
@InputType()
export class Item {
@Field(() => GraphQLDecimal, {
description: '기본입찰가',
nullable: true,
})
@Transform(transformToDecimal)
@Type(() => Object)
basic_bid_price?: Decimal;
...
}Transform 변형 및 해당 Type을 Object로 설정해야 에러가 발생 안 하고 인식한다
@InputType()
export class Test {
@Field(() => GraphQLDecimal, { nullable: true })
@Transform(transformToDecimal)
@Type(() => Object)
smart_bid_price: Decimal;
}
@InputType()
export class TestInput {
@Type(() => Test) // 배열 내 객체들을 Test 타입으로 변환
@Field(() => [Test])
test: Test[];
}Object를 이용한 배열일 때는 이런식으로 사용하면 된다
| [Nest.js] 나만의 환경 구축 (라이브러리 설치, IDE 설정, 네이밍 컨벤션, 코드 스타일) (0) | 2024.08.21 |
|---|---|
| [Nest.js] JWT 회원가입 / 로그인 / 로그아웃 / 인증 / 인가 구현 (Refresh Token, Access Token) (0) | 2024.08.20 |
| [Nest.js] Naming Convention (네이밍 컨벤션) (0) | 2024.01.24 |
| [Nest.js] GraphQL 파일 업로드 구현하기 Multipart/form-data 전송 (0) | 2024.01.24 |
interface ITodo {
id: number;
text: string;
}
interface IToDoState {
[key: string]: ITodo[];
}
const toDoState:IToDoState = {
"To Do": [{id:1 , text:"To Do!!!"}],
Doing: [{id:2 , text:"Doing!!!"}],
Done: [{id:3 , text:"Done!!!"}],
};
/** ----------------------------------- **/
function getProperty<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
let x = { a: 1, b: 2, c: 3, d: 4 };
출처: https://inpa.tistory.com/entry/TS-📘-타입스크립트-Generic-타입-정복하기 [Inpa Dev 👨💻:티스토리]toDoState를 보면 Json형식을 가지고 있고 “키”는 무조건 String이며 “값”은 ITodo[]입니다.
[key: string] → 여러개의 key를 가진다
ITodo[] → ITodo의 Interface가 여러개를 가진다
declare module "iron-session" {
interface IronSessionData {
user?: {
id: number;
};
}
}만약에 라이브러리에 타입스크립트가 적용 안 된 라이브러리라면 어떻게 해야할까요? 타입스크립트로 프로젝트를 만든 경우 타입이 지정되지 않아 정상 동작하지 않게 되는 문제가 생기게 됩니다 이러한 경우 서드파트 및 라이브러리에 대한 타입선언을 우리가 직접적으로 해줘야합니다 이러한 선언들은 보통 .d.ts파일에다가 관리를 합니다
const a = {
a : "key 'a'",
b : {
aa : "key 'b.aa'",
bb : "key 'b.bb'",
},
c : {
aa : {
aaa : "key 'c.aa.aaa'",
bbb : "key 'c.aa.bbb'",
}
},
}
const a = {
"a" : "key 'a'",
"b.aa" : "key 'b.aa'",
"b.bb" : "key 'b.bb'",
"c.aa.aaa" : "key 'c.aa.aaa'"
"c.aa.bbb" : "key 'c.aa.bbb'"
}깊이가 1 이상인 object들을 일정한 키 생성 규칙에 따라 깊이가 1로 고정된 오브젝트로 전환하는 기능
🔗 참고 및 출처