React - When to useMemo and useCallback (번역 글)
본 글은 원작자 Kent C. Dodds의 허락을 맡고 진행한 번역입니다. 원 글은 https://kentcdodds.com/blog/usememo-and-usecallback 입니다. useMemo와 useCallback을 어떻게 사용해야하고 주의할점은 무엇인지 파악해 봅시다. https://ideveloper2.dev/blog/2019-06-14--when-to-use-memo-and-use-callback/ (옆의 리뉴얼된 블로그글 링크에서 확인하시기 바랍니다) Steady Study Ideveloper Front end Developer who steadily study ideveloper2.dev
frontend - 프론트엔드 성능 최적화 기본
프론트엔드 성능 최적화의 기본(?!)이 될만한 개념들에 대해 조사하여 개편한 블로그에 정리해 보았습니다. 포스팅 링크 : https://ideveloper2.dev/blog/2019-05-18--front-end-%EC%84%B1%EB%8A%A5%EC%B5%9C%EC%A0%81%ED%99%94-%EA%B8%B0%EB%B3%B8/ 목차 - 성능 측정 - 브라우저 렌더링 과정 - 웹페이지 로딩 최적화 - 브라우저 기준 최적화 - 사용자 기준 최적화 - 자바스크립트, css 최적화 - 웹페이지 렌더링 최적화 - dom 조작으로 인한 렌더트리 변경 - reflow, repaint - layout 최적화
React - Thinking about emotion js vs styled component
React (Thinking about emotion js vs styled component) emotion.js와 styled component를 비교하고, 관련 예시로 면밀히 분석해보는 글을 새롭게 개편한 블로그에 포스팅 해보았습니다. https://ideveloper2.dev/blog/2019-05-05--thinking-about-emotion-js-vs-styled-component/
React - How Are Function Components Different from Classes? (함수형 컴포넌트와 클래스 컴포넌트는 어떻게 다른가?) 번역
React:How Are Function Components Different from Classes? (함수형 컴포넌트와 클래스 컴포넌트는 어떻게 다른가?) 번역 새롭게 개편한 블로그에 글을 작성하였습니다. :) 의역이 들어간 부분이 있어 피드백 주시면 감사하겠습니다 링크: https://ideveloper2.dev/blog/2019-03-12--how-are-function-components-different-from-classes/
React - React Concurrent Mode
React :React - React Concurrent Mode | React Concurrent Mode? 최근 리액트 16.8이 릴리즈 되고 React hook이 정식으로 포함 되면서 React Hook이 매우 핫한데요, 리액트팀의 React Hook 다음 로드맵인 react의 concurrent mode에 대해서 미리 살펴보고자, 사내 스터디에서 관련 자료를 조사하고 정리했던 내용을 블로그에 정리해 보았습니다:) 아직 정식으로 발표 된 내용이 많이 없어 관련 자료를 조사하며, 의역이 들어간 부분이 있을거라 참고하고 보시고 틀린 부분은 피드백 주시면 될 것 같습니다.! 그리고, React Concurrent mode와 관련해 아직은 정식으로 확정된 내용이 많이 없어, 변경될 가능성이 충분하니 참고만..
css - 스켈레톤 UI css 만으로 구성하기 with react
css:스켈레톤 UI css 만으로 구성하기 | Why ? 특정 페이지를 개발할때, 로딩 스켈레톤을 구현해야 하는 상황이 있었습니다. 이 ui를 구현하기 위해 여러 라이브러리를 사용할 순 있겠지만, 이런 라이브러리들로 인해 프로젝트의 크기가 늘어나고, 불필요한 리소스 낭비가 될 수 있다는 생각도 들었습니다. 따라서, css만으로도 충분히 스켈레톤 ui를 구성 할수 있다 생각되어 css로 스켈레톤 ui, 그리고 그에대한 애니메이션을 구현해 보았었습니다. 아래는 구현한 여러 스켈레톤 ui중 특정 페이지의 모바일 리스트 뷰에 해당하는 디자인 시안에 맞춰 본인이 구성한 UI입니다. UI를 구성하는 방식은 background-image 와 background-size css 속성을 활용해 임의의 스켈레톤 ui를 ..
React:Taste the principles of functional programming in React 이 글은 원작자 David Kopal의 허락을 맡고 https://www.codinglawyer.io/posts/taste-the-principles-of-fp-in-react 를 번역한 글입니다. (본인이 의역한것도 있으므로, 잘못된 번역 피드백 주시면 감사하겠습니다! 감사합니다) 지속가능한 컴포넌트 구조는 안정적인 react application을 개발할때, 선행되어야하는 필수요건입니다. 이러한 것은 higher-order-components (HoCs) 고차 컴포넌트를 사용하면서, 즉 함수형으로 코드를 짜면서 이뤄낼수 있습니다. 이러한 아이디어는 당신의 컴포넌트에서 로직을 분리하기 위함입니..
React - 리액트에서의 shallow compare 부터 React.PureComponent 까지
React:리액트에서의 shallow compare부터 React.PureComponent 까지 | 상황 this.state = { someValue: true }; this.setState({ someValue: true });리액트를 사용하여 개발할때, 위와 같은 상황에서는, setState는 무조건적으로 state를 업데이트하게 되고, 그에 따른 불필요한 렌더링을 하게 됩니다. 따라서 이를 방지하기 위해, 아래와 같이 1. React.PureComponent2. shouldComponentUpdate 주기를 기존 클래스컴포넌트에 추가 를 적용시켜 문제를 해결할수 있습니다. | Shallow compare란?shallow compare는 equality를 체크하는것입니다.숫자나 문자열 같은 sca..