프로덕트디자이너 Hailey 일기장📝

TIL_리액트 입문_CSS 치트 시트를 활용해서 컴포넌트 활용하기(12/31) 본문

TIL

TIL_리액트 입문_CSS 치트 시트를 활용해서 컴포넌트 활용하기(12/31)

Hailey_l 2024. 12. 31. 23:20

[오늘 하루 계획]

  • 오전
    • 09:10 ~ 09:30 : 계획서 작성
    • 09:30 ~ 13:00 : UX집중반 프로젝트 진행
  • 집중 디자인
    • 14:00 ~ 18:00 : 강의 수강
    • 14:00 ~ 18:00 : 프로젝트 진행 수강
      • [O] 리액트입문 2주차 강의 완강하기
      • [O] 리액트 입문 2주차 복습하기
  • 18:00 ~ 19:00 : 저녁 식사 시간

 

저녁

  • 19:00 ~ 22:50 : UX집중반(쏘카 UX프로젝트) 
  • 22:00 ~ 22:29 : 저녁 스크럼, TIL 제출, 각자 댓글 달기

 

 

 

[14:00 ~ 17:00 /  리액트입문 2주차 진행]

 

컴포넌트에 CSS를 적용하기.

yarn create vite 프로젝트이름 --template react

우선 터미널에 위 명령어 복붙해서 새 프로젝트 생성.

 

-

 

CSS 치트 시트를 활용해서 컴포넌트 활용하기

[CSS 치트시트]
  • padding
  • display : flex
    • alignItems
    • justifyContent
  • gap
  • width, height
  • border
  • borderRadius

 

{} -> 괄호 두 번 들어가면 적용이 안되니 꼭 확인하기.

위 이미지 처럼 style-{squareStyle}>감자</div> 이렇게  {squareStyle} 괄호 양옆으로 하나씩 들어가야 스타일 적용된 걸 볼 수 있다.

{{}} 스타일 적용이 안되었다면 괄호 중복으로 들어갔는지 오타 확인하기

제작하며 알게 된 Tailwind CSS  (수강학습내용엔 없음. 개인학습)

Tailwind CSS는 유틸리티 기반 CSS 프레임워크로, CSS 클래스를 미리 정의하여 개발자가 필요한 스타일을 빠르게 작성할 수 있도록 돕는 도구입니다. 다른 CSS 프레임워크(예: Bootstrap)와는 달리, 컴포넌트 대신 작은 유틸리티 클래스를 사용해 디자인을 자유롭게 커스터마이징 할 수 있습니다.

Tailwind CSS는 유틸리티 기반 CSS 프레임워크로, CSS 클래스를 미리 정의하여 개발자가 필요한 스타일을 빠르게 작성할 수 있도록 돕는 도구입니다. 다른 CSS 프레임워크(예: Bootstrap)와는 달리, 컴포넌트 대신 작은 유틸리티 클래스를 사용해 디자인을 자유롭게 커스터마이징할 수 있습니다.

특징

  1. 유틸리티 클래스
    • Tailwind CSS는 버튼, 카드 같은 컴포넌트를 제공하지 않고, bg-red-500, text-center, flex 같은 유틸리티 클래스를 제공합니다.
    • 이를 조합해서 원하는 디자인을 만들 수 있습니다.
  2. 높은 커스터마이징 가능성
    • 기본적으로 제공되는 스타일을 그대로 사용하지 않아도 되고, 필요하면 설정 파일(tailwind.config.js)을 통해 완전히 커스터마이징할 수 있습니다.
  3. 빠른 개발
    • 별도의 CSS 파일 작성 없이, HTML/JSX 안에서 직접 클래스를 추가하여 빠르게 스타일링할 수 있습니다.
  4. 작은 번들 크기
    • 프로덕션 빌드 시 사용되지 않은 CSS 클래스는 제거되기 때문에 최종 파일 크기가 작습니다(PurgeCSS 내장).

 

Tailwind CSS 클래스 예시

  • flex: Flexbox 레이아웃
  • items-center: 세로 방향 가운데 정렬
  • justify-center: 가로 방향 가운데 정렬
  • h-screen: 화면 높이 100%
  • bg-blue-100: 연한 파란색 배경
  • px-4 py-2: padding (x축: 4, y축: 2)
  • rounded: 버튼 모서리 둥글게
  • hover:bg-blue-600: 마우스 호버 시 배경색 변경

Tailwind CSS 설치 및 사용

Tailwind를 프로젝트에 추가하려면 다음 단계를 따라야 합니다.

  1. 설치 프로젝트 폴더에서 다음 명령어 실행:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. 설정 파일(tailwind.config.js) 편집

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"], // Tailwind가 검색할 파일 경로
  theme: {
    extend: {}, // 커스터마이징 옵션
  },
  plugins: [],
};

