전체 글 56

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

- 프론트엔드 공부 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일차 프론트엔드 공부 - 파일 나누기

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

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

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