[React 개인과제] 올림픽 메달 트래커 만들어보기

일단 리액트는 처음이라 막막하다....막막하지만!

 

일단 해보자구요...

 

 

먼저, vite를 이용해서 리액트 프로젝트를 손쉽게 만들어주었다.

 

나는 항상 css 스타일링 하는게 제일 손이 많이 가고, 시간이 많이 걸린다고 생각한다.

그래서 부트스트랩을 이용할까하다가 뭔가 새로운 방식으로 css 스타일링을 하고 싶어서 검색했다.

그때 눈에 들어온 tailwindCSS.

 

Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 클래스 기반의 스타일링 접근 방식을 제공한다고 한다.

즉, 부트스트랩처럼 미리 정의된 스타일을 쓰는 건데, Tailwind CSS는 뭐랄까.. 좀 더 자유도가 높은 느낌이다.

미리 정해진 스타일들을 내가 원하는대로 조합해서 쓰는 형식!!

 

확실히 부트스트랩은 컴포넌트가 다 만들어져 있어서 사용하기 매우 간편하다, 하지만 간혹 기본 스타일이 너무 강하게 적용되어 원하는 스타일로 내가 변경하고자할때 조금 번거로운 부분도 있었다.

 

그래서 Tailwind CSS를 선택했는데, 확실히 커스터마이징을 자유롭게 할 수 있어서 좋았다.

하지만 단점도 확실했다.

우선!! 나같이 처음 써보는 사람들은 난이도가 정말 곤욕이다. 각각의 스타일된 요소들을 찾아가면서 써야해서 사용하기 너무 어려웠고( Tailwind CSS IntelliSense 가 좀 도와주고, gpt도 도와주고, 구글도 도와주고, tailwind css 홈페이지도 찾아보고..꽤 많은 searching이 필요했다....), 인라인 요소로 각각의 클래스 명을 집어넣는 식으로 코딩을 해서 가독성에도 부정적인 영향을 미치는 것 같다.

 

 

 

여튼 TailwindCSS를 사용하기 위해 나는 아래와 같은 코드로 Tailwind CSS와 Post CSS를 설치했고, 

npm install -D tailwindcss postcss autoprefixer

 

• -D: devDependencies로 설치, 즉 개발 환경에서만 사용됨.
• tailwindcss: Tailwind CSS 프레임워크.
• postcss: CSS를 처리하고 최적화하는 도구.
• autoprefixer: CSS 코드에 필요한 브라우저 접두사를 자동으로 추가하는 PostCSS 플러그인.

 

 

npx tailwindcss init -p

- 이 명령어로 Tailwind CSS를 초기화 시켜줬음

 

이 과정을 다 끝냈더니 이 두 파일이 생성되었고,

 

• tailwind.config.js
• postcss.config.js

검색을 통해 알아낸 정보를 베이스로

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // Tailwind가 사용할 HTML, JS, JSX, TS, TSX 파일 경로
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind.config.js 파일에 스타일을 적용할 파일들의 경로를 지정해주었다.

 

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

 

- 이건 자동으로 만들어짐 (postcss.config.js)

 

근데 module.exports 이게 옛날 방식이어서 그런지 노란 밑줄이 뜨길래,

ES6 모듈 시스템을 따르는 export default로 다 바꿔버렸다.

다행히 코드는 잘 작동했다!

 

 

<참고하면 좋은 자주쓰이는 클래스 이름들 from Tailwind CSS>

1. 배치(Basics)

• 가로 및 세로 정렬
  • flex: Flexbox 레이아웃을 적용.
  • grid: Grid 레이아웃을 적용.
  • items-center: Flex 또는 Grid 항목을 세로로 가운데 정렬.
  • justify-center: Flex 또는 Grid 항목을 가로로 가운데 정렬.
• 여백과 패딩
  • m-{size}: 외부 여백 (margin). 예: m-4 (1rem).
  • p-{size}: 내부 여백 (padding). 예: p-4.
  • mt-{size}, mr-{size}, mb-{size}, ml-{size}: 각각 위, 오른쪽, 아래, 왼쪽 여백.

2. 배경 및 텍스트(Text)

• 배경색
  • bg-{color}: 배경색. 예: bg-gray-100, bg-blue-500.
• 텍스트 색상
  • text-{color}-{명도(숫자가 높을 수록 어두)}: 텍스트 색상. 예: text-gray-700, text-red-600.
• 글꼴 크기
  • text-{size}: 글꼴 크기. 예: text-xl, text-2xl.
• 글꼴 두께
  • font-{weight}: 글꼴 두께. 예: font-bold, font-light.

3. 테두리(Borders)

• 테두리
  • border: 기본 테두리 적용.
  • border-{color}: 테두리 색상. 예: border-gray-300.
• 테두리 두께
  • border-{size}: 테두리 두께. 예: border-2.