3. CSS 파일에 Tailwind 초기화 추가 index.css 또는 프로젝트의 메인 CSS 파일에 아래 내용을 추가:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 프로젝트 실행 Tailwind CSS가 HTML/JSX 코드에서 바로 적용됩니다.

Tailwind의 장점

  • 빠른 프로토타이핑.
  • 스타일 재사용성을 높여 코드를 간결하게 유지.
  • 강력한 커스터마이징.
  • 반응형 디자인을 쉽게 구현.

단점

  • HTML/JSX 코드가 클래스명으로 다소 복잡해질 수 있음.
  • Tailwind에 익숙하지 않은 사람들에게는 다소 생소할 수 있음.

Tailwind CSS는 개발 속도를 높이고, 자유로운 디자인 구현을 돕는 강력한 도구입니다. React와 함께 사용하면 훨씬 효율적이라고 한다.

 

개발하면서 제작해보고 싶은 아이템이 있어서

리액트로 웹앱 한번 제작해 보려고 진행 중

 

우선 강의 때 리액트 [ReactJS 입문주차] (11) 스타일링 및 refactoring 이 부분 수강하며

App.jsx 윗글에 적힌 바와 같이 개발 실습 후 

내가 제작하고 싶은 앱 구현 해봄

우선 AI를 활용해 내가 피그마에서 제작한 앱 UI를 png로 뽑아

리액트 코드로 OO앱 웹앱 만들어줘라는 식의 문구로 명령 후

 

AI에서 만든 리액트 코드 및 파일을 다운로드 후

커스텀마이징을 할 것이다.

 

우선 내가 초반에 제작했던(vit+리액트 프로젝트 세팅 한건 ) 리액트 패키지 파일을 다시 열고 App.jsx 여기로 들어간다.

그 후 AI가 준 리액트 코드를 복붙 한다.(. tsx 파일이란?: React와 TypeScript를 결합한 파일을 줌)

그럼 아래와 같아진다. 

 

 

 

 

여기서

 tsx 파일을 제대로 사용하려면 TypeScript가 필요하다. 프로젝트에 TypeScript를 설치해야 한다. 

 

TypeScript 설치 방법

1. TypeScript 설치 프로젝트 루트 디렉터리에서 다음 명령어를 실행하세요:

npm install typescript @types/react @types/react-dom

 

2. TypeScript 설정 파일 생성 TypeScript 설정 파일인 tsconfig.json을 생성하려면 아래 명령어를 실행하세요:

npx tsc --init

실행하면 tsconfig.json 파일이 생성됩니다. 이 파일에서 TypeScript 관련 옵션을 조정할 수 있습니다.

 

TypeScript와 React 설정

tsconfig.json 파일에서 React와 관련된 옵션이 제대로 설정되었는지 확인하세요. 기본 설정은 아래와 비슷할 것입니다:

{
  "compilerOptions": {
    "target": "es6",                          // 컴파일된 JavaScript 버전
    "lib": ["dom", "dom.iterable", "esnext"], // 지원 라이브러리
    "allowJs": true,                          // JS 파일 허용 여부
    "jsx": "react-jsx",                       // React의 JSX 사용 설정
    "module": "esnext",                       // 모듈 시스템
    "moduleResolution": "node",
    "strict": true,                           // 엄격 모드 활성화
    "esModuleInterop": true,                  // ES 모듈 호환성
    "skipLibCheck": true,                     // 라이브러리 타입 체크 건너뜀
    "forceConsistentCasingInFileNames": true  // 파일 이름 대소문자 일관성 검사
  },
  "include": ["src"], // TypeScript가 검사할 파일 경로
  "exclude": ["node_modules"] // 제외할 경로
}

 

Tailwind CSS와의 통합 (이미 Tailwind 사용 중이라면)

TypeScript에서 Tailwind CSS를 사용할 때 추가 작업은 필요하지 않습니다. 이미 Tailwind가 제대로 설치되어 있다면, TypeScript에서도 그대로 사용할 수 있습니다.

 

설치 후 확인

  1. 프로젝트 실행 TypeScript 설치 및 설정 후 프로젝트를 실행합니다:
npm start

2. tsx 파일 확인 TypeScript가 올바르게 설정되었다면 tsx 파일이 제대로 동작하고, 타입 오류가 있으면 에디터에서 경고를 표시합니다.

 

 

TypeScript 설치 후 장점

  • 코드에서 타입 안정성 확보.
  • 컴파일 시 에러를 미리 감지.
  • 대규모 프로젝트에서 유지 보수성 향상.
  • 타입 자동 완성 및 더 나은 IDE 지원.

 

TypeScript를 프로젝트에 도입하면 초기 설정에 약간의 시간이 필요하지만, 이후의 개발 생산성과 코드 품질이 크게 향상된다고 합니다.

 

 

