CheolCheol Dev Note

리액트는 기본적으로 Babel-loader를 사용하는 방법과 typescript-loader를 사용하는 방법이 있다. 그리고 npm이나 yarn 의 패키지 모듈로 설치할 수 있다. 여기서 npm은 자주 접해 익숙하나 yarn은 React를 사용해보며 처음 들어보는 모듈이였다. 간단히 설명하면 yarn은 npm의 단점을 보안하며 안정적이며 빠르며 보안성이 뛰어나도록 만든 새로운 패키지 매니저이다. npm install --global yarn 으로 설치를 할 수 있다. 그리고 React Project를 생성하기 위해 create-react-app을 설치해야 한다. create-react-app을 사용하기 전에는 프로젝트를 만들고 폴더를 생성하고 webpack/babel 등을 설정하고 귀찮았는데 create..

https://html5up.net https://w3layouts.com(반응형웹디자인테마다운) http://tedgoas.github.io/Cerberus/(이메일템플릿)

React Native는 그리드 시스템에 flexbox를 이용하는데그 기본에 대해 공부하고 정리해본다. 물론 웹에서 지원하는 flexbox와는 약간 다르지만그 기본에 대해 공부하는 것이다. Flexbox 모델은 뷰포트(viewport) 및 엘리먼트 (elemnt) 크기가 동적이거나 알려지지(unknown) 않은 경우에도 문서 내의 엘리먼트간에 공간을 배치(layout), 정렬(align) 및 분산(distribute)하는 효율적인 방법을 제공한다. Flexbox 모델을 사용하려면 부모 엘리먼트를 flex container (AKA flexible container)로 만들어야한다. Flexbox에서는 두가지 개념을 알면 좀 더 이해하기 쉽다. Flex container: {display: flex}를 설..

React with Typescript 세미나 강의를 듣고 정리하며 공유한다. React는 페이스북이 만든, MVC 패턴 중V를 담당하는 라이브러리 M이나C는 다른 라이브러리나 패키지로 보완해주어야 한다.(Redux나MobX, react-router와 함께 프레임워크처럼 사용) Angular는프레임워크React는UI구성요소라이브러리UI 컴포넌트를 만드는 일만 하며 캡슐화를 잘 시켜줘서 재사용 성이 높다.한가지 일만하여 단순하고 여러 자바스크립트 프레임워크나 라이브러리와 함께 사용할 수 있다 Angular는 금융권, React는 엔터테인먼트분야 라고 확정 지을 수는 없지만 지표가 있다. angular vs react 비교 (Angular는 프로젝트도 해지만 React는 스터디만 해서 잘은 모르겠지만 비교를..

EO는 Search Engine Optimization(검색 엔진 최적화)의 약어로 사이트를 구글, 네이버, 다음 등등의 검색엔진에 검색이 잘 되도록, 상위에 노출이 되도록 사이트를 수정하는 것을 말합니다. 사이트를 검색엔진에 등록해서 접속자를 늘려야 하는 경우에 필요하며, 그렇지 않는 경우에는 신경쓰지 않아도 됩니다.그런데 Angular사이트는 사이트의 컨탠츠가 검색엔진에서 아예 검색되지 않습니다. 그 이유는Angular가 SPA로 되어 있어 서버는index.html만 전달할 뿐 모든 컨탠츠가 사이트에 접속한 다음 생성되기 때문입니다. 검색엔진들은 서버에서 생성되는 파일을 수집하기 때문에Angular 사이트는 기본적으로SEO가 아예 불가능합니다. 그래서 해결책 => Server Side Renderin..