전체 글 56

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

- 프론트엔드 공부 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 - ..

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

- 프론트엔드 공부 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 StaticRout..

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

- 프론트엔드 공부 43일차 - export interface IProfile { name: string; age: number; school: string; hobby?: string;}// 1. Partial 타입type aaa = Partial;// type aaa = {// name?: string | undefined;// age?: number | undefined;// school?: string | undefined;// hobby?: string | undefined;// } 를 의미한다.// 2. Required 타입type bbb = Required;// type bbb = {// name: string;// age: number;//..