짬짬이기록하기

// 공통으로 사용되는 모델 정의 ==> 보통 model 폴더에 .ts 파일로 공통 사용함interface Restaurant { name: string; address: string; menu?: Menu; // menu를 선택적 필드로 변경, 있어도 되고, 없어도 된다. }interface Menu { name: string; orderNum: number; price: number;}// 해당 컴포넌트에서 선언interface OwnProps { info: Restaurant; OrderMenu: (menu: Menu) => string; // props 타입 정의}interface OwnProps2 extends Menu { recommand: string; // 기존 Menu 타..

/** @type {import('next').NextConfig} */ const API_KEY = process.env.API_KEY; const nextConfig = { reactStrictMode: true, async redirects() { return [ { source: "/contact/:path*", destination: "/form/:path*", permanent: false } ] }, async rewrites() { return [ { source: "/api/movies", destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}` } ] } }; export default nextConfig;..

import React, {Component} from 'react'import PropTypes from 'prop-types'class PropsComponent extends React.Component { myFun(x,y) { console.log(`myFun call: ${x + y}`) } user = { name: 'kim', age: 20, } arr = ['hello', 'world'] render() { return ( Props Test ) }}class PropsSubComponent ..

아래의 경우 count가 3씩 증가한다. // setter함수에 매개변수로 함수를 지정하면 함수가 끝날때까지 대기함. 동기적으로 처리된다. const syncIncrement = () => { setCount((count)=>count+1) setCount((count)=>count+1) setCount((count)=>count+1) }

반갑습니다. 컴포넌트 body const PropBody = (props) => { return ( {/* 상위에서 컴포넌트 body에 추가한 문자열은 자동으로 prop.children에 들어간다. */} {props.children} {/* props.children : 반갑습니다. 컴포넌트 body */} ) }

npm install styled-components import styled from 'styled-components' // 상위가 props로 전달하는 값을 이용해 동적 스타일링 적용 컴포넌트 const Footer = (props) => { // div는 div 컴포넌트를 만드는 함수이다. `` 부분은 div 함수 호출하면서 전달하는 매개변수 // 동적 스타일링이 적용된 div컴포넌트를 만들자. const FooterBox = styled.div` position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: ${() => (props.theme === 'basic' ? 'skyblue' : 'yellow')};..

* 소프트웨어 아키텍쳐 모델 : 관심의 분리 ## MVC (Model, View, Controller) : 역할 별로 분리하여 개발 * 주 목적 : 화면이 주목적인 소프트웨어 개발에 적용 * Model : 비지니스 업무 로직과 데이타 * View : 프리젠테이션 로직(화면) * Controller : 제어 * express, spring ==> MVC 적용 * express(node기반의 백엔드앱의 Controll을 위한 프레임워크) * 동적 UI 컴포넌트를 만들기 위한 프레임웍 : angular,vue,react * react : View를 중심으로 한 프론트앱의 프레임워크, 동적 데이터을 반영하는 대규모 웹앱 구축을 위해 만들어짐 # React 소개 - html이 화면당 여러개 일때, 각각이 html..

import { useState, useEffect, useRef } from 'react' import { useNavigate } from 'react-router-dom' import axios from 'axios' // 검색창 const focusRef = useRef() const [searchClassName, setSearchClassName] = useState('search_input d-none') const [keyword, setKeyword] = useState('') const searchProduct = async ()=>{ setSearchClassName('search_input d-none') setKeyword('') const resp = await axios.get..