프론트엔드 지망생

45일차 프론트엔드 공부 - eslint, prettier

프망생222 — Sun, 5 Jan 2025 16:40:33 +0900

- 프론트엔드 공부 45일차 -

코드 린터 / 코드 포멧터

eslint / prettier

코드 린터 (eslint)

문법에서 오류는 아니지만, 에러로 약속하자고 규칙을 정하는 것

import 순서, == 금지, === 허용

코드 포멧터 (prettier)

코드를 보기 좋게 만드는 것

띄어쓰기 2칸, __길이 넘으면 줄바꿈

husky

소스코드를 커밋하기 전, 기존의 규칙을 지켜가면서 코딩을 진행하였는지 검증해주는 도구

규칙에 어긋나는 코드가 있으면 강제로 커밋을 거절한다.

eslint 설치법

터미널 창에 'npm init @eslint/config@latest' 입력

To Check syntax and find problem - JavaScript modules (import/export) - React - Yes - Browser - Yes - Yarn 선택

위 항목 과정 재현 시 eslint.config.mjs 파일이 생성된다.

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import eslintConfigPrettier from "eslint-config-prettier";

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  eslintConfigPrettier,

  {
    rules: {
     // 제외할 규칙 입력
    },
  },
];

rules 부분에 제외할 규칙을 입력하면 해당 규칙은 제외하게 된다.

"react/react-in-jsx-scope": "off",

위와 같은 형식으로 입력하면 된다.

이후 VSCode에서 ESLint extension을 설치해주면 규칙에 해당하지 않은 부분은 빨간 줄로 오류를 알려줄 것이다.

터미널 창에 npx eslint 입력 시 모든 파일에서 어떤 부분이 잘못이 있는지 체크해서 알려준다.

prettier 설치

터미널 창에 'yarn add --dev --exact prettier' 입력하여 prettier 설치

이후 node --eval "fs.writeFileSync('.prettierrc','{}\n')" 입력하여 설정파일을 생성한다.

설치된 파일에 코드 정렬 규칙을 생성하면 된다.

자동으로 prettier 설정하는 법

최상단에 .vscode 폴더 생성

폴더 안에 settings.json 파일 생성

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

settings.json 파일에 위 코드 입력

ESLint 와 Prettier 연결

터미널 창에 npm install --save-dev eslint-config-prettier 입력

eslint.config.mjs 파일 안에

import eslintConfigPrettier from "eslint-config-prettier";

export default [
  eslintConfigPrettier,
];

위 코드를 추가해주면 된다.

이후 VSCode에서 'Prettier' extension을 설치해주면 된다.

44일차 프론트엔드 공부 - 이벤트 버블링

프망생222 — Wed, 1 Jan 2025 16:16:34 +0900

- 프론트엔드 공부 44일차 -

이벤트 버블링

특정 화면 요소에서 이벤트가 발생하였을때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성

HTML은 자식요소의 Onclick을 실행하면 부모 요소의 Onclick도 실행되게 된다.

자식요소 -> 부모요소

이벤트 캡처링

부모 요소에서 자식 요소의 기능이 실행된다.

import { useQuery, gql } from "@apollo/client";
import { MouseEvent } from "react";

