전체 글
실용적인 프론트엔드 테스트 전략 - 2
출처 meetup.toast.com/posts/178 실용적인 프론트엔드 테스트 전략 (2) : TOAST Meetup 실용적인 프론트엔드 테스트 전략 (2) meetup.toast.com 소스코드 github.com/dongwoo-kim/react-redux-todomvc-storybook-cypress 스토리북 시작하기 - 스토리북은 처음에 리액트 스토리북으로 시작했지만, 지금은 프론트 대부분의 프레임워크를 지원한다. RN도 된다. npx -p @storybook/cli sb init - 위의 명령을 실행하면 package.json의 의존성을 읽어들여 어떤 프레임워크를 사용하고 있는지를 자동으로 판별하고 적절한 버전의 스토리북을 설치해준다. 그 뿐만이 아니라, 처음 시작에 필요한 몇가지 보일러 플레이..
실용적인 프론트엔드 테스트 전략 - 1
출처 meetup.toast.com/posts/174 실용적인 프론트엔드 테스트 전략 (1) : TOAST Meetup 실용적인 프론트엔드 테스트 전략 (1) meetup.toast.com 개발자와 테스트 - 테스트의 정의 : 애플리케이션이 요구 사항에 맞게 동작하는지를 검증하는 행위 자동화 테스트의 중요성 - 개발자가 직접 버튼을 클릭하고 ui변경을 확하는 식의 테스트는 대부분 반복적인 작업이다. 반복된 작업을 매번 수동으로 진행하면 애플리케이션이 복잡해질수록 테스트에 대한 비용이 증가하게 된다. 곧 테스트를 소홀히 하게 되며, 이는 결국 애플리케이션의 품질 저하로 이어진다. 또한 코드를 수정할 때마다 매번 관련된 기능을 테스트해야 하는 부담 때문에 코드 개선을 망설이게 되고, 이는 코드의 품질 또한 ..
리액트 에러 경계
ko.reactjs.org/docs/error-boundaries.html 에러 경계(Error Boundaries) – React A JavaScript library for building user interfaces ko.reactjs.org 에러경계란? - UI의 일부분에 존재하는 자바스크립트 에러가 전체 애플리케이션을 중단시켜서는 안된다. 리액트 사용자들이 겪는 이 문제를 해결하기 위해 React 16에서는 에러 경계라는 새로운 개념이 도입됨. - 에러 경계는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트이다. 에러 경계는 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체 트리에서 에러를 잡아낸다. 에러경계는 아..
lazy loading
출처 블로그 https://scarlett-dev.gitbook.io/all/it/lazy-loading https://css-tricks.com/the-complete-guide-to-lazy-loading-images/?fbclid=IwAR2gm3q1j6eZ9rNYo2YcXVz5dsGSJU0xHfsWCTsGl-NqEdT3xFlEJxfLmhs lazy loading이란? 사용자가 웹 페이지를 열면 전체 페이지의 내용을 다운로드 받는다. 만약 이용자가 전체 사진 갤러리를 다운로드했지만 첫번째 이미지만 본 후 사용자가 떠났을다면? 웹페이지에서는 메모리 및 대역폭 낭비가 발생한 것이다. lazy loading이란 웹 및 응용 프로그램 개발에서 리소스를 미리 로드하는 대신 실제로 필요한 시점으로 로드하도록 지..
리액트 렌더링 및 최적화
medium.com/vingle-tech-blog/react-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f255d6569849 React 렌더링 이해하기 React의 렌더링 과정과 잘못된 시나리오로 인하여 이른 최적화하는 케이스를 살펴봄과 함께 이를 개선하면서, Hook으로는 이렇게 쉽게 할 수 있다! 를 여러분께 소개하려고 합니다. medium.com
프레젠테이션/컨테이너 컴포넌트
출처 : blueshw.github.io/2017/06/26/presentaional-component-container-component/ 프레젠테이션 컴포넌트 어떻게 보여지는지와 관련있다. 프레젠테이션 컴포넌트와 컨테이너 컴포넌트가 모두 그 안에 들어가 있을것이고, 일부 DOM마크업과 스타일도 가지고 있다. 종종 this.props.children을 통해 노출된다. flux 액션이나 stores 등과 같은 앱의 나머지 부분들에 의존적이지 않다. 데이터를 가져오거나 변경하는 방법에 대해서 관여할 필요가 없다. props를 통해 배타적으로 callback 함수와 데이터를 받는다. 상태를 거의 가지고 있지 않다. 만약 상태, 생명주기, hooks, 또는 퍼포먼스 최적화가 필요없다면, 유틸함수로서 쓰여질 것..
타입스크립트
출처 heropy.blog/2020/01/27/typescript/ 한눈에 보는 타입스크립트(updated) 타입스크립트는 Microsoft에서 개발하고 유지/관리하는 Apache 라이센스가 부여된 오픈 소스로, 자바스크립트에 강한 타입 시스템을 적용해 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 heropy.blog 타입스크립트를 쓰는 이유 - C#, JAVA 같은 체계적이고 정제된 언어에서 사용하는 강타입 시스템은 높은 가독성과 코드 품질등을 제공할 수 있고 런타임이 아닌 컴파일 환경에서 에러가 발생해 치명적인 오류들을 더욱더 쉽게 잡아낼 수 있다. - 반면 자바스크립트는 약타입 언어로 비교적 유연하게 개발할 수 있는 환경을 제공하지만 런타임 환경에서 쉽게 에러가 발생할 수 있다는 단점을 가..
리액트에서 타입스크립트 쓰기
velog.io/@velopert/using-react-with-typescript 리액트 프로젝트에서 타입스크립트 사용하기 이번에 올리게 될 개발 튜토리얼 시리즈에서는 리액트 프로젝트에서 타입스크립트를 사용하는 방법에 대하여 알아보겠습니다. JavaScript 는 Weakly-typed 된 언어이기 때문에 특정 숫자 변수를 선언 velog.io
리액트
버츄얼돔 - 렌더링이란? html 요소 또는 React 요소의 코드가 눈에 볼 수 있도록 그려지는것 DOM은 왜 비효율적인가? - 브라우저가 HTML 받으면, 브라우저는 DOM을 만들고 이 DOM을 바탕으로 각 노드들의 스크린 좌표를 구하고 어디에 나타낼지 레이아웃을 짠다. 이 과정은 동기적인 작업인데 DOM에 변화가 생길 때 마다 렌더 트리를 재생성하고 레이아웃을 만드는 과정이 모두 다시 반복되므로 비효율 적임. Virtual DOM 렌더링 방식 - 리액트는 DOM을 직접 제어하는 대신 중간에 가상의 Virtual DOM을 만들어서 이걸 쓴다. Virtual DOM은 실제 DOM과 구조가 비슷한 리액트 객체 트리이다. 개발자는 직접 DOM을 제어하지 않고 Virtual DOM을 제어하고, React에서..
실용적인 프론트 테스트 전략
meetup.toast.com/posts/174 실용적인 프론트엔드 테스트 전략 (1) : TOAST Meetup 실용적인 프론트엔드 테스트 전략 (1) meetup.toast.com meetup.toast.com/posts/178 실용적인 프론트엔드 테스트 전략 (2) : TOAST Meetup 실용적인 프론트엔드 테스트 전략 (2) meetup.toast.com meetup.toast.com/posts/180 실용적인 프론트엔드 테스트 전략 (3) : TOAST Meetup 스토리북을 사용해서 시각적 요소에 대한 테스트를 자동화하는 방법에 대해 알아보았다. 기억을 되살리기 위해 우리가 작성하고 있는 할 일 관리 애플리케이션의 실행 단계를 다시 정리해보자. meetup.toast.com