FRONTEND67 210712 Next VueRouter 사용법 및 Hash 삭제 Next VueRouter(VueRouter v4.x) 사용법 및 Hash 삭제 Next VueRouter(VueRouter v4.x) 사용법 및 Hash 삭제 기존 VueRouter 호출방식 Next VueRouter 기본 Hash 삭제 이번에 새로 시작하게된 프로젝트를 Vue3 로 설정하게되었는데, Vue Router 를 사용하려니 기존 Vue 2 와 조금 다른 설정방식에 적응이 안되었다. 정말 간단하게 딱 두가지만 설명할 것이다. 기존 VueRouter 호출방식 일단 기존 Vue Router 에서 처럼, import VueRouter from 'vue-router' 를 호출하면 undefined 가 나온다. 이제는 모듈로 내보내주므로, 아래와 같은 방법으로는 Router 를 호출할 수 없다. // .. 2021. 7. 12. 210708_Virtual DOM 이 빠른 이유 VirtualDOM 이 빠른 이유 브라우저 렌더링 에 대한 이해 VirtualDOM 이 빠른 이유 프론트앤드를 공부하다보면, "Virtual DOM" 이라는 단어를 한번씩 마주치게 됩니다. 많이 사용되는 프레임워크들은, 주로 Virtual DOM 을 사용해서 속도를 올립니다. 어떻게 이렇게 빠른걸까요? 그리고 왜 실제 DOM 은 느리고 비효율적일까요? 브라우저 렌더링 에 대한 이해 사실 프론트앤드 개발자들은 복잡하더라도 DOM 을 기본적으로 이해할 필요가 있습니다. HTML/CSS 페이지만 서버에서 요청해온다고 가정해보겠습니다. JS 는 여기서 필요하지 않습니다. HTML/CSS 형식의 파일을 응답으로 받은 후에는, 아래와 같은 일들이 일어납니다. 1. HTML 파싱 브라우저는 HTML 파일들을 파싱하고.. 2021. 7. 8. 210623 React Context React Context React Context Context 란? Context.Provider Class.contextType Context.Consumer Context.displayName Context 란? Context 는 컴포넌트 트리의 매 계층마다 props 전달 없이 데이터를 제공하는 방식입니다. (global context) Context 는 특정한 데이터가 다수의 컴포넌트에서 사용될때/필요할 때 사용합니다. 많은 컴포넌트에서 사용하므로, 사용시 주의가 필요합니다. Context API // create context object const context = React.createContext(defaultValue) Context.Provider 이 context 오브젝트는 트리에서.. 2021. 7. 4. 210622 React Hooks React Hooks React Hooks Hook 이란? Basic Hooks useState useEffect Rules of Hooks Building Your Own Hooks useContext Context Additional Hooks useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue Hook 이란? React 에서 Hook 은, function 컴포넌트 내부에서 React 의 state 와 lifecycle 특징을 연결시켜주는 (hook) function 입니다. 리액트는 내장 Hooks 들을 제공하며, 개발자가 직접 작성한, 재사용 가능한 Hook 을 사용할 수도 있습니다. Basi.. 2021. 7. 4. 210701 CSS 3D Hover 효과 만들기 https://letsbuildui.dev/articles/a-3d-hover-effect-using-css-transforms?utm_source=CSS-Weekly&utm_campaign=Issue-464&utm_medium=email 2021. 7. 1. 210628 Javascript Optional Chanining 활용 Javascript Optional Chaining 활용 Optional Chaining 을 이용하여 내부 프로퍼티 및 메서드에 접근 가능합니다 const adventurer = { name: 'Alice', cat: { name: 'Dinah' }, methods () { return 'This is methods!' } } const dogName = adventurer.dog?.name console.log(docName) // undefined console.log(adventurer.someMethods?.()) // 'This is methods!' // optional chaining 사용방법 const greeting = object?.deepProp?.deeperProp?.greet //.. 2021. 6. 28. ES2021 새로운 문법 ES2021 Features ES2021 Features 논리 할당 연산자 - Logical Assignment Operators 숫자 분리 - Numeric Seperators Promise.any 와 AggregateError String.prototype.replaceAll WeakRefs 와 FinializationRegistry Objects 논리 할당 연산자 - Logical Assignment Operators // Or Or Equal x ||= y x || (x = y) // And And Equals x &&= y x && (x = y) // QQ Eqauls x ??= y x ?? (x = y) // 사용 예제 - 모두 동일한 구문입니다 if (!user.id) user.id = 1 .. 2021. 6. 28. 210603_Short Polling vs Long Polling Short Polling vs Long Polling 챗봇같은 real-time application 은 기본 request-response 구조를 사용할 수 없습니다. 이를 구현하기 위해서는 polling 메커니즘을 구현해야합니다. polling 메커니즘에는 real-time 을 구현하기위한 Websoket 과 SSE(server-side event) 도 존재합니다. 그래서, polling 은 무엇일까요? Polling Polling 은 client 가 일정시간 내에 데이터를 얻기 위해 request 를 server 에 보내는 기술을 말합니다. Short Polling Short Polling 은 client 가 데이터를 얻기위해 request를 서버에 보낸 후, 정해진 지연(정해진 시간) 후에 res.. 2021. 6. 3. 210524 _ npm 을 이용한 확장 모듈 관리 NPM 을 이용한 의존성 확장 모듈 관리 NPM 을 이용한 의존성 확장 모듈 관리 npm 소개 npm 사용법 npm 을 이용한 확장 모듈 설치 글로벌 설치 로컬 설치 확장모듈 검색 설치된 확장 모듈 관리 package.json 을 이용한 프로젝트 관리 기본 모듈만 사용하여 직접 작성할 수도 있지만, 다른 개발자들이 미리 만들어둔 수많은 확장 모듈들을 사용하면 필요한 기능을 훨씬 빠르게 개발할 수 있습니다. npm 소개 npm 은 노드를 위한 패키지 매니저입니다. 많은 개발자들이 확장 모듈을 만들고, 이 확장 모듈을 쉽게 관리해주는것이 npm 입니다. 이미 존재하는 모듈을 이용하면 생산성을 높일 수 있습니다. 서버에 배포하거나 협업하는 개발자가 개발 환경을 설정할 때 소스가 의존하는 확장 모듈도 함께 설치.. 2021. 5. 30. 이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다. 보안 오류 (:) PSSecurityException / UnauthorizedAccess 포맷한지 얼마 안돼서 그런가.... "보안 오류"라고 뜨면서 작업이 실행되지 않는 현상이 발생했습니다. 회사에서는 맥을 쓰고, 집에서는 윈도우를 써서 환경이 맥에 익숙해져 있다가 윈도우 스크립트를 실행 하려니까 한국말로 뜨니 적응이 안됩니다. 검색해보니 시스템의 접근 가능 여부 설정이 제한되어있어서 그랬는데.. 한국말로 저렇게 써두니까 뭘 검색해야 할지 모르겠더라구요. 아무튼 그래서 정리해보았습니다. 관리자로 shell script 실행 shell 에 아래 순서대로 입력합니다. $ ExecutionPolicy # 현재 상태 확인 Restricted # 제한된 상태 $ Set-ExecutionPolicy Unrestricted # 상태 변경 > 실행 규칙 변경 > 실행 정책은 신뢰하지 않는 스크립트로부터 .. 2021. 5. 29. 210425_Jest 사용법 Jest 기본 사용법 Test 파일 구성 Test File 이름 짓기 Jest 코드 작성 Jest 로 스냅샷 테스트하기 비동기 테스트 패턴 테스트 더블 (Test double) 모의 함수 만들기 (Mocking) SpyOn 사용하기 (Spying) Jest 기본 사용법 Spharos CMP 프로젝트의 Jest 는 package.json dependencies 내부에 @vue-plugin-e2e-cypress 로 정의되어있으며, 하단 스크립트로 실행 할 수 있습니다. --mode 는, 개발기 dev, 배포용 prod 으로 변경할 수 있습니다. "scripts": { "test:unit": "vue-cli-service test:unit --mode prod" }, "devDependencies": { "@.. 2021. 5. 28. 210512 css @property 속성 사용하기 (예시) See the Pen 210512_css property1 by Jaeeun Jung (@dmsdl950823) on CodePen. ** 지원하지 않는 브라우저가 있을 수 있으니 주의하기! 2021. 5. 12. 이전 1 2 3 4 5 6 다음