const FETCH_BOARDS = gql`
  query {
    fetchBoards {
      number
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage() {
  const { data } = useQuery(FETCH_BOARDS);
  console.log(data?.fetchBoards);

  const onClickAlert = (event: MouseEvent<HTMLSpanElement>) => {
    alert(event.currentTarget.id + "님이 작성한 글입니다.");
  };
  return (
    <div>
      {data?.fetchBoards.map((el: any) => (
        <div>
          <span>
            <input type="checkbox" />
          </span>
          <span onClick={onClickAlert} id={el.writer}>
            <span style={{ margin: "10px" }}>{el.number}</span>
            <span style={{ margin: "10px" }}>{el.title}</span>
            <span style={{ margin: "10px" }}>{el.writer}</span>
          </span>
        </div>
      ))}
    </div>
  );
}

게시글 터치 시 작성자의 이름이 있는 토스트 메시지가 생성된다.

const onClickAlert = (event: MouseEvent<HTMLSpanElement>) => {

alert(event.currentTarget.id + "님이 작성한 글입니다.");

};

event.currentTarget.id : 이벤트가 적용된 요소의 id를 가져오게 된다.

event.target.id를 사용하면 이벤트 버블링 현상으로 인해 부모 요소의 id, 자식 요소의 id와 자신의 id를 번갈아가며 가져오게 되는 현상이 생기게된다.

Stoppropagation

상위요소로 해당 이벤트를 전달하지 않고 자신만 이벤트를 감지하도록 한다.

import { useQuery, gql } from "@apollo/client";
import { MouseEvent } from "react";
import Checkbox from "./checkbox";

const FETCH_BOARDS = gql`
  query {
    fetchBoards {
      number
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage() {
  const { data } = useQuery(FETCH_BOARDS);
  console.log(data?.fetchBoards);

  const aaa = () => {
    alert("1번 클릭");
  };

  const ddd = (event) => {
    event.stopPropagation();
    alert("4번 클릭");
  };

  return (
    <div>
      {data?.fetchBoards.map((el: any) => (
        <div onClick={aaa}>
          <Checkbox />
          <span onClick={ddd} id={el.writer}>
            <span style={{ margin: "10px" }}>{el.number}</span>
            <span style={{ margin: "10px" }}>{el.title}</span>
            <span style={{ margin: "10px" }}>{el.writer}</span>
          </span>
        </div>
      ))}
    </div>
  );
}

export default function Checkbox() {
  const bbb = () => {
    alert("2번 클릭");
  };

  const ccc = (event) => {
    event.stopPropagation();
    alert("3번 클릭");
  };
  return (
    <span onClick={bbb}>
      <input onClick={ccc} type="checkbox" />
    </span>
  );
}

const ddd = (event) => {

event.stopPropagation();

alert("4번 클릭");

};

event.stopPropagation을 사용함으로써 부모, 자식 요소의 이벤트가 실행되지 않고 자신의 이벤트만 실행되도록 한다.

주의사항

파일이 분리되어 있더라도 import를 통해 파일이 합쳐진다면 이벤트 버블링 현상이 발생하게 된다.

43일차 프론트엔드 공부 - 타입 스크립트2

프망생222 — Mon, 30 Dec 2024 16:08:42 +0900

- 프론트엔드 공부 43일차 -

export interface IProfile {
  name: string;
  age: number;
  school: string;
  hobby?: string;
}

// 1. Partial 타입
type aaa = Partial<IProfile>;
// type aaa = {
//     name?: string | undefined;
//     age?: number | undefined;
//     school?: string | undefined;
//     hobby?: string | undefined;
// } 를 의미한다.

// 2. Required 타입
type bbb = Required<IProfile>;
// type bbb = {
//     name: string;
//     age: number;
//     school: string;
//     hobby: string;
// } 를 의미한다.

// 3. Pick 타입
type ccc = Pick<IProfile, "name" | "age">;
// type ccc = {
//     name: string;
//     age: number;
// } 를 의미한다.

// 4. Omit 타입
type ddd = Omit<IProfile, "school">;
// type ddd = {
//     name: string;
//     age: number;
//     hobby?: string | undefined;
// } 를 의미한다.

// 5. Record 타입
type eee = "철수" | "짱구" | "훈이"; // Union 타입
let child1: eee = "바나나";
// eee 에는 철수, 짱구, 훈이만 할당할 수 있다.

type fff = Record<eee, IProfile>;
// type fff = {
//     철수: IProfile;
//     짱구: IProfile;
//     훈이: IProfile;
// } 를 의미한다.

// 6. 객체의 key들로 Unicon 타입 만들기
type ggg = keyof IProfile; // "name" | "age" | "school" | "hobby"
let myprofile: ggg = "hobby"; // name, age, school, hobby만 사용 가능

// 7. type vs interface 차이 -> interface는 선언병합 가능능
export interface IProfile {
  candy: number; // 선언병합으로 추가됨
}

let profile: Partial<IProfile> = {
  candy: 10,
};

42일차 프론트엔드 공부 - 타입 스크립트

프망생222 — Sun, 29 Dec 2024 18:44:41 +0900

- 프론트엔드 공부 42일차 -

타입 스크립트 Typescript

- 자바 스크립트의 타입을 강제시키는 언어

ex)

파일명 : aaa.ts

let aaa: string = “안녕하세요”

aaa = 123

오류 발생

let aaa: string = “안녕하세요”

let bbb: number = 1234

let ccc: boolean = true

Interface IProfile{

name: string;

age: number;

}

let profile: IProfile = { name: “철수”, age: 13 }

import { stringify } from "querystring";

export default function TypeScriptPage() {
  // 타입 추론
  let aaa = "안녕하세요";
  aaa = 3; // 에러 발생

  // 타입 명시
  let bbb: string = "반갑습니다.";
  bbb = 10;  // 에러 발생

  // 타입 명시가 필요한 상황
  let ccc: number | string = 1000;
  ccc = "1000원";

  // 숫자 타입
  let ddd: number = 10;
  ddd = "짱구"; // 에러 발생

  // 불린 타입
  let eee: boolean = true;
  eee = false;
  eee = "false"; // true로 작동 / 에러 발생

  // 배열 타입

  let fff: number[] = [1, 2, 3, 4, 5, "안녕하세요"]; // 에러 발생
  let ggg: string[] = ["짱구", "철수", "맹구", "훈이", 10]; // 에러 발생
  let hhh: (string | number)[] = ["짱구", "철수", "맹구", "훈이", 10];

  // 객체 타임
  interface Iprofile {
    name: string;
    age: number | string;
    school: string;
    hobby?: string;
  }

  const profile: Iprofile = {
    name: "짱구",
    age: 5,
    school: "떡잎유치원원",
  };

  profile.name = "훈이";
  profile.age = "8살";
  profile.hobby = "수영";

  // 함수 타입
  function add(num1: number, num2: number, unit: string): string {
    return num1 + num2 + unit;
  }
  const result = add(1000, 2000, "원"); // 결과의 리턴 타입도 예측 가능

  const add2 = (num1: number, num2: number, unit: string): string => {
    return num1 + num2 + unit;
  };
  const result2 = add2(1000, 2000, "원");

  // any 타입
  let qqq: any = "철수";
  qqq = 123;
  qqq = true;

  return <></>;
}

41일차 프론트엔드 공부 - 게시글 수정하기

프망생222 — Sun, 22 Dec 2024 16:50:16 +0900

- 프론트엔드 공부 41일차 -

게시글 등록

게시글 상세 보기

게시글 수정페이지

수정된 게시글

export default function GraphqlMutationPage() {
  return <BoardWrite isEdit={false} />;
}

export default function GraphqlMutationPage() {

return <BoardWrite isEdit={false} />;

}

게시글 등록하기 전이기에 isEdit에 false 값을 넣어준다.

버튼에 '등록하기' 버튼으로 노출시키기 위해서

import { useQuery, gql } from "@apollo/client";
import { useRouter } from "next/router";

const FETCH_BOARD = gql`
  query fetchBoard($number: Int) {
    fetchBoard(number: $number) {
      number
      writer
      title
      contents
    }
  }
`;

export default function DynamicRoutingMovedPage() {
  const router = useRouter();
  const { data } = useQuery(FETCH_BOARD, {
    variables: {
      number: Number(router.query.number),
    },
  });
  console.log(data);

  const onClickMove = () => {
    router.push(`/day09/09-04-boards/${router.query.number}/edit`);
  };

  return (
    <div>
      <div>{router.query.number}번 게시글 이동이 완료되었습니다.</div>
      <div>작성자: {data?.fetchBoard?.writer}</div>
      <div>제목: {data?.fetchBoard?.title}</div>
      <div>내용: {data?.fetchBoard?.contents}</div>
      <button onClick={onClickMove}>수정하기</button>
    </div>
  );
}

import { useQuery, gql } from "@apollo/client";
import { useRouter } from "next/router";

const FETCH_BOARD = gql`
  query fetchBoard($number: Int) {
    fetchBoard(number: $number) {
      number
      writer
      title
      contents
    }
  }
`;

export default function GraphqlMutationPage() {
  const router = useRouter();
  const { data } = useQuery(FETCH_BOARD, {
    variables: {
      number: Number(router.query.number),
    },
  });

  return <BoardWrite isEdit={true} data={data} />;
}

return <BoardWrite isEdit={true} data={data} />;

이미 등록되어 있는 게시글을 수정하기 위해 사용한 코드

isEdit에 true값을 넣어준다.

이후부터 버튼에 '수정하기'를 노출시키기위해

import { useMutation } from "@apollo/client";
import { useState } from "react";
import BoardWriteUI from "./BoardWrite.presenter";
import { CREATE_BOARD, UPDATE_BOARD } from "./BoardWrite.queries";
import { useRouter } from "next/router";

export default function BoardWrite(props) {
  const router = useRouter();
  const [writer, setWriter] = useState("");
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");

  const [createBoard] = useMutation(CREATE_BOARD);

  const [updateBoard] = useMutation(UPDATE_BOARD);

  const onClickSubmit = async () => {
    const result = await createBoard({
      variables: {
        // variables는 $와 같은 역할을함
        writer: writer,
        title: title,
        contents: contents,
      },
    });
    console.log(result);
    router.push(`/day09/09-04-boards/${result.data.createBoard.number}`);
  };

  const onClickUpdate = async () => {
    const myVariables = {
      number: Number(router.query.number),
    };
    if (writer) {
      myVariables.writer = writer;
    }
    if (title) {
      myVariables.title = title;
    }
    if (contents) {
      myVariables.contents = contents;
    }

    const result = await updateBoard({
      variables: myVariables,
    });
    console.log(result);
    router.push(`/day09/09-04-boards/${result.data.updateBoard.number}`);
  };

  const onChangeWriter = (event) => {
    setWriter(event.target.value);
  };

  const onChangeTitle = (event) => {
    setTitle(event.target.value);
  };

  const onChangeContents = (event) => {
    setContents(event.target.value);
  };

  return (
    <BoardWriteUI
      onClickSubmit={onClickSubmit}
      onClickUpdate={onClickUpdate}
      onChangeWriter={onChangeWriter}
      onChangeTitle={onChangeTitle}
      onChangeContents={onChangeContents}
      isEdit={props.isEdit}
      data={props.data}
    />
  );
}

const onClickUpdate = async () => {

const myVariables = {

number: Number(router.query.number),

};

if (writer) {

myVariables.writer = writer;

}

if (title) {

myVariables.title = title;

}

if (contents) {

myVariables.contents = contents;

}

const result = await updateBoard({

variables: myVariables,

});

console.log(result);

router.push(`/day09/09-04-boards/${result.data.updateBoard.number}`);

};

게시글 수정 페이지에서 수정하지 않은 값은 전달하지 않기 위한 코드

writer, title, contents 를 바로 updateBoard에 전달한다면 수정하지 않은 값은 빈값으로 DB에 전달되게 된다.

export default function BoardWriteUI(props) {
  return (
    <div>
      작성자 :
      <input
        type="text"
        onChange={props.onChangeWriter}
        defaultValue={props.data?.fetchBoard.writer}
      ></input>
      <br />
      제목 :
      <input
        type="text"
        onChange={props.onChangeTitle}
        defaultValue={props.data?.fetchBoard.title}
      ></input>
      <br />
      내용 :
      <input
        type="text"
        onChange={props.onChangeContents}
        defaultValue={props.data?.fetchBoard.contents}
      ></input>
      <br />
      <button
        onClick={props.isEdit ? props.onClickUpdate : props.onClickSubmit}
      >
        {props.isEdit ? "수정" : "등록"}하기
      </button>
    </div>
  );
}

작성자 :

<input

type="text"

onChange={props.onChangeWriter}

defaultValue={props.data?.fetchBoard.writer}

></input>

defaultValue는 input안에 기본값을 넣기 위한 코드

만약 데이터가 존재한다면 작성자 input 안에는 기존 작성자에 대한 정보를 보여준다.

<button

onClick={props.isEdit ? props.onClickUpdate : props.onClickSubmit}

{props.isEdit ? "수정" : "등록"}하기

</button>

isEdit의 상태에 따라 게시글 등록/ 수정 여부 , 버튼이 '수정하기 / 등록하기' 을 정해준다.

import { gql } from "@apollo/client";

export const CREATE_BOARD = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }
  }
