grace's dev_note

모달 알림창 띄우기 import { Modal } from "antd"; const onClickSuccess = () => { Modal.success({ content: "게시물 등록에 성공했습니다.", }); }; const onClickFail = () => { Modal.error({ content: "게시물 등록에 실패했습니다." }); }; 모달창 띄우기 const handleCancel=()=>{ setIsModalVisible(false) } 주소검색 일반적으로 우리가 알고있는 library 속성과 다르기때문에 잘 찾아서 해야한다. props 참고해서 사용하기! import { useState } from "react"; import { Modal, Button } from "antd";..

state 끌어올리기 부모 컴포넌트에서 자식 컴포넌트로 state를 넘겨준 후 자식 컴포넌트에서 바뀐 state를 다시 부모컴포넌트에서 바꿔주고 싶을 경우 setState를 자식에게 넘겨주어 자식 컴포넌트에서 setState를 해주면 부모 컴포넌트의 state를 변경해 줄 수 있다. 타입스크립트 참고! props는 타입추론이 안 되기 때문에 타입을 직접 모두 작성해주어야 한다. UI 프레임워크 기능을 혼자서 구현해보는 것도 중요하지만 다양한 브라우저에서 다양한 사이즈로 적용했을 때 오류가 없어야하므로 UI 프레임워크를 잘 활용하는 것 또한 중요하다. 아이콘 Ant-Design id값을 못읽기때문에 id 값을 넣으면 안 된다. export default function LibraryIconPage() { ..

early exit pattern // 함수 실행 시 미실행 조건에 해당하면 종료 function () { if(미실행 조건) { return } } API 타입스크립트 API를 받아올 때도 interface로 타입 지정이 필요하고 실제로 Rest API를 사용하면 하나하나 만들어줘야하지만 GraphQL을 사용하면 GRAPHQL-CODEGEN으로 API 응답 데이터를 불러올 수 있다. 설치 적용 코드 문법 규칙 코드 린터(eslint) 예) import 순서, == 금지, === 허용 error를 잡아주는 것이 아님!! 코드의 통일성을 높여주기 위하여 사용합니다^___^ formatter 기능도 함께 있기도 합니다! 코드 포맷터(prettier) 띄어쓰기 2칸 길이 넘으면 줄바꿈

updateBoard defaultValue 타입스크립트 자바스크립트의 타입을 강제시키는 언어 기존에 자바스크립트는 변수에 타입에 관계 없이 선언, 할당이 가능하였는데 타입스크립트에서는 변수 type이 다를 경우 재할당할 수 없다. // 변수 선언 let aaa:string = "안녕하세요" let bbb:number = 123 // 객체는 객체 자체에 타입이 없기 때문에 만들어주어야한다. Interface IProfile { name: string age: number } let profile:IProfile = { name: "철수, age: 13 } //또한 객체 안에 요소가 없다면 선언,할당할 수 없다. // 필요하다면 optional chaining으로 만들어주기 Interface IProfil..

컴포넌트 재사용성 자주 쓰는 function 들은 src의 common/libraries 에 넣어준다. 하나의 컴포넌트를 만들어서 재사용하게되면 기능이 다른 페이지에서는 사용할 수 없게 된다. 이럴 때 props로 넘겨주면 오류를 피할 수 있다. /boards/new /boards/[boardId]/edit

map / filter map 메소드 forEach와 비슷하게 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드. 단, 첫 번째 아규먼트로 전달하는 콜백 함수가 매번 리턴하는 값들을 모아서 새로운 배열을 만들어 리턴하는 특징이 있다. const numbers = [1, 2, 3]; const twiceNumbers = numbers.map((element, index, array) => { return element * 2; }); console.log(twiceNumbers);// (3) [2, 4, 6]_텍스트_ const FRUITS = [ { number: 1, title: "레드향" }, // 1 레드향 { number: 2, title: "샤인머스켓" }, // 2 샤인머스켓 { num..

조건부 렌더링 false값을 리턴하는 값 0 '' false null undefined Optional chaining data 값이 false일 경우 리턴하도록 사용 // default value로 사용 data || data.fetchProfile Nullish coalesing data의 값이 null 혹은 undefined 일 때 리턴하도록 할 때 사용 data ?? data.fetchProfile 폴더구조 체계화 Container - Presenter 패턴 React의 가장 기본적인 디자인 패턴으로 기존의 싱글파일 컴포넌트 형태로 사용 시 컴포넌트내부에 ui와 로직 api호출들이 점점 많아지게 되면서 가독성이 떨어지는 부분을 보완할 수 있는 좋은 방법이다. container pre..

라우팅 라우팅이랑 서버에서 클라이언트에 내가 불러오고자 하는 URL을 불러오는 것이다. Static Routing(정적 라우터) next/router 사용하기 import { useRouter } from 'next/router' export default function StaticRoutingPage() { const router = useRouter() function onClickMove() { router.push('/05-02-static-routed') } return ( 페이지 이동하기 ) } const router = useRouter() router.push('이동할 페이지') reloae(), replace(), pathname: 현재 나의 ..

비동기 실행 fetch 함수와 비동기 실행 console.log('start!'); fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { console.log(reuslt) }); console.log('End'); (1) (response) ⇒ response.text() (2) (result) ⇒ { console.log(result); } fetch 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되이 콜백들이 순서대로 실행되는데 이 사실을 바탕으로, 전체 코드의 실행 순서를 다시 정리하자면 console.log(&..

Status Code 각각의 상태 코드에는 대응되는 상태 메시지가 있습니다. 모든 상태 코드(Status Code)는 각각 그에 대응되는 상태 메시지(Status Message)를 갖고 있습니다. 예를 들어, 200번은 OK, 404번은 Not Found라는 상태 메시지를 갖고 있습니다. 각 상태 코드의 의미를 모두 외우기는 힘들기 때문에 이러한 상태 메시지는 상태 코드의 의미를 빠르게 파악하는데 도움을 줍니다. 상태 코드는 100번대~500번대까지 있어요. 각 번호대는 그것만의 의미를 가지고 있는데요. 100번대 서버가 클라이언트에게 정보성 응답(Informational response)을 줄 때 사용되는 상태 코드들입니다. 100 Continue : 클라이언트가 서버에게 계속 리퀘스트를 보내도 괜찮은..