프론트엔드 지망생

- 프론트엔드 공부 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일차 -이벤트 버블링특정 화면 요소에서 이벤트가 발생하였을때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성 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일차 - 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;//..

- 프론트엔드 공부 42일차 - 타입 스크립트 Typescript- 자바 스크립트의 타입을 강제시키는 언어 ex)파일명 : aaa.tslet aaa: string = “안녕하세요”aaa = 123오류 발생 let aaa: string = “안녕하세요”let bbb: number = 1234let 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..

- 프론트엔드 공부 41일차 -  export default function GraphqlMutationPage() { return ;}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: $numb..

- 프론트엔드 공부 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 실무에서는 for문 보다는 map을 더 많이 사용한다,map문이 유지보수에 더 좋기 때문 const classmates = [“짱구”, “철수”, “영희”]classmates.map((el) => (el + “어린이”))-> 배열 갯수만큼 해당 반복문이 계속된다.- [“짱구어린이”, “철수어린이”, “영희어린이”] const classmates = [{ name : “짱구” },{ name : “철수” }, { name : “영희” }]classmates.map((el) => ({name : el.name + “어린이”})) -  [{ name : “짱구어린이” },{ name : “철수어린이” }, { name : “영희어린이” }] 화살표 함수의 소괄호는 상황에 ..

- 프론트엔드 공부 39일차 -폴더 구조 체계화 1. 컨테이너 / 프리젠테이셔널 패턴  -> 이전에 많이 사용한 방식2. 훅스(함수) 패턴    -> 최신 방식3. 아토믹 패턴컨테이너 / 프리젠테이셔널 패턴  자바스크립트 부분과과 HTML 부분을 2개의 파일로 나누는 방식 컨테이너 : 자바스크립트 프리젠테이셔널 : HTML 리액트의 데이터 흐름? 단방향부모가 지식에게만 데이터를 줄 수 있다. 파일을 서로 연결하는 방법import를 사용하면 된다. 다른 파일로 보내주고 싶은 함수 앞에는 export를 사용해야 한다. (props)JS에서 작성한 함수를 HTML로 넘겨주기 위한 방법 import BoardWrite from "../../../src/components/units/board/write/Boar..

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

- 프론트엔드 공부 37일차 - Router페이지 이동과 관련된 기능을 가지고 있는 객체 routing이란?페이지 이동 const router = useRouter()router.push(“이동할 페이지”) ex) 이동하기 전 페이 JSimport {useRouter} from 'next/router'export default function StaticRoutingPage(){ const router = useRouter() const onClickMove =() => { router.push("/day05/05-01-static-routing-moved") } return( 페이지 이동 )}이동할 페이지 JSexport default function..