`;
export const UPDATE_BOARD = gql`
  mutation updateBoard(
    $number: Int
    $writer: String
    $title: String
    $contents: String
  ) {
    updateBoard(
      number: $number
      writer: $writer
      title: $title
      contents: $contents
    ) {
      _id
      number
      message
    }
  }
`;

41일차 프론트엔드 공부 -나만의 페이지 만들기 실습 04

프망생222 — Sun, 15 Dec 2024 16:56:46 +0900

- 프론트엔드 공부 41일차 -

등록된 게시글 목록을 DB로부터 가져오고 게시글 목록에서 게시글 상세 정보로 가기 위한 페이지를 만들어 볼 것이다.

게시글 목록

게시글 터치 시 상세 페이지 이동

export const getDate = (date) => {

const _date = new Date(date);

const yyyy = _date.getFullYear();

const mm = String(_date.getMonth() + 1).padStart(2, "0");

const dd = String(_date.getDate()).padStart(2, "0");

return `${yyyy}.${mm}.${dd}`;

};

DB에 저장된 날짜를 우리가 보는 날짜 형식으로 바꿔주는 코드

40일차 프론트엔드 공부 - map

프망생222 — Sun, 8 Dec 2024 17:29:16 +0900

- 프론트엔드 공부 40일차 -

Map

실무에서는 for문 보다는 map을 더 많이 사용한다,

map문이 유지보수에 더 좋기 때문

const classmates = [“짱구”, “철수”, “영희”]

classmates.map((el) => (el + “어린이”))

-> 배열 갯수만큼 해당 반복문이 계속된다.

- [“짱구어린이”, “철수어린이”, “영희어린이”]

const classmates = [

{ name : “짱구” },

{ name : “철수” },

{ name : “영희” }

]

classmates.map((el) => ({name : el.name + “어린이”}))

- [

{ name : “짱구어린이” },

{ name : “철수어린이” },

{ name : “영희어린이” }

]

화살표 함수의 소괄호는 상황에 따라 생략 가능하다

ex) classmates.map((el) => (el + “어린이”))

classmates.map((el) => el + “어린이”) -> 가능

classmates.map((el) => ({name : el.name + “어린이”}))

classmates.map((el) => {name : el.name + “어린이”}) -> 불가능

map 과 html의 연결

const classmates = [“짱구”, “철수”, “영희”]

const aaa = classmates.map((el) => <div>{el}</div>)

-> const aaa = [<div>짱구</div>, <div>철수</div>, <div>영</div>] 같은 것을 의미한다

export default function AAA() {

const aaa = [<div>짱구</div>, <div>철수</div>, <div>영희</div>]

return <div>{aaa}</div>

}

–

<div>

</div>

map 예시

//컴포넌트 위에 만든 이유 : 컴포넌트가 리렌더링돼도 다시 안만들어짐 - 효율적
const FRUITS = [
  { number: 1, title: "레드향" },
  { number: 2, title: "샤인메스켓" },
  { number: 3, title: "딸기" },
  { number: 4, title: "사과" },
  { number: 5, title: "한라봉" },
  { number: 6, title: "망고" },
  { number: 7, title: "천혜향" },
  { number: 8, title: "귤" },
  { number: 9, title: "애플망고" },
  { number: 10, title: "메론" },
];

export default function MapFruitsPage() {
  const aaa = [
    <div>1 레드향</div>,
    <div>2 사과</div>,
    <div>3 딸기</div>,
    <div>4 메론</div>,
  ];

  const bbb = FRUITS.map((el) => (
    <div>
      {el.number} {el.title}
    </div>
  ));

  return (
    <div>
      <div>{aaa}</div>
      ----------------------
      <div>{bbb}</div>
      ---------------------
      <div>
        {/* 실무에서 사용하는 방법 */}
        {FRUITS.map((el) => (
          <div>
            {el.number} {el.title}
          </div>
        ))}
      </div>
    </div>
  );
}

map을 이용하여 backend 데이터 가져오기

예제

import { useQuery, gql } from "@apollo/client";

const FETCH_BOARDS = gql`
  query {
    fetchBoards {
      number
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage() {
  const { data } = useQuery(FETCH_BOARDS);
  console.log(data?.fetchBoards);

  return (
    <div>
      {data?.fetchBoards.map((el) => (
        <div>
          <span>
            <input type="checkbox" />
          </span>
          <span style={{ margin: "10px" }}>{el.number}</span>
          <span style={{ margin: "10px" }}>{el.title}</span>
          <span style={{ margin: "10px" }}>{el.writer}</span>
        </div>
      ))}
    </div>
  );
}

key

map을 사용할 때는 key를 사용하자

key가 있다면 어떤 값이 수정되었는지 빠르게 감지할 수 있다.

key는 중복되지 않은 값이어야 한다.(유일한 값을 사용해야 한다,)

만약 key 값을 지정해주지 않는다면 index가 기본 값으로 사용된다.

-> id를 key로 사용하는 것을 권장

key 주의사항

index를 key를 사용할때는 주의해야 한다.

데이터를 삭제하다보면 index가 중복될 수 있다.(유일하지 않음)

예시

import { useQuery, gql, useMutation } from "@apollo/client";

const FETCH_BOARDS = gql`
  query {
    fetchBoards {
      number
      writer
      title
      contents
    }
  }
`;

const DELETE_BOARD = gql`
  mutation deleteBoard($number: Int) {
    deleteBoard(number: $number) {
      message
    }
  }
`;

export default function StaticRoutingMovedPage() {
  const { data } = useQuery(FETCH_BOARDS);

  const [deleteBoard] = useMutation(DELETE_BOARD);

  console.log(data?.fetchBoards);

  const onClickDelete = (event) => {
    deleteBoard({
      variables: {
        number: Number(event.target.id),
      },
      refetchQueries: [{ query: FETCH_BOARDS }],
    });
  };

  return (
    <div>
      {data?.fetchBoards.map((el) => (
        <div key={el.number}>
          <span>
            <input type="checkbox" />
          </span>
          <span style={{ margin: "10px" }}>{el.number}</span>
          <span style={{ margin: "10px" }}>{el.title}</span>
          <span style={{ margin: "10px" }}>{el.writer}</span>
          <span>
            <button id={el.number} onClick={onClickDelete}>
              삭제
            </button>
          </span>
        </div>
      ))}
    </div>
  );
}

삭제 버튼 클릭 시

{data?.fetchBoards.map((el) => (

<span>

</span>

<span style={{ margin: "10px" }}>{el.number}</span>

<span style={{ margin: "10px" }}>{el.title}</span>

<span style={{ margin: "10px" }}>{el.writer}</span>

<span>

삭제

</button>

</span>

</div>

))}

const onClickDelete = (event) => {

deleteBoard({

variables: {

number: Number(event.target.id),

refetchQueries: [{ query: FETCH_BOARDS }],

});

};

refetchQueries란?

데이터가 변경되었을 경우 최신 데이터로 다시 fetch해주기 위해 사용한다.

해당 예시에서는 삭제 버튼 터치 시 자동으로 목록을 새로고침해주고 있다.

만약 refetchQueries를 사용하지 않는다면 삭제 버튼을 터치하여도 목록이 삭제하기 전과 동일하게 나오게 된다.(DB 상에서는 해당 데이터는 삭제됨)

39일차 프론트엔드 공부 - 파일 나누기

프망생222 — Sun, 24 Nov 2024 16:24:28 +0900

- 프론트엔드 공부 39일차 -

폴더 구조 체계화

1. 컨테이너 / 프리젠테이셔널 패턴 -> 이전에 많이 사용한 방식

2. 훅스(함수) 패턴 -> 최신 방식

3. 아토믹 패턴

컨테이너 / 프리젠테이셔널 패턴

자바스크립트 부분과과 HTML 부분을 2개의 파일로 나누는 방식

컨테이너 : 자바스크립트

프리젠테이셔널 : HTML

리액트의 데이터 흐름?

단방향

부모가 지식에게만 데이터를 줄 수 있다.

파일을 서로 연결하는 방법

import를 사용하면 된다.

다른 파일로 보내주고 싶은 함수 앞에는 export를 사용해야 한다.

(props)

JS에서 작성한 함수를 HTML로 넘겨주기 위한 방법

import BoardWrite from "../../../src/components/units/board/write/BoardWrite.container";

export default function GraphqlMutationPage() {
  return <BoardWrite />;
}

import { useMutation } from "@apollo/client";
import { useState } from "react";
import BoardWriteUI from "./BoardWrite.presenter";
import { CREATE_PRODUCT } from "./BoardWrite.queries";

export default function BoardWrite() {
  const [writer, setWriter] = useState();
  const [title, setTitle] = useState();
  const [contents, setContents] = useState();

  const [createBoard] = useMutation(CREATE_PRODUCT);

  const onClickSubmit = async () => {
    const result = await createBoard({
      variables: {
        // variables는 $와 같은 역할을함
        writer: writer,
        title: title,
        contents: contents,
      },
    });
    console.log(result);
  };

  const onChangeWriter = (event) => {
    setWriter(event.target.value);
  };

  const onChangeTitle = (event) => {
    setTitle(event.target.value);
  };

  const onChangeContents = (event) => {
    setContents(event.target.value);
  };

  return (
    <BoardWriteUI
      aaa={onClickSubmit}
      bbb={onChangeWriter}
      ccc={onChangeTitle}
      ddd={onChangeContents}
    />
  );
}

import { gql } from "@apollo/client";

export const CREATE_PRODUCT = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }
  }
`;

import { RedInput, BlueButton } from "./BoardWrite.styles";

export default function BoardWriteUI(props) {
  return (
    <div>
      작성자 : <RedInput type="text" onChange={props.bbb}></RedInput>
      제목 : <input type="text" onChange={props.ccc}></input>
      내용 : <input type="text" onChange={props.ddd}></input>
      <BlueButton onClick={props.aaa}>Graphql-API 요청하기</BlueButton>
    </div>
  );
}

import styled from "@emotion/styled";

export const RedInput = styled.input`
  border-color: red;
`;

export const BlueButton = styled.button`
  background-color: blue;
`;

return (

<BoardWriteUI

aaa={onClickSubmit}

bbb={onChangeWriter}

ccc={onChangeTitle}

ddd={onChangeContents}

);

함수를 aaa={함수} 형식으로 만든 이유

다른 파일에서 함수를 사용하기 위해서는 prop를 이용해야한다. 위와 같은 코드를 사용하게 되면 해당 함수를 prop에 담게 된다.

return (

<div>

작성자 : <RedInput type="text" onChange={props.bbb}></RedInput>

제목 : <input type="text" onChange={props.ccc}></input>

내용 : <input type="text" onChange={props.ddd}></input>

<BlueButton onClick={props.aaa}>Graphql-API 요청하기</BlueButton>

</div>

);

다른 파일의 함수를 사용하는 방법.

함수가 작성된 파일에서 prop에 담긴 함수를 이용해야한다.

export default function BoardWriteUI(props) {

기존에는 BoardWriteUI() 이렇게 작성하였지만 props를 이용하기 위해서는 BoardWriteUI(props)라고 작성해야 한다.

export, export-defalut 차이

export

한 파일내에서 여러개의 export 사용 가능하다

(원하는 것만 내보낼 수 있다.)

ex)

export const Main = gql`

...

import { Main } from './Board'

한 파일내의 모든 export 가져오는 방법

import * as AAA(원하는 값 입력) from './Board'

export-defalut

한 파일에서 한 개의 export-defalut만 사용 가능하다

(원하는 것만 보내지 못한다.)

ex)

