From 1f62a06050895a3b6a111d7316e7decd11555486 Mon Sep 17 00:00:00 2001 From: newsilver1028 Date: Mon, 12 Apr 2021 22:44:07 +0900 Subject: [PATCH 1/4] first commit --- Gemfile.lock | 77 ++++--- _config.yml | 16 +- _includes/foot.html | 3 - _includes/nav.html | 11 +- _layouts/blog.html | 21 +- _layouts/category.html | 158 +++++++++++++ _layouts/post.html | 10 +- ...1-welcome-to-massively-the-jekyll-theme.md | 28 --- _posts/2021-04-05-Vue.js-02.markdown | 212 ++++++++++++++++++ _posts/2021-04-06-Vue.js-01.markdown | 100 +++++++++ _sass/base/_typography.scss | 12 +- about.md | 2 +- assets/icon/favicon.ico | Bin 7406 -> 1150 bytes blog.md | 4 +- category.html | 164 ++++++++++++++ category/React.markdown | 4 + category/Vue.js.markdown | 4 + category/index.html | 164 ++++++++++++++ elements.html | 2 +- fonts/THEvanillabeanB.otf | Bin 0 -> 1846100 bytes fonts/THEvanillabeanM.otf | Bin 0 -> 1714316 bytes fonts/THEvanillabeanR.otf | Bin 0 -> 1699808 bytes images/1.jpg | Bin 0 -> 54420 bytes images/MVVM.png | Bin 0 -> 56188 bytes images/ch01-2.PNG | Bin 0 -> 54723 bytes images/ch01.PNG | Bin 0 -> 53502 bytes images/quote.png | Bin 0 -> 6063 bytes images/quote2.png | Bin 0 -> 4092 bytes images/reactlogo.png | Bin 0 -> 4537 bytes images/vuelogo.png | Bin 0 -> 7567 bytes index.html | 56 +++-- 31 files changed, 923 insertions(+), 125 deletions(-) create mode 100644 _layouts/category.html delete mode 100644 _posts/2017-10-31-welcome-to-massively-the-jekyll-theme.md create mode 100644 _posts/2021-04-05-Vue.js-02.markdown create mode 100644 _posts/2021-04-06-Vue.js-01.markdown create mode 100644 category.html create mode 100644 category/React.markdown create mode 100644 category/Vue.js.markdown create mode 100644 category/index.html create mode 100644 fonts/THEvanillabeanB.otf create mode 100644 fonts/THEvanillabeanM.otf create mode 100644 fonts/THEvanillabeanR.otf create mode 100644 images/1.jpg create mode 100644 images/MVVM.png create mode 100644 images/ch01-2.PNG create mode 100644 images/ch01.PNG create mode 100644 images/quote.png create mode 100644 images/quote2.png create mode 100644 images/reactlogo.png create mode 100644 images/vuelogo.png diff --git a/Gemfile.lock b/Gemfile.lock index 1b98e6c07..b89b4c0af 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,22 +1,28 @@ GEM remote: https://rubygems.org/ specs: - activesupport (5.2.2) + activesupport (6.1.3.1) concurrent-ruby (~> 1.0, >= 1.0.2) - i18n (>= 0.7, < 2) - minitest (~> 5.1) - tzinfo (~> 1.1) - addressable (2.4.0) + i18n (>= 1.6, < 2) + minitest (>= 5.1) + tzinfo (~> 2.0) + zeitwerk (~> 2.3) + addressable (2.7.0) + public_suffix (>= 2.0.2, < 5.0) colorator (1.1.0) - concurrent-ruby (1.1.4) - faraday (0.15.4) + concurrent-ruby (1.1.8) + faraday (1.3.0) + faraday-net_http (~> 1.0) multipart-post (>= 1.2, < 3) - ffi (1.10.0) + ruby2_keywords + faraday-net_http (1.0.1) + ffi (1.15.0) + ffi (1.15.0-x64-mingw32) forwardable-extended (2.6.0) - html-pipeline (2.10.0) + html-pipeline (2.14.0) activesupport (>= 2) nokogiri (>= 1.4) - i18n (1.5.2) + i18n (1.8.10) concurrent-ruby (~> 1.0) jekyll (3.2.1) colorator (~> 1.0) @@ -37,46 +43,51 @@ GEM jekyll-paginate (1.1.0) jekyll-sass-converter (1.5.2) sass (~> 3.4) - jekyll-sitemap (0.11.0) - addressable (~> 2.4.0) + jekyll-sitemap (0.10.0) jekyll-watch (1.5.1) listen (~> 3.0) kramdown (1.17.0) liquid (3.0.6) - listen (3.1.5) - rb-fsevent (~> 0.9, >= 0.9.4) - rb-inotify (~> 0.9, >= 0.9.7) - ruby_dep (~> 1.2) + listen (3.5.1) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) mercenary (0.3.6) - mini_portile2 (2.4.0) - minitest (5.11.3) - multipart-post (2.0.0) - nokogiri (1.10.1) - mini_portile2 (~> 2.4.0) - octokit (4.13.0) + mini_portile2 (2.5.0) + minitest (5.14.4) + multipart-post (2.1.1) + nokogiri (1.11.2) + mini_portile2 (~> 2.5.0) + racc (~> 1.4) + nokogiri (1.11.2-x64-mingw32) + racc (~> 1.4) + octokit (4.20.0) + faraday (>= 0.9) sawyer (~> 0.8.0, >= 0.5.3) pathutil (0.16.2) forwardable-extended (~> 2.6) - rb-fsevent (0.10.3) - rb-inotify (0.10.0) + public_suffix (4.0.6) + racc (1.5.2) + rb-fsevent (0.10.4) + rb-inotify (0.10.1) ffi (~> 1.0) rouge (1.11.1) - ruby_dep (1.5.0) - safe_yaml (1.0.4) - sass (3.7.3) + ruby2_keywords (0.0.4) + safe_yaml (1.0.5) + sass (3.7.4) sass-listen (~> 4.0.0) sass-listen (4.0.0) rb-fsevent (~> 0.9, >= 0.9.4) rb-inotify (~> 0.9, >= 0.9.7) - sawyer (0.8.1) - addressable (>= 2.3.5, < 2.6) - faraday (~> 0.8, < 1.0) - thread_safe (0.3.6) - tzinfo (1.2.5) - thread_safe (~> 0.1) + sawyer (0.8.2) + addressable (>= 2.3.5) + faraday (> 0.8, < 2.0) + tzinfo (2.0.4) + concurrent-ruby (~> 1.0) + zeitwerk (2.4.2) PLATFORMS ruby + x64-mingw32 DEPENDENCIES jekyll (~> 3.2.1) diff --git a/_config.yml b/_config.yml index 97f10c5de..3659d263f 100755 --- a/_config.yml +++ b/_config.yml @@ -1,8 +1,8 @@ # Site -title: Massively -bio: 'Jekyll version of the Massively theme by HTML5UP' -description: "Jekyll version of the Massively theme by HTML5UP" -locale: en_US +title: GAEUN SHIN +bio: "Web Developer" +description: "Frontend" +locale: ko baseurl: "" # the subpath of your site, e.g. /blog url: "" # the base hostname & protocol for your site @@ -14,12 +14,12 @@ analytics-id: "default" twitter: default facebook: default instagram: default -github: default +github: newsilver1028 # personal -location: Los Angeles, CA -phone: 310-318-5555 -email: info@default.com # change this to your email to receive free emails for your contact submissions via Slapform.com +location: 인천 남동구 구월로 266번길 16 +phone: 010-3572-1964 +email: newsilver1028@naver.com # change this to your email to receive free emails for your contact submissions via Slapform.com # Other background_image: /images/bg.jpg diff --git a/_includes/foot.html b/_includes/foot.html index c33293a1d..527cea292 100755 --- a/_includes/foot.html +++ b/_includes/foot.html @@ -35,9 +35,6 @@

