Programming

apollo-tooling이란? GraphQL서버에서 만든 쿼리와 뮤테이션을, Typescript에서 활용하려면 사용할 여러가지 변수에 타입을 다시 지정해주어야 한다. apollo-tooling을 사용하면, 코드, tsx, 리액트 컴포넌트로 가서 쿼리와 뮤테이션을 찾고, 자동으로 인터페이스(타입)를 만들 수 있다. apollo-tooling의 필요성 API(스키마)에 있는 모든 것을 위해 타입스크립트 타입을 만든다. (변수, 리턴타입 등) Apollo를 콘솔에서 부를 수 있게 할 수 있다. GraphQL에 작성되어 있는 타입을 그대로 옮겨오면, typescript로 이루어진 프론트에서 타입을 재작성 해야하는 번거로움을 줄일 수 있다! apollo-tooling 설치하기 npm i -g apollo ap..

react-hook-form이란? React에서 폼, 양식을 만들때 사용하는 라이브러리 복잡한 폼을 만들때, 간결하고 쉬운 코드작성에 도움이된다! Home React hook for form validation without the hassle react-hook-form.com React Hooks 이란? [React] React Hooks란? / 사용법 React Hooks란? React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리 React Hook의 필요성 함수 컴포넌트도 클래스 컴포넌트 defineall.tistory.com 여러가지 React Form 라이브러리 1. formik 태그에서 모든 조건과..

- 원문 - My Favorite One Liners | Muhammad Commandline one liners that makes your workflow more productive muhammadraza.me 명령창(shell)의 출력을 이미지로 변환 ( 이미지로 출력결과 공유하고 싶을때 ) ps aux | convert label:@- process.png 컴퓨터 위치정보, 외부 IP 주소 출력하기 curl ipinfo.io git 프로젝트에 기여한 사람 출력하기 git log --format='%aN' | sort -u 자주 실행하는 명령 확인 history | awk '{print $2}' | sort | uniq -c | sort -rn | head 현재 위치에 존재하는 모든 폴더 출력 l..

styled-reset 이란? styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지 normalize.css와 동일한 역할 styled-reset 설치하기 npm i styled-reset styled-reset 사용하기 //App.js // 글로벌 스타일 만들기 위한 createGlobalStyle 불러오기 import { createGlobalStyle } from "styled-components"; // 스타일 초기화를 위한 reset 불러오기 import reset from "styled-reset"; // 글로벌 스타일 만들기, reset 사용해서 스타일 초기화하기 const GlobalStyles = createGlob..

styled-normalize란? styled-components에서, reset.css, normalized.css의 역할을 해주는 Node.js 패키지 styled-components란? [React] styled-components란? styled-components란? React.js 안에서 스타일(CSS)을 바꿀 수 있게 해주는 Node.js 패키지 React란? [Node.js] React.js 란? / React 사용법 ( create-react-app ) React란? 웹/앱의 사용자 조작환경(UI)를 만들.. defineall.tistory.com normalized.css란? [CSS] reset.css, Nomarlized.css란? / 사용법 reset.css란? 웹브라우저마다 기본..

Local State란? LocalStorage에, state값을 저장해서 사용하는 것! Local State의 필요성 처음 사이트에 접속했을때, LocalStorage에 저장된 값을 이용해 state값을 지정해 줄 수 있다 Reactive Variables 란? 아폴로를 이용해, 변수를 전역으로 관리 하도록 해준다. ( 어디서든 변수를 꺼내올 수 있도록 함 ) Apollo Client로, reactive variables 만들기 // Apollo.js import { makeVar } from "@apollo/client" export const isLoggedInVar = makeVar(false); 컴포넌트에서 reactive variables 사용하기 // App.js import Home fro..

cookie(쿠키)란? 브라우저에 있는 조그만 저장소 쿠키의 특징 만료 기한이 있는 키값을 저장한다. 4kb의 용량제한이 있다. 서버 요청을 보낼때마다 같이 보내진다. 쿠키의 역할 인터넷 환경에서는 서버가 사용자에 대한 정보를 요청할때가 많은데 현재 브라우저에 접속하고 있는 사용자 정보를 저장해서, 매번 재입력해줘야하는 번거로움을 없앤다.

Local Storage란? (로컬스토리지) HTML5에서 브라우저에 추가된 저장소로, 브라우저가 종료되어도 그대로 남아있다. Session Storage란? (세션스토리지) HTML5에서 브라우저에 추가된 저장소로, 브라우저가 종료되면 백지상태로 되돌아간다. Cookie란? 브라우저가 가지고 있는 작은 저장소로, 서버에 요청을 보낼때 함께 보낸다. Local Storage 의 필요성 자주 불러와야 하는 변수를 저장해 놓으므로 매번 선언할 필요가 없어, 메모리 공간과 중복 코드를 줄여준다. Javascript로 Local Storage사용하기 // index.js // setItem으로 로컬스토리지에 정보 저장하기 localStorage.setItem("name","value") // getItem으로 ..

👉 React Hooks란? React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리 React Hook 개발 과정 1. 클래스 컴포넌트 사용 -- 2019년 2월 데이터 캐시 개발 -- 2. 함수 컴포넌트와, 리액트 훅 사용 ( 리액트 훅은, 함수 컴포넌트에서만 사용가능하다 ) 함수 컴포넌트가 어떤 값을 유지할 수 있도록, '캐시'를 만들었다. 이 캐시를 이용하고자 만든 여러개의 API를 '리액트 훅' 함수라고 부른다. React Hook의 필요성 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다. 함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로 ( why? ) 서로의 장점을 전부다 가지..