export defalut function Write(){

...

}

import Write from './Board'

한 파일에서는 export , export-defalut 둘 다 사용 가능하다.

import Write, { Main } from './Board'

38일차 프론트엔드 공부 -나만의 페이지 만들기 실습 04

프망생222 — Sat, 23 Nov 2024 17:30:10 +0900

- 프론트엔드 공부 38일차 -

글 작성 페이지에서 작성한 데이터를 DB로 보내고 글 작성 시 DB에서 데이터를 가져와 해당 게시판으로 이동하도록 할 것이다.

게시판 작성 페이지

게시판 상세 페이지

router.push(`/boards/${result.data.createBoard._id}`);

게시판 작성 시 상세 페이지로 바로 이동하기 위한 코드

router을 이용하여 페이지를 이동하도록 하였다.

createBoard_id는 현재 작성된 글의 DB 번호이다.

export const FETCH_BOARD = gql`

query fetchBoard($boardId: ID!) {

fetchBoard(boardId: $boardId) {

_id

writer

title

contents

createdAt

}

export default function page() {

const router = useRouter();

console.log(router);

const { data } = useQuery(FETCH_BOARD, {

variables: { boardId: router.query.boardid },

});

router.query.boardid : URL에서 일부분을 가져오는 코드

해당 영역을 DB의 번호를 나타낸다.

참고

variables: { boardId: router.query.boardid },

해당 코드에서 대소문자 구분 확실 필요

37일차 프론트엔드 공부 - Routing

프망생222 — Sun, 17 Nov 2024 17:00:13 +0900

- 프론트엔드 공부 37일차 -

Router

페이지 이동과 관련된 기능을 가지고 있는 객체

routing이란?

페이지 이동

const router = useRouter()

router.push(“이동할 페이지”)

ex)

이동하기 전 페이 JS

import {useRouter} from 'next/router'

export default function StaticRoutingPage(){
    const router = useRouter()

    const onClickMove =() => {
        router.push("/day05/05-01-static-routing-moved")
    }

    return(
        <button onClick={onClickMove}>페이지 이동</button>
    )
}

이동할 페이지 JS

export default function StaticRoutingMovedPage(){

    return(
        <div>페이지 이동이 완료되었습니다.</div>
    )    
}

페이지 이동 전

페이지 이동 버튼 터치 후

페이지 이동 버튼이 여러개 있는 페이지 ex)

import {useRouter} from 'next/router'

export default function StaticRoutingPage(){
    const router = useRouter()

    const onClickMove1 =() => {
        router.push("/day05/05-02-static-routing-board-moved/1")
    }

    const onClickMove2 =() => {
        router.push("/day05/05-02-static-routing-board-moved/2")
    }

    const onClickMove3 =() => {
        router.push("/day05/05-02-static-routing-board-moved/3")
    }

    return(
        <div>
            <button onClick={onClickMove1}>1번 게시글로 이동</button>
            <button onClick={onClickMove2}>2번 게시글로 이동</button>
            <button onClick={onClickMove3}>3번 게시글로 이동</button>
        </div>
    )
}

export default function StaticRoutingMovedPage(){

    return(
        <div>1번 게시글 이동이 완료되었습니다.</div>
    )    
}

1, 2, 3번 게시글 JS의 기본 형태는 비슷함

1번 게시글 이동

2번 게시글 이동

3번 게시글 이동

/day05/05-02-static-routing-board-moved 폴더에 이동하 게시글인 1, 2, 3 폴더를 새로 만들어줘야 한다.

DB에서 데이터 가져오기

const { data } = useQuert(FETCH_BOARD)

const FETCH_BOARD = gql`
  query {
    fetchBoard(number: 1) {
      number
      writer
      title
      contents
    }
  }