tsx 파일을 사용하기 위해 TypeScript와 Tailwind CSS 가 설치가 되었다면

 

 

 

 

위 이미지에 보이는 @/components/ui/badge 경로 문제를 해결해 준다.

import { Badge } from '@/components/ui/badge'; <-이 부분의 경로 문제
현재 위 이미지처럼 세팅 되어 있어서 경로에 문제가 있음

 

 

 

 

jsconfig.json 파일에서

compilerOptions.paths를 아래와 같이 설정(아래 코드 복붙하기*)

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

설정을 저장한 후 VS Code를 다시 시작하면 @/components/ui/badge 경로가 인식이 된다.

 

 

jsconfig.json 파일에서 compilerOptions.paths를 복붙해 변경상태

 

VS Code를 다시 시작하면 문제가 사라지고 정상 작동하는 걸 볼 수 있음.

 
 

[19:00 ~ 22:50 : UX집중반(쏘카 UX프로젝트)]

 

UX집중반 쏘카 진행사항

 

오늘은 UX 과제를 위해 문제의 우선순위를 정리한 뒤 설문지 작성을 완료했습니다. 논의 과정에서 예상보다 시간이 많이 소요되어, 설문조사 공고문은 저녁 9시 이후에 게시하게 되었습니다.

 

 

시간이 너무 지체되는 것 같아 다같이 설문지 작성후 심층 인터뷰, 저니맵, 페르소나 이렇게 나눠서 역할 분담을 진행하기로 했다.

심층 인터뷰 진행 시 필요한 태스크 질문지는 두 분이서 진행하려고 했지만, 부담이 클 것 같아 나도 함께 참여해서 작성하게 되었다.

 

 

 

 

 

전반적인 테스크를 작성 완료한 후, 나는 저니맵 작업을 위해 전에 진행했던 개인 UX 작업물을 참고하면서 기본적인 틀을 구상해 놓았다.

페르소나 작업을 맡은 팀원과 함께 타깃 나이는 30대로 설정했다. (쏘카의 주 사용층이 30-40대라는 점을 고려한 결정이다.)

내일은 1월 1일 새해인데...ㅎ 과제 진행을 위해 열심히 작업할 예정이다.😂

 

아무튼 우리 UX 집중반 팀은 정말 좋은 것 같다. 튜터님께서 결과물보다 과정에 중점을 두라고 말씀해 주셔서 너무 급하게 진행하지 않아도 될 것 같아 마음이 한결 가볍다. (개발 강의가 오전 9시부터 오후 7시까지 이어지고, UX 집중반은 오후 7시부터 9시까지 딱 두 시간밖에 없어서... 어쩔 수 없는 상황이다ㅠㅠ)

개발도, UX도 열심히! 열공빡공



마무리

배운 점:

  1. React 컴포넌트 스타일링 & Tailwind CSS:
    리액트 컴포넌트에 CSS를 적용하는 방법을 학습하며, 효율적인 스타일링 방법에 대해 배웠습니다. 특히, Tailwind CSS를 활용해 유틸리티 클래스 기반으로 CSS를 간결하게 작성하는 방법을 익혔고, 이를 통해 스타일링의 가능성과 장점을 알게되었습니다.
  2. TypeScript 활용:
    타입 안정성을 확보하고, 컴파일 시 에러를 사전에 감지해 유지보수성을 높일 수 있다는 점을 깨달았습니다. 하지만 아직 부족하다고 느껴 추가 학습이 필요하다고 생각합니다.
  3. 경로 설정 문제 해결:
    프로젝트 구조와 설정 파일(jsconfig.json)의 중요성을 이해하며, 절대 경로 설정 문제를 해결하는 방법을 익혔습니다.

 

앞으로의 계획

  1. TypeScript와 Tailwind CSS 학습 심화:
    더 복잡한 UI와 동작을 구현하며 실력을 키우고, 독학으로 부족한 TypeScript 부분을 보완할 예정입니다.
  2. React 기반 앱 제작:
    학습한 내용을 기반으로 원하는 앱을 직접 제작하며 React, TypeScript, Tailwind CSS를 통합적으로 활용해볼 것입니다.
  3. 3. UX집중반 프로젝트 과정 잘 마무리 하기

 

 

 

 

새해를 맞아 다들 복 많이 받으시고, 목표를 이루는 한 해 되시길 바라며... 오늘의 TIL 끝@@

'TIL' 카테고리의 다른 글

TIL_리액트 입문(12/30)  (0) 2024.12.31
TIL_javascript 문법 강의  (0) 2024.12.23
TIL_12월19일(목)  (0) 2024.12.20
TIL  (0) 2024.12.18
TIL_쉽지않았던 Airtable, 웹플로우 오늘의 TIL기록🥹🔥  (0) 2024.12.16
'TIL' Related Articles more