Tailwind CSS HTML 안에서 CSS 스타일을 만들 수 있게 해주는 CSS프레임워크입니다. Tailwind CSS는 부트스트랩과 같이 미리 셋팅된 Uitility Class를 활용하는 방식으로 HTML에서 스타일링 할 수 있습니다. 빠른 스타일링 작업이 가능하며, Class 혹은 id 명을 작성하기 위한 고생을 하지 않아도 됩니다. 유틸리티 클래스가 익숙해지는 시간이 필요할 수 있지만 IntelliSense 플러그인이 제공되어서 금방 익숙하게 사용할 수 있습니다. 1. 프로젝트 사용 셋팅 셋팅 방법은 아래 홈페이지에서 자세하게 확인 할수 있습니다. Install Tailwind CSS using PostCSS - Tailwind CSS Installing Tailwind CSS as a Post..

vite create react app 을 사용할때 나오는 문제점을 해결하려고 사용. vite의 가장 큰 장점은 빌드 속도나 새로운 코드를 적용했을때 반영 속도 같은 피드백 속도의 빠른 성능을 가지고 있습니다. 기존 브라우저에서 ES모듈을 사용할 수 있기 전에는 개발자에 모듈화된 방식으로 javascript를 작성하는 기본 메커니즘이 없었습니다. 시간이 지남에 따라 webpack,Rollup, Parcel과 같은 도구로 번들링을 해결했습니다. 그러나 더 큰 애플리케이션을 구축하기 시작하면서 처리하는 javascript의 양이 기하수적으로 증가 하여 성능 병목현상이 발생하기 시작하였습니다. 예를 들어 서버 가동에 오랜시간이 걸리거나 브라우제에 반영되는 것이 몇초가 걸리는 문제들인데 vite는 이러한 문제를..

1. TypeScript 란? 자바스크립트는 동적 타입의 언어로 실행시에만 오류를 발견할 수 있습니다. 하지만 타입스크립트는 정적 타입의 컴파일 언어로 코드 작성 단계에서 타입을 체크해 오류를 확인 할 수 있고 미리 타입을 결정하여 실행 속도가 빠르다는 장점이 있습니다. 타입스크립트는 앞서 말했든 컴파일 언어로 자바스크립트로 다시 변환해야 사용이 가능합니다. 2. TypeScript 설정 2-1. TypeScript 설치 npm install -g typescript 2-2. TypeScript 파일 생성 ts 확장자를 사용하여 생성. 파일명.ts 3. TypeScript -> script 컴파일 3-1. 기본 컴파일 ts파일을 html파일에 붙혀서 사용하려면 스크립트 파일로 변환이 필요하다. 변환시 E..

React 는 각 기능의 컴포넌트를 각각 나눠서 사용해야 재사용성면 그리고 성능 면에서도 효율적이다. 이렇게 나누어진 컴포넌트를 랜더링 할때 변화된 부분만 새로 보여주는 역할을 할수 있도록 해주는것이 Memo 이다. 하지만 항상 사용해서 좋은 것은 아니기 때문에 성능 분석 후 필요시 사용하는 것이 좋다. React는 컴포넌트를 렌더링 한뒤 이전에 렌더링 된 결과와 비교화여 DOM 업데이트를 결정한다. 만약 렌데링 결과가 이전과 다르다면 DOM을 업데이트 한다. 이 과정에서 컴포넌트가 React.memo(컴포넌트)로 둘러쌓여 있다면, React는 컴포넌트를 렌더링하고 결과를 메모이징한다. 그다음 렌더링이 일어날때 렌더링하는 컴포넌트의 props가 같다면 React는 메모이징된 내용을 재사용한다. 매개 변수..

Router 페이지 불러오기 / 네비게이션 기능 1. 구조 셋팅 1-1. 라이브러리 설치 npm install react-router-dom react-router-dom : web 에서 사용 react-router-native : app 에서 사용 react-router : web / app 에서 사용 1-2. 폴더 경로 생성 컴포넌트 역할에 맞는 폴더 생성하여 분리하여 관리 src 폴더안에 컴포넌트 경로를 생성해준다. components : 기능 별 컴포넌트 routes : 라우터가 보여줄 화면 컴포넌트 2. 라이브러리 적용 2-1. BrowerRouter & HashRouter BrowerRouter html5 history API 를 활용해서 UI를 업데이트 동적인 페이지에 적합 새로고침 시 경로..