zansol (JIHahnSol)

@zansol

JIHahnSol

Junior Front-end Developer

apollo client 로컬상태관리(cache state)

😺 로컬 상태 관리 initialCacheState.js 위와 같이 초기 상태를 작성했으면, 이 내용을 아폴로 client를 생성하는 생성자 옵션에 추가한다. lib/apollo/initialCacheState에 접근하여 각 view의 cacheState 를...

2019년 8월 25일1개의 댓글

[기록용] react로 다중 active 되는 button 만들기 (feat.apollo-cache / styled-component)

🐤 1. 먼저 버튼 UI에 필요한 constants.js 파일을 만들어준다. 이슈 - 처음에 버튼을 클릭했을 때, true / false 조건을 걸어 true 일때, active를 줌. 그랬더니 모든 버튼에 적용되서 1번 버튼을 누르면 true가 되고 2번 버튼...

2019년 8월 11일0개의 댓글

apollo-cache

로컬 상태 관리 1. 상태로 만들어줘야 할 부분 - input - 변하는 부분 전부! (쇼핑몰을 예로들면 갯수나 가격, 옵션) - 유저의 입력정보 2. 상태 초기화 - cacheState.js 파일을 만들어 상태로 만들어줄 초기값을 설정한다. - 반드시 typena...

2019년 8월 4일0개의 댓글

apollo apollo cache

webpack VS parcel

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

2019년 7월 14일2개의 댓글

[주니어탈출기] Next.js with react-apollo

✨ 왜 nextjs + React + apollo-client 조합으로 SSR 구현을 하게되었다. 물론 98% 짜여진 코드에 2% 치명적인 코드를 수정해야하는 작업이었지만, 클라이언트에도, 서버에도 매우 치명적인 오류였기때문에 반드시 고쳐야만했다. 🔧🔨react-a...

2019년 6월 30일3개의 댓글

apollo react 서버사이드렌더링 next.js

try catch 예외처리

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

2019년 6월 23일4개의 댓글

[주니어탈출기] apollo-client / react-hooks 사용해서 query날리기

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

2019년 5월 28일2개의 댓글

[주니어탈출기] Apollo Client 시작하기

회사 프로젝트 기술 스펙을 정리하자면, - next.js - styled-components - apollo-client ⇒ 그래프큐엘 서버연동 라이브러리 - apollo-cache(apollo-client) ⇒ 로컬 상태 관리 - jest, enzyme ...

2019년 5월 1일0개의 댓글

SSR Apollo client next.js

styled-component

styled-component React CSS-in-Js관련 라이브러리중에서 가장 인기가있다. 자바스크립트 파일 안에서 CSS를 작성하는 형태이다. 그렇기때문에 .css/.scss 파일을 만들지 않아도 된다. 1. 시작하기 3. 정리 이 외에도 정말 다양한 ...

2019년 4월 24일0개의 댓글

[git린이 탈출기] branch 이름 변경하기

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

2019년 4월 2일1개의 댓글

branch 이름변경 git

[git린이탈출기] 폴더이름 변경하기

이슈가 생긴 정황 1. vscode에서 폴더이름을 변경하였다. 2. github에 전-혀 반영되지 않았다. 3. 이것은 내가 저번에 작성한 대소문자 이슈구나! 그래서 게속 소문자로 남아있구나. 그렇다면 git을 이용하자. 4. 의문점 - 내 컴퓨터(macOS)에...

2019년 3월 27일0개의 댓글

[주니어탈출기] SVG 에 대해서

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

2019년 3월 20일1개의 댓글

[주니어탈출기] REST API 이해하기

REST API란? - 그럼 REST하지 않은 통신 무엇인가요 = SOAP API, Chatter REST API, 스트리밍 API 등등 구성 1. 자원(RESOURCE) - URL 1. 행위(Verb) - HTTP METHOD 1. 표현(Representatio...

2019년 2월 27일4개의 댓글

API REST API

[주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)

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

2019년 2월 27일2개의 댓글

SSR react 클라이언트사이드렌더링 서버사이드렌더링 렌더링 CSR

[주니어탈출기] Redux 이해하기

상태관리 Redux를 설명하기전에, 짚고 넘거가야할 부분 React란? - View 함수 개발에 도움을 주는 라이브러리 1. 단방향 사고 1. 특정 state, props에 따른 render 결과가 바뀌지 않습니다. 1. JSX를 통해 어떻게 화면을 그릴지 정의 1....

2019년 2월 26일0개의 댓글

Pull Request 이해하기

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

2019년 2월 23일0개의 댓글

객체지향프로그래밍(OOP)

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

2019년 2월 17일0개의 댓글

객체 객체지향프로그래밍

[Git] 대소문자 변경 후 github repo반영하기

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

2019년 2월 5일1개의 댓글

github git mv force git