diff --git a/week03/.gitignore b/week03/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/week03/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/week03/README.md b/week03/README.md new file mode 100644 index 0000000..e69de29 diff --git a/week03/article/compare.md b/week03/article/compare.md new file mode 100644 index 0000000..ccb973b --- /dev/null +++ b/week03/article/compare.md @@ -0,0 +1,43 @@ +# React / Vue / Angular / Svelte를 비교해보자!! + +## React + +React는 페이스북이 개발한 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리. + +## Vue + +사용자 인터페이스를 만들기 위해 사용하는 오픝소스 프로그레시브 JavaScript 프레임워크. + +## Angular + +타입스크립트 기반 오픈소스 프론트엔드 웹 애플리케이션 프레임워크. + +## Svelte + +HTML 템플릿을 DOM을 직접 조작하는 특수 코드로 컴파일하는 무료 오픈소스 프론트엔드 컴파일러. + +## React/Vue/Angular/Svelte 의 차이점 + +가장 큰 차이점은 svelte는 DOM에 직적접으로 영향을 주면서 성능적인 측면에서 가장 월등하다. +![차이점](./image/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-11-03%20%EC%98%A4%EC%A0%84%2012.56.06.png) +//출처 : https://www.youtube.com/watch?v=DZyWNS4fVE0&t=302s + +# 스타트업을 창업한다고 할 때, 무슨 라이브러리/프레임워크를 사용해야 할까? + +## 최적의 JavaScript프레임워크or라이브러리 선택방법추천 + +- 조직 정책 측면 - '앱의 원하는 기능을 React로 달성할 수 없는 ㅡㅌㄱ별한 이유가 없는 한 React개발을 사용 +- 개발 자원의 가용성 - 사내에 Angular 전문가 or IT 아웃소싱 파트너에게 Vue.js팀이 있다면 해당 라이브러리/프레임워크를 추천 + +- 개발자 감성(가장 일반적) - 해당 프레임워크로 함께 개발자를 모집하고 유지할 수 있는 언어로 선택.(비용절감 측면도 기여가능.) + +//참고 : https://kruschecompany.com/ember-jquery-angular-react-vue-what-to-choose/ + +내생각 - 서비스 규모에 따라서 달라진다고 생각한다!! + +# 나는 왜 React를 배우고 있는가? + +1. 졸업작품 프로젝트 개발을 React로 시작했기 때문! +2. 다른 언어를 배우기에는 아직 부족한 개발실력. +3. 커뮤니티 활성화(인기도)가 제일 잘되어있는 라이브러리이기 때문! +4. 인기있는 언어인 만큼 안정성이 높다고 생각이 든다!(그만큼 계속해서 발전할 가능성이 있기때문!) diff --git a/week03/article/image/cssinjs.png b/week03/article/image/cssinjs.png new file mode 100644 index 0000000..cdc83d1 Binary files /dev/null and b/week03/article/image/cssinjs.png differ diff --git a/week03/article/image/image.png b/week03/article/image/image.png new file mode 100644 index 0000000..cbadf04 Binary files /dev/null and b/week03/article/image/image.png differ diff --git a/week03/article/image/images_bepyan_post_3d77564b-92a7-46c3-843c-325af34ef765_image.png b/week03/article/image/images_bepyan_post_3d77564b-92a7-46c3-843c-325af34ef765_image.png new file mode 100644 index 0000000..c18f768 Binary files /dev/null and b/week03/article/image/images_bepyan_post_3d77564b-92a7-46c3-843c-325af34ef765_image.png differ diff --git a/week03/article/image/images_bepyan_post_ce8b2326-f3a4-4834-935f-affb3e194a2b_image.png b/week03/article/image/images_bepyan_post_ce8b2326-f3a4-4834-935f-affb3e194a2b_image.png new file mode 100644 index 0000000..304b900 Binary files /dev/null and b/week03/article/image/images_bepyan_post_ce8b2326-f3a4-4834-935f-affb3e194a2b_image.png differ diff --git a/week03/article/image/web_component9.jpeg b/week03/article/image/web_component9.jpeg new file mode 100644 index 0000000..5aa9cb3 Binary files /dev/null and b/week03/article/image/web_component9.jpeg differ diff --git "a/week03/article/image/\353\213\244\354\232\264\353\241\234\353\223\234.png" "b/week03/article/image/\353\213\244\354\232\264\353\241\234\353\223\234.png" new file mode 100644 index 0000000..1aabccb Binary files /dev/null and "b/week03/article/image/\353\213\244\354\232\264\353\241\234\353\223\234.png" differ diff --git "a/week03/article/image/\354\210\230\354\232\224\352\267\270\353\236\230\355\224\204.png" "b/week03/article/image/\354\210\230\354\232\224\352\267\270\353\236\230\355\224\204.png" new file mode 100644 index 0000000..98f6bd7 Binary files /dev/null and "b/week03/article/image/\354\210\230\354\232\224\352\267\270\353\236\230\355\224\204.png" differ diff --git "a/week03/article/image/\354\212\244\355\201\254\353\246\260\354\203\267 2022-11-03 \354\230\244\354\240\204 12.56.06.png" "b/week03/article/image/\354\212\244\355\201\254\353\246\260\354\203\267 2022-11-03 \354\230\244\354\240\204 12.56.06.png" new file mode 100644 index 0000000..ea50a06 Binary files /dev/null and "b/week03/article/image/\354\212\244\355\201\254\353\246\260\354\203\267 2022-11-03 \354\230\244\354\240\204 12.56.06.png" differ diff --git "a/week03/article/image/\354\212\244\355\201\254\353\246\260\354\203\267 2022-11-03 \354\230\244\354\240\204 12.56.19.png" "b/week03/article/image/\354\212\244\355\201\254\353\246\260\354\203\267 2022-11-03 \354\230\244\354\240\204 12.56.19.png" new file mode 100644 index 0000000..e19ae0a Binary files /dev/null and "b/week03/article/image/\354\212\244\355\201\254\353\246\260\354\203\267 2022-11-03 \354\230\244\354\240\204 12.56.19.png" differ diff --git "a/week03/article/image/\354\212\244\355\201\254\353\246\260\354\203\267 2022-11-04 \354\230\244\355\233\204 4.17.10.png" "b/week03/article/image/\354\212\244\355\201\254\353\246\260\354\203\267 2022-11-04 \354\230\244\355\233\204 4.17.10.png" new file mode 100644 index 0000000..c67a776 Binary files /dev/null and "b/week03/article/image/\354\212\244\355\201\254\353\246\260\354\203\267 2022-11-04 \354\230\244\355\233\204 4.17.10.png" differ diff --git a/week03/article/styled.md b/week03/article/styled.md new file mode 100644 index 0000000..b0daf5e --- /dev/null +++ b/week03/article/styled.md @@ -0,0 +1,62 @@ +![로고](./image//%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C.png) + +# styled-components란 ? + +기존 DOM을 구성하는 방식인 CSS, SCSS 파일을 밖에 두고, 태그의 id나 class이름으로 스타일을 입히는 방식이 아닌 +컴포넌트내에서 컴포넌트처럼 선언하여 스타일을 지정하는 방식(CSS-inJS)의 라이브러리. + +### 외부 css파일을 통한 방식 + +``` +title{ + font-size: 15px; + color: white; +} +// .css +... +