본문 바로가기

react.js

 (7)
[번역] React Components, Elements, 그리고 Instances 2020. 4. 22. 13:07 본 포스트는 Dan Abramov의 React Components, Elements, and Instances를 번역한 글입니다. 많은 사람들이 React에서 components와 컴포넌트의 instance, 그리고 elements를 혼동합니다. 왜 화면에 그려지는 무언가를 의미하는 각각 다른 세 개의 용어가 있을까요? 당신이 React를 처음 접했을 때 아마 컴포넌트 클래스와 인스턴스만 사용해서 개발하였을 겁니다. 예를 들어, 당신은 클래스를 생성해서 Button 컴포넌트를 선언했다고 합시다. 프로그램이 실행되었을 때, 아마 이 컴포넌트의 여러 인스턴스가 있고, 각각은 인스턴스만의 고유한 props와 지역 state가 존재할 것입니다. 이것은 전통적인 객체 지향 UI 프로그래밍입니다. 그럼 elemen..
[리액트] Hook 렌더링 최적화 실무 적용기 2020. 4. 9. 16:47 최근에 Daily DevBlog에서 useCallback과 React.memo을 통한 렌더링 최적화에 관한 글을 읽었다. 글을 읽고 깨달은 것은 내가 지금까지 useCallback을 잘못 사용하고 있었다는 점이었다. 마침 챗봇 빌더의 설정 페이지를 시작으로 점차 렌더링 최적화를 적용해나갈 계획이었기 때문에 이를 수정하고자 한다. 더불어 리액트 훅 기반 프론트엔드 개발 시 주의할 점에서 state는 독립적으로 설정해야 하는 점 또한 적용할 것이다. 1. useCallback과 React.memo와의 관계성 우선 공식문서를 꼼꼼히 읽으면서 useCallback의 올바른 쓰임새부터 파악했다. 이것은, 불필요한 렌더링을 방지하기 위해 (예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의..
[리액트] Toast 알람 구현 (2) 2020. 4. 7. 16:20 3/31일에 Toast 알람을 custom hook으로 한 파일 내에서 구현을 하였다. 그러다 보니 해당 컴포넌트를 함수 실행으로 가져온다거나, 컴포넌트 업데이트를 위한 별도의 state를 두는 등의 좋지 않은 패턴을 썼었다. 저번 포스팅에서의 개선점들을 다시 열거하자면, 1. ToastContainer를 함수로 쓰는게 거슬린다! 로 쓰고 싶다 ㅠㅠ 2. setInterval()이 성능에 영향을 줄 거 같다. 따라서 시각적인 변화는 requestAnimationFrame의 콜백함수에서 해결하고 싶은데 가능할까? 3. trigger state말고 ToastBox 업데이트를 할 수 있는 방법을 찾아보자. 등의 고려 사항이 있었다. 따라서 오픈 소스 라이브러리인 react-toastify 소스 코드를 분석해보..
[리액트]크로스 브라우징 이슈 해결 경험기 2020. 4. 3. 00:44 처음 챗봇 빌더 서비스를 기획할 때 IE10, 11, Edge까지 지원하는걸 목표로 잡았다 따라서 polyfill을 맞춰주는 babel 로더를 웹팩 로더에 추가하여 기본 크로스 브라우징은 설정하였으나 그럼에도 레이아웃이 틀어지거나 원하는 대로 기능이 동작하지 않는 등의 이슈가 있어 정리해서 다음에도 유의해야 겠다. 가장 예전에 했던 크로스 브라우징 이슈부터 정리하였다. [목차] 1. input focus를 잃는 현상 2. IE10에서 z-index 어긋나는 현상 3. flex 속성 미적용 4. css var() 미지원 5. 기타 이슈 1. input focus를 잃는 현상 원인: 리액트 컴포넌트 라이프 사이클로 인한 rerendering 2019년 6월 1차 고도화가 끝나고 첫 리팩토링 때 발생했던 이슈..
[리액트] Toast 알람 구현 (1) 2020. 3. 31. 21:50 현재 챗봇 빌더에 구현되어있는 Toast 메세지는 직접 구현한 부분이다. 다만 단점은 여느 라이브러리처럼 여러 개가 뜨는 형식이 아닌 하나만 뜰 수 있는 구조로 구현된 상태였다. 그리고 컴포넌트와 기능 부분을 나눈다고 뷰와 컨트롤러 부분이 각각 /components 와 /helpers에 구현했는데 따로 불러와서 쓰는게 어색했다. 따라서 이번에 Toast 알람을 개선하는 것을 Task로 잡고 시도했었다. 마침 최근에 본 기술 인터뷰 때 받은 테스트에서 유사한 요구사항을 가지고 있어 이것을 집에서 다시 풀면서 어느정도 아이디어를 얻을 수 있었다. (정작 테스트볼 때는 이렇게 못풀었어서 아쉽다...ㅠ 함수형 프로그래밍에 익숙해져 있던 탓인지 OOP로 풀 생각을 못함..U_U) [요구 사항] 1. 여러 개의 T..
[리액트] 리액트 훅 기반 프론트엔드 개발 시 주의할 점 2020. 3. 21. 00:14 1년 넘게 react.js 로 챗봇 빌더 프론트엔드 작업을 하면서 다양한 과정을 거쳐왔었다. 2018년, 제일 처음 React.js로 챗봇 빌더 PoC를 할 때는 필수적인 불변성도 준수하지 못했을 정도로 어리석게 프로그래밍을 했었는데 2019년 정식 서비스 개발에 들어가고 리팩토링(이라 쓰고 실상은 갈아엎음;)을 진행하면서 현재 꽤 올바른 방향으로 프로그래밍을 해오고 있다. 하지만 아직 갈 길이 엄~~~청 멀어서 늘 새롭게 배우는 부분이 많아 충격과 자극을 받으며 하고 있는 만큼, 다음에 또 React.js 개발을 하게 된다면 다음고 같은 점들은 꼭 유의하면서 진행하고 싶어 미리 되짚어보면서 꼭 지키고 싶다. 1, 2차 고도화가 끝난 2019년 10월부터 클래스 컴포넌트를 리액트 16.08버전부터 새로 ..
[번역] The Next.js 핸드북 2020. 3. 4. 13:43 Flavio Copes의 The Next.js Handbook을 번역한 글입니다. The Next.js Handbook I wrote this tutorial to help you quickly learn Next.js and get familiar with how it works. It's ideal for you if you have zero to little knowledge of Next.js, you have used React in the past, and you are looking forward diving more into the React ecosyste www.freecodecamp.org Next.js를 여러분들이 빨리 배우고, 어떻게 작동하는지 익숙해지는데 도움을 주기 위해 이 튜..

티스토리툴바