⚙ VS Code 설정1️⃣ VS Code 설치 Visual Studio Code - Code Editing. RedefinedVisual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.code.visualstudio.com👉 VS Code 공식 웹사이트에서 본인 운영체제에 맞는 버전을 다운로드하면 된다. 2️⃣ 필수 확장 프로그램 설치VS Code를 열고 왼쪽 사이..

💡 무엇을 배울까1. React Router란?2. 설치 및 기본 설정 2-1. 프로젝트 기본 구조 설정 2-2. 라이브러리 설치 2-3. 라우터 설정3. 📖 수업 내용1️⃣ React Router란?🔗 React Router 공식 문서 React Router Official Documentation2,308,336,349 Downloads on npmreactrouter.com React Router는React 애플리케이션에서 클라이언트 사이드 라우팅(Client-Side Routing)을 구현하기 위한 표준 라이브러리다.또한, 웹 애플리케이션에서 여러 페이지를 쉽게 관리하고 내비게이션을 구현할 수 있게 해준다. 🖐🏻 여기서 잠깐라우팅이 뭔데? 🤔-> 라우팅이란 웹 애플리케..

1️⃣ 적용 안되는 곳 발견백틱(`)으로 인라인 코드 설정 방법은 아래 블로그를 참고하여 설정했었다. hELLO 스킨 4.10버전 백틱 인라인 코드 설정hELLO스킨은 4.10버전 기준으로 화면 구조가 변경되어서, `document.querySelectorAll()` 코드를 다음과 같이 변경해야한다.HTML편집 화면 앞에 삽입 CSS편집 화면 코드 추가.notion-code { font-family: Consolas !importsoojae.tistory.com 그런데,접은글(더보기)에서는 적용이 안되는 것이다!!!! 2️⃣ 해결해보자.해결해보기 위해, HTML 구조를 살펴봤다. 적용이 잘 되는 본문의 코드를 보면 `.contents_style` 클래스를 사용하는 것을 알 수 있다.하지만, 접은글의 경..

💡 무엇을 배울까1. 가위바위보 게임 실습2. useEffect()3. 📖 수업 내용1️⃣ 가위바위보 게임 실습 오늘 수업은 가위바위보 게임 실습을 진행했다. 🔍 개발 세부 순서1. 프로젝트 구조 설계더보기React 프로젝트 생성파일 구조 설정 : 컴포넌트 폴더(componenets), CSS 폴더, 이미지 에셋(assets) 폴더 구성2. 자원 준비더보기가위(scissors.png), 바위(rock.png), 보(paper.png), 물음표(questionmark.png) 이미지 준비CSS 스타일 파일 생성 (App.module.css 적용)3. 컴포넌트 설계더보기App 컴포넌트 : 메인 로직 및 상태 관리Card 컴포넌트 : 플레이어 / 컴퓨터의 선택과 결과를 표시Button 컴포넌트: 사용자..

🔍 useState란?`useState`는컴포넌트에 state 변수를 추가할 수 있는 React Hook React 컴포넌트는 기본적으로 "입력(props)을 받아서 화면(UI)을 출력"하는 함수인데,화면을 바꾸려면 내부에서 기억하고 있는 값. 즉, 상태(state)가 필요하다. 예를 들어,버튼을 눌렀을 때 숫자가 1씩 올라가는 UI를 만들려면,그 숫자를 기억하는 저장공간이 필요하다.그 저장공간이 바로 👉 '상태(state)' 그리고 이 상태를 다룰 수 있게 해주는 게 👉 'useState' ⚛️ 기본 사용법const [상태, 상태변경함수] = useState(초기값);const [state, setState] = useState(initialValue);`state` : 현재 상태의 값 (읽기용)..

💡 무엇을 배울까1. React 개발을 위한 VSCode 설정2. goTrip 실습 (To-do List) ✅ 수업 들어가기 전오늘부터 다시 본격적인 리액트 수업이 시작됐다.유승규 강사님께서는 책에 있는 내용 그대로 가르쳐 주셨는데이번에 새로 오신 박소영 강사님께서는 요즘 더 쓰이는 방식으로 알려주셔서저번주에 배웠던 React 프로젝트 설정 방법과는 전혀 다른 새로운 방식으로 설정했다!더보기책에 나온 내용들은 몇 년 전에 쓰이는 방식이거나 업데이트가 되지 않아 불편함이 있었는데박소영 강사님께서 책과는 다르게 최신 버전으로 알려주셔서 더 좋은 듯~!!! 📖 수업 내용1️⃣ React 개발을 위한 VSCode 설정⚙ VSCode 확장 프로그램 설치ESLint : 코드 품질 및 스타일 검사Pretti..