on my way

roject 2: [할 일 관리] 앱 만들기이번 프로젝트에서는 간단한 [할 일 관리] 앱을 만들어 보겠습니다.이 앱은 오늘의 날짜를 표시하고, 할 일을 작성하고, 할 일 리스트를 관리할 수 있는 기능을 포함하고 있습니다.프로젝트는 크게 준비, UI 구현, 기능 구현의 단계로 나누어 진행합니다.목차프로젝트 준비하기UI 구현하기기능 구현하기CRUD 구현1. 프로젝트 준비하기요구사항 분석하기먼저 앱의 요구사항을 분석합니다.다음은 [할 일 관리] 앱의 최종 구현 모습입니다. 기능 목록:오늘의 날짜를 요일, 월, 일, 연도순으로 표시할 일(Todo) 작성 입력 폼 및 추가 버튼할 일 리스트 및 검색 기능할 일 아이템 체크박스, 등록 날짜, 삭제 버튼컴포넌트 구조앱의 UI 요소를 컴포넌트 단위로 나눕니다.컴포넌트를..

Project 1: [카운터 앱 만들기]목차프로젝트 준비하기요구사항 분석하기리액트 앱 만들기UI 구현하기Viewer 컴포넌트 만들기Controller 컴포넌트 만들기컴포넌트 스타일링하기기능 구현하기State를 이용해 카운터 기능 구현하기State는 어떤 컴포넌트에 만들까?리액트답게 설계하기1. 프로젝트 준비하기요구사항 분석하기지금까지 배운 내용을 토대로 [카운터] 앱 프로젝트를 진행했다. [카운터] 앱은 숫자를 더하고 빼는 기능만 있는 아주 단순한 앱이다.첫 리액트 프로젝트인 만큼 간단한 기능만 포함하고 있어서 누구나 어렵지 않게 구현할 수 있다.프로젝트를 구현하기에 앞서 꼭 해야 할 일이 있다.이 앱을 어떤 설계와 기능으로 구현할지 살펴보는 것이다. 이를 소프트웨어 공학에서는 요구사항 분석이라고 한다...

리액트 상태 관리의 진화 - useReducer와 상태 관리리액트(React)는 현대 웹 개발에서 가장 널리 사용되는 라이브러리 중 하나이고, 컴포넌트 기반의 구조로, UI를 효율적으로 관리하고 업데이트할 수 있게 해준다.리액트의 핵심 기능 중 하나인 상태 관리(State Management)는 앱의 복잡성을 줄이고, 사용자 인터페이스(UI)의 일관성을 유지하는 데 중요한 역할을 한다. 리액트 상태 관리란?리액트에서 상태(State)는 컴포넌트의 렌더링 결과에 영향을 미치는 데이터이다.이 데이터는 사용자 입력, 네트워크 요청의 결과 등 다양한 소스에서 올 수 있다.리액트는 상태가 변경될 때마다 UI를 다시 렌더링하여 사용자에게 최신 정보를 보여준다.useState와 useReducer리액트에서 상태를 관..

파이썬에서 딕셔너리는 매우 유용한 데이터 구조 중 하나로, 키-값 쌍을 저장합니다.이는 해시 테이블을 기반으로 하여 매우 빠른 검색 속도를 제공합니다.코딩테스트에서 딕셔너리를 잘 활용하면 문제를 효율적으로 해결할 수 있습니다. 지금부터 파이썬 딕셔너리의 문법과 유용한 기능을 정리하겠습니다. 1. 딕셔너리 생성딕셔너리는 중괄호 {}를 사용하여 생성합니다. 다음은 몇 가지 생성 방법입니다.# 빈 딕셔너리 생성dict1 = {}# 초기 값으로 딕셔너리 생성dict2 = {'a': 1, 'b': 2, 'c': 3}# dict() 함수로 생성dict3 = dict(a=1, b=2, c=3)# 리스트를 이용하여 생성dict4 = dict([('a', 1), ('b', 2), ('c', 3)]) 2. 요소 접근 및 ..

1. 리액트 컴포넌트와 라이프 사이클리액트 컴포넌트의 라이프 사이클 3단계리액트 컴포넌트의 라이프 사이클은 크게 세 단계로 나뉩니다: 마운트(Mount), 업데이트(Update), 언마운트(Unmount).1. 마운트 (Mount, 탄생)마운트는 컴포넌트가 처음으로 페이지에 렌더링될 때 발생합니다. 이 단계에서 컴포넌트는 초기 설정을 수행하고, 필요한 초기 데이터를 가져오는 등의 작업을 할 수 있습니다.constructor: 컴포넌트가 생성될 때 호출됩니다. 초기 상태를 설정하거나 인스턴스 변수들을 초기화할 수 있습니다.componentDidMount: 컴포넌트가 첫 번째 렌더링을 마친 후 호출됩니다. 이 시점에서 DOM 요소들이 모두 준비되어 있기 때문에, 초기화 작업이나 외부 데이터 가져오기 등을 수..

1. 컴포넌트 리액트는 컴포넌트 기반의 UI 라이브러리이다.이는 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 레고 조립하듯 하나로 합쳐 페이지를 구성하는 방식이다. 첫 컴포넌트 만들기리액트 컴포넌트는 주로 자바스크립트의 클래스나 함수를 이용해 만든다.현재는 함수로 컴포넌트를 만드는 방식이 선호된다. 함수 컴포넌트 만들기:App.js에서 첫 번째 리액트 컴포넌트를 만들었다.import "./App.css";function Header() { return ( header );}function App() { return ;}export default App;함수를 이용해 Header라는 이름의 컴포넌트를 만들었다.Header 컴포넌트는 HTML을 반환하..