Frontend 프론트엔드

props 상위 컴포넌트에서 하위 컴포넌트에 props로 데이터를 보낼 때 , 데이터의 이름을 직접 ( 수동 ) 설정해준다props.children컴포넌트의 사이에 하위 컴포넌트에 전달할 데이터를 적으면, 자동으로 props.children 안에 담겨서 전송된다. 예시코드부모 컴포넌트 import Example from "../../../src/components/units/14-props-children-example";export default function PropsChildrenPage() : JSX.Element{ return( +++++++++++++ 빨간색 파란색 초록색 ++++++++++++++++ ..

기초 모달 실습 import { Modal } from "antd";export default function ModalAlertPage(): JSX.Element { const onClickSuccess = (): void => { Modal.success({ content: "게시글 등록에 성공했습니다!!", }); }; const onClickError = (): void => { Modal.error({ content: "비밀번호가 틀렸습니다", }); }; return ( 성공 실패 );}커스텀 모달창 : 확인 버튼과 취소 버튼 import { Modal } from "antd";import { useState }..

리액트 컴포넌트를 만드는 두가지 방식 함수 표현식 React.FC 타입을 붙여준다** export default를 붙여서 한번에 작성하면 오류가 난다.export default const App 는 오류const App: React.FC = () => { const [value, setValue] = useState(3); return ( );};export default App;함수 선언식 리턴 타입에 JSX.Element를 붙여준다.export default function App(): JSX.Element { const [value, setValue] = useState(3); return() } ant design으로 부터 별점 컴포넌트를 가져와서 사용하기..

https://ant.design/components/overview/ Components Overview - Ant DesignAn enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprisesant.design원하는 요소를 클릭해서 사용법을 확인해보면 된다.아이콘 사용해보기yarn add @ant-design/iconsimport { StepForwardOutlined } from "@ant-design/icons";return( )Ant Design에 CSS-IN-JS 적용하기 styled( 원하는 ..

나의 답안 const onClickAlert = (e: any) => { alert(`${e.target.id}님이 작성한 글입니다`); }; return ( {data?.fetchBoards.map((el: any) => ( {el.number} {el.writer} {el.title} ))} );문제 상황 이벤트 버블링 ( 특정 요소에서 이벤트가 발생하면 그 이벤트는 해당 요소에서 시작하여 부모 요소들을 거쳐 최상위 요소 까지 전달 된다 )이 현상으로 바깥쪽의 div뿐만 아니라 안쪽 span을 누르면 span과 div에 이벤트가 모두 전달된다. 이때 e.target..

설치 명령어yarn add -D @graphql-codegen/cliyarn add -D @graphql-codegen/typescriptyarn add ts-nodepackage.json 파일에 다운로드 명령어 추가  "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "generate": "graphql-codegen" }, // yarn generate 명령어로 다운로드를 받을 수 있다.codegen.yaml 파일 만들고 설정해주기 yaml 파일은 띄어쓰기로 코드를 구분하기 때문에 유의하자typesPrefix 는 타입의 맨 앞에 I 를 ..

export interface IProfile { name: string; age: number; school: string; hobby?: string;}1. Partial 타입 type aaa = Partial2. Required 타입type bbb = Required;3. Pick 타입type ccc = Pick;4. Omit 타입type ddd = Omit;5. Record 타입type eee = "철수" | "영희" | "훈이"; // Union 타입type fff = Record;6. 객체의 key들로 Union 타입 만들기type ggg = keyof IProfile; // "name" | "age" | "school" | "hobby"7. type vs interfaceexport ..

게시글 등록 페이지, 게시글 수정 페이지변경사항 없음 함수에 타입스크립트를 적용하는 것을 생각해보면 함수를 호출할 때 타입을 정해주는것이 아니라 함수를 정의한 곳에서 타입을 정의해준다.함수형 컴포넌트에서도 컴포넌트를 호출하는 곳에서는 타입을 지정해줄 필요 없고 컴포넌트에서 매개변수의 타입을 설정해주면 된다. Container 컴포넌트props 의 타입을 지정해준다.onClickUpdate 안에서 myvariables 객체의 타입을 지정해준다. ( 객체는 타입추론이 안된다 ) .이벤트의 타입을 지정해준다. ( 이벤트의 타입은 react에서 제공해준다 )  import { useMutation } from "@apollo/client";import { useState, ChangeEvent } from "r..