Email

Social

diff --git a/_includes/nav.html b/_includes/nav.html index fb1c9e1d5..a1f1f3c84 100755 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -1,13 +1,12 @@ diff --git a/_layouts/blog.html b/_layouts/blog.html index ded35cc6e..b8bcbe241 100644 --- a/_layouts/blog.html +++ b/_layouts/blog.html @@ -25,30 +25,11 @@
- -
-
-

Importance of Blogs

-

Blogs are really pretty awesome things. For one, they are a means to continually provide fresh, - dynamic content to your users. Also, they help your site get indexed and build authority as they are essential for SEO! -

-
-

- Content fulfills the general population seeing your website and it likewise fulfills web indexes! Having solid content - influences your advertising to work a hell of a great deal simpler. Along these lines, the greatest bit of the promoting riddle is there. It's vital to thoroughly consider this technique before starting another crusade. This makes the whole content and advertising process more streamlined and will in the end enable your message to achieve your clients in a more effective manner. You ought not think little of the significance of giving yourself room. Having squirm room takes into consideration steady changes to your methodology en route. -

-

- At that point, rather than pushing something superfluous to your users, you can give them something that will stick. - You'll give them something they can identify with and be slanted to share with their companions and associates. Perhaps they'll even be slanted to work with you later on! - Having an advancement technique that is excessively unbending isn't astute on the grounds that there is no space for solid spontaneous creation. Having the capacity to change your advertising procedure will prompt more deals and arrangements. -

- -
{% for post in site.posts %} diff --git a/_layouts/category.html b/_layouts/category.html new file mode 100644 index 000000000..dca11a53e --- /dev/null +++ b/_layouts/category.html @@ -0,0 +1,158 @@ + + + + + + + +GAEUN SHIN -Category- githut.io + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ +
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
    +
    • +
+ +
+
+
+
+

Location

+

인천 남동구 구월로 266번길 16

+
+
+

Phone

+

010-3572-1964

+
+
+

Email

+

newsilver1028@naver.com

+
+
+

Social

