Study/React
-
가상돔Study/React 2021. 9. 18. 18:25
리액트는 렌더링 성능을 위해 가상 돔을 활용한다. 브라우저에서 돔을 변경하는 것은 비교적 오래 걸리는 작업이다. 따라서 빠른 렌더링을 위해서는 돔 변경을 최소화 해야한다. 그래서 리액트는 메모리에 가상 돔을 올려 놓고 이전과 이후의 가상 돔을 비교해서 변경된 부분만 실제 돔에 반영하는 전략을 채택했다. 리액트 요소 이해하기 JSX문법으로 작성된 코드는 리액트의 createElement 함수로 변경된다. 리액트가 UI를 표현하기 위해 사용하는 리액트 요소의 구조를 살펴보자. const elementJSX = click here const element = React.createElement( 'a', { href: 'https://shinyeong.com' }, 'click here', ); 첫줄의 ele..
-
Loading, Error 컴포넌트 생성하기 - 1. Skeleton LoadingStudy/React 2021. 7. 11. 19:27
정말 오랜만에 블로깅을 한다. :) 오늘은 회사에서 로딩, 에러 컴포넌트 티켓을 담당하면서 처음에 생각한 것보다 굉장히 다양한 방법과 내용들이 포함되어 있는 것 같아 좀 더 공부할 겸 글로 남겨본다. 위의 영상과 같이 웹 사이트내에서 로딩이 이루어지는 장면을 본 적 있을 것이다. 지난 주 나에게 맡겨진 task 중 하나가 바로 사용자에게 "로딩, 에러"를 안내함으로 사용자 경험이 지루하거나 답답하지 않도록 하는 것이 었다. 잠시 디자이너의 부재로 인해, 디자인과 기획까지 구상해야했다. "그래? 그냥, 데이터 로딩이 이루어질 동안 로딩 컴포넌트 보여주면 되겠지!" 이게 처음 나의 단순한 생각이었다. 그러나 로딩 화면을 보여주는데에는 다양한 디자인과 더불어 다양한 방식도 있었다. 먼저, 로딩 화면을 구현하면..
-
코드기록:: map 메소드 활용한 feedStudy/React 2020. 7. 19. 19:59
이전까지 나는 블로그를 작성할 때, 나의 코드기록 보다는 다른 사람의 멋진 코드기록들을 가져와 언어를 배우고 기록했다. 그러나 위코드 1달째 수강 중, 멘토님께서 나의 코드를 refactoring하고 기록하며 공부하는 것이 제일 큰 공부가 된다고 말씀하셨고 오늘 처음으로 이를 실천해본다. 사실 나는 웹 개발 초초초 입문자로써, 나의 코드가 화려하거나 문제해결에 탁월한 것은 아니다. 매우 일반적이고 기초적인 방법이며 혹은 나는 최선을 다했지만 다른 방법에 비해 비 효율적 일 수도 있다. 그러나 입문자로서 지금 이 시점에서의 최선의 코드를 기록하며 후에 실력이 더 향상되었을 때, 스스로 더 멋진 코드로 리팩토링 할 수 있도록 기록을 남겨본다. (인스타그램 클론 메인 화면) 메인 화면 중, feed부분을 구현..
-
React RouterStudy/React 2020. 7. 19. 16:48
리엑트를 배우기 위해 codecademe 튜토리얼도 해보고, 리엑트 강의 보면서 코드도 따라쳐보며 나는 리엑트를 좀? 안다고 생각했다. 그런데 바닐라 자바스크립트로 만들었던 인스타그램 클론 코드를 리엑트로 옮기는 과정에서 나의 생각은 완전히 바뀌었다.. 일단, 리엑트의 SPA 개념을 알고는 있었지만 머리에 잘 그려지지 않았던게 문제였다. 이전에도 직접 리엑트 페이지를 만들어보았지만, 그저 기능이 실행되는거에 만족했지, 내 코드를 돌아보며 이해하려는 회고가 없었다. 그래서 아무도 도와주지 않고, 아무것도 없는 0 상태에서 바닐라 자바스크립트를 리엑트로 옮기려니 막막했던 것이다. 자, 그럼 이번에는 나의 스스로 자립한 첫 리엑트 코드로 SPA, Router 개념을 살펴보도록 해보자. 위 코드는 우리가 리엑트..
-
hook을 사용하는 이유Study/React 2020. 7. 16. 14:42
Hook의 특징 선택적 사용 : 기존의 코드를 다시 작성할 필요없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 그러나 만약 당장 Hook이 필요 없다면, Hook을 사용할 필요는 없다. 100% 이전 버전과의 호환성 : Hook은 호환성을 깨뜨리는 변화가 없다. 현재 사용가능 : 현재 배포하는 v16,8.0에서 사용할 수 있다. Hook은 알고 있는 React 컨셉을 대체하지 않는다. 대신에 Hook은 props, state, context, refs, 그리고 lifecycle과 같은 리엑트 개념에 좀 더 직관적인 API를 제공한다. 또한 Hook은 이 개념들을 엮기 위해 새로운 강력한 방법을 제공한다. 왜 Hook이 나왔는가? Hook은 5년 동안 우리가 리엑트에서 수만 개의 컴포넌트를 유지..
-
fetch 함수와 활용예제.Study/React 2020. 7. 14. 20:23
fetch 함수 fetch함수는 API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중 하나이다. Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능하다. 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기 쉽게 기술할 수 있다. fetch를 통해 http통신의 요청과 응답에 대한 이해, Promise 공부를 해야한다. Basic 기본적인 fetch 작성법 fetch('api주소') .then( res => res.json()) .then( res => { // data를 응답받은 후의 로직 ); 위의 기본 fetch 작성을 함수 선언식으로 바꾼다면 아래와 같다. fetch('api주소') .then(f..
-
Ajax (axios와 fetch 비교)Study/React 2020. 7. 14. 13:45
Ajax(Asynchronous Javascript And Xml) 란 Javascript 를 사용한 비동기 통신이며, 클라이언트와 서버간의 XML 데이터를 주고받는 기술이다. XMLHttpRequest 객체를 이용해서 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다. react에서 네트워크 통신을 도와주는 api인 axios와 fetch를 비교해보자. 1. axios 구형 브라우저를 지원한다. 응답시간 초과를 설정하는 방법이 있다. JSON데이터 자동변환이 가능하다. node.js에서의 사용이 가능하다 request aborting (요청취소)가 가능하다 catch에 걸렸을 때, .then을 실행하지 않고, .console창에 해당 에러 로그를 보여준다. return 값은 Promise ..
-
프레임워크(Framework)와 라이브러리(Library) :: 부제.리엑트는 무엇인가Study/React 2020. 7. 7. 16:03
프레임워크(Framework)란 프레임워크는 Frame + work 두 단어가 합쳐진 단어이다. Frame '틀' + work '일하다' = " 틀, 뼈대를 가지고 일한다. 즉, 뼈대나 기반구조를 뜻한다. 장난감 키트를 가지고 예를 들어보자. 아래는 장난감 키트에서 제공하는 부품들이다. 위의 키트를 가지고 우리는 다양한 형태의 장난감을 만들 수 있다. 장난감 키트가 제공해주는 일정한 부품들과 틀을 가지고 다양한 형태의 장난감을 만들 수 있다. 그러나 동시에 우리는 이 장난감을 만들기 위해서 메뉴얼에 포함된 규악을 지키면서 만들어야 할 것이다. 즉, 프레임워크는 '제공받은 일정한 요소와 틀, 규약을 가지고 무언가를 만드는 일'이라고 정의할 수 있다. 그렇다면 이 개념을 프로그래밍, 소프트웨어에서는 어떻게 ..