프론트엔드 지망생

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

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

- 프론트엔드 공부 36일차 -   이번 실습에서는 실제 데이터를 DB에 저장할 수 있도록 수정하였다. const CREATE_BOARD = gql`  mutation createBoard($createBoardInput: CreateBoardInput! ){    createBoard(createBoardInput: $createBoardInput ){    _id    }  }`  const OnclickRegist= async() => {    if (!writer) {      setWriterError("이름을 입력해주세요.");    }    if (!pw) {      setPwError("비밀번호를 입력해주세요.");    }    if (!title) {      setTitleError..

- 프론트엔드 공부 35일차 -동기 vs 비동기 동기  서버 컴퓨터가 작업이 끝날 때까지 기다리는 통신 비동기 서버 컴퓨터가 작업이 끝날 때까지 기다리지 않는 통신, 서버에 요청(등록, 수정, 삭제 등) 저장이 될 때까지 기다리지 않고 다른 작업 진행동기 통신을 위해서는 async 와 awiat를 사용해야한다.ex)async function 함수이름() { const data = await axios.get(url)console.log(data) } import axios from "axios";export default function RestGetPage() { function onClickAsync() { const result = axios.get("https://koreanjson.com..

- 프론트엔드 공부 34일차 -  두 컴퓨터 간의 데이터 전송 파일 FTP간단한 메일 SMTP텍스트/하이퍼텍스트(HTML) HTTP HTTP두 컴퓨터간의 텍스트 데이터를 주고받는 HTTP 는 요청(Request) 응답(Response) 두 가지 통신을 할 수 있다.   응답 상태코드Back-end 컴퓨터는 응답할 때 응답 코드를 함께 보내준다.응답 코드는 100 ~ 599 숫자로 이루어져 있다.100 개열 : 정보200 개열 : 성공 의미300 개열 : 리다이렉션 요청 (요청 완료를 위해 추가 작업 필요)400 개열 : 클라이언트 에러의미500 개열 : 서버 에러 의미 대표적인 응답상태코드200 : 성공400 : Front-end 오류500 : Back-end 오류 APIHTTP 요청을 Back-end ..

- 프론트엔드 공부 33일차 -  필수 입력 요소(이름, 비밀번호, 제목, 내용)을 입력하지 않고 게시글 등록 버튼을 터치하면 하단에 오류 메시지가 출력되도록 작성하였다.만약 필수 입력 요소를 작성하면 오류메시지가 실시간으로 삭제되도록 하였다.또한 모든 필수 요소 입력 시 게시글 작성 토스트 메시지가 출력되도록 하였다. const [wirter, setWriter] = useState("");  const [pw, setPw] = useState("");  const [title, setTitle] = useState("");  const [content, setContent] = useState("");  const [wirterError, setWriterError] = useState("");  c..