Rock's Ezweb

안녕하세요! 오늘은 React로 만든 재미있는 게임 프로젝트, Hangman React를 소개하려 합니다. 이 프로젝트를 단계별로 생성하는 과정을 담은 유튜브 영상도 준비했습니다. 블로그를 읽고 영상을 함께 보며 따라 하면 멋진 게임을 직접 만들어볼 수 있습니다!

프로젝트 소개

Hangman React는 전통적인 단어 맞추기 게임인 행맨을 React로 구현한 프로젝트입니다. React의 기본 기능부터 상태 관리, 사용자 인터페이스 구성까지 실습하면서 배울 수 있어 초급 개발자에게 매우 유용한 학습 프로젝트입니다.

유튜브 영상에서 다루는 내용

유튜브 영상에서는 아래와 같은 순서로 프로젝트를 생성하고 실행하는 방법을 설명합니다.

1. 프로젝트 초기 설정

• Node.js와 npm 설치 여부 확인
• 새 React 프로젝트 생성: npx create-react-app hangman-react
• 불필요한 파일 정리 (App.css, App.test.js 등)

2. 프로젝트 구조화

• src 폴더 구성
• 주요 컴포넌트 생성:
  • Header.js: 게임 제목 표시
  • Word.js: 맞춰야 할 단어 UI
  • Keyboard.js: 알파벳 입력 버튼
  • GameOver.js: 게임 종료 상태 표시

3. 핵심 기능 구현

• 상태 관리:
  • useState를 활용한 게임 상태 저장
  • 사용자가 맞춘 알파벳 추적
• 랜덤 단어 생성:
  • 미리 준비된 단어 리스트에서 단어를 랜덤으로 선택
• 알파벳 입력 처리:
  • 사용자가 입력한 알파벳이 단어에 포함되어 있는지 확인
  • 맞춘 경우 단어 화면 업데이트
  • 틀린 경우 목숨 감소

4. 스타일링

• CSS를 활용하여 간단한 스타일 적용
• 버튼 및 단어 화면의 디자인 개선

5. 프로젝트 실행 및 테스트

• 로컬 서버 실행: npm start
• 게임 플레이 테스트 및 디버깅

https://youtu.be/svZY0Kqgm-0

https://youtu.be/r0ZrcQvHGbs

순수 자바스크립트를 활용하여 텍스트가 계속해서 타이핑되고 지워지는 효과를 구현합니다.

[ 학습내용 ]

javascript에서 요소 선택하는 방법

javascript에서 요소의 스타일을 변경하는 방법

javascript 반복문

javascript 조건문

javascript 재귀함수

javascript 타이머 함수

https://youtu.be/fAy0QRcFCWk

이 영상에서는 **JavaScript**를 사용하여 **고급 아코디언** 컴포넌트를 만드는 방법을 소개합니다. HTML과 CSS 구조 확인부터 시작하여 아코디언의 **변수 설정**, **열기 및 닫기** 기능 구현까지 자세히 설명합니다.

**AI**보다 더 나은 코드 작성과 **chatGPT**보다 더 간결한 코드 작성 방법에 대해 다룹니다. **Accordion** 구현을 통해 **JavaScript**의 고급 기능을 배우고 싶다면 꼭 시청해 보세요!

https://youtu.be/wMfer1zavbA

00:00 시작
00:10 완성본예시
01:06 HTML, CSS 구조 확인
02:20 aspect-ratio
02:53 cursor 이미지로 변경하기
04:17 cursor HTML 추가
05:02 cursor CSS
09:07 mousemove 이벤트
11:58 cursor에 확대 효과 추가

기본 커서는 숨기고, 커서의 움직임에 따라 같이 이동할 요소를 생성하고 구현합니다. javascript를 통해 구현하는 방법을 학습해보세요.

 JavaScript의 animate 함수와 easing을 활용하여 무한 슬라이드를 구현하는 방법을 설명하고 있다. 슬라이드는 왼쪽으로 움직이며, 순환되어 다시 오른쪽에서 나타난다. 페이저를 클릭하면 해당 슬라이드가 움직이는 기능도 있다.

https://youtu.be/B98b6xXh7PY

Detailed Summary for [[subtitle] 무한슬라이드 - javascript animate 함수 활용, easing 추가]

