공부
jest
Jest 강좌 출처 - 유튜브 코딩앙마 소개, 설치, 간단한 테스트 JEST : 페북에서 만듬, Zero config 철학을 가지고 있어서 별개의 설정없이 빠르게 테스트할 수 있는 장점이 있다. js진영에서 테스트 도구로 제일 많이 쓴다. npm i jest -D 설치 package.json에서 스크립트에 test : 'jest'로 수정. npm jest 명령어를 치면 *.test.js 파일이나 tests폴더에 테스트 파일들을 모두 테스트한다. const { add } = require("./fn") test("2 + 3 = 5", () => { expect(add(2, 3)).toBe(5) }) 테스트할 함수를 불러오고 expect에 검증할 값을, toBe에 인자로 예상값을 넣고 테스트를..
코드가 얼마나 복잡한가에 대한 근거
코드가 얼마나 복잡한가에 대한 근거 출처 https://www.youtube.com/watch?v=zMmoOuIG8Aw 죠니데브 유튜브 생각의 시작 함수를 덜 복잡하게 작성하고 싶다 코드리뷰 피드백을 줄 때 '복잡하다'라는 표현을 수치로 전달할 수 없을까 정성적 vs 정량적 정성적 - 응답자의 주관적 견해와 판단으로 분석(ex. 상품평) 정량적 - 수치를 토대로 분석 피드백은 최대한 객관적인 것이 중요 "함수가 조금 복잡한거 같아요.."라는 두리뭉술한 의견을 최대한 객관적으로 표현하려면? 정성적일 수 있는 근거들 개발자의 역량에 따라 기준이 달라 애매함 모든 상황에 100% 쉽게 적용하기 어려움 개인 취향으로 생각하는 개발자도 있다. 파라미터 갯수 메서드 하나가 여러 동작을 하나? 의심갈 수 있음 파라미..
CORS
출처 https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy https://evan-moon.github.io/2020/05/21/about-cors/ 동일 출처 정책(SOP. Same-Origin Policy) 정의 : 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 보안방식. 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여준다. 출처는 두 URL의 프로토콜, 포트, 호스트가 모두 같아야 동일한 출처라고 본다. 일부 제약이 있으나, 현재 페이지의 출처를 변경하는 것도 가능하다. document.domain의 값을 현재 도메인이나 현재 도메인..
리액트 Docs - 고급 안내서
ko.reactjs.org/docs/accessibility.html 접근성 – React A JavaScript library for building user interfaces ko.reactjs.org 접근성 - www.wuhcag.com/wcag-checklist/WCGA 체크리스트를 통해 접근성을 갖춘 웹사이트를 만드는데 필요한 지침 확인 코드 분할 - 대부분의 리액트 앱은 Webpack으로 여러 파일을 하나로 병합한 번들 된 파일을 웹 페이지에 포함하여 한번에 전체 앱을 로드한다. - 번들링은 훌륭하지만 앱이 커지면 하나의 번들파일도 커진다. 번들이 거대해지는 것을 방지하기 위한 좋은 해결방안은 나누는 것이다. - 코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 웹팩에서 지원..
리액트 Docs - 주요개념
ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 문서 다시 찬찬히 보면서 공부하기 주요개념 JSX - JS를 확장한 문법으로 UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용함. JS의 모든 기능이 포함되어 있음. - JSX는 React 엘리먼트를 생성한다. - 리액트에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI로직과 연결된다는 사실을 받아들인다. - 리액트는 별도의 파일에 마크업과 로직을 넣어 인위적으로 분리하..
실용적인 프론트엔드 전략 3
출처 meetup.toast.com/posts/180 실용적인 프론트엔드 테스트 전략 (3) : TOAST Meetup 스토리북을 사용해서 시각적 요소에 대한 테스트를 자동화하는 방법에 대해 알아보았다. 기억을 되살리기 위해 우리가 작성하고 있는 할 일 관리 애플리케이션의 실행 단계를 다시 정리해보자. meetup.toast.com 2부에서 스토리북으로 뷰에 해당하는 테스트를 진행했다. 이제 애플리케이션 상태를 관리(조작) 하는 단계를 Cypress를 사용하여 테스트해본다. 통합 테스트(Jest) vs E2E 테스트 (Cypress) 1. Jest는 실제 브라우저가 아닌 JSDom을 이용한 가상의 브라우저 환경에서 실행되기 때문에 제약이 있다. 예를들어, 브라우저의 렌더링 엔진을 사용할 수 없기 때문에 ..
실용적인 프론트엔드 테스트 전략 - 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변경을 확하는 식의 테스트는 대부분 반복적인 작업이다. 반복된 작업을 매번 수동으로 진행하면 애플리케이션이 복잡해질수록 테스트에 대한 비용이 증가하게 된다. 곧 테스트를 소홀히 하게 되며, 이는 결국 애플리케이션의 품질 저하로 이어진다. 또한 코드를 수정할 때마다 매번 관련된 기능을 테스트해야 하는 부담 때문에 코드 개선을 망설이게 되고, 이는 코드의 품질 또한 ..
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이란 웹 및 응용 프로그램 개발에서 리소스를 미리 로드하는 대신 실제로 필요한 시점으로 로드하도록 지..
프레젠테이션/컨테이너 컴포넌트
출처 : blueshw.github.io/2017/06/26/presentaional-component-container-component/ 프레젠테이션 컴포넌트 어떻게 보여지는지와 관련있다. 프레젠테이션 컴포넌트와 컨테이너 컴포넌트가 모두 그 안에 들어가 있을것이고, 일부 DOM마크업과 스타일도 가지고 있다. 종종 this.props.children을 통해 노출된다. flux 액션이나 stores 등과 같은 앱의 나머지 부분들에 의존적이지 않다. 데이터를 가져오거나 변경하는 방법에 대해서 관여할 필요가 없다. props를 통해 배타적으로 callback 함수와 데이터를 받는다. 상태를 거의 가지고 있지 않다. 만약 상태, 생명주기, hooks, 또는 퍼포먼스 최적화가 필요없다면, 유틸함수로서 쓰여질 것..