profile
Front-end Web Developer
post-thumbnail

리액트 성능최적화(2) - Hook

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

3일 전
·
0개의 댓글
post-thumbnail

리액트 성능최적화(1) - 리렌더링

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

2020년 5월 10일
·
0개의 댓글
post-thumbnail

리액트 컴포넌트 디자인패턴

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

2020년 4월 19일
·
0개의 댓글
post-thumbnail

데이터베이스와 API

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

2020년 3월 22일
·
0개의 댓글
post-thumbnail

브라우저 동작원리

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

2020년 3월 15일
·
4개의 댓글
post-thumbnail

번들최적화 / 렌더링최적화

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

2020년 3월 8일
·
0개의 댓글
post-thumbnail

Get started 'react-apollo'

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

2020년 2월 17일
·
0개의 댓글
post-thumbnail

Apollo client cache

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

2019년 12월 3일
·
0개의 댓글
post-thumbnail

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

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

2019년 8월 25일
·
5개의 댓글
post-thumbnail

apollo-cache

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

2019년 8월 4일
·
0개의 댓글
post-thumbnail

webpack VS parcel

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

2019년 7월 14일
·
3개의 댓글
post-thumbnail

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

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

2019년 6월 30일
·
3개의 댓글
post-thumbnail

try catch 예외처리

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

2019년 6월 23일
·
4개의 댓글
post-thumbnail

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

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

2019년 5월 28일
·
2개의 댓글
post-thumbnail

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

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

2019년 5월 1일
·
0개의 댓글
post-thumbnail

styled-component

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

2019년 4월 24일
·
0개의 댓글
post-thumbnail

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

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

2019년 4월 2일
·
1개의 댓글
post-thumbnail

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

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

2019년 3월 27일
·
0개의 댓글
post-thumbnail

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

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

2019년 3월 20일
·
1개의 댓글
post-thumbnail

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

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

2019년 2월 27일
·
4개의 댓글