1. 프로젝트 준비하기프로젝트 구현에 앞서 구현에 필요한 준비 작업을 진행하자. 프로젝트 1을 준비할 때처럼 먼저 앱의 요구사항을 분석하고, 이를 토대로 필요한 기능을 하나씩 구현하겠다.  1-(1) 요구사항 분석하기최종 구현 페이지에서  [할 일 관리] 앱에는 4가지의 기능이 있다. 오늘의 날짜를 요일, 월, 일, 연도순으로 표시한다.할 일(Todo)을 작성하는 입력 폼이 있고, 버튼을클릭하면 할 일 아이템을 생성한다.[할 일 관리] 앱은 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일만 추출할 수 있다.리스트로 표시하는 낱낱의 할 일 아이템은 이릉ㄹ 마쳤는지 여부를 표시하는 체크박스, 아이템 이름, 등록 날짜, 그리고 버튼으로 이루어져 있다.요구사항 분석에 맞게 페..

24-25/React.js 1 2024. 12. 27. 10:00

1. 프로젝트 준비하기 지금까지 리액트에 대해 학습한 내용을 바탕으로 카운터 앱을 만들어 보자.  카운터 앱은 간단한 덧셈과 뺄셈 기능만 갖추고 있으므로, 첫 리액트 프로젝트에 적합하다.  프로젝트 구현에 앞서 먼저 어떤 설계와 기능을 구현할지 살펴보는 일이 필요하다. 이를 소프트웨어 공학에서는 요구사항 분석이라고 한다. 이 파트에서는 요구사항을 분석하면서 카운터 앱 프로젝트를 준비한다.   [ 요구사항 분석 ] 이 앱은 1개의 페이지에서 제목, Viewer (현재 카운트 표시 영역), Controller(카운트 제어 영역) 세 부분으로 나뉜다.   [ 컴포넌트 단위로 생각하기 ]  앞서 언급한 부분 중 Viewer와 Controller 영역을 컴포넌트로 취급하면 이 앱은 다음의 세 가지 컴포넌트로 구성..

24-25/React.js 2 2024. 11. 22. 10:00

프로젝트 준비하기 요구사항 분석하기 [할 일 관리] 앱의 기능들 오늘의 날짜를 요일, 월, 일, 연도순으로 표시합니다. 할일 (Todo)을 작성하는 입력 폼이 있고 버튼 클릭시 할 일 아이템 생성합니다. 생성한 아이템을 페이지 하단에 리스트로 표시하며 키워드 검색으로 원하는 할 일만 추출할 수 있습니다. 리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 표시하는 체크박스, 아이템 이름, 등록 날짜, 버튼으로 이루어져 있습니다. [할 일 관리] 앱의 UI 요소를 컴포넌트 단위로 나누기 Header :오늘의 날짜를 표시 형식에 맞게 보여 줍니다. TodoEditor : 새로운 할 일 아이템을 등록 TodoList : 검색어에 맞게 필터링된 할 일 리스트를 렌더링하며 검색 폼이 공백이면 필터링하지..

23-24/React.js 1 2023. 12. 1. 10:00

1. 프로젝트 준비하기 App 컴포넌트: Viewer와 Controller 컴포넌트를 감싸는 템플릿이다. Viewer 컴포넌트: 현재의 카운트를 표시한다. Controller 컴포넌트: 카운트를 제어할 수 있는 기능을 제공한다. 리액트 앱 만들기 npx create-react-app . 다음 파일을 전부 삭제한다. src/App.test.js src/logo.svg src/reportWebVitals.js src/setupTest.js index.js를 수정한다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; const root = ReactDOM..

23-24/React.js 2 2023. 11. 17. 10:00

이번 10장에서는 컴포넌트의 일정관리 웹 애플리케이션에 대해서 알아보고자 합니다. 지금까지 배운 이론을 바탕으로 실제로 사용 가능한 웹 용 애플리케이션을 만들어 봅시다. 10.1 프로젝트 준비하기 이전의 이론을 바탕으로 애플리케이션을 생성하기에 앞서, 라이브러리 설치 및 기타 프로그램 설정과 생성이 필요합니다. 이를 단계별로 나누어 알아봅시다. 1) 라이브러리 몇 가지를 다운로드합니다. 명령프롬포트 창 등을 통해 라이브러리를 설치하면 되는데, 설치할 라이브러리는 우선 3가지입니다. SASS CLASSNAMES (편리한 조건부 스타일링 제공) REACT-ICONS (다양한 SVG 아이콘 제공) 2) Prettier 설정을 합니다. 2장에서 Prettier에 대해 학습했었습니다. 이를 참고해서 프로젝트를 만..

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