DEVELOPE/앱개발시작하기 (26) 썸네일형 리스트형 [20240508] 앱개발 시작하기 #18 | 간단한 회원가입 import { useState } from "react";//간단한 회원가입 폼// 1. 이름// 2. 생년월일// 3. 국적// 4. 자기소개const Register = () => { const [name,setName] = useState("이름"); const [birth, setBirth] = useState(""); const [country,setCountry]= useState(""); const [bio, setBio] = useState(""); const onChangeName = (e) =>{ console.log(e); setName(e.target.value); } const onChangeBirth = (e) =>.. [20240507] 앱개발 시작하기 #17 | State Stateimport './App.css'import { useState } from 'react'// root 컴포넌트function App() { const [state,setState] = useState(0); console.log(state); return ( {state} { setState(state+1); }}> )}export default Appimport './App.css'import { useState } from 'react'// root 컴포넌트function App() { const [count,setCount] = useState(0); const [light,setLight] = useState("off");.. [20240507] 앱개발 시작하기 #16 | 이벤트 핸들링 이벤트 핸들링웹 내부에서 발생하는 사용자의 행동EX) 버튼 클릭, 메세지 입력, 스크롤 등[이벤트 핸들러] - onClick, onMouseEnter1. 직접const Button = ({text,color}) => { return( { console.log(text) }} style={{color : color}}> {text} - {color.toUpperCase()} )}Button.defaultProps = { color: "black",}export default Button;2. 함수형const Button = ({text,color}) => { const onClickButton = () => { co.. [20240507] 앱개발 시작하기 #15 | props 더보기더보기# 1Button.jsxconst Button = (props) => { console.log(props) return( {props.text} - {props.color.toUpperCase()} )}Button.defaultProps = { color: "black",}export default Button;App.jsximport './App.css'import Button from './components/Button'// root 컴포넌트function App() { return ( {/* 자식컴포넌트 */} )}export default App더보기더보기#2But.. [20240507] 앱개발 시작하기 #14 | JSX 시작하기 JSX(자바스크립트 Extensions) : 확장된 자바스크립트 문법const Main = () => { const number = 10; return( main {number%2 ===0 ? "짝수" : "홀수"} );};export default Main;JSX 주의사항1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.2. 숫자, 문자열, 배열 값만 렌더링 된다3. 모든 태그는 닫혀있어야 한다4. 최상위 태그는 반드시 하나여야만 한다 => 빈태그도 괜찮다예시const Main = () => { const uesr = { name: "토순이", isLogin: false, } .. [20240505] 앱개발 시작하기 #13 | 리액트 파일 만들기 npm create vite@latestReact => Javascript => 생성완료npm iindex.html > main.jsx > App.jsx [20240505] 앱개발 시작하기 #12 React의 기술적 특징1. 컴포넌트 기반으로 UI를 표현한다2. 화면 업데이트 구현이 쉽다 (선언형 프로그래밍 - 과거생략, 목적만 간결 명시) 3. 화면 업데이트가 빠르게 처리된다 - Virtual DOMUX(사용자 경험):사용자가 제품 또는 서비스를 사용하는 동안 느끼는 전반적인 경험을 다룹니다.사용자가 제품을 사용함에 따라 느끼는 감정, 만족도, 편의성 등을 고려합니다.사용자의 요구사항과 목표를 이해하고, 제품이나 서비스가 사용자의 요구를 어떻게 충족시키는지에 초점을 둡니다.사용자의 행동 및 상호작용을 분석하여 제품 또는 서비스를 지속적으로 개선합니다.UI(사용자 인터페이스):사용자가 제품 또는 서비스와 상호작용하는 화면, 버튼, 아이콘 등을 디자인합니다.사용자가 제품을 어떻게 사용하는지를 직접적.. [20240505] 앱개발 시작하기 #11 | Node.js Node.jsNode.js는 자바스크립트 런타임 환경으로, 서버 측 애플리케이션을 만들 때 사용됩니다. 이것은 Chrome V8 JavaScript 엔진 위에 구축되어 비동기식 이벤트 기반 및 논 블로킹 I/O 모델을 사용하여 빠르고 확장 가능한 네트워크 애플리케이션을 작성할 수 있도록 해줍니다. Node.js는 많은 개발자들이 프런트엔드와 백엔드를 모두 자바스크립트로 작성할 수 있게 해주는 것으로 유명합니다. 따라서 개발자들이 일관된 언어로 전체 애플리케이션을 작성할 수 있으므로 개발 생산성이 향상됩니다.const {add, sub} = require("./math");console.log(add(1,2));ESM 모듈import {add,sub} from "./math.js"npm run start .. 이전 1 2 3 4 다음