(https://www.youtube.com/embed/B98b6xXh7PY?autoplay=1) 
      💫 요약

      이 동영상은 JavaScript의 animate 함수와 easing을 활용하여 무한 슬라이드를 구현하는 방법을 설명하고 있다. 슬라이드는 왼쪽으로 움직이며, 순환되어 다시 오른쪽에서 나타난다. 페이저를 클릭하면 해당 슬라이드가 움직이는 기능도 있다.

      ✨ 하이라이트

      [00:10](https://www.youtube.com/watch?v=B98b6xXh7PY&t=10) 이 섹션에서는 무한 슬라이드를 구현하는 방법에 대해 설명합니다.- 완성된 버전을 보여주고, 슬라이드가 왼쪽으로 움직이는 것을 보여줍니다.
- 슬라이드를 클릭할 때마다 해당 슬라이드가 오른쪽에서 들어옵니다.
- 슬라이드 컨테이너에는 가로로 정렬된 슬라이드들이 있으며, 오른쪽으로 넘어가는 슬라이드는 가려진 상태입니다.
- 자바스크립트의 Animate 함수를 사용하여 슬라이드를 움직입니다.
          
[04:17](https://www.youtube.com/watch?v=B98b6xXh7PY&t=257) 슬라이드 컨테이너를 기준으로 모든 슬라이드가 절대값으로 한 곳에 모이게 하고, 현재 활성화된 슬라이드는 검은색으로 처리됩니다.- 페이저는 슬라이드의 개수에 따라 4개의 A 태그를 가지고 있으며, 현재 활성화된 슬라이드는 검은색으로 표시됩니다.
- 슬라이드에는 절대 위치를 주어야 하며, 이때 위치는 슬라이드 래퍼를 기준으로 결정됩니다.
- 슬라이드의 높이도 모든 요소와 동일하게 설정되어야 하며, 부모 요소의 높이를 기준으로 설정됩니다.
- 페이저는 중앙에 위치하며, 내부 요소를 가운데 정렬합니다.
          
[08:34](https://www.youtube.com/watch?v=B98b6xXh7PY&t=514) JavaScript로 변수와 산술 연산을 결합하여 문장을 만들 때, 백틱과 % 기호를 사용해야 한다.- idx 변수 이름을 100으로 곱하여 0일 때는 0, 1일 때는 100, 2일 때는 200이 되도록 한다.
- 화면을 확인하면 1이 나타나고, 오른쪽에 숫자 2가 있으며, 오른쪽에 숫자 3이 있다.
- pager를 생성하기 위해 번호에 따라 pager를 생성해야 한다.
- 반복문이 실행될 때마다 A 태그가 생성되고, 최종적으로 pager라는 요소에 HTML로 추가된다.
          
[12:52](https://www.youtube.com/watch?v=B98b6xXh7PY&t=772) addEventListener를 사용하여 클릭 이벤트를 처리하는 방법에 대해 설명합니다.- 클릭 이벤트가 발생한 객체는 'E'라는 매개변수로 전달됩니다.
- preventDefault를 사용하여 기본 동작을 막을 수 있습니다.
- MoveSlide 함수는 인덱스 번호에 따라 슬라이드를 이동시킵니다.
- 현재 인덱스 번호와 전달된 번호를 비교하여 동작을 결정합니다.
          
[17:08](https://www.youtube.com/watch?v=B98b6xXh7PY&t=1028) animate 함수의 옵션에는 지연, 시작 시간, 방향, 기간, 이징 등이 포함될 수 있다.- 옵션에는 지연, 시작 시간, 방향, 기간, 이징 등이 포함될 수 있다.
- 이징에는 cubicBezier의 속도 모델을 추가할 수 있다.
- 애니메이션의 fill-mode는 기본적으로 back이다.
          
[21:23](https://www.youtube.com/watch?v=B98b6xXh7PY&t=1283) 이 섹션에서는 일반적으로 사용되는 easing을 추가하는 방법을 설명합니다.- easings.net에서 일반적으로 사용되는 easing을 확인합니다.
- cubic-bezier 값을 복사하여 사용합니다.
- 현재 슬라이드와 다음 슬라이드에 left 값 변경을 적용합니다.
- 애니메이션의 fill mode를 forwards로 설정하여 정지합니다.
          
[25:42](https://www.youtube.com/watch?v=B98b6xXh7PY&t=1542) 자동 슬라이드를 구현하기 위해 setInterval 함수를 사용하여 일정 시간마다 다음 슬라이드를 보여주는 함수를 생성한다.- setInterval 함수를 사용하여 일정 시간마다 작업을 수행한다.
- 다음 인덱스를 생성하여 현재 인덱스에 1을 더한다.
- 슬라이드의 개수로 나눈 나머지를 다음 인덱스로 선택한다.
          

https://youtu.be/fIUxbj1f7SE

fullcalendar 설치하기

구글 달력 API 신청 및 설정하기

fullcalendar와 구글 달력 API 연동하기를 학습할 수 있습니다.

https://youtu.be/wOYiZOXLV1k

요약

Javascript 42 [Full-screen javascript slide] 풀스크린 슬라이드 구현하기 1편 - CSS로만 슬라이드 구현하기

하이라이트
자바스크립트를 사용하여 화면에 슬라이드를 구현하는 방법을 알려드립니다.

강조점
💻 자바스크립트를 사용하지 않고 CSS만으로 슬라이드를 구현하는 방법
📝 슬라이드 개수에 따라 인디케이터 생성 및 클릭으로 슬라이드 작동 구현
🖼️ HTML과 CSS로 슬라이드 구조를 만들고 이미지를 추가하는 방법
🔢 슬라이드 제목과 내용, 링크를 추가하여 각 슬라이드를 구성하는 방법
⚙️ 슬라이드 컨트롤을 위한 라벨과 인플을 사용하여 슬라이드를 제어하는 방법
🎨 CSS 변수를 사용하여 색깔을 지정하고 효율적으로 스타일을 관리하는 방법

https://youtu.be/LXGXdF4u2uY

Summary

이번 영상에서는 자바스크립트를 사용하여 풀스크린 슬라이드를 구현하는 방법을 알려줍니다. 슬라이드는 자동으로 다음으로 넘어가는 기능을 가지고 있으며, 이를 위해 setInterval 함수를 사용합니다.

Highlights
🔧 스크립트로 HTML을 생성하여 자동 슬라이드를 구현합니다.
⏰ 일정 시간마다 자동으로 다음 슬라이드로 이동합니다.
🖱️ 클릭하지 않아도 자동으로 슬라이드가 이동하는 기능을 구현합니다.
🔄 setInterval 함수를 사용하여 일정 시간마다 슬라이드를 변경합니다.
⏸️ setInterval을 멈추기 위해 clearInterval 함수를 사용합니다.
🔍 클래스명을 통해 슬라이드의 인덱스 번호를 확인합니다.
🧩 findIndex 함수를 사용하여 조건에 맞는 요소의 인덱스 번호를 찾습니다.

https://youtu.be/6ELUS860FBk

요약
이번 영상에서는 풀스크린 슬라이드의 스타일을 더 정교하게 구현하는 방법을 알려줍니다.

하이라이트
슬라이드 안의 요소들을 플렉스를 이용해서 정렬합니다.
미디어 쿼리를 이용하여 반응형 스타일을 적용합니다.
페이지 네이션에 스타일을 추가합니다.
제목과 링크의 스타일을 변경합니다.
동그라미를 추가하여 스타일링합니다.
투명성과 애니메이션을 활용하여 스타일을 더욱 개선합니다.

https://youtu.be/nrd9xjHbIjE

Summary
자바스크립트를 사용하여 드롭다운 서브메뉴를 업그레이드하는 방법을 배웠습니다.

Highlights
💡 서브메뉴를 구현할 때 클래스명을 활용하는 기술을 사용할 수 있습니다.
💡 배경색을 마우스 오버시에 변경하는 효과를 구현할 수 있습니다.
💡 서브메뉴의 높이를 조절하여 자연스러운 구조를 만들 수 있습니다.
💡 부모 요소를 기준으로 위치를 잡는 절대 위치 설정을 사용할 수 있습니다.
💡 마진을 활용하여 메뉴 간격을 조정할 수 있습니다.
💡 서브메뉴의 길이에 따라 자동으로 공간을 조절할 수 있습니다.
💡 CSS를 사용하여 메뉴를 숨기고 보이게 할 수 있습니다.

https://youtu.be/W31PPZ4wEMo

Summary

자바스크립트로 반응형 일정표를 만들기 위해 순수 자바스크립트로 구현할 예정입니다. CSS 변수를 사용하여 스타일을 지정하고, Gantt 차트를 애니메이션으로 표현할 수 있습니다.

Highlights
💻 자바스크립트로 반응형 일정표 구현
🎨 CSS 변수를 사용하여 스타일 지정
📊 Gantt 차트를 애니메이션으로 표현

Bullet Points
📅 시작 날짜와 끝 날짜를 데이터로 지정하여 일정표 구성
🎨 배경색을 데이터로 표현하여 각 태스크에 적용
💻 순수 자바스크립트로 구현하여 CSS에서 스타일을 조작하지 않음
📏 반응형으로 동작하여 다양한 화면 크기에서 사용 가능
💡 Gantt 차트의 밸류 스타일을 가로 배열로 구성
🎯 세로선을 사용하여 각 태스크의 위치를 정확하게 지정
📊 Gantt 차트를 애니메이션으로 표현하여 시각적인 효과 부여

https://youtu.be/6-bGYmRSnYI

Summary

이번 자바스크립트 강의에서는 순수 자바스크립트를 사용하여 메뉴바에 마우스를 올리면 따라다니는 애니메이션을 만들었습니다.

Highlights
🎥 마우스를 올리면 메뉴바가 움직이는 애니메이션을 구현했습니다.

Bullet Points
🖱️ 메뉴바가 마우스를 따라다니는 애니메이션을 보여줍니다.
⬇️ 마우스를 올리면 메뉴바가 밝아지고 흐려지는 애니메이션을 추가했습니다.
💻 순수 자바스크립트를 사용하여 애니메이션을 구현했습니다.
🎨 CSS를 사용하여 메뉴바의 디자인을 설정했습니다.
🧩 HTML 구조를 살펴보고 CSS와 JavaScript를 적용했습니다.
✨ 메뉴바의 위치를 화면 기준으로 설정하여 움직이도록 했습니다.
⚙️ 스크립트를 작성하여 메뉴바의 움직임을 제어했습니다.