전체 글

[Typescript] Codegen 설치 및 사용 방법 / GraphQL-codegen

GraphQL-Codegen이란? 타입스크립트에서는 변수, 상수, 함수 등에 타입을 지정해줘야한다. 하지만 내가 만들지 않은 데이터에는 어떻게 타입을 적용할 수 있을까? 그 가장 큰 예시가 Backend에서 받아오는 API이다. GraphQl-Codegen은 지정해둔 스키마의 데이터를 긁어와서 타입 문서를 자동으로 생성해준다. GraphQL-Codegen 설치 가장 좋은 방법은 공식 문서를 참고하는 것이다. 하지만 매번 찾아보기 귀찮으니 방법을 간략하게 메모해둔다. 공식 문서 : https://www.graphql-code-generator.com/ 1. 필요한 위치에서 하단의 명령어를 입력한다. 둘 중 하나만 하면 된다. yarn add -D @graphql-codegen/cli npm install ..

[React/Typescript] Eslint / prettier 설치 및 기본 세팅

Eslint / prettier 란? 각각 코드 린터, 코드 포맷터의 한 종류로 프로젝트 코드의 규칙을 점검해준다. (코드 린터, 코드 포맷터 사이에도 디테일한 차이가 있지만 이 포스팅은 그걸 기록하기 위한 글이 아니니까 생략한다. 대신 ESlint와 prettier의 공식 페이지를 링크해둠) https://eslint.org/ ESLint - Pluggable JavaScript linter Customize Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need i..

[GraphQL] Apollo-Client / useQuery data 이름 변경하는 방법

useQuery의 기본 형태 Apollo-client의 useQuery 기본 형태는 다음과 같다. // 예시는 게시판 댓글 목록을 읽어오는 API const { data } = useQuery(FETCH_BOARD_COMMENTS, { variables: { boardId: String(router.query.new) } }) // FETCH_BOARD_COMMENTS는 지정해준 함수명 // boardId: String(router.query.new)는 useQuery시 필요한 key와 value useMutation과는 다르게 useQuery의 경우 { data } 부분이 고정되어있다. 하지만 중복 등의 이유로 이 data의 이름을 변경해야 하는 상황이 발생할 수 있다. 그런 경우에 어떻게 변경할 수 ..

[GraphQL] Apollo-Client - refetchQueries

refetchQueries란? Create / Delete 메소드를 실행할 경우, API상에서는 해당 작업이 완료되어도 화면에 다시 불러오는 작업(refetch)을 하지 않으면 변경사항이 반영되지 않는다. 실제로는 이미 지워진 데이터인데 화면상에 계속 보일 수 있는 것. 이럴 때 사용하는 것이 refetchQueries 이다. 용례 // 예시 코드 - 댓글 삭제하기 API const [deleteBoardComment] = useMutation(DELETE_BOARD_COMMENT) // DELETE_BOARD_COMMENT는 다른 파일에서 import 해온다. const onClickCommentDelete = async (event) => { console.log(event.currentTarget...

[Typescript] Javascript vs Typescript

TypeScript란? 타입이 정해져있지 않은 자바스크립트를 보다 안전하게 사용하기 위해 마이크로소프트에서 만든 언어. 자바스크립트의 슈퍼셋(상위집합)으로, 타입이 정해져있는 자바스크립트라고 생각하면 빠르게 이해할 수 있다.. 웹브라우저는 HTML, CSS, Javascript밖에 읽을 수 없기 때문에 실제 실행시에는 자바스크립트로 컴파일되어 실행된다. 인터프리터 언어인 자바스크립트가 타입스크립트의 컴파일러 역할을 하는 셈. TypeScript를 사용하는 이유 자바스크립트는 타입이 엄격하지 않다. 그러한 특징 때문에 개발의 자유도가 높은 반면, 예상치 못한 오류가 발생할 확률도 높은 편. 오류의 예시 의도 0+1+1+1+1 = 4 결과 "0"+1+1+1+1 = "01111" 가장 위험한 것은 이러한 것이..

