본문 바로가기

programming study

 (889)
코드 분할 번들링 Webpack과 같은 툴을 사용하여 여러 파일을 하나로 번들링 번들링된 파일을 한 번에 로드하여 앱을 실행 1. 코드 분할 규모가 큰 앱을 번들링하면, 로드시간이 길어 짐 이를 방지하여, 코드를 나누기 런타임에 여러 번들을 동적으로 불러옴 지연 로딩을하여, 성능 향상을 시킬 수 있음 2. Suspense & React.lazy Suspense 컴포넌트 하위에서 사용 가능 컴포넌트가 로드되길 기다리는 동안 예비 컨텐츠를 보여줄 수 있음(ex. 로딩 화면) fallback : 컴포넌트가 로드될 때까지 기다리는 동안 보여줄 React 엘리먼트를 넘길 props 하나의 Suspense 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수 있음 React.lazy는 동적 import를 호출하는 함수를 인자로 가짐 ..
웹 접근성 모두가 사용할 수 있는 웹 사이트를 개발하는 것 보조과학기술(assistive technology)이 웹 사이트를 해석할 수 있도록 하는 것 스크린 리더 1. 시맨틱 HTML div를 지양하고 의미가 있는 태그를 사용 React로 구성한 코드가 돌아기게 만들기 위해 사용하는 경우, React Fragment를 사용할 것 function example() { return ( 예시 예시 ) } ​ ----------------------------------------------------------------- // Good function example() { return ( 예시 예시 ) } 2. 라벨링 input, textarea와 같은 HTML 폼 컨트롤은 구분할 수 있는 라벨이 필요 jsx에서는 ..
웹 접근성 모두가 사용할 수 있는 웹 사이트를 개발하는 것 보조과학기술(assistive technology)이 웹 사이트를 해석할 수 있도록 하는 것 스크린 리더 1. 시맨틱 HTML div를 지양하고 의미가 있는 태그를 사용 React로 구성한 코드가 돌아기게 만들기 위해 사용하는 경우, React Fragment를 사용할 것 function example() { return ( 예시 예시 ) } ​ ----------------------------------------------------------------- // Good function example() { return ( 예시 예시 ) } 2. 라벨링 input, textarea와 같은 HTML 폼 컨트롤은 구분할 수 있는 라벨이 필요 jsx에서는 ..
Vue.js - Vue 테스트 유틸 라이브러리 1. Vue 테스트 유틸 라이브러리란 Vue.js 공식 테스트 라이브러리 유닛 테스트 jest 만으로는 컴포넌트를 테스트하기위해 사용되어야 하는 코드가 많아짐 테스트 유틸 라이브러리로 간단하게 뷰 컴포넌트를 테스트할 수 있음 예시 // 특정 컴포넌트를 마운팅하는 API import { shallowMount } from '@vue/test-utils'; // 이제 vue를 import하지 않아도 됨 // import Vue from 'vue'; import LoginForm from './LoginForm.vue'; ​ // 컴포넌트의 이름이 테스트 최소 단위 describe('LoginForm.vue', () => { test('컴포넌트가 마운팅되면 usename이 존재하고 초기 값으로 설정되어 있어야..
Vue.js - Jest 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. 테스트 코드 작성 describe: 연관된 테스트 케이스를 그룹화 test: 하나의 테스트를 실행 첫 번째 파라미터 : 테스트 실행시 터미널에 표시할 문자열 두 번째 파라미터 : 테스트를 실행할 콜백 expect: 테스트할 값 toBe: 테스트할 값이 teBe에 전달할 값과 같은지 확인 예시 // math.js export function sum(a, b) { return a + b; } // math.spec.js // 테스트할 함수를 import import { sum } from './math'; ​ sum(10, 20); // 30이 나오는지 테스트 ​ // 연관된 테스트 케..
Vue.js - 테스팅, Jest 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 테스팅이란 기능이 잘 동작하는지에 대해 검증 테스트 코드는 작성해놓으면 자동으로 기능을 검증해줌 주로 유닛단위로 테스트 Jest 자바스크립트 테스트 프레임워크 사용성이 좋고 문서화가 잘 되어있음 React.js, Vue.js, Agular에서 사용 가능 jest.config.js jest 설정 파일 테스트 파일을 지정할 수 있음(testMatch 속성) testMatch 속성이 없는 경우 test/unit 디렉토리 아래에 테스트를 만들어야 함 test 파일은 가능하면 관련 파일과 근접해 있는 것이 좋음 module.exports = { preset: '@vue/cli-plugin-unit..
setInterval과 클로져 1. React에서 직면한 클로져 이슈 사용자가 검색 조건을 입력하면, API를 호출하여 해당 조건의 결과를 보여주는 용도의 페이지를 작업한 경험이 있다. 이에 더해서, 입력된 검색 조건을 토대로 6초마다 호출하여 결과를 최신화하는 기능도 구현해야 했었다. 당시에 아래와 같은 코드로 해당 기능을 구현하려고 하였었다.(회사 코드를 가져와 설명할 수는 없으므로 예시로 대체하겠다.) 첫번째 시도 각 검색 조건을 useState로 다루도록 함 각 검색 조건에 해당하는 UI가 있고 이벤트 핸들러에 의해 set~ 이 호출 useEffect로 컴포넌트가 마운트된 시점에서 타이머를 세팅 6초단위로 호출되도록 하였음 언마운트 시점에서 타이머를 클리어 // 검색 페이지 컴포넌트 function searchPage = ()..
Vue.js - 라우터 네비게이션 가드 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 라우터 네비게이션 가드 특정 라우터 진입 전에 로직을 정의 가능 데이터를 먼저 요청, 로딩하도록 할 수 있음 데이터 호출과 관련된 패턴을 구현 가능 특정 라우터 접근을 막을 수 있음 로그인이 필요한 페이지의 접근 막기 글로벌 Before Guards를 위한 세팅 생성될 vueRouter 인스턴스를 특정 식별자에 담기 import Vue from 'vue'; import VueRouter from 'vue-router'; import store from '../store'; ​ Vue.use(VueRouter); ​ const router = new VueRouter({ mode: 'his..

티스토리툴바