1~3번의 과정을 통해 컴포넌트가 렌더링될 때, 자식컴포넌트 또한 같은 과정으로 렌더링이 진행된다. 부모컴포넌트에서 상태를 변경하고, 아무런 영향이 없는 자식 컴포넌트의 경우에도 자식컴포넌트는 렌더링을 수행한다. 이때 사용하는 것이 shouldComponentUpdat

얼마전 과제를 받아 프로젝트를 진행한 적이 있는데, 과제로 받았다고 하기엔 복잡도가 가볍다고 생각했고, 디자인패턴에만 집중된 과제라고 생각했는데 과제전형에 탈락했다 헤헤 답답한 마음에 아는 동생을 통해 코드리뷰를 받았는데, 기억에 남는 리뷰 중 미루고 미뤄왔던 '성능최

처음 프로젝트를 시작했을 때, 디자인 패턴, 파일구조와 같은 추상적인 프로그래밍의 개념과 중요성을 전혀 몰랐다. 어플리케이션에 몇 가지 새로운 기능 구현을 요청될때마다 불행히도 디자인 패턴, 파일구조 등을 전혀 고려하지 않은 구조때문에, 작은 기능 하나가 어플리케이션

데이터는 '정보'로서의 데이터를 말한다.1\. 통합된 데이터 : 자료의 중복을 배제한 데이터의 모임2\. 저장된 데이터 : 컴퓨터가 접근할 수 있는 저장매체에 저장된 자료3\. 운영 데이터 : 조직의 고유한 업무를 수행하는데 존재가치가 확실하고 없어서는 안될 반드시 필

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI에 의해 정해진다. 브라우저는 웹 표준화 기구인 W3C(World Wide Web

😲 번들최적화 번들러란? 번들러란 하나의 파일에서 연결하고있는 무수히 많은 파일들을 하나로 묶어주어 한개의 파일로 새롭게 만드는 것을 의미한다. 번들러의 대표적인 예로 webpack이 있다. 왜 필요한가? 예전에는 스크립트 태그로 분리된 js파일을 html에 로드했

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

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

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

로컬 상태 관리 상태로 만들어줘야 할 부분 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...