Ideveloper's software blog

본 글은 원작자 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

프론트엔드 성능 최적화의 기본(?!)이 될만한 개념들에 대해 조사하여 개편한 블로그에 정리해 보았습니다. 포스팅 링크 : 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) 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? (함수형 컴포넌트와 클래스 컴포넌트는 어떻게 다른가?) 번역 새롭게 개편한 블로그에 글을 작성하였습니다. :) 의역이 들어간 부분이 있어 피드백 주시면 감사하겠습니다 링크: https://ideveloper2.dev/blog/2019-03-12--how-are-function-components-different-from-classes/

React :React - React Concurrent Mode | React Concurrent Mode? 최근 리액트 16.8이 릴리즈 되고 React hook이 정식으로 포함 되면서 React Hook이 매우 핫한데요, 리액트팀의 React Hook 다음 로드맵인 react의 concurrent mode에 대해서 미리 살펴보고자, 사내 스터디에서 관련 자료를 조사하고 정리했던 내용을 블로그에 정리해 보았습니다:) 아직 정식으로 발표 된 내용이 많이 없어 관련 자료를 조사하며, 의역이 들어간 부분이 있을거라 참고하고 보시고 틀린 부분은 피드백 주시면 될 것 같습니다.! 그리고, React Concurrent mode와 관련해 아직은 정식으로 확정된 내용이 많이 없어, 변경될 가능성이 충분하니 참고만..

Javascript:객체와 객체지향 프로그래밍 이 내용은 러닝 자바스크립트 의 내용을 참고해서 정리된 포스팅 글입니다. 그리고, 본인의 의견을 담아 내용을 더 추가하여 작성했습니다. | 프로퍼티 나열 어떤 컨테이너의 콘텐츠를 리스트로 나열하면, 배열이 바로 떠오르지만 객체를 생각하는 사람은 많이 없습니다. 객체도 배열과 같은 컨테이너 이며, 요소들의 나열을 지원 합니다.단, 프로퍼티 나열에서 중요한점은 순서가 보장되지 않는다는 점입니다. 자바스크립트가 순서를 명시적으로 보장하는 것도 아니고, 브라우저나 노드등의 프로그램에서 속도나 효율 향상을 목적으로 언제든 바꿀 수 있다고도 합니다. > for ...in 아래에서의 hasOwnProperty 는, 상속 된 property가 for .. in에 나타날 위..

css:스켈레톤 UI css 만으로 구성하기 | Why ? 특정 페이지를 개발할때, 로딩 스켈레톤을 구현해야 하는 상황이 있었습니다. 이 ui를 구현하기 위해 여러 라이브러리를 사용할 순 있겠지만, 이런 라이브러리들로 인해 프로젝트의 크기가 늘어나고, 불필요한 리소스 낭비가 될 수 있다는 생각도 들었습니다. 따라서, css만으로도 충분히 스켈레톤 ui를 구성 할수 있다 생각되어 css로 스켈레톤 ui, 그리고 그에대한 애니메이션을 구현해 보았었습니다. 아래는 구현한 여러 스켈레톤 ui중 특정 페이지의 모바일 리스트 뷰에 해당하는 디자인 시안에 맞춰 본인이 구성한 UI입니다. UI를 구성하는 방식은 background-image 와 background-size css 속성을 활용해 임의의 스켈레톤 ui를 ..

Javascript:자식 element가 여럿있을때 event 전파 막는 효과적인 방법 | Why? > 상황: 모바일 웹에서, Modal의 overlay 영역의 scroll을 방지하기 위해 overlay 영역을 touch 햇을때 touchEvent 리스너에 모달을 닫는 function을 넣어, 모달을 닫게 하는 기능을 구현해야 하는 상황이 생겼었습니다. > 어려움이 있었던점: 모달의 overlay 영역은 부모 영역에 생기고 그 하위에 모달 컴포넌트의 자식 요소들이 있는 상황이였는데요,이때자식 element에는 onClick 이벤트로 새로운 모달을 띄우는 이벤트가 걸려있는 상황이였습니다. 따라서, 기존의 모달안의 자식 요소들에 걸려있는 클릭시 새로운 모달창이 뜨는 onClick event부모 (모달 ove..