반응형 프로젝트 기록32 React 컴포넌트 재사용하기, props와 state - React, Node.js 프로젝트 React component의 구조와 재사용, props와 state 1. React component React는 컴포넌트 기반 아키텍처. 컴포넌트는 UI의 독립적인 재사용이 가능한 조각으로 이를 조합해 복잡한 UI를 구성할 수 있다 1-1. Button 컴포넌트 만들기> Button.js 생성import React from 'react';function Button({ label, onClick, type }) { return ( {label} );}export default Button;이 컴포넌트는 세 가지 props(label, onClick, type)을 받아서 버튼을 렌더링한다(props에 대한 내용은 밑에서 다시 정리할 예정)이렇게 생성한 버튼을 다른 컴포넌트에서.. 2024. 10. 23. 6. Bootstrap으로 UI 구성하기_Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발 Bootstrap으로 UI 기본 구성하기1. Bootstrap과 Flutter Bootstrap : 프론트엔드 프레임워크 중 하나로 반응형 웹 디자인을 쉽게 구현할 수 있는 다양한 CSS, JavaScript 컴포넌트를 제공한다. 기본적으로 미리 스타일링된 컴포넌트들이 포함되어 빠르고 일관된 UI를 구축하는데 매우 유용하다. Bootstrap과 Flutter를 조합하면 웹 어플리케이션의 사용자 인터페이스를 유연하게 구성할 수 있는데 주요 컴포넌트에는 그리드 시스템, 버튼, 카드, 폼 등이 있다. 예를 들어 그리드 시스템을 사용하면 반응형 레이아웃을 쉽게 구성할 수 있고, 카드를 사용하면 콘텐츠를 정돈된 형태로 표시할 수 있다 2. Flutter 프로젝트에 Bootstrap 연동하기2-1. Bootstra.. 2024. 10. 21. Axios, CORS 설정을 적용한 React, Node.js 프로젝트 React 프로젝트의 설정 React는 사용자 인터페이스를 구축하는데 사용되는 자바스크립트 라이브러리이다Create React App을 이용해 React 프로젝트를 설정해보려 한다 1. 프로젝트 폴더 생성 npx create-react-app my-react-app 2. react 개발 서버 실행npm run start => 실행되는 것 확인http://localhost:3000 Node.js와 React 통신 설정 axios를 사용하여 프론트엔드에서 백엔드로 데이터를 전송하고 받아오는 API 통신 구현 Axios : Http 요청을 쉽게 보낼 수 있는 자바스크립트 라이브러리. GET, POST, PUT, DELETE 요청을 보내는데 사용되며 React에서 백엔드 API와 통신할 때 유용하다 1. Ax.. 2024. 10. 19. 2. React, Node.js를 이용한 게시판 만들기 - MySQL 연결 및 CRUD 작성 1. mysql community 버전 다운로드2. mysql 설치하기 3. 환경변수 설정4. 데이터베이스 초기화https://tiny-immj.tistory.com/79 React와 node.js를 사용한 게시판 만들기 - db 세팅이전에 node.js, npm, git 세팅을 하고 기초 프로젝트를 만들었다https://tiny-immj.tistory.com/78 React와 node.js를 이용한 기초 프로젝트 생성(for mac)1. 개발 세팅 준비1-1. Node.js 설치하기 https://nodejs.org/ Node.jtiny-immj.tistory.com 1. mysql community 버전 다운로드2. mysql 설치하기 3. 환경변수 설정4. 데이터베이스 초기화5. Node.js 프.. 2024. 10. 18. 1. React, node.js를 사용한 게시판 만들기 - db 세팅 이전에 node.js, npm, git 세팅을 하고 기초 프로젝트를 만들었다https://tiny-immj.tistory.com/78 React와 node.js를 이용한 기초 프로젝트 생성(for mac)1. 개발 세팅 준비1-1. Node.js 설치하기 https://nodejs.org/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org pkg 파일이 다운받아지면 실행시켜 설치해주세tiny-immj.tistory.com db 중 mysql을 윈도우에 설치해보려 합니다 1. mysql community 버전 다운로드2. mysql 설치하기 3.. 2024. 10. 10. React, node.js를 이용한 기초 프로젝트 생성(for mac) 1. 개발 세팅 준비1-1. Node.js 설치하기 https://nodejs.org/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org pkg 파일이 다운받아지면 실행시켜 설치해주세요 1-2. VS Code 설치https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Dow.. 2024. 10. 3. 이전 1 2 3 4 5 6 다음 반응형