+ +
+
+
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/_layouts/post.html b/_layouts/post.html index 30f9003d1..4fb419fcb 100755 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -6,6 +6,7 @@ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) --> + {% include head.html %} @@ -23,9 +24,11 @@ + +
@@ -38,7 +41,7 @@

{{page.title}}

{{content}}

-
+ +
--> + diff --git a/_posts/2017-10-31-welcome-to-massively-the-jekyll-theme.md b/_posts/2017-10-31-welcome-to-massively-the-jekyll-theme.md deleted file mode 100644 index dabd4dc87..000000000 --- a/_posts/2017-10-31-welcome-to-massively-the-jekyll-theme.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -layout: post -title: "Welcome to Massively: The Jekyll Theme!" -date: 2017-10-31 -excerpt: "Huge thanks to HTML5 UP for making this awesome template! Let's see what it can do" -image: "/images/pic02.jpg" ---- - -## How to Use This Theme -Just go ahead and read up on [how to install Jekyll](https://jekyllrb.com/). It's not too hard I promise! - -Download this repository [here](https://github.com/iwiedenm/jekyll-theme-massively) and save it to any folder you want. - -Open a terminal window or a command line and ```cd``` to that location. - -Then enter: ```bundle exec jekyll serve```. You can now access your new Jekyll site from [http://127.0.0.1:4000/](http://127.0.0.1:4000/). Have fun exploring your new site! - -## Features -### Auto-Generating Sitemap -The sitemap is auto generated! Just simply change the front matter of each site. It looks like so... -``` -sitemap: - priority: 0.7 - lastmod: 2017-11-02 - changefreq: weekly -``` -### Formspring integration -The contact form below each page on the footer actually collects information! Just change your email address in the ```_config.yml``` file! diff --git a/_posts/2021-04-05-Vue.js-02.markdown b/_posts/2021-04-05-Vue.js-02.markdown new file mode 100644 index 000000000..f600f4237 --- /dev/null +++ b/_posts/2021-04-05-Vue.js-02.markdown @@ -0,0 +1,212 @@ +--- +layout: post +title: Vue.js 2.Vue.js기초 +date: 2021-04-05 13:35:20 +0200 +tags: +categories: Vue.js +--- + +##### Vue.js기초 + +##### 1. hellovuejs 예제 분석 + +##### 2. 기본 디렉티브 + +##### 3. 반복 렌더링 디렉티브 + +##### 4. 기타 디렉티브 + +##### 5. 계산형 속성 + +##### 6. 계산형 속성 예제 + +--- + +#### 1. hellovuejs 예제 분석 + +##### hellovuejs 예제 + +```javascript + + + + + + 02-01 + + +
+

{{message}}

+
+ + + + + +``` + +--- + +#### 2. 기본 디렉티브 +##### 단방향 디렉티브 +###### // HTML 요소에서 값을 변경하더라도 모델 객체의 값이 바뀌지 않는다. + +- v-text : innerText 속성에 연결됨. 태그 문자열을 HTML 인코딩하여 나타내기 때문에 화면에는 태그 문자열이 그대로 나타남. +- v-html : innterHTML 속성에 연결됨. 태그 문자열을 파싱하여 화면에 나타냄. +// v-html 디렉티브는 XSS(Cross Site Scripting) 공격에 취약. 꼭 필요한 경우가 아니라면 v-text를 사용하는 것이 안전. +- v-bind : 요소 객체들의 속성들을 바인딩하기 위해 사용. +// v-bind 생략가능. ex) v-bind:src → :src + + + +##### 양방향 디렉티브 +- v-model : 요소에서 변경한 값이 모델 객체에 반영. + + lazy : 입력폼에서 이벤트가 발생할 때 입력한 값을 데이터와 동기화. + + number : 숫자가 입력될 경우 number 타입으로 자동 형변환. + + trim : 문자열 앞뒤 공백 자동 제거. + + + +##### v-show, v-if, v-else, v-else-if 디렉티브 +// v-show와 v-if의 차이 : 실제 렌더링 여부 +- v-show : HTML요소를 렌더링 후 display 스타일 속성으로 화면에 보여줄지 여부를 결정. +- v-if : 조건에 부합되지 않으면 렌더링 X. +- v-else-if : 자바스크립트, C언어, 자바에서 사용하는 if ~ else if ~ else 구문와 동일한 기능. + +--- + +#### 3. 반복 렌더링 디렉티브 +- v-for : 자바스크립트 언어의 for문과 유사. + // 원본데이터 형식에 따라 사용 방법이 달라짐. + - 배열 or 유사 배열 : v-for="[배열 데이터] in [배열 이름]" + - 객체(해시맵 구조) : v-for="(val , key) in [배열 이름] + + // v-for로 렌더링한 배열 데이터의 순서가 변경되면 기존 DOM 요소의 데이터를 변경. + // DOM 요소를 추척하여 DOM 요소의 위치를 직접 변경 → DOM 요소에 key 특성(Attribute) 부여. + // v-bind 디렉티브를 이용해 key 특성에 고유한 값 부여. + // DB를 조회하여 얻어낸 결과를 렌더링 → key 특성에 기본기(Primary key)값 바인딩. + + +##### \