✅ react vs react native 비교
react와 react native의 공통점
- javascript 언어이다. (typescript 지원)
- 비슷한 문법과 구조를 가진다.
- 컴포넌트 기반이며 JSX 문법을 사용한다.
- useEffect, useRef와 같은 Hook들의 사용법 유사하다.
- Virtual DOM 사용으로 어플리케이션의 성능이 좋다.
react와 react native의 차이점
✅ 웹 사이트 그리드 이해하기
무료 반응형웹 템플릿 사이트 모음
적응형 웹 vs 반응형 웹
반응형 웹
- Responsive Web
- Media Query
- Fluid Grid
- Liquid Layouts
- in React
- react-responsive
- useMediaQuery
창크기와 무관하게 사이트 크기 고정하기
- 범위를 div태그로 한번 감싸서 width를 주면 된다.
✅ jquery? javascript? jsp? jdk?
제이쿼리(jQuery)란
- 제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리이다.
- 웹페이지 상에서 엘리먼트(Element)를 쉽게 찾고 조작할 수 있다.
- 거의 모든 웹브라우저에 대응할 정도로 호환성이 좋다.
- 네트워크, 애니메이션 등 다양한 기능을 제공합니다.
- 메소드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원한다.
- 관련 플러그인들이 웹상에 공개되어 있으며 플러그인을 직접 구현하거나 확장할 수 있다.
- 공식 웹사이트(www.jquery.com)와 수많은 레퍼런스를 통해 쉽게 접근 가능하다.
제이쿼리의 인기가 낮아지는 원인
- 그동안 자바스크립트(JavaScript) 프레임워크와 라이브러리는 제이쿼리에 의존해왔다. 최근 들어 자바스크립트의 의존도가 눈에 띄게 하락하고 있다.
웹 표준 API의 확장
- 높은 기능성을 갖춘 웹 표준 API가 늘어나면서 제이쿼리의 입지가 약화하고 있다.
웹브라우저 환경의 변화
- 2008년 크롬(Chrome)이 등장하면서 브라우저 시장은 일대 변혁을 맞이했다.
- 윈도우, 맥(Mac), 리눅스(Linux) 등의 데스크톱 OS뿐만 아니라 안드로이드 등의 모바일 OS도 지원하는 크롬은 인터넷 익스플로러의 점유율을 빠르게 잠식했다.
가상 돔(Virtual DOM)을 사용하는 라이브러리의 등장
- 웹페이지는 브라우저상에서 돔(DOM, Document Object Model)이라는 표준 형식으로 파싱(Parsing)되어 표현된다.
- 동적으로 변화하는 대화형 웹(Interactive Web)을 구현하기 위해서는 돔 조작이 필수적입니다.
- 가상 돔을 사용하는 라이브러리가 많아질수록 돔을 직접 조작하는 제이쿼리의 필요성이 줄어든다.
JSP - 서버언어
- JSP는 HTML 내에서 직접 자바 코드를 삽입ㅎ여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에게 돌려주는 서버 측 웹 프로그래밍중 하나이다.
- 자바를 서버환경에서 사용하는 스크립트 방식의 언어이다.
- 단일 스레드로 클라이언트의 요청에 서비스한다.
- 요청이 있을 때마다 프로세스를 생성하는 기존의 CGI와는 달리 하나의 메모리를 공유하면서 서비스되는 원리로 서버측 부하를 줄여주며, JSP 내부에는 보여 주는 코드만 작성하고, 작업하는 부분은 자바 빈으로 구성하여 분리 할 수 있다.
✅ bootstrap vs tailwind vs styled-component 비교
- Bootstrap vs Tailwind CSS
- 둘 다 CSS프레임워크이지만 Bootstrap은 사전정의된 디자인 템플릿을 사용해서 편리하지만 사용자 정의된 스타일을 만들기에는 Tailwind CSS가 더 낫다.
- 미리 디자인이 정의되어 있는지 안되어 있는지 차이가 가장 크다.
- styled-components vs Tailwind CSS
- styled-components는 자바스크립트를 사용하여 사용자 정의 CSS를 작성할 수 있는 React CSS in JS 프레임워크이다.
- Tailwind CSS를 사용하면 클래스가 아닌 축약된 클래스를 사용하여 UI를 만들 수 있다.
- React에서 개발할 때에는 styled-components를 사용하는 것이 좋다.
- styled-components는 props를 넘겨서 디자인을 할 수 있고 만든 컴포넌트를 재사용할 수 있다.
- Tailwind CSS는 빠르고 간결하게 표현할 수 있다.
개발 기록장