Weeeeey Weeeeey

1. 기본 브라우저는 자바스크립트의 발전 속도를 따라오지 못함. 때문에 es2015에서 표준 모듈 시스템을 내놓았지만 몇 몇 브라우저는 이를 사용하지 못했고, 브라우저에 무관하게 모듈을 사용하고 싶다는 욕구하에 모듈 번들러인 웹팩이 등장했다. 웹팩은 모든 파일을 모듈로 바라보고 이것들을 하나의 파일(혹은 소수)로 합쳐주는 번들러이다. 하나의 시작점인 entry 포인트로부터 의존적인 모듈을 전부 차장내어 output을 만들어낸다. npm install -D webpack webpack-cli 패지키 매니저를 통해 웹팩과 커맨드라인으로 웹팩을 실행시킬 수 있게 하는 webpack-cli를 설치해준다. node_modules/.bin/webpack // webpack 위와 같은 명령어를 통해 (같은 동작) 웹..

카카오 개발자 센터에 들어가보면 api key (자바스크립트 키) 를 발급 후 아래 코드를 삽입하라고 한다. "API를 로딩하는 스크립트 태그는 HTML파일안의 head, body 등 어떠한 위치에 넣어도 상관없습니다. 하지만, 반드시 실행 코드보다 먼저 선언되어야 합니다." 리액트 같은 경우에는 intex.html에 작성하면 되고 next.js 같은 경우 layout 같은 곳에 Script 태그를 불러와 삽입하면 된다. 하지만 이 같은 번거로운 작업을 JaeSeoKim 님이 배포하신 라이브러리를 사용하면 비교적 간단하게 처리 할 수 있다. next.js 같은 경우 example에 따르면 .env 에 아래와 같이 작성해두면 script 문을 따로 작성하는 대신 useKakaoLoader를 통해 api 키..

import 'react-quill/dist/quill.snow.css'; import { EditorProvideProps } from '../new/new-types'; // 중간 생략 ReactQuill에 입력한 데이터 value는 html 요소를 string 형태로 받아와짐 (++참고) next.js에서 ReactQuill 컴포넌트를 사용할려면 dynamic으로 import 해야함. (window로 정의 되어 있는데 next는 서버 측에서 작동하니 아래처럼 dynamic으로 받아오면서 ssr:false 넣어주기. + useMemo를 하지 않으면 렌더링 될 때마다 변경되어보림) const ReactQuill = useMemo( () => dynamic(() => import('react-quill'..

webpack 여러 개의 파일을 하나로 합쳐주는 모듈 번들러 기능 css loader 기능 jsx 변환 작업 여러 개로 나눠진 js 파일을 html이 실행 할 수 있는 하나의 js파일로 합쳐줌 파일 분할(Code Splitting) 애플리케이션 번들에 포함된 코드를 여러 개의 조각/청크 로 분할하는 기술 초기 로딩 시 필요한 최소한의 코드만 다운로드 하여 페이지 로딩 속도 향상 대규모 애플리케이션에 유용 리액트 라우터와 같은 라이브러리와 잘 통합되어 있어, 각 페이지에 필요한 코드만 로딩하게 도와줌 // 동적 import() - 모듈은 필요할 때만 로딩되며 웹팩은 이를 감지하여 해당 모듈을 별도의 청크로 분할 const someModule = import('./someModule.js'); // 웹팩의 ..

https://www.daleseo.com/jest-basic/ Jest로 기본적인 테스트 작성하기 Engineering Blog by Dale Seo www.daleseo.com 1. jest란 Jest는 테스트 과정에서 필요한 Test Runner, Matcher, Mock을 한 번에 해결해 줄 테스팅 프레임워크로 불리운다. npm i -D jest 2. 실행 package.json 스크립트 옵션에서 아래와 같이 작성하여 npm test 라고 입력시 jest가 실행되도록 함 jest는 test.js로 끝나는 파일이나 , __test__ 디렉터리 안에 있는 파일은 모두 테스트 파일로 인식해줌. ( 특정 테스트 파일만 실행하고 싶으면 npm test 입력 "scripts": { "test": "jest"..

페이지 이동시 태그를 사용하는 것은 SPA 페이지인 Next.js 에서 효율적이지 못함. a 태그로 이동 시 새로고침을 하기 때문에 그 과정에서 빈 화면이 보일 수도 있고 통신을 새롭게 하다 보니 성능 및 사용자 경험 측면에서 떨어질 수 밖에 없다. 새로고침 없이 페이지 이동을 위한 (SPA에 위배되지 않기 위해) 라우팅 방식에는 와 Router 가 있음 1. Link Link 태그에는 href 속성을 추가하여 가고자 하는 주소(페이지)를 넣는다 새로고침 없이 페이지 전환이 됨. Client-side navigation 방식으로 , JS로 페이지 전환이 이뤄짐 is a React component that extends the HTML element to provide prefetching and cli..

SPA (Single-page application) 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JS, CSS 같은 모든 자산을 로드하는 애플리케이션 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드 되지 않음 ES6, ES2015, ES2016 등등 ECMAScript 언어 명세의 최신 버전을 나타내며, JavaScript는 이를 구현한 것 ES6 버전에는 화살표 함수, class,템플릿 리터럴, let const 같은 추가 사항 있음 컴파일러 자바스크립트 컴파일러는 코드를 변환하고 다른 형식으로 코드를 반환함. 일반적으로 es6 문법을 구형 브라우저에서도 동작하도록 변환 Babel은 리액트와 함께 널리 사용되는 컴파일러 번들러 분리된 자바스크립트와 cs..

이러한 객체로 이루어진 배열 data 가 있을 때, 이것의 JSON형태로 볼 수 있는 Viewer를 웹에 띄울려고 했다. 뷰어는 데이터를 직접적으로 편집 가능 할 수 있게 하는 것이 목표. 뷰어는 데이터의 편집까지 가능하므로 곧 에디터 역할을 함. 두가가지 방식을 생각해봄. 위의 객체를 items 라고 명명했을 때, 1. 아래와 같이 pre 태그 안에 input 박스를 넣어서 key값에 대한 value만 조작 가능하게 만들기 this.$primeEditor.innerHTML = ` [ ${this.state.items .map( (node, idx) => ` { "id": "value": }, ` ) .join('')} ] `; // 이것은 json 편집기라기엔 의미가 없다 생각해서 폐기 2. 두 번째 ..