묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
parsedData를 콘솔에 찍으면 나오질 않고 있습니다.
안녕하세요.강의 24분쯤의 내용입니다.parsedData를 콘솔에 찍으면 아무것도 나오지 않고 있습니다.Application에 로컬스토리지에 보면 4개의 데이터가 잘 저장되어있는데요.인강을 몇번 돌려 봐도 계속 그런 상태인데 제가 뭐 놓치고 있는게 있을까요?function reducer(state, action) { let nextState; switch (action.type) { case "INIT": return action.data; case "CREATE": { nextState = [action.data, ...state]; break; } case "UPDATE": { nextState = state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); break; } case "DELETE": { nextState = state.filter((item) => String(item.id) !== String(action.id)); break; } default: return state; } localStorage.setItem("dairy", JSON.stringify(nextState)); return nextState; } export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, []); const idRef = useRef(0); useEffect(() => { const storedData = localStorage.getItem("diary"); if (!storedData) { return; } const parsedData = JSON.parse(storedData); console.log(parsedData); }, []);
-
미해결Do it! Node.js 프로그래밍 입문
db 테이블 생성할 때 변수에 받는 이유가 무엇인가요?
const contact = Contact.create({ name, email, phone, });테이블 이름은 모델에 정의된 contactModel.js에서 정의 되는데contact라는 변수에 할당 받는 이유가 무엇일까요?javascript에서는 변수에 함수로 초기화를 할 수 있기 때문에 그냥 함수의 역할을 하는 변수인가요?
-
미해결Do it! Node.js 프로그래밍 입문
모듈을 내보내고 사용할 때 질문이 있습니다.
이번에 강의에서 Controller를 내보내고 사용할 때는 추가로 () 소괄호를 사용하지 않았지만, 전 강의에서 mongoDB는 사용할 때 dbConnect(); 처럼 소괄호를 사용해주었습니다. 소괄호를 사용해주고 안사용해줄 때의 차이를 알고싶습니다
-
해결됨[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
App.tsx에서 Icon을 못가지고 오는 오류..('VectorIcons' could not be found ~)
왜인지 모르게 npm install로 npm install --save @react-native-vector-icons/fontawesome5이런식으로 설치를 해주고 나서import FontAwesome5 from '@react-native-vector-icons/fontawesome5'; 을 하면 icon을 가지고 오지 못해서 [runtime not ready]: Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'VectorIcons' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes, stack: invariant@2200:25~위에와 같은 오류가 발생합니다,,, font가 제대로 카피되지 않아서 벌어지는 일 같아용,,,그래서 여러가지 시도해본 결과 다른거 할 필요없이import FontAwesome5 from '@react-native-vector-icons/fontawesome5';이런식으로 Icon이 아니라 FontAwesome5를 해주니까 되더라구요,,? 그런 후에 다시 import Icon from '@react-native-vector-icons/fontawesome5';이렇게 Icon으로 해주니까 font들이 제대로 카피가 되더라구요,,?위에 사진처럼 복사되면 제대로 된거죠?(Icon 잘 나옵니다,,)혹시 바로 import Icon했을때는 왜 안된건지 아실까요?
-
해결됨[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
iOS설정에 오류가 있는 것 같습니닷,,(info.plist 설정 오류)
강의 설명에서는 아래 사진처럼 되어져 있는데-> false의 위치가 틀렸어요이게 맞습니다(아래 사진)아마 1번 사진처럼 하면, Info.plist오류라고 뜨면서 앱이 실행이 안됩니다! 2번 사진처럼 붙여넣어주셔야 합니다,,제대로 설정되면 Info.plist를 Property List로 열었을때 오류 없이 잘 열릴꺼에요(1번 처럼하면 PropertyList 안열림)열려서 Fonts provided by application에 추가한 폰트들이 잘 들어가져있다면 잘 설치된거에요~ cf1) 이렇게 했는데 갑자기 잘 안된다면 podfile제거하고 다시 설치해보세용cd iospod deintegratepod install이렇게 하시면 되용cf2) 만약에No script URL provided. Make sure the packager is running or you have embedded a JS bundle in your application bundle. unsanitizedScriptURLString = (null)이런 에러가 뜨면 터미널로 가서 npm start해주면 됩니다..저처럼 헷갈리시는 분들이 있을까봐 남겨용 학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
감정일기장 로컬 셋팅하는 강의가 없어졌습니다.
예전에는 분명이프로젝트 소개 및 준비 영상인가그다음에 있었던 것 같은데로컬 셋팅하는게 없어졌어요 라우팅 설명하고 바로section13번 열라고 강의에 나오는데그 section13번을 셋팅하는 강의가 사라진 것 같아 문의드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
findOne 타입스크립트오류
import { Injectable } from '@nestjs/common'; import { Repository } from 'typeorm'; import { Product } from './entities/product.entity'; import { InjectRepository } from '@nestjs/typeorm'; import { IProductServiceCreate, IProductServiceFindOne, } from './interfaces/products-service.interface'; @Injectable() export class ProductsService { constructor( @InjectRepository(Product) private readonly productsRepository: Repository<Product>, ) {} findAll(): Promise<Product[]> { return this.productsRepository.find(); } findOne({ productId }: IProductServiceFindOne): Promise<Product> { // @ts-ignore return this.productsRepository.findOne({ where: { id: productId } }); } create({ createProductInput }: IProductServiceCreate): Promise<Product> { const result = this.productsRepository.save({ ...createProductInput, // 하나하나 직접 나열하는 방식 // name: '마우스', // description: '좋은 마우스', // price: 3000, }); return result; } } 이코드가 제코드인데 findOne 메서드에서 // @ts-ignore를 하지 않으면 Promise<Product | null>' 형식은 'Promise<Product>' 형식에 할당할 수 없습니다. 'Product | null' 형식은 'Product' 형식에 할당할 수 없습니다. 'null' 형식은 'Product' 형식에 할당할 수 없습니다.라는 에러가 뜹니다 어떻게 해야하나요?
-
미해결지금 당장 NodeJS 백엔드 개발 [사주 만세력]
common/fortune.js 조건문 오류
common/fortune.js 파일의 11번 째 줄 if문의 조건과 13번째 줄 else if문의 조건이 동일 합니다.13번째 줄의 조건이 (sex === "MALE" && minusPlus === "음") || (sex === "FEMALE" && minusPlus === "양")이렇게 되야 하는거 맞나요?
-
미해결Do it! Node.js 프로그래밍 입문
바디 파서 질문있습니다
undefined가 되지 않기 위해 바디파서를 사용해서 우리가 필요한 자료구조로 전달받을 수 있고 바디파서를 사용한다는 의미로 app.use(express.json()); app.use(express.urlencoded({ extended: true }));이 코드를 추가를 해주셨습니다. 궁금해서 app.use(express.urlencoded({ extended: true })); 를 주석처리하고 실행한 결과 그래도 정상 작동이 됩니다 app.use(express.json()); 이 부분을 주석처리하고 하면 undefined가 아닌 {} 빈 json을 전달 받습니다 각각 저 코드들이 하는 역할이 궁금합니다
-
해결됨[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
안드로이드 스플래시 및 AppIcon설정 전체 과정 및 관련 질문
안드로이드 설정 과정이 전체가 약간 헷갈려있게 되어있는 것 같아서,,, 이게 맞는지 궁금해서 남깁니다npm i react-native-splash-screen --save 을 통해서 npm을 설치한다앱로고와 스플래시 화면을 준비해준다아래 사이트에서 앱 로고를 만들어준다EasyAppIcon - Create Mobile App Icon앱 아이콘들을 android폴더에 넣어준다android/app/src/main/res의 아래에 mipmap-hdpi~로 시작하는 파일들에 이름에 맞춰서 앱 아이콘들을 넣어준다 스플래시 화면(아마도 이미지)을 android/app/src/main/res/drawable폴더에 넣어준다반드시 launch_screen이라는 이름으로 넣어준다 -> launch_screen.png android/setting.gradle에 가서 아래처럼 설정해준다include ':react-native-splash-screen' project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android') android/app/build.gradle (113번 줄)implementation project(':react-native-splash-screen') android/app/src/main/java/com/coin/MainActivity.kt에 7번째 줄에import android.os.Bundle; import org.devio.rn.splashscreen.SplashScreen; android/app/src/main/java/com/coin/MainActivity.kt에 12~15번째 줄에 override fun onCreate(savedInstanceState: Bundle?) { SplashScreen.show(this) super.onCreate(null) } . . . /MainApplication.kt (14번 줄)에import org.devio.rn.splashscreen.SplashScreenReactPackage . . . /MainApplication.kt (24번 줄)에SplashScreenReactPackage() 스플래시 화면을 숨겨주기 위해 App.tsx에아래 내용을 추가해준다useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 500); }); // 의존성 배열 없음 - 매 렌더링마다 실행됨 values.colors.xml파일을 만들어서 아래 내용을 추가해준다<?xml version="1.0" encoding="utf-8"?> <resources> <!-- 다른 색상들이 있다면 유지하세요 --> <color name="status_bar_color">#000000</color> <!-- 원하는 색상 코드로 변경 가능 --> </resources> 질문1. 잘 나오는 것 같기는 한데 총 과정이 이게 맞을까요?질문2. 그리고 스플래시화면이 뜨기 전에 앱 로고가 전체적으로 뜨고(흰바탕에 설정한 앱 로고가 중앙에 작게 나옴) 스플래시 화면이 뜨는데 원래 이런거 맞나요?질문3. 그리고 values/colors.xml파일은 왜 설정해주는 건가요?
-
해결됨[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
iOS에서 splash screen설정 오류
iOS에서 splash screen을 RN에서 설정해보기 위해서 RN으로 작업을 해봤는데요,,,AppDelegate파일에서 import RNSplashScreen에서 pod install을 하고 진행을 했는데도 모듈을 찾을 수 없다고 뜨더라구요ㅠpodfile에는 RNSplashScreen가 있는거는 확인했습니다.. 그러므로 설치는 된 거 같은데,, 프로젝트가 모듈을 못찾는 것 같아요ㅠ다른 프로젝트 참고해보려고 해도, 저는 AppDelegate.swift파일이고 .h파일이나 .m파일은 없어서 여기서 설정을 하지를 못하겠어요ㅠ(cf. 찾아보니까 해당 라이브러리가 옛날버전이고 지금 RN의 iOS랑 호환이 되지 않아서 발생하는 문제 같은데, 이때 브릿징 헤더를 설치해야 한다고 본거 같아요 => 이 문제가 맞을까요?)강의가 android기준으로만 설명되서,,, 혹시 RN으로 어떻게 iOS 스플래시 화면을 설정해야 하는걸까요?학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
댓글 수정 함수 바인딩이 안되는 것 같습니다.
import BoardCommentWriteUI from "./boardCommentWrite.presenter"; import { ChangeEvent, useState } from "react"; import { useMutation } from "@apollo/client"; import { CREATE_BOARD_COMMENT, UPDATE_BOARD_COMMENT, } from "./boardCommentWrite.queries"; import { useRouter } from "next/router"; import { FETCH_BOARD_COMMENTS } from "../list/boardCommentList.queries"; import { IMutation, IMutationCreateBoardCommentArgs, IMutationUpdateBoardCommentArgs, } from "../../../../commons/types/generated/types"; import { IBoardCommentWriteProps } from "./boardCommentWrite.types"; export default function BoardComment(props: IBoardCommentWriteProps) { const [createBoardComment] = useMutation< Pick<IMutation, "createBoardComment">, IMutationCreateBoardCommentArgs >(CREATE_BOARD_COMMENT); const [updateBoardComment] = useMutation< Pick<IMutation, "updateBoardComment">, IMutationUpdateBoardCommentArgs >(UPDATE_BOARD_COMMENT); const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [comment, setComment] = useState(""); const [star, setStar] = useState(0); const router = useRouter(); const handleChangeWriter = (event: ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); }; const handleChangePassword = (event: ChangeEvent<HTMLInputElement>) => { setPassword(event.target.value); }; const handleChangeComment = (event: ChangeEvent<HTMLTextAreaElement>) => { setComment(event.target.value); }; const updateComment = () => { alert("수정하기 입니다."); }; const onClickSubmitComment = async () => { try { if (typeof router.query.boardId !== "string") { alert("시스템에 문제가 있습니다."); return; } const result = await createBoardComment({ variables: { createBoardCommentInput: { writer, password, contents: comment, rating: star, }, boardId: router.query.boardId, }, refetchQueries: [ { query: FETCH_BOARD_COMMENTS, variables: { boardId: router.query.boardId }, }, ], }); } catch (error) { if (error instanceof Error) { alert(error.message); } } setWriter(""); setComment(""); setPassword(""); setStar(0); }; return ( <BoardCommentWriteUI handleChangeWriter={handleChangeWriter} handleChangePassword={handleChangePassword} handleChangeComment={handleChangeComment} onClickSubmitComment={onClickSubmitComment} updateComment={updateComment} setStar={setStar} writer={writer} comment={comment} password={password} el={props.el} /> ); } boardCommentWriter.container.tsx 에서 updateComment 바인딩이 안된것인지함수가 작동을 안하는 것인지updateComment의 "수정하기 입니다. " 알림창이 안뜹니다.수정/삭제 버튼 onClick 내부에서 해봐도 태그 바깥에서 삼항연산자를 써보아도 적용이.. 안됩니다. onClickSubmitComment 함수는 제대로 작동하는데 말이죠 ㅠㅠ 도저히 왜 안되는지 모르겠어요import * as S from "../../board/commons/style/style"; import * as Own from "./boardCommentWrite.styles"; import { IBoardCommentWriteProps } from "./boardCommentWrite.types"; export default function BoardCommentWriteUI(props: IBoardCommentWriteProps) { console.log(props.el); return ( <S.BoardWrapper> <S.Row> <Own.Writer placeholder="작성자" onChange={props.handleChangeWriter} value={props.editComment ? props.el?.writer : props.writer} readOnly={props.editComment} /> <Own.Password placeholder="비밀번호" onChange={props.handleChangePassword} value={props.password} /> <Own.RankWrapper> <Own.RateComment value={props.editComment && props.el.rating} onChange={props.setStar} /> </Own.RankWrapper> </S.Row> <Own.Comment onChange={props.handleChangeComment} placeholder="댓글을 입력해주세요." value={props.editComment ? props.el.contents : props.comment} /> <Own.BottomComments> <S.Row> <p>0</p> <div>/</div> <p>100</p> </S.Row> {/* <Own.SubmitButton onClick={ props.editComment ? props.updateComment : props.onClickSubmitComment } > {props.editComment ? "수정하기" : "등록하기"} </Own.SubmitButton> */} {props.editComment ? ( <Own.SubmitButton onClick={props.updateComment}> 수정하기 </Own.SubmitButton> ) : ( <Own.SubmitButton onClick={props.onClickSubmitComment}> 등록하기 </Own.SubmitButton> )} </Own.BottomComments> </S.BoardWrapper> ); }
-
미해결하루만에 배우는 express with AWS
AWS EC2 Node 설치
다음과 같은 양식으로 남겨주세요.질문을 한 배경 :AWS EC2 Node 설치질문내용 :AWS EC2 Node 설치강의에서 50초부분에 사이트가 어디에 알려주는게 맞는거 같습니다
-
미해결하루만에 배우는 express with AWS
아이엠유저 초기 비밀번호는 어디있는거죠
다음과 같은 양식으로 남겨주세요.질문을 한 배경 : 아무 설명도 안하고 혼자 진행함질문내용 :
-
미해결하루만에 배우는 express with AWS
aws 어드민설정하는 페이지 어떻게 들어가는지 이런설명이 왜 하나도 없나요
다음과 같은 양식으로 남겨주세요.질문을 한 배경 : 질문내용 : aws 어드민설정하는 페이지 어떻게 들어가는지 이런설명이 왜 하나도 없나요
-
미해결대용량 채팅 TPS 처리를 위한 웹소켓 통신 만들며 학습하기
프론트쪽이 리액트로 되어있는데요..
html 과 js 로 이루어진 페이지에서 쓰려고 했는데리액트에서 소켓관련된 어떤 라이브러리를 쓰시는 것 같아서 변경하는데 하기에 어려운 난이도 일까요 ?초보라서요 ..ㅠㅠ
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
return에 대해 질문있습니다.
안녕하세요 return에 대해 질문이 있습니다.const sum = (a, b) => { return a + b}const result = sum(1, 2);console.log(result) 이렇게 간단한 코드에서는 a와 b가 더한 값이 반환되어 호출한 부분으로 전달되서 5가된다라고는 알고 있는데 투두리스트 예제에서 예를 들어 const onUpdate = (targetId) => { setTodos( todos.map((todo) => { if (todo.id === targetId) { return { ...todo, isDone: !todo.isDone, }; } return todo; }) ); };이렇게 return {...todo, isDone: !todo.isDone} 부분과 return todo 이 부분이 조금 이해가 되지 않는데 이 부분은 return을 왜 사용하였고 또 어디로 반환이 되는것인지 궁금합니다.
-
미해결대용량 채팅 TPS 처리를 위한 웹소켓 통신 만들며 학습하기
오늘 강의 듣기 시작했는데요!
제 프로젝트에 채팅 기능을 넣고 싶어서 듣게 되었습니다. (일반 js, html로 이루어진)view 부분은 아무거나 제가 해서 하면 되겠지만이 채팅 서버를 api처럼 사용할 예정이에요이것을 배포할 때는 어떤식으로 해줘야 하는지 잘 모르겠네요. spring 은 톰캣으로 webapp에 war를 넣어서 해당 컨텍스트를 실행시켜주면되고 플라스크는 wsgi 를 사용해서 requirement.txt 에 외부라이브러리 세팅해주고돌리면 돌아갔는데 이 강의 서버는 리눅스에서 어떤식으로 리눅스에서 돌리면 될까요 ? 도커를 사용할 예정입니다..! 이 웹 어플리케이션을 배포해서 돌리기위한 절차가 궁금합니다!
-
미해결Vue로 Nodebird SNS 만들기
npm run dev 할 때 에러가 발생합니다.
2강에서 서버 실행시 에러가 발생합니다.무료 게임 강좌에서는 정상적으로 실행되었습니다. node : 10.15.3nuxt: 2.8.1vue: 2.6.10vue-server-renderer: 2.6.10 [로그 정보]PS C:\vue-nodebird\ch1\front> npm run dev> vue-nodebird-front@1.0.0 dev C:\vue-nodebird\ch1\front> nuxt WARN Address localhost:3000 is already in use. 11:49:13i Trying a random port... 11:49:13 ╭─────────────────────────────────────────────╮ │ │ │ Nuxt.js v2.8.1 │ │ Running in development mode (universal) │ │ │ │ Listening on: http://localhost:58015/ │ │ │ ╰─────────────────────────────────────────────╯i Preparing project for development 11:49:14i Initial build may take a while 11:49:14√ Builder initialized 11:49:14√ Nuxt files generated 11:49:14 ERROR Unexpected token . 11:49:14 const r=Object.create(null),i=e=>globalThis.process?.env||undefined||globalThis.Deno?.env.toObject()||globalThis.__env__||(e?r:globalThis),s$1=new Proxy(r,{get(e,o){return i()[o]??r[o]},has(e,o){const E=i();return o in E||o in r},set(e,o,E){const b=i(true);return b[o]=E,true},deleteProperty(e,o){if(!o)return false;const E=i(true);return delete E[o],true},ownKeys(){const e=i(true);return Object.keys(e)}}),t=typeof process<"u"&&process.env&&process.env.NODE_ENV||"",B=[["APPVEYOR"],["AWS_AMPLIFY","AWS_APP_ID",{ci:true}],["AZURE_PIPELINES","SYSTEM_TEAMFOUNDATIONCOLLECTIONURI"],["AZURE_STATIC","INPUT_AZURE_STATIC_WEB_APPS_API_TOKEN"],["APPCIRCLE","AC_APPCIRCLE"],["BAMBOO","bamboo_planKey"],["BITBUCKET","BITBUCKET_COMMIT"],["BITRISE","BITRISE_IO"],["BUDDY","BUDDY_WORKSPACE_ID"],["BUILDKITE"],["CIRCLE","CIRCLECI"],["CIRRUS","CIRRUS_CI"],["CLOUDFLARE_PAGES","CF_PAGES",{ci:true}],["CODEBUILD","CODEBUIL SyntaxError: Unexpected token . at new Script (vm.js:80:7) at createScript (vm.js:274:10) at Object.runInThisContext (vm.js:326:10) at Module._compile (internal/modules/cjs/loader.js:664:28) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.<anonymous> (node_modules\@nuxt\friendly-errors-webpack-plugin\node_modules\consola\lib\index.cjs:2:13) at Module._compile (internal/modules/cjs/loader.js:701:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3)
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
HTML 태그와 리렌더링 관계
강사님 안녕하세요!리액트 강의 완강 후, 리액트로 개인 프로젝트를 진행하던 중에 리렌더링 관련하여 궁금한 점이 생겨 질문드립니다.컴포넌트가 리렌더링 되는 조건이1. 부모 컴포넌트가 리렌더링 될 때 (props 포함)2. 컴포넌트의 state가 변경되었을 때이렇게 2가지라고 봤는데요!문제상황 : Input의 state가 변경되면 Button이 재렌더링됨부모-자식 관계가 아닌 형제관계인 <Input /> 컴포넌트와 <Button /> 가 서로 재렌더링을 유발하는 원인이 무엇일까 해서 질문드립니다.실제 브라우저DOM에 커밋되지는 않고 각 컴포넌트 내부에서 console을 찍어봐도 나오지 않는 것을 보아하니 렌더링까지만 되는 것 같아요... (chrome react확장 프로그램에서 highlight됨)제가 여러가지 케이스로 테스트 해 본 결과, (각 컴포넌트는 props도 받지 않고 내부 state만 있음)div 태그로 감싸져 있을 때 서로 재렌더링을 유발하는 것 같아 아무리봐도 이상해서요 ㅠㅠ문제 발생코드<div> <Input /> </div> <div> <Button /> </div>수정한 코드<Input /> <Button />