• 테두리 반경
  • rounded: 기본 반경 적용.
  • rounded-{size}: 반경 크기. 예: rounded-lg, rounded-full.

4. 디스플레이(Visibility)

• 디스플레이 유형
  • block: 블록 요소로 설정.
  • inline: 인라인 요소로 설정.
  • hidden: 요소 숨기기.

5. 리사이징(Sizing)

• 너비 및 높이
  • w-{size}: 너비. 예: w-1/2, w-full.
  • h-{size}: 높이. 예: h-64.

6. 반응형 디자인(Responsive Design)

• 반응형 클래스
  • sm:{class}: 작은 화면에서 적용.
  • md:{class}: 중간 화면에서 적용.
  • lg:{class}: 큰 화면에서 적용.
  • xl:{class}: 매우 큰 화면에서 적용.
  예: md:text-lg (중간 화면에서 글꼴 크기를 크게 변경).

7. 애니메이션(Transitions)

• 전환 효과
  • transition: 전환 효과 적용.
  • duration-{time}: 전환 시간. 예: duration-300.
  • ease-in, ease-out: 전환 이징 효과.

8. 기타

• 오버플로우
  • overflow-hidden: 오버플로우 숨기기.
  • overflow-scroll: 스크롤 활성화.
• 상자 그림자
  • shadow: 기본 그림자.
  • shadow-lg: 큰 그림자.
• 테이블 만들 때 썼던...
  • even: 짝수 요소
  • odd: 홀수 요소
  • hover: 호버 일때...

---

 

<input> 태그 상세 속성들..

1. maxLength

• 사용자가 입력할 수 있는 최대 문자 수를 제한
• ==>  국가명 넣을 때 검색해보니 세계에서 가장 긴 국가명은 20자를 넘지 않아서 20으로 제한둠.

2. type

• 입력 필드의 유형을 정의(데이터 형식 정하기)
• 예시:
  • type="text": 일반 텍스트 입력 필드.
  • type="number": 숫자 입력 필드, 사용자가 숫자만 입력할 수 있도록 제한.
  • type="email": 이메일 주소 입력 필드, 유효한 이메일 형식인지 확인하는 기본 검사를 수행.
  • type="password": 비밀번호 입력 필드, 입력한 내용이 숨겨져 표시됨.

3. required

• 사용자가 해당 필드를 필수로 입력해야 함을 나타내는 속성. 이 속성이 설정된 경우, 사용자가 해당 필드를 비워두고 제출하려고 하면 브라우저가 경고 메시지를 표시.

---

 

 

<form 태그 + input + onSubmit이용과 input+ button + onClick 사용 차이>

 

1. onSubmit 사용

• onSubmit 이벤트는 사용자가 Enter 키를 눌렀을 때도 호출됨. 따라서 폼 필드에서 엔터를 입력하면 자동으로 제출되기 때문에 훨씬 편리함.
•  onSubmit을 사용하면, 폼 내의 모든 입력 필드에 대해 유효성 검사를 한 번에 수행할 수 있음. 이를 통해 데이터가 제출되기 전에 모든 필드가 유효한지 확인 가능함.
•  event.preventDefault()를 사용하여 폼의 기본 제출 동작(페이지 새로 고침)을 방지할 수 있고, 이를 가지고 AJAX 요청 등 사용자 정의 처리를 할 수 있음.

2. button의 onClick 사용

• 버튼의 onClick 이벤트는 사용자가 해당 버튼을 클릭할 때만 호출됨. 그래서 다른 입력 필드에서 Enter를 눌러도 제출되지 않음.
• 버튼에 type="button"을 설정하면 폼 제출 없이 버튼 클릭 시 특정 로직을 실행할 수 있음.

 

 

미국 타입하고 enter 치니까 바로 생성됨

 

• enter 쳐도 입력 가능 GOOD!!!!!!!!!!!!!!!!!
• 로그인 시 자동 완성 기능 가능 GOOD!!!!!!!!!!!!

 

• 하지만, form 태그 안에서 버튼 클릭이나 엔터키를 친다면 submit 이벤트가 실행되면서 페이지가 refresh, 즉 새로고침이 되버린다. 이러한 상황은 onsubmit 이벤트에 preventDefault 함수를 사용하여 방지를 할 수 있음.

---

 

현재 App.jsx, MedalForm.jsx, MedalItem.jsx, MedalList.jsx를 만들어 필수 구현 기능은 완료한 상태이다.

추가적으로 올림픽 메달 순위를 결정하는 매커님즘과 같게 금메달 수 --> 은메달 수 --> 동매달 수 순으로 

순위를 표시해주는 것과 로컬 스토리지를 이용하는 기능을 만드는 과정에 있다. 

 

각각 jSX 파일에 관한 설명은 README에서 할 예정.