IN-SOPT-WEB · myeongheonhong · Oct 15, 2022 · Oct 21, 2022 · Oct 27, 2022 · Nov 3, 2022
diff --git a/week03/.gitignore b/week03/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/week03/README.md b/week03/README.md
diff --git a/week03/article/compare.md 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
diff --git a/week03/article/image/image.png b/week03/article/image/image.png
diff --git a/...article/image/images_bepyan_post_3d77564b-92a7-46c3-843c-325af34ef765_image.png b/...article/image/images_bepyan_post_3d77564b-92a7-46c3-843c-325af34ef765_image.png
diff --git a/...article/image/images_bepyan_post_ce8b2326-f3a4-4834-935f-affb3e194a2b_image.png b/...article/image/images_bepyan_post_ce8b2326-f3a4-4834-935f-affb3e194a2b_image.png
diff --git a/week03/article/image/web_component9.jpeg b/week03/article/image/web_component9.jpeg
diff --git a/week03/article/image/다운로드.png b/week03/article/image/다운로드.png
diff --git a/week03/article/image/수요그래프.png b/week03/article/image/수요그래프.png
diff --git a/week03/article/image/스크린샷 2022-11-03 오전 12.56.06.png b/week03/article/image/스크린샷 2022-11-03 오전 12.56.06.png
diff --git a/week03/article/image/스크린샷 2022-11-03 오전 12.56.19.png b/week03/article/image/스크린샷 2022-11-03 오전 12.56.19.png
diff --git a/week03/article/image/스크린샷 2022-11-04 오후 4.17.10.png b/week03/article/image/스크린샷 2022-11-04 오후 4.17.10.png
diff --git a/week03/article/styled.md 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
+...
+<h1 class="title>Hello World</h1>
+//index.html
+```
+
+### styled-components 방식
+
+```
+import styled form "styled-components";
+
+const Title = style.h1`
+  font-size: 15px;
+  color: white;
+`;
+
+<Title>Hello World</Title>
+//Title.jsx
+```
+
+# styled-components 장/단점
+
+## styled-components를 사용하는 이유(장점)
+
+-   css모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하는 모듈성.
+-   짧은 길이의 유니크한 클래스를 자동으로 생성하는 코드 경량화.
+-   CSS-in-JS 는 JavaScript 환경을 최대한 활용.
+
+## styled-components 단점
+
+-   CSS-in-CSS 에 비해 느린 속도.
+-   별도의 라이브러리 설치에 따른 번들 크기 증대.
+-   코드량 증가.
+
+# styled-components 외에는 ?
+
+![이미지](./image/cssinjs.png)
+Jss, Emotion, Aphrodite, Radium ,Styletron ...등 여러가지 라이브러리가 존재한다.
+
+## Library 사용 트렌드
+
+![이미지](./image/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-11-04%20%EC%98%A4%ED%9B%84%204.17.10.png)
+인기는 styled-component가 제일 높음!!!
+
+# 나의 원픽 스타일링 라이브러리는 ??!!
+
+정말 솔직하게 말한다면 아직까지 뭐가 좋은지 모른다.. 이론적으로만 좋은점을 알겠지 실제로 리액트로 개발을 하는 것이 이번이 처음이라 어떤것이 좋은것인지 모르겠다.
+그런데 이번에 styled-componet를 사용해보면서 처음에는 어색했지만 사용하다보니 꽤 편리하게 적용할 수 있을거 같다는 생각이 들었다.