전체 글 썸네일형 리스트형 [React] React로 마트 계산기 만들기 안녕하세요! 오늘은 React와 Tailwind CSS를 사용하여 실용적인 마트 계산기를 만드는 방법을 알아보겠습니다. 이 프로젝트를 통해 실제 상황에서 사용할 수 있는 계산기를 구현하면서 React의 상태 관리와 UI 구성 방법을 배워볼 수 있습니다.주요 기능상품 정보 입력 (상품명, 가격, 수량, 할인율)상품 목록 관리 (추가/삭제)할인율 적용 및 계산총액 자동 계산한국 원화 형식으로 금액 표시사용된 기술React.jsTailwind CSSshadcn/ui (Card, Button, Input 컴포넌트)Lucide React (아이콘)기능 구현1. 상태 관리 설정먼저 필요한 상태들을 정의합니다:const [items, setItems] = useState([]); // 상품 목록const [curre.. 더보기 [React] React로 공학용 계산기 만들기 안녕하세요! 오늘은 React와 shadcn/ui를 사용하여 완전한 기능을 갖춘 공학용 계산기를 만들어보겠습니다. 이 튜토리얼을 통해 React의 상태 관리, 이벤트 처리, 그리고 UI 컴포넌트 구성 방법을 배울 수 있습니다.프로젝트 설정먼저 필요한 의존성을 설치합니다:# shadcn/ui 컴포넌트 설치npx create-next-app@latest my-calculator --typescript --tailwind --eslintcd my-calculatornpx shadcn-ui@latest init컴포넌트 구조우리의 계산기는 단일 React 컴포넌트로 구현됩니다. 주요 기능은 다음과 같습니다:기본 산술 연산 (덧셈, 뺄셈, 곱셈, 나눗셈)공학 계산 기능 (삼각함수, 로그, 제곱근)상수 값 (π, e.. 더보기 [Python] PyInstaller 사용법: Python 스크립트를 실행 파일로 변환하기 Python은 강력하고 유연한 프로그래밍 언어지만, 때로는 Python이 설치되지 않은 시스템에서도 프로그램을 실행해야 할 때가 있습니다. 이럴 때 PyInstaller가 큰 도움이 됩니다. PyInstaller는 Python 스크립트를 독립 실행 파일(.exe)로 변환해주는 도구입니다. 이 글에서는 PyInstaller의 기본 사용법과 간단한 예제를 통해 그 활용법을 알아보겠습니다.PyInstaller 소개PyInstaller는 Python 애플리케이션과 그 의존성을 번들로 묶어 단일 패키지로 만들어주는 도구입니다. 이를 통해 Python이 설치되지 않은 시스템에서도 프로그램을 실행할 수 있게 됩니다.PyInstaller 설치PyInstaller는 pip를 통해 쉽게 설치할 수 있습니다. 명령 프롬프트.. 더보기 [React] React로 할 일 관리 앱 만들기: 10장 - 앱 배포하기 안녕하세요! 드디어 마지막 챕터에 도달했습니다. 이번 포스트에서는 우리가 만든 할 일 관리 앱을 실제로 배포하는 방법을 알아보겠습니다. GitHub Pages와 Netlify, 두 가지 방법으로 배포하는 과정을 step by step으로 설명하겠습니다.1. GitHub Pages로 배포하기GitHub Pages는 GitHub 저장소에서 직접 정적 웹사이트를 호스팅할 수 있는 무료 서비스입니다.1.1. GitHub 저장소 생성GitHub에 로그인하고 새 저장소를 생성합니다.저장소 이름을 todo-app으로 지정합니다.1.2. 로컬 프로젝트를 GitHub 저장소에 연결git initgit add .git commit -m "Initial commit"git remote add origin https://gi.. 더보기 [React] React로 할 일 관리 앱 만들기: 9장 - 단위 테스트 작성하기 안녕하세요! 이번 포스트에서는 우리가 만든 할 일 관리 앱에 대한 단위 테스트를 작성하는 방법을 알아보겠습니다. Jest와 React Testing Library를 사용하여 컴포넌트, Redux 액션, 리듀서에 대한 테스트를 작성해 보겠습니다.1. 테스트 환경 설정Create React App으로 프로젝트를 만들었다면 Jest와 React Testing Library가 이미 설정되어 있습니다. 추가로 필요한 패키지들을 설치해 보겠습니다:npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event2. 컴포넌트 테스트 작성하기먼저 TodoForm 컴포넌트에 대한 테스트를 작성해 보겠습니다. .. 더보기 [React] React로 할 일 관리 앱 만들기: 8장 - 비동기 작업과 미들웨어 안녕하세요! 이번 포스트에서는 우리의 할 일 관리 앱에 비동기 작업 처리 기능을 추가하고, Redux Thunk 미들웨어를 사용하는 방법을 알아보겠습니다. 이를 통해 서버와의 통신을 시뮬레이션하고, 실제 애플리케이션에서 API 호출을 어떻게 처리할 수 있는지 배워보겠습니다.1. Redux Thunk 설치하기먼저 Redux Thunk를 설치합니다. 터미널에서 다음 명령어를 실행하세요:npm install redux-thunk2. 가짜 API 서비스 만들기실제 서버 없이 비동기 작업을 시뮬레이션하기 위해 가짜 API 서비스를 만들어 보겠습니다. src 폴더에 api 폴더를 만들고, 그 안에 todoApi.js 파일을 생성합니다:// src/api/todoApi.js// 가짜 지연 함수const delay =.. 더보기 [React] React로 할 일 관리 앱 만들기: 7장 - Redux로 상태 관리 개선하기 안녕하세요! 이번 포스트에서는 우리의 할 일 관리 앱에 Redux를 도입하여 상태 관리를 개선하는 방법을 알아보겠습니다. Redux는 React 애플리케이션의 상태를 효율적으로 관리할 수 있게 해주는 강력한 라이브러리입니다.1. Redux 설치하기먼저 필요한 패키지들을 설치합니다. 터미널에서 다음 명령어를 실행하세요:npm install redux react-redux @reduxjs/toolkit2. Redux 스토어 설정하기src 폴더에 store 폴더를 만들고, 그 안에 todoSlice.js 파일을 생성합니다:// src/store/todoSlice.jsimport { createSlice } from '@reduxjs/toolkit';const todoSlice = createSlice({ n.. 더보기 [React] React로 할 일 관리 앱 만들기: 6장 - 디자인 개선 및 리팩토링 안녕하세요! 이번 포스트에서는 우리의 할 일 관리 앱의 디자인을 개선하고, 컴포넌트 구조를 리팩터링 하여 코드의 가독성과 유지보수성을 높이는 방법을 알아보겠습니다.1. CSS 스타일링 개선먼저, 앱의 외관을 개선하기 위해 CSS를 수정해 보겠습니다. src 폴더에 TodoList.css 파일을 생성하고 다음 내용을 추가합니다:.todo-app { max-width: 600px; margin: 0 auto; padding: 20px; font-family: Arial, sans-serif;}.todo-app h2 { text-align: center; color: #333;}.todo-form { display: flex; margin-bottom: 20px;}.todo-form input[.. 더보기 이전 1 2 3 4 ··· 10 다음
