Frontend 프론트엔드

나의 답안 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..

Next.js 에 타입스크립트 설정하기 yarn add typescript --dev tsconfig.json 파일을 생성한다. ( 내용은 비어 있어도 된다 )yarn add -dev @types/react @types/node yarn installyarn dev// next.js 가 자동으로 tsconfig.json을 기본설정으로 내용을 채워준다 dependency 와 devdependencydevdependency 는 실제 배포시에는 사용되지 않는 라이브러리 이다. 타입스크립트가 그 예시이다.

개선사항1. 게시글 수정 시 게시글의 내용이 Input에 들어가있게 한다.2. 게시글의 원하는 부분만 수정되게 한다. 현재는 모든 input을 다시 보내서 수정하고 있다.1. 수정하기 페이지에서 useQuery로 게시글의 내용을 받아온 뒤, props로 presenter 컴포넌트에 전달해서 defaultValue로 넣는다.container에서 useQuery로 게시글의 내용을 받지 않고 수정 Page에서 받는 이유?자바스크립트 코드는 container 컴포넌트에 적는 것이 좋지만 container 컴포넌트의 경우 게시글 등록과 게시글 수정에 모두 이용되고 있다보니, useQuery를 사용해서 데이터를 받아와도 게시글 등록에는 이용되지 않는다. 따라서 게시글 수정 페이지에서 useQuery를 사용하고 pr..

원리 등록하기 페이지 import BoardWrite from "../../../../src/components/units/board/09-write/BoardWrite.container";export default function GraphqlMutationPage() { return ( );} 상세 페이지 import { useQuery, gql } from "@apollo/client";import { useRouter } from "next/router";const FETCH_BOARD = gql` query fetchBoard($number: Int) { fetchBoard(number: $number) { number writer ..

게시글 등록, 수정 을 컴포넌트 재활용하지 않고 만드는 안좋은 예시 export default function BoardNewPage() { return ( 등록페이지 제목 : 내용 : 등록하기 );}export default function BoardEditPage() { return ( 수정페이지 제목 : 내용 : 수정하기 );} 컴포넌트를 재활용해서 게시글 등록, 수정 페이지 만들기   재사용 가능한 컴포넌트export default function BoardComponent(props) { return ( {props.name}페이지 제목 : 내용..