TIL - 2022.01.21 금요일

오늘 배운 것 수정하기 페이지 input에 초기값을 넣고 싶었는데 실패했던 문제를 해결 완료했다. React에는 수정 가능한 초기값을 할당하는 dafultValue라는 속성이 따로 있다. (!!!!!!!) value와 defaultValue도 별개의 속성으로 존재하고, checked와 defaultChecked도 별개의 속성으로 존재한다. Input 사용할 일 있을 때마다 이러한 추가 속성들을 찾아보자. 수정하기 페이지에 이미 작성된 내용을 기본값으로 불러오고, onChange가 이루어진 Input에 한해서만 mutation하는 기능을 구현했다. 이로써 기본 형태 게시판의 목록페이지, 상세페이지, 수정페이지는 구현이 끝났다. 상호 라우팅도 완료했다. 서로 연결되어있는 게시판을 보니 뿌듯하고 기분 좋다. ..

[React] 리액트의 핵심 2, Props

Props란? React의 컴포넌트간에 변수, 함수 등의 정보를 물려줄 수 있는 방법이다. import BoardWriteUI from './BoardWrite.presenter' export default function BoardWrite(){ const [writer, setWriter] = useState() const handleChangeWriter = (event) -> { const writer = event.target.value setWriter(writer) } return( ) } BoardWriteUI 라는 컴포넌트를 import 하면서, 자식 컴포넌트에 전달할 props value를 지정해서 넘겨줄 수 있다. 자식 컴포넌트에서는 아래와 같은 방식으로 props에 저장된 함수를 넘..

[React] 리액트의 핵심, State (with useState)

State란? 리액트 컴포넌트의 변수로, 화면에 자동으로 반영되는 변수이다. 기본 형태는 아래와 같다. const [state, setState] = useState() state : 변수 setState : 변수를 바꿔주는 함수. setState(a) 하면 statd의 값이 a가 된다. useState() : 괄호 안에는 변수의 초기값이 들어간다. React hook에서 제공하는 기능으로, state를 사용하기 위해서는 useState를 import 해와야 한다. import { useState } from 'react' state의 동작원리 엄밀하게 따지자면, state가 '실시간'으로 화면에 반영되는 것은 아니다. 그 이유는 state의 동작원리를 살펴보면 알 수 있다. 브라우저는 state가 변경..

[React] 컴포넌트 디자인 패턴 - container / presenter 패턴

리액트 디자인 패턴 (폴더구조 체계화) 컴포넌트를 쪼개는 방식에 정해진 표준이 있는 것은 아니다. container/presenter 패턴, atomic 패턴 등 여러가지 방법이 있으며 회사나 팀마다 다른 방식을 사용한다. 오늘은 대중적인 디자인 패턴 중 하나인 container / presenter 패턴에 대해 알아보자. Container / Presenter Container : 순수 스크립트 영역으로 페이지의 동작을 담당한다. Presenter : JSX로 작성된 UI 등 시각적으로 보이는 영역을 담당한다. 한 페이지 컴포넌트를 기능별로 쪼갠 뒤 import / export 로 해당 function을 불러와서 연결해주면 된다. 이 때 import 하는 쪽이 부모, export 하는 쪽이 자식 컴포넌..

[Javascript] new Date() - Date 객체로 날짜 생성하기

new Date() 시간의 특정 지점을 나타내는 Date 객체를 생성한다. 이러한 것을 생성자라고 부른다. (덧. new Date() 말고 Date()는 해당 값을 문자열로 반환한다.) const today = new Date() 매개변수가 없으면 (= 괄호 안이 비어있으면) 생성 순간의 날짜와 시간을 나타내는 Date 객체를 생성한다. Date 객체가가 인식할 수 있는 형태의 문자열을 매개변수로 넣으면, 해당 날짜와 시간의 Date 객체를 생성한다. 자세한 사항은 MDN 참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/Date Date() 생성자 - JavaScript | MDN Date 생성자는 ..