REST API와 Redux를 대체하는 GraphQL과 Apllographql을 기반으로 한 상태관리 플랫폼. 클라이언트에서 graphql을 사용해 데이터를 가져오는 UI를 만들 때 사용하기 좋다.@apollo/react-hooks로 더 간편하게 사용할 수 있다. =>

🗣 먼저, Apollo Client를 사용하는 이유 graphQL를 사용중이다. ⇒ graphQL과 연동을 쉽게 도와주는 라이브러리이기 때문 기본적으로 브라우저캐시는 GET 요청만 캐싱하는데, graphQL은 모든 요청을 POST하므로, 브라우저 캐시를 사용할 수

😺 로컬 상태 관리 > ### cacheState.js apollo-client에서 초기값을 정해주는 파일로, 로컬 상태를 관리할때 사용한다. 관리되는 상태는 정하기 나름이지만, 유저의 입력정보를 주로 관리했다. cacheState.js파일은 각 views와 관련이 있는 데이터의 초기 상태를 지정하는 파일이다. cacheState를 지정할때, 반드시 ...

로컬 상태 관리 상태로 만들어줘야 할 부분 input 변하는 부분 전부! (쇼핑몰을 예로들면 갯수나 가격, 옵션) 유저의 입력정보 상태 초기화 cacheState.js 파일을 만들어 상태로 만들어줄 초기값을 설정한다. 반드시 __typename이 필요하다. apollo cache의 모든 상태는 graphql의 type 시스템을 따라가기때문에, 각 객체 ...

✔️ webpack 🐾 WHY HTML에서 로 자바스크립트 파일을 실행할 수 있다. 하지만 많은 자바스크립트 파일을 실행할 경우 웹앱에 병목현상이 생기게 된다. 이러한 현상을 해결하기 위해 하나의 큰 자바스크립트 파일이 필요하다. 하지만 한 파일에 모든 자바스크립트

✨ 왜 nextjs + React + apollo-client 조합으로 SSR 구현을 하게되었다. 물론 98% 짜여진 코드에 2% 치명적인 코드를 수정해야하는 작업이었지만, 클라이언트에도, 서버에도 매우 치명적인 오류였기때문에 반드시 고쳐야만했다. 🔧🔨react-apollo는 이 프로젝트를 통해 처음 접하는 라이브러리였고, 아직 레퍼런스도 부족해서 영...

😗 왜 프로젝트를 진행하며, 사용자의 잘못된 입력을 방지하기 위해 예외처리를 해야할 일이 많아졌다. 단순히 if/else 구문으로 처리를 해왔는데, if/else로 예외를 처리하게되면 에러가 발생한 객체에 대해서 수명이 유지되기 때문에 에러를 처리하는 동안에도 에러가 발생한 객체를 참조하는 코드가 정상적으로 컴파일 된다. 그리고 코드가 중첩되면서 이해하...

😆 apollo-client를 사용한 GraphQL에 query 날리기 react-hooks를 사용하지 않고, apllo client를 통해 graphQL에 요청을 보낼 때, 필요한 컴포넌트에서 query language와 Query component를 사용해 요청을 보낸다. graphQL API는 보통 하나의 Endpoint를 사용하며, 요청시 사용하는...

회사 프로젝트 기술 스펙을 정리하자면, > - next.js > - styled-components > - apollo-client ⇒ 그래프큐엘 서버연동 라이브러리 > - apollo-cache(apollo-client) ⇒ 로컬 상태 관리 > - jest, enzyme > - eslint > - prop-types ⇒ 컴포넌트 props 타입 체킹 > ...

styled-component React CSS-in-Js관련 라이브러리중에서 가장 인기가있다. 자바스크립트 파일 안에서 CSS를 작성하는 형태이다. 그렇기때문에 .css/.scss 파일을 만들지 않아도 된다. 1. 시작하기 2. 문법 문법은 공식문서를 참고하며 익히고 정말 좋은 라이브러리임을 느꼈다. 그리고 기본 사용법이 쉬워 금방 익혔다. 다만 기억...

상황 초보자는 응용이 어렵다. 한번 입력되면 그게 전부인줄안다. 프로젝트를(나름 취업 전 큰 프로젝트) 진행했을 때, git flow로 협업을 했고, develop / feature branch를 이용해서 개발을 하였다. 그래서 그런줄 알았다. 그런데 실무에서는 회사마다 협업하는 방법이 달랐다. git flow는 git의 하위명령어로 라이브러리일뿐이다! 그...

이슈가 생긴 정황 vscode에서 폴더이름을 변경하였다. github에 전-혀 반영되지 않았다. 이것은 내가 저번에 작성한 대소문자 이슈구나! 그래서 게속 소문자로 남아있구나. 그렇다면 git을 이용하자. 나의 경우는 folder를 folDer로 바꿔야하는 상황 그러나 github에 전-혀 반영되지않고, 라는 에러만 뜸. 아! 이거 이름이 똑같으니...

왜 SVG인가 아이콘, 가장 효율적인 사용 방법은 무엇일까! sprite image 기존의 sprite image를 활용한 방식은 아이콘이 추가될 때마다 이미지 원본과 코드를 수정해줘야하는 번거로움이 있었다. 아이콘의 색상도 이미지 원본을 편집해서 지정해줘야했었다. icon font 아이콘 폰트는 sprite image에 비해 간편한 사용으로 많이 사용...

REST API란? --- 그럼 REST하지 않은 통신 무엇인가요 => SOAP API, Chatter REST API, 스트리밍 API 등등 구성 자원(RESOURCE) - URL 행위(Verb) - HTTP METHOD 표현(Representations) 예를들어 영화예매페이지에서 고객이름, 좌석번호, 예매번호, 영화정보 등은 자원(RESOURCE...

서버사이드렌더링 & 클라이언트사이드렌더링 왜 모바일의 시대에 등장한 클라이언트사이드렌더링 Single Page Application(SPA)! 고려해야할 점들이 있다. SPA는 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미한다. 렌더링 방식 SPA는 클라이언트사이드렌더링방식 이다. 기본적으로 페이지 로드가 없...

- 의미 내가 작업한 코드가 있으니 내 브랜치를 당겨 검토 후 병합해주세요 (^0^)/ - pull request를 하는 이유 자연스러운 코드 리뷰를 위해 Push 권한이 없는 오픈 소스 프로젝트에 기여할 때 콜라보레이터에 소속되어있는 경우에는, 그 저장소에서 브런치를 따고 푸쉬하면 풀리퀘가 가능하다. 에서 branch가 보이는 경우는 그 저장소만의 ...

개인적으로 공부하고 이해한 내용이므로, 틀린 부분이 있을 수 있으니 많은 지적 바랍니다 :) JavaScript의 핵심 객체(Object) 입니다. 객체는 한꺼번에 여러 값을 담을 수 있는 통(container)과 같은 자료구조(data structure)입니다. JavaScript에서의 객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루...

문제 나의 github repogitories를 정리하던 중 vscode에서 폴더의 이름을 소문자에서 대문자로 변경하였다. 그리고 push를 했더니 vscode에서는 대문자인데, repo에서는 전-혀 반영이 되어있지않았다. 그렇게 구글링을 해보니 Git은 대소문자를 구분하지 못한다고 !!!!( 👀 )!!!! 해결 이름변경시 git mv --force ...