지금까지 배운 것들을 바탕으로 일정 관리 웹 애플리케이션을 만들어 보도록 하겠습니다. 10.1 프로젝트 준비하기 일정 관리 웹 애플리케이션을 만들기 위한 준비작업을 해보겠습니다. 10.1.1 프로젝트 생성 및 필요한 라이브러리 설치 $ yarn create react-app todo-app $ cd todo-app $ yarn add sass classnames reacct-icons 애플리케이션을 위한 프로젝트를 새로 생성해줍니다. 이번 프로젝트에서는 sass를 이용할 예정이며, classnames를 통해 좀 더 편한 스타일링을 할 예정입니다. 또한, react-icons를 통해서 다양한 아이콘도 사용해 볼 예정입니다. 10.1.2 Prettier 설정 { "singleQuote": true, "sem..

22-23/22-23 리액트 스타터 3 2022. 12. 22. 10:00

INDEX 5장 ref: DOM에 이름 달기 1. ref는 어떤 상황에서 사용해야 할까? 1.1 예제 컴포넌트 생성 1.2 App 컴포넌트에서 예제 컴포넌트 렌더링 1.3 DOM을 꼭 사용해야 하는 상황 2. ref 사용 2.1 콜백 함수를 통한 ref 설정 2.2 createRef를 통한 ref 설정 2.3 적용 3. 컴포넌트에 ref 달기 3.1 사용법 3.2 컴포넌트 초기 설정 3.3 컴포넌트에 메서드 생성 3.4 컴포넌트에 ref 달고 내부 메서드 사용 4. 정리 ● 개념 복습 문제 ● 코드 문제 5장 ref: DOM에 이름 달기 일반적인 HTML에서 DOM 요소에 이름을 달 때는 id를 이용한다. → CSS나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. 리액트 프로젝트 내부..

21-22/21-22 리액트 스타터 -2 2021. 11. 22. 13:00

INDEX 4장 이벤트 핸들링 1. 리액트의 이벤트 시스템 1.1 이벤트를 사용할 때 주의 사항 1.2 이벤트 종류 2. 예제로 이벤트 핸들링 익히기 2.1 컴포넌트 생성 및 불러오기 2.2 onChange 이벤트 핸들링하기 2.3 임의 메서드 만들기 2.4 input 여러 개 다루기 2.5 onKeyPress 이벤트 핸들링 3. 함수형 컴포넌트로 구현해보기 4. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 이벤트 핸들링 이벤트(event): 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것으로 클릭, 키보드 입력 등의 사용자의 행위 이벤트 핸들링: 이벤트(event)를 처리하는 것 자바스크립트의 이벤트 실행 Click Me 1. 리액트의 이벤트 시스템 // Say...

21-22/21-22 리액트 스타터 -2 2021. 11. 15. 13:00

INDEX 1장 리액트 시작 1. 왜 리액트인가? ● 리액트의 이해 2. 리액트의 특징 ● DOM이란? ● Virtual DOM ● 기타 특징 3. 작업 환경 설정 ● Node.js와 npm, yarn ● 에디터 설치 ● Git 설치 ● create-react-app으로 프로젝트 만들기 4. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 1. 왜 리액트인가? ● 리액트의 이해 자바스크립트는 단순한 스크립트 언어에 불과하지만 웹 애플리케이션에서 가장 핵심적인 역할 슬랙, VS CODE 등의 데스크톱 애플리케이션 ➨ 일렉트론으로 개발 자바스크립트의 여러 프레임워크를 사용하여 페이스북, 디스코드 등 수많은 애플리케이션 개발 # 일렉트론: 자바스크립트로 데스크톱 앱을 개발하는 도구 ..

21-22/21-22 리액트 스타터 -2 2021. 11. 1. 13:00