Tech40 SPA 란? (History API) SPA 란? SPA는 Single Page Application의 약자이다. SPA의 대표적인 라이브러리/프레임워크에는 Backbone.js, React, Vue, Angular가 있다. 과거에는 클라이언트가 웹페이지를 요청할 때마다 서버로부터 리소스들과 데이터를 가져와 화면에 렌더링 하는 방식을 사용했다. 그러나 웹 사이트가 고도화됨에 따라, 한 페이지의 페이지 용량이 커지고, 매번 새로운 페이지를 전달하는게 점점 버거워지게 되었다. 그래서 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 SPA가 등장한다. SPA 방식은 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다. SPA에서 라우팅은 서버로.. 2021. 8. 20. tsconfig.json을 설정해보자 Typescript는 동적 타입 언어인 Javascript를 타입이 있는 언어로 사용할 수 있게 해주는 언어이다. Typescript로 작성된 코드는 트랜스파일러(컴파일러)를 통해 Javascript로 변환된다. 아래 명령어로 컴파일을 한다. tsc index.ts 컴파일 과정에서 여러 옵션을 정할 수 있는데, 해당 옵션들을 작성하는 파일이 tsconfig.json 이다. Typescript에 가장 기본이 되는 tsconfig.json 파일을 설정해보자. 디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 Typescript 프로젝트의 루트가 된다. tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정한다. 설치하기 npx tsc --init t.. 2021. 8. 19. Typescript basic template 만들기 1. package.json 생성하기 yarn init 2. webpack 모듈 설치 yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin yarn add -D @babel/core @babel/preset-env babel-loader -D : devDependencies 로 설정하여 배포 서버에서는 해당 모듈들을 설치하지 않을 수 있다. webpack : 번들러 모듈 webpack-cli : webpack 명령어를 사용할 수 있게해주는 모듈 webpack-dev-server : 실시간으로 변경사항을 보여주는 live server html-webpack-plugin : template html 파일에 번들 파일을 자동으로 추가해주.. 2021. 8. 12. DOM Level 3 Events DOM 스펙은 W3C에서 Level 단위로 만들어지고 있다. DOM 레벨 1은 HTML, XML 문서 구조를 정의하는데 초점이 맞춰져 있었다. 이후 발표된 DOM 레벨 2, 3은 위 구조에 따른 상호작용 기능 추가 및 고급 XML 기능을 지원하는데 집중했다. DOM 레벨 3 이벤트 문서는 원래 2000년과 2003년 사이에 개발되었으며 구현자의 추가 피드백과 관심이 있을 때까지 W3C 메모로 게시되었다. 2006년에 Recommendation Track에서 수정 및 진행을 위해 선택되었고, 현재 구현 상태와 스크립트 작성자의 요구를 반영하도록 수정되었다. 오늘은 이벤트에 대해 알아보자. 이벤트는 다음 상황에서 발생한다. user interaction DOM change created or modified.. 2021. 8. 7. SyntheticEvent and throttle 탁구 게임에서 paddle(탁구채)의 위치를 canvas의 onMouseMove 이벤트를 통해 서버에 반영하려고 했다. 그러던 와중에 onMouseMove의 event.currentTarget에서 신기한 현상을 발견했다. 아래 동영상은 다음 코드를 출력한 동영상이다. console.log(3, event.currentTarget); 보이는가... null이었다가 어느 순간 currentTarget이 생겨난다. (아래 사진은 event만 출력했을 때 사진이다.) 아래는 사용하고있는 react 버전이다. "react": "^17.0.2", "react-dom": "^17.0.2", 우선, currentTarget이 존재하다가 null이 된 것이 아니고, null이었다가 currentTarget이 존재하게 되.. 2021. 8. 7. ReactElement.js ReactElement.js 파일을 분석해 보자. hasValidRef function hasValidRef(config) { if (process.env.NODE_ENV !== 'production') { if (hasOwnProperty.call(config, 'ref')) { var getter = Object.getOwnPropertyDescriptor(config, 'ref').get; if (getter && getter.isReactWarning) { return false; } } } return config.ref !== undefined; } React Element가 생성될 때, defineRefPropWarning가 호출되기 때문에, React Develop mode에서 props가.. 2021. 8. 4. 이전 1 2 3 4 5 ··· 7 다음
