✏️ apollo-client 셋팅하기 apollo-client를 설치한 후, 사용하기 위해서 setting이 필요하다. 설치한 도구들을 setting하는 위치는 일반적으로 _app.js 이다. index.js(페이지들)이 app.js로 합쳐져서 app.js가 실행되는 것이다. Component 자리에 index.js가 들어오게 되고, index.js가 합쳐진 app.js가 실행된다. ApolloClient : graphql 세팅, API가 있는 위치를 모든 페이지에 알려주기 위해 세팅한다. InMemoryCache : 나중에 꺼내서 쓰기위해 컴퓨터의 메모리에 백엔드에서 받아온 데이터를 임시로 저장한다. ApolloProvider : 컴포넌트에서 client graphql 세팅을 사용할 수 있게 전달해준..
✏️ Eelments 화면에 관련한 HTML, CSS를 고쳐보고 싶을 때 HTML과 CSS는 소스 코드 가기전에 Elements 창에서 수정한다. (debug) ✏️ Console Javascript와 관련된 내용을 보고싶을 때 ✏️ Network api 요청에 관련한 에러를 보고싶을 때
❓ 동기 통신, 비동기 통신 동기 통신 : 서버 컴퓨터가 작업이 끝날 때까지 기다리는 통신 동기 실행 방식은 등록 요청을 하게 되면 등록 과정이 모두 완료될 때까지 기다려준 후 게시글 불러오기 과정이 실행되기 때문에 문제없이 작업이 가능하다. 비동기 통신 : 서버 컴퓨터가 작업이 끝날 때까지 기다리지 않는 통신 서버에 요청(등록, 수정, 삭제 등)이 저장될 때까지 기다리지 않고 다른 작업을 진행한다. 비동기 통신은 요청들 사이에 서로 기다려 줄 필요가 없는 경우, 여러 가지 요청을 동시에 처리해 줄 때 사용된다. 훨씬 더 효율적이므로, 기본적으로 비동기로 작동하는 것이 좋다. 🔎 REST-API 에서 동기/비동기 실행 순수 자바스크립트에서는 동기적으로 작동한다. axios(rest-api) 등 외부 라이..
플레이그라운드 왼쪽 화면이 API 연습 화면이고, 오른쪽 화면이 API-docs이다. !(느낌표)가 붙은 경우는 필수 입력값이다. 1 단계: 이름으로 조회 (profile) name은 동명이인이 있을 수 있기 때문에 백엔드에서 잘못 만들어진 API이다. mutation - create query (목록 조회) query (상세 조회) 2단계: 게시글 생성되는 게시글 번호(number)가 고유 번호이므로, 상세 조회 시에 number를 입력하여 원하는 값을 반환받게 된다. 하지만, 이 API는 수정하는데 있어서 문제가 있다. mutation - create query - 상세 조회 mutation - update 일반적으로 수정의 경우는 '어떤 게시글을 어떻게 수정해줘'라는 2가지 조건으로 나눠서 하게된다..
❓ API란? API란 HTTP 요청을 Back-end 컴퓨터에 보냈을때 실행되는 백엔드 기능이다. 프론트엔드에서 백엔드로 요청을 보낼때, 여러개의 HTTP 요청이 보내지고, 각각의 요청마다 API가 필요하다. 프론트엔드에서 API에 요청할 때 보내는 데이터가 API 함수로 들어갈 인자이다. API에서 응답으로 받게되는 데이터가 API함수의 반환값이다. 🆚 API 종류 ( rest-API vs graphql-API ) API의 종류는 크게 rest-API, graphql-API 2가지 있다. graphql은 페이스북에서 발생하는 수많은 데이터를 처리하기 위해 페이스북 개발팀에서 만들었으며, facebook, airbnb, github 등 유명한 사이트에서 사용중인 통신 방법이다. 그럼에도 불구하고 res..
📌 git branch 사용하기 git branch란 독립적으로 어떤 작업을 진행하기 위한 개념이다. 필요에 의해 만들어지는 각각의 브랜치는 다른 브랜치의 영향을 받지 않기 때문에, 여러 작업을 동시에 진행할 수 있다. 이렇게 만들어진 브랜치는 다른 브랜치와 병합(Merge)함으로써, 작업한 내용을 다시 새로운 하나의 브랜치로 모을 수 있다. 📌 branch 변경 및 사용하기 % git checkout -b myfolder % git branch main * myfolder % git status On branch myfolder Changes not staged for commit: (use "git add ..." to update what will be committed) (use "git rest..
❓ Git stash 란? git pull 명령어를 사용하여, 원격 리포지토리의 최신본을 로컬 리포지토리와 동기화 해야할 때, 로컬에서 아직 마무리되지 않은 작업을 그대로 commit - push 할 수 없는 상황이 생긴다. 이때 '임시저장' 용도로 stash가 필요하게 된다. stash는 계속 진행할수록 stack의 원리로 더 아래 순번으로 가게되며, 더 큰 index 숫자를 갖게 된다. stash는 apply했다고 해서 자동으로 지워지지 않는다. 그래서 stash를 가지고 온 후에도 계속해서 stash list에 남아있는 것을 확인할 수 있다. 따라서 stash apply해서 가지고 온 작업들을 마무리하여 commit했다면, stash drop 혹은 stash clear로 지워주는 것이 좋다. 🔎 G..
이전 커서로 돌아가기 : ctrl + - 다시 그 이전 커서로 돌아가기(원래 페이지로) : ctrl + shift + - 소스 미리보기 : command 누르고, 클릭 탭 닫기 : Command + B 여러 줄 선택: option + command + 방향키 위,아래 원하는 줄 선택: option + 원하는 줄 클릭 변수 한번에 바꾸기: shift + command + L 한번에 삭제: command + shift + K
✍️ 정의 React의 인기 CSS 방식이다. CSS를 자바스크립트 파일에 넣어놓고 쓴다는 의미이다. ⚒️ 2가지 도구 styled-components yarn add styled-components npm install styled-components emotion 🆚 기존 CSS 방식 vs CSS-IN-JS 방식 기존 CSS 방식 .title { width: 996px; height: 52px; } Hello World CSS-IN-JS 방식 import styled from '@emotion/styled' const Title = styled.div ` width: 996px; height: 52px; ` import {Title} from '../../styles/emotion' Hello Wor..
❓ React-Hooks란? React에서 만든 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 하는 도구 쉽게 설명하면, Hooks가 있기 때문에 간단한 함수형 컴포넌트로 클래스형 컴포넌트를 대신할 수 있다는 것이다. 대표적인 Hooks에는 useState, useEffect가 있다. 클래스형 // 클래스형 import { Component } from "react"; class New extends Component { constructor(props){ super(props) // 다른 컴포넌트한테 받은 데이터 this.state = {} // 컴포넌트 안에 보관해둘 데이터 } componentDidMount(){ // 컴포넌트가 최초 그려진 후 실행 } componentDi..