`

각각의 데이터를 사용하는 법

data.fetchBoard.writer

data.fetchBoard.title

data.fetchBoard.contents

JavaScript는 데이터를 요청하고 응답을 받아올 동안 데이터의 값이 undefined이기 때문에 에러가 발생한다.

이를 해결하깅 위해 조건부 렌더링을 사용한다.

조건부 렌더링

삼항 연산자

data ? data.fetchProfile : "가나다"

data.fetchProfile가 존재하지 않으면 "가나다"로 데이터를 반환해준다.

&& 연산자

data && data.fetchProfile

data가 존재하지 않을 경우 자동으로 undefined를 반환해준다.

옵셔널 체이닝 (Optional-Chaining)

data?.fetchProfile

&&연산자를 더 간결하게 사용하기위한 방법

data || data.fetchProfile

data 값이 거짓이면 data.fetchProfile 실

Nullish Coalescing

data ?? data.fetchProfile

data 값이 비어있으면 data.fetchProfile 실행

import { useQuery, gql } from "@apollo/client";

const FETCH_BOARD = gql`
  query {
    fetchBoard(number: 11721) {
      number
      writer
      title
      contents
    }
  }
`

export default function StaticRoutingMovedPage() {
  const { data } = useQuery(FETCH_BOARD);
  console.log(data);

  return (
    <div>
      <div>1번 게시글 이동이 완료되었습니다.</div>
      <div>작성자: {data && data.fetchBoard.writer}</div>
      <div>제목: {data?.fetchBoard.title}</div>
      <div>내용: {data ? data.fetchBoard.contents : "로딩중"}</div>
    </div>
  );
}

동적 라우팅

게시글이 1000개가 넘어가면 폴더를 1000개 이상 만들어야한는 번거러움이 존재하게 된다.

이를 효과적으로 하기위해 사용하는 방법으로는 동적라우팅이 있다.

폴더 예시

보여주고자 하는 폴더 이름을 [boardId]로 작성하여서 사용할 수 있다.

대괄호로 감싸준 폴더를 만들어주게 되면 이동하고자 하는 게시글 번호가 대괄호 안에 쓰여진 변수명에 담게되어 그 변수 안의 데이터를 사용할 수 있게 된다.

동적 라우팅 사용

import {useRouter} from 'next/router'

export default function StaticRoutingPage(){
    const router = useRouter()

    const onClickMove1 =() => {
        router.push("/day05/05-04-dynamic-routing-board-query-moved/11721")
    }

    const onClickMove2 =() => {
        router.push("/day05/05-04-dynamic-routing-board-query-moved/11722")
    }

    const onClickMove3 =() => {
        router.push("/day05/05-04-dynamic-routing-board-query-moved/11723")
    }

    return(
        <div>
            <button onClick={onClickMove1}>11721번 게시글로 이동</button>
            <button onClick={onClickMove2}>11722번 게시글로 이동</button>
            <button onClick={onClickMove3}>11723번 게시글로 이동</button>
        </div>
    )
}

import { useQuery, gql } from "@apollo/client";
import { useRouter } from "next/router";

const FETCH_BOARD = gql`
  query fetchBoard($number: Int){
    fetchBoard(number: $number) {
      number
      writer
      title
      contents
    }
  }
