✏️ 정의 자바스크립트의 타입을 강제시키는 언어 변수의 자료형을 지정해주기 때문에 재할당이 불가능하다. 📌 컴파일 or 트랜스파일 컴파일: 하나의 언어가 다른 언어로 변경되는 작업 트랜스파일: 하나의 언어가 같은 언어의 다른 버전으로 변경되는 작업 타입스크립트는 실행시에 자바스크립트로 변경되어 실행된다. ❓ 타입스크립트 사용 이유 자바스크립트는 타입이 엄격하지 않아, 변수나 상수를 만들면 처음에 문자를 넣었다가 나중에 숫자를 넣는 등 자유자재 변환이 가능하다. 이로인해 자바스크립트는 큰 서비스를 운영할 때, 버그가 발생할 수 있는 취약점이 있다. 따라서 타입스크립트를 사용하여 안정성을 높여주는 것이다. 🔎 타입스크립트 설치 및 세팅 타입스크립트 홈페이지 접속하여 installation cli 명령어를 c..
✏️ 정의 기존에 받아왔던 데이터가 변경되었을 경우, 최신 데이터로 다시 fetch 해주기위해서 사용된다. Apollo에서 제공하는 기본 기능이다. useMutation 함수 안에 refetchQueries라는 키가 있다. 모든 Mutation 이후에 refetchQuries를 사용하는 것은 아니다. Mutation 이후에 변경된 데이터를 받아올 수 없을 경우에 사용한다. 🔎 사용법 refetchQuries는 배열로 시작한다. 그 안에 어떤 query를 하고, 그 query의 variables가 무엇인지 다시 설정해준다. 그러면 Mutation이 성공적으로 끝났을 경우, refetchQueries를 실행시켜준다. // 삭제 mutation -> refetchQueries를 이용해 최신 데이터 받아오기 c..
map과 filter 모두 배열의 내장함수이다. map 배열의 원소를 일괄적으로 변형시킬 때 사용하기 좋다. const classmate = ["철수","영희","훈이"] classmate.map((item)=>(item+"어린이")) const classmate = [ {name: "철수"}, {name: "영희"}, {name: "훈이"} ] classmate.map((item)=>({name : item.name + "어린이", school : "떡잎유치원"})) 실무에서는 컴포넌트의 return 값 안에서 많이 사용한다. map을 return 값 안에서 사용하기 위해서 { } 으로 감싸서 사용한다. // RenderMap 컴포넌트 export default const RenderMap = ()=>..
router.query는 라우터가 연결된 모든 컴포넌트에서 사용이 가능하다. 라우터가 있는 컴포넌트를 재사용할 때는 다이나믹 라우팅 폴더[ ]가 있는지 잘 확인하고 재사용해야 한다. ∴ router.query를 사용할 때는 콘솔에 router.query를 찍어보고, 안에 뭐가 있는지 확인한 후에 필요한 걸 꺼내서 사용하는 것이 좋다.
리액트의 데이터 흐름은 단방향이다. 부모에서 자식으로만 전달이 가능하다. props는 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수 또는 함수이다. props drilling props가 자식에게 넘겨주는 단계가 두단계 이상이 될 경우를 props drilling이 일어났다고 한다. 과도하게 이루어지면 해당 props가 어디서 내려지고 있는지 찾는 것이 난해해진다. props drilling을 방지하기 위해서 global state를 이용하는 것이 좋다. emotion에 props 던지기 emotion으로 만들어진 태그에도 props를 전달할 수 있다. 즉, props를 활용하여 CSS를 변경할 수 있다. export const Test = styled.div` color: ${(props) => (p..
✍️ 정의 실무에서 사용하는 폴더 구조는 여러가지 방법이 존재하고, 이 방법들을 패턴이라고 부른다. React에서 사용하는 유명한 패턴으로 container/presentational 패턴과 atomic 패턴이 있다. container/presentational 패턴 소스코드를 Javascript(기능)부분과 JSX(UI) 부분으로 나누는 방법을 의미한다. container: Javascript(기능) presentational: JSX(UI) 자식 컴포넌트인 presenter를 부모 컴포넌트인 container에 불러와 하나로 합쳐서 실행한다. 두 파일은 나뉘어져 있지만, 실행시에는 pages에서 하나로 합쳐져서 실행된다. 왜냐하면, 우리가 브라우저에서 볼 수 있는 컴포넌트는 pages에 있는 inde..
Component가 어디로 import되어서 사용되는지 유의해서 사용해야 한다. 주소창에 입력해서 실행했을 때, 전체 컴포넌트가 합쳐져서 실행된다고 이해해야 한다. boards/[boardId] router.query.boardId 단방향 흐름 고려
📋 게시판 등록페이지: /boards/new 상세페이지: /boards/1 다이나믹 라우팅 /boards/:id -> :으로 표기 /boards/{id} -> { }으로 표기 목록페이지: /boards 수정페이지: /boards/3/edit 다이나믹 라우팅 /boards/:id/edit /boards/{id}/edit 🏪 쇼핑몰 상품 등록페이지: /products 상품 상세페이지: /products/상품ID 상품 목록페이지: /products 상품 수정페이지: /products/상품ID/edit
✏️ Router 객체 Router 객체란 페이지 이동과 관련된 기능을 가지고있는 객체이다. 자주 사용하는 Router 객체 기능 공식 문서: https://nextjs.org/docs/pages/api-reference/functions/use-router Functions: useRouter | Next.js Using Pages Router Features available in /pages nextjs.org import Router from 'next/router' 현재 위치 주소: Router.pathname 현재 위치 주소: Router.asPath 뒤로가기 버튼: Router.back() 현재 페이지에서 다른 페이지로 이동: Router.push('/') 새로고침: Router.reload..