`

export default function DynamicRoutingMovedPage() {
  const router = useRouter()
  const { data } = useQuery(FETCH_BOARD, {
    variables: {
      number: Number(router.query.num)
    }
  });
  console.log(data);

  return (
    <div>
      <div>{router.query.num}번 게시글 이동이 완료되었습니다.</div>
      <div>작성자: {data?.fetchBoard?.writer}</div>
      <div>제목: {data?.fetchBoard?.title}</div>
      <div>내용: {data?.fetchBoard?.contents}</div>
    </div>
  );
}

11721 게시글 이동

11722 게시글 이동

동적 라우팅을 이용하여 URL에 숫자만 변경해도 해당 번호의 DB 데이터를 가져올 수 있도록 수정하였다.

<div>작성자: {data?.fetchBoard?.writer}</div>

<div>제목: {data?.fetchBoard?.title}</div>

<div>내용: {data?.fetchBoard?.contents}</div>

fetchBoard? 라고 작성한 이유?

fetchBoard에 데이터가 없을 경우도 있기 때문

try

try에 있는 내용을 시도하다가 실패하면 다음에 있는 모든 줄을 무시하고 catch에 있는 내용이 실행

try {

new()

b()

} catch(error){

alert(error.message)

}

new() 실행에 실패하면 b() 함수를 실해하지 않고 alert(error.message)를 실행하게 된다.

게시글 생성 후 생성한 페이지로 바로 이동하기

import { useMutation, gql } from "@apollo/client";
import { useRouter } from "next/router";

const MyGarphqlSetting = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }
  }
`;

export default function GraphqlMutationPage() {
  const router = useRouter()

  const [나의함수] = useMutation(MyGarphqlSetting);

  const onClickSubmit = async () => {

    try{

      const result = await 나의함수({
        variables: {
          writer: "짱구",
          title: "안녕하세요",
          contents: "반갑습니다.",
        },
      });
      console.log(result);
      // router.push("/day05/05-05-dynamic-routing-board-mutation-moved/" + result.data.createBoard.number)
      router.push(`/day05/05-05-dynamic-routing-board-mutation-moved/${result.data.createBoard.number}`)
    
    }catch(error){
      alert(error.message)
    }

    
  };

  return <button onClick={onClickSubmit}>Graphql-API 요청하기</button>
}

import { useQuery, gql } from "@apollo/client";
import { useRouter } from "next/router";

const FETCH_BOARD = gql`
  query fetchBoard($number: Int){
    fetchBoard(number: $number) {
      number
      writer
      title
      contents
    }
  }
`

export default function DynamicRoutingMovedPage() {
  const router = useRouter()
  const { data } = useQuery(FETCH_BOARD, {
    variables: {
      number: Number(router.query.num)
    }
  });
  console.log(data);

  return (
    <div>
      <div>{router.query.num}번 게시글 이동이 완료되었습니다.</div>
      <div>작성자: {data?.fetchBoard?.writer}</div>
      <div>제목: {data?.fetchBoard?.title}</div>
      <div>내용: {data?.fetchBoard?.contents}</div>
    </div>
  );
}

게시글 생성 전

게시글 생성 후