diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Cache/b7/9606fb3afea5bd1609ed40b622142f1c98125abcfe89a76a661b0e8e343910 b/.jekyll-cache/Jekyll/Cache/Jekyll--Cache/b7/9606fb3afea5bd1609ed40b622142f1c98125abcfe89a76a661b0e8e343910 new file mode 100644 index 000000000..224b1bd73 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Cache/b7/9606fb3afea5bd1609ed40b622142f1c98125abcfe89a76a661b0e8e343910 @@ -0,0 +1,2 @@ +I" +{"source"=>"C:/Users/roehd/Desktop/newsilver1028.github.io", "destination"=>"C:/Users/roehd/Desktop/newsilver1028.github.io/_site", "collections_dir"=>"", "cache_dir"=>".jekyll-cache", "plugins_dir"=>"_plugins", "layouts_dir"=>"_layouts", "data_dir"=>"_data", "includes_dir"=>"_includes", "collections"=>{"posts"=>{"output"=>true, "permalink"=>"/blog/:title/"}}, "safe"=>false, "include"=>[".htaccess"], "exclude"=>["README.md", "Gemfile", "Gemfile.lock", "node_modules", "gulpfile.js", "package.json", "_site", "src", "vendor", "CNAME", "LICENSE", "Rakefile", "old", ".sass-cache", ".jekyll-cache", "gemfiles", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/"], "keep_files"=>[".git", ".svn"], "encoding"=>"utf-8", "markdown_ext"=>"markdown,mkdown,mkdn,mkd,md", "strict_front_matter"=>false, "show_drafts"=>nil, "limit_posts"=>0, "future"=>false, "unpublished"=>false, "whitelist"=>[], "plugins"=>[], "markdown"=>"kramdown", "highlighter"=>"rouge", "lsi"=>false, "excerpt_separator"=>"\n\n", "incremental"=>false, "detach"=>false, "port"=>"4000", "host"=>"127.0.0.1", "baseurl"=>"", "show_dir_listing"=>false, "permalink"=>"/blog/:title/", "paginate_path"=>"/blog/page:num/", "timezone"=>nil, "quiet"=>false, "verbose"=>false, "defaults"=>[{"scope"=>{"path"=>"", "type"=>"posts"}, "values"=>{"permalink"=>"/blog/:title/", "layout"=>"post", "author"=>nil}}], "liquid"=>{"error_mode"=>"warn", "strict_filters"=>false, "strict_variables"=>false}, "kramdown"=>{"auto_ids"=>true, "toc_levels"=>"1..6", "entity_output"=>"as_char", "smart_quotes"=>"lsquo,rsquo,ldquo,rdquo", "input"=>"GFM", "hard_wrap"=>false, "guess_lang"=>true, "footnote_nr"=>1, "show_warnings"=>false, "enable_coderay"=>false, "syntax_highlighter"=>"rouge", "syntax_highlighter_opts"=>{:default_lang=>"plaintext", :guess_lang=>true}, "coderay"=>{}}, "title"=>"GAEUN SHIN", "bio"=>"Web Developer", "description"=>"Frontend", "locale"=>"ko", "url"=>"", "disqus_shortname"=>"default", "analytics-id"=>"default", "twitter"=>"default", "facebook"=>"default", "instagram"=>"default", "github"=>"newsilver1028", "location"=>"인천 남동구 구월로 266번길 16", "phone"=>"010-3572-1964", "email"=>"newsilver1028@naver.com", "background_image"=>"/images/bg.jpg", "slapform_thankyou_page"=>"/thank-you", "mathjax"=>true, "sass"=>{"sass_dir"=>"_sass", "style"=>:compressed}, "gems"=>["jekyll-mentions", "jekyll-sitemap", "jekyll-feed", "jekyll-gist", "jekyll-paginate"], "paginate"=>6, "jekyll-mentions"=>{"base_url"=>"https://github.com"}, "livereload_port"=>35729, "serving"=>true, "watch"=>true}:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/18/2fdd0201ca7ede2e1cde1577ce4a7d696ea7a2a31cbb5727174754dca01ca5 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/18/2fdd0201ca7ede2e1cde1577ce4a7d696ea7a2a31cbb5727174754dca01ca5 new file mode 100644 index 000000000..07e237dd3 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/18/2fdd0201ca7ede2e1cde1577ce4a7d696ea7a2a31cbb5727174754dca01ca5 @@ -0,0 +1,19 @@ +I"�

About our Site

+ +

+ +

Making steady content and conveying it well takes a great deal of research and, hence, time and exertion. Building a profound established comprehension of your target customer needs is critical as your principle objective ought to be to fulfill their requirements as awesome content. You should need to enhance their lives. Having significant content like this may not be simple by any methods. Be that as it may, in any case, it’s a fundamental apparatus in the event that you expect to grow a fruitful and supportable business in the present web focused world.

+ +

Receiving the benefits of content is a certain something. Be that as it may, it’s so substantially less demanding once you begin conveying all the more successfully. The profitable content thought isn’t just about bragging your item’s capacities and general worth or your organization’s achievements. You should concentrate less on advertising how awesome your item is and rather concentrate on indicating how valuable it is. This is a client focused approach as it concentrates on their issues and your answer for them. Making yourself fundamental is critical.

+ +

Content is Imortant

+
+

+ In saying that, a one-measure fits-all approach won't do the trick with regards to content promoting. Rather, an emphasis on making remarkable, high caliber and totally genuine content that is engaging, helpful and fascinating for customers will get you the crown. From content, video and symbolism to infographics, studies, online courses and podcasts, whatever your favored content medium is, guarantee it is shareable and pertinent to your industry. +

+
+ +

+ +

On social media, we may share our own thoughts and advance our image notwithstanding spreading musings for different associations and affiliations. With such a critical number of associations with people and relationship on social media, our experience can be over-burden with a considerable measure of information.

+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/5d/673ffc6fe83ca84cb9d694b4433084e7579ca1e3a88ef17ba71d1b70002a49 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/5d/673ffc6fe83ca84cb9d694b4433084e7579ca1e3a88ef17ba71d1b70002a49 new file mode 100644 index 000000000..f39634fd9 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/5d/673ffc6fe83ca84cb9d694b4433084e7579ca1e3a88ef17ba71d1b70002a49 @@ -0,0 +1,2 @@ +I":
Vue.js 시작하기
+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/65/ab8584dbd05b32f489942bc6d9d99cd3727a113f8688e1357851c829aba1fb b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/65/ab8584dbd05b32f489942bc6d9d99cd3727a113f8688e1357851c829aba1fb new file mode 100644 index 000000000..8003564da --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/65/ab8584dbd05b32f489942bc6d9d99cd3727a113f8688e1357851c829aba1fb @@ -0,0 +1,94 @@ +I"W
Vue.js 시작하기
+ +
1. Vue.js란?
+ +
2. 개발환경 설정
+ +
3. Vue.js 애플리케이션 예제
+ +
+ +

1. Vue.js란?

+ +
Vue.js의 특징
+ + + +

MVVM 패턴

+ +
+ +

2. 개발환경 설정

+ +
    +
  1. Node.js 설치 : npm install -g npm
    2. +
  2. Visual Studio Code 설치
    3. +
  3. Vue.js devtools 설치
    4. +
  4. Vue-CLI 설치 : npm install -g yarn @vue/cli
    5. +
  5. 새 프로젝트 생성 : vue create [프로젝트 폴더명] / ‘Vue 프로젝트 매니저’ 이용
    6. +
+ +
+ +

3. Vue.js 애플리케이션 예제

+ +

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>hello vue.js</title>
+  <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
+</head>
+<body>
+  <div id="simple">
+    <h2></h2>
+  </div>
+  <script type="text/javascript">
+    var model = {
+      message : '첫번째 Vue.js 앱 입니다!'
+    };
+
+    var simple = new Vue({
+      el : '#simple',
+      data : model
+    })
+
+  </script>
+</body>
+</html>
+
+
+ +
+ +
실행결과
+ +

실행결과1

+ +
+ +

실행결과2

+ +
# Console에서 변수의 값을 직접 변경.
+ +
+ +
+

MVVM 구조는 생소했으나, 익숙해져서 실제 프로젝트에도 적용하게 되면 구조 수정도 용이해질 것이다.
+팀 프로젝트에는 MVC 구조를 사용했는데, Eclipse에서 수많은 패키지와 클래스를 수정하느라 번거로웠다.
+아직은 예제 작성밖에 못하고, 개념도 확실히 이해하지 못했지만, MVVM 구조에 익숙해지면 코드 수정에 할애하는 시간이 훨씬 단축될 것이다.

+
+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/93/520ad84cce18a525579938bbc176be465707017834fd3a735834d8b441c22d b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/93/520ad84cce18a525579938bbc176be465707017834fd3a735834d8b441c22d new file mode 100644 index 000000000..6682906ef --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/93/520ad84cce18a525579938bbc176be465707017834fd3a735834d8b441c22d @@ -0,0 +1,217 @@ +I"�o
Vue.js기초
+ +
1. hellovuejs 예제 분석
+ +
2. 기본 디렉티브
+ +
3. 반복 렌더링 디렉티브
+ +
4. 기타 디렉티브
+ +
5. 계산형 속성
+ +
6. 계산형 속성 예제
+ +
+ +

1. hellovuejs 예제 분석

+ +
hellovuejs 예제
+ +

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>02-01</title>
+</head>
+<body>
+  <div id="simple">
+    <h2></h2>
+  </div>
+  <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
+  <script type="text/javascript">
+    /* 모델(Model) 객체
+     * 데이터를 가지고있다.
+     */
+    var model = {
+      message : '첫번째 Vue.js 앱 입니다!'
+    };
+
+    /* Vue 객체이자 뷰모델(ViewModel) 객체
+     * 데이터(모델)가 변경되면 뷰모델 객체는 즉시 HTML요소(뷰)에 반영.
+     */
+    var simple = new Vue({
+      el : '#simple',                   // el : HTML요소(Element)
+      data : model                      // 모델 객체를 참조
+    })
+  </script>
+</body>
+</html>
+
+
+ +
+ +

2. 기본 디렉티브

+
단방향 디렉티브
+
// HTML 요소에서 값을 변경하더라도 모델 객체의 값이 바뀌지 않는다.
+ + + +
양방향 디렉티브
+ + +
v-show, v-if, v-else, v-else-if 디렉티브
+

// v-show와 v-if의 차이 : 실제 렌더링 여부

+ + +
+ +

3. 반복 렌더링 디렉티브

+ + +
<template> 태그
+

// 여러 요소의 그룹을 반복 렌더링

+ + +
+ +

4. 기타 디렉티브

+ + +
+ +

5. 계산형 속성

+
// 연산 로직이 필요한 경우
+ + +
+ +

6. 계산형 속성 예제

+
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>02-17</title>
+<style>
+    #list  { width: 400px; border:1px solid black; border-collapse:collapse; }
+    #list td, #list th { border:1px solid black;  text-align:center; }
+    #list > thead > tr { color:yellow; background-color: purple; }
+</style>
+<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
+</head>
+<body>
+    <div id="exmaple">
+    <p>
+    국가명 : <input type="text" :value="countryname" placeholder="국가명" @input="nameChanged" />
+    </p>
+	<table id="list">
+		<thead>
+			<tr>
+                <th>번호</th><th>국가명</th><th>수도</th><th>지역</th>
+            </tr>
+		</thead>
+		<tbody id="contacts">
+            <tr v-for="c in filtered">
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+            </tr>
+		</tbody>
+	</table>
+    </div>
+    <script type="text/javascript">
+	var model = {
+        countryname : "",
+        countries : [
+            { no:1,  name : "미국", capital : "워싱턴DC", region:"america" },
+            { no:2,  name : "프랑스", capital : "파리", region:"europe" },
+            { no:3,  name : "영국", capital : "런던", region:"europe" },
+            { no:4,  name : "중국", capital : "베이징", region:"asia" },
+            { no:5,  name : "태국", capital : "방콕", region:"asia" },
+            { no:6,  name : "모로코", capital : "라바트", region:"africa" },
+            { no:7,  name : "라오스", capital : "비엔티안", region:"asia" },
+            { no:8,  name : "베트남", capital : "하노이", region:"asia" },
+            { no:9,  name : "피지", capital : "수바", region:"oceania" },
+            { no:10,  name : "솔로몬 제도", capital : "호니아라", region:"oceania" },
+            { no:11,  name : "자메이카", capital : "킹스턴", region:"america" },
+            { no:12,  name : "나미비아", capital : "빈트후크", region:"africa" },
+            { no:13,  name : "동티모르", capital : "딜리", region:"asia" },
+            { no:14,  name : "멕시코", capital : "멕시코시티", region:"america" },
+            { no:15,  name : "베네수엘라", capital : "카라카스", region:"america" },
+            { no:16,  name : "서사모아", capital : "아피아", region:"oceania" }
+   	    ]
+    }
+
+    var clist = new Vue({
+        el : "#exmaple",
+        data : model,
+        computed : {
+            filtered : function() {
+                var cname = this.countryname.trim();
+                return this.countries.filter(function(item,index) {
+                    if (item.name.indexOf(cname) > -1) {
+                        return true;
+                    }
+                });
+            }
+        },
+        methods : {
+            nameChanged : function(e) {
+                this.countryname = e.target.value;
+            }
+        }
+    });
+    </script>
+</body>
+</html>
+
+ +
+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/c9/22f45a309c2195793b566aad0c3738320b00dbe41f2f12304b2bdfd1629431 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/c9/22f45a309c2195793b566aad0c3738320b00dbe41f2f12304b2bdfd1629431 new file mode 100644 index 000000000..7254d6dab --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/c9/22f45a309c2195793b566aad0c3738320b00dbe41f2f12304b2bdfd1629431 @@ -0,0 +1,2 @@ +I",
Vue.js기초
+:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e3/b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e3/b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 new file mode 100644 index 000000000..80ef94bd9 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e3/b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 @@ -0,0 +1,2 @@ +I" +:ET \ No newline at end of file diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e8/3bef819d5e496321d46f9cefcb0ba614a2df591bd240b4a12386c3bd236ee9 b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e8/3bef819d5e496321d46f9cefcb0ba614a2df591bd240b4a12386c3bd236ee9 new file mode 100644 index 000000000..b15228442 --- /dev/null +++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/e8/3bef819d5e496321d46f9cefcb0ba614a2df591bd240b4a12386c3bd236ee9 @@ -0,0 +1,5 @@ +I"�

Thank you for your correspondence

+

We are delighted to hear from you. You may expect to receive an answer soon.

+ +

Have a nice day!

+:ET \ No newline at end of file diff --git a/Gemfile b/Gemfile index fb87fa83f..7f1bd5aaf 100755 --- a/Gemfile +++ b/Gemfile @@ -1,6 +1,6 @@ source "https://rubygems.org" -gem "jekyll", "~> 3.2.1" +gem "jekyll", "~> 4.2.0" gem "jekyll-sitemap" gem "jekyll-gist" gem 'jekyll-mentions' diff --git a/Gemfile.lock b/Gemfile.lock index 1b98e6c07..11142d036 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,85 +1,119 @@ 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) + em-websocket (0.5.2) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0.6.0) + eventmachine (1.2.7) + eventmachine (1.2.7-x64-mingw32) + faraday (1.4.1) + faraday-excon (~> 1.1) + faraday-net_http (~> 1.0) + faraday-net_http_persistent (~> 1.1) multipart-post (>= 1.2, < 3) - ffi (1.10.0) + ruby2_keywords (>= 0.0.4) + faraday-excon (1.1.0) + faraday-net_http (1.0.1) + faraday-net_http_persistent (1.1.0) + 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) + http_parser.rb (0.6.0) + i18n (1.8.10) concurrent-ruby (~> 1.0) - jekyll (3.2.1) + jekyll (4.2.0) + addressable (~> 2.4) colorator (~> 1.0) - jekyll-sass-converter (~> 1.0) - jekyll-watch (~> 1.1) - kramdown (~> 1.3) - liquid (~> 3.0) - mercenary (~> 0.3.3) + em-websocket (~> 0.5) + i18n (~> 1.0) + jekyll-sass-converter (~> 2.0) + jekyll-watch (~> 2.0) + kramdown (~> 2.3) + kramdown-parser-gfm (~> 1.0) + liquid (~> 4.0) + mercenary (~> 0.4.0) pathutil (~> 0.9) - rouge (~> 1.7) + rouge (~> 3.0) safe_yaml (~> 1.0) - jekyll-feed (0.7.2) + terminal-table (~> 2.0) + jekyll-feed (0.15.1) + jekyll (>= 3.7, < 5.0) jekyll-gist (1.5.0) octokit (~> 4.2) - jekyll-mentions (1.4.1) + jekyll-mentions (1.6.0) html-pipeline (~> 2.3) - jekyll (~> 3.0) + jekyll (>= 3.7, < 5.0) jekyll-paginate (1.1.0) - jekyll-sass-converter (1.5.2) - sass (~> 3.4) - jekyll-sitemap (0.11.0) - addressable (~> 2.4.0) - jekyll-watch (1.5.1) + jekyll-sass-converter (2.1.0) + sassc (> 2.0.1, < 3.0) + jekyll-sitemap (1.4.0) + jekyll (>= 3.7, < 5.0) + jekyll-watch (2.2.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) - 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) + kramdown (2.3.1) + rexml + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + liquid (4.0.3) + listen (3.5.1) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + mercenary (0.4.0) + mini_portile2 (2.5.0) + minitest (5.14.4) + multipart-post (2.1.1) + nokogiri (1.11.3) + mini_portile2 (~> 2.5.0) + racc (~> 1.4) + nokogiri (1.11.3-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) - 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) + rexml (3.2.5) + rouge (3.26.0) + ruby2_keywords (0.0.4) + safe_yaml (1.0.5) + sassc (2.4.0) + ffi (~> 1.9) + sassc (2.4.0-x64-mingw32) + ffi (~> 1.9) + sawyer (0.8.2) + addressable (>= 2.3.5) + faraday (> 0.8, < 2.0) + terminal-table (2.0.0) + unicode-display_width (~> 1.1, >= 1.1.1) + tzinfo (2.0.4) + concurrent-ruby (~> 1.0) + unicode-display_width (1.7.0) + zeitwerk (2.4.2) PLATFORMS ruby + x64-mingw32 DEPENDENCIES - jekyll (~> 3.2.1) + jekyll (~> 4.2.0) jekyll-feed jekyll-gist jekyll-mentions diff --git a/_config.yml b/_config.yml index 97f10c5de..429d9b571 100755 --- a/_config.yml +++ b/_config.yml @@ -1,62 +1,62 @@ # 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 +url: https://newsilver1028.github.io/ # the base hostname & protocol for your site # Comments -disqus_shortname: default +disqus_shortname: default # Social -analytics-id: "default" -twitter: default -facebook: default -instagram: default -github: default +analytics-id: "default" +twitter: default +facebook: default +instagram: 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 +background_image: /images/bg.jpg # Tip: The color palette and other styles can be configured in /_sass/lib/_vars.scss slapform_thankyou_page: /thank-you defaults: -- scope: - path: '' - type: posts - values: - permalink: "/blog/:title/" - layout: post - author: + - scope: + path: "" + type: posts + values: + permalink: "/blog/:title/" + layout: post + author: # Jekyll -permalink: /blog/:title/ -markdown: kramdown -highlighter: rouge +permalink: /blog/:title/ +markdown: kramdown +highlighter: rouge kramdown: - auto_ids: true - footnote_nr: 1 - entity_output: as_char - toc_levels: 1..6 - enable_coderay: false -mathjax: true + auto_ids: true + footnote_nr: 1 + entity_output: as_char + toc_levels: 1..6 + enable_coderay: false +mathjax: true sass: - sass_dir: _sass - style: compressed + sass_dir: _sass + style: compressed # Gems gems: - - jekyll-mentions - - jekyll-sitemap - - jekyll-feed - - jekyll-gist - - jekyll-paginate + - jekyll-mentions + - jekyll-sitemap + - jekyll-feed + - jekyll-gist + - jekyll-paginate paginate: 6 paginate_path: "/blog/page:num/" 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/head.html b/_includes/head.html index 99f550d5e..5065b6b1e 100755 --- a/_includes/head.html +++ b/_includes/head.html @@ -4,9 +4,9 @@ {{ page.title }} - - - + + + diff --git a/_includes/nav.html b/_includes/nav.html index fb1c9e1d5..6aa1aef72 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..918e99ed9 --- /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..b5c172b30 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-01.markdown b/_posts/2021-04-05-Vue.js-01.markdown new file mode 100644 index 000000000..c62125d12 --- /dev/null +++ b/_posts/2021-04-05-Vue.js-01.markdown @@ -0,0 +1,96 @@ +--- +layout: post +title: Vue.js 1.시작하기 +date: 2021-04-05 13:35:20 +0200 +tags: +categories: Vue.js +--- + +##### Vue.js 시작하기 + +##### 1. Vue.js란? + +##### 2. 개발환경 설정 + +##### 3. Vue.js 애플리케이션 예제 + +--- + +#### 1. Vue.js란? + +##### Vue.js의 특징 + +- 유연하고 가볍다. + + (전체 아키텍처 새로 구성 X, 일부 UI화면만 적용) + +- React와 마찬가지로 가상 DOM을 지원하고 있다. (빠른 렌더링 속도 지원) + +- MVVM 패턴을 따르고 있다. + +![MVVM 패턴](/images/MVVM.png "MVVM 패턴"){: width="700"} + +--- + +#### 2. 개발환경 설정 + +1. Node.js 설치 : npm install -g npm +2. Visual Studio Code 설치 +3. Vue.js devtools 설치 +4. Vue-CLI 설치 : npm install -g yarn @vue/cli +5. 새 프로젝트 생성 : vue create [프로젝트 폴더명] / ‘Vue 프로젝트 매니저’ 이용 + +--- + +#### 3. Vue.js 애플리케이션 예제 + +~~~javascript + + + + + + hello vue.js + + + +
+

{{message}}

+
+ + + + +~~~ + +--- + +##### 실행결과 + +![실행결과1](/images/ch01.png){: width="880"} + +--- + +![실행결과2](/images/ch01-2.png){: width="880"} + +{% highlight markdown %} + +# Console에서 변수의 값을 직접 변경. + +{% endhighlight %} + +--- + +> MVVM 구조는 생소했으나, 익숙해져서 실제 프로젝트에도 적용하게 되면 구조 수정도 용이해질 것이다. +팀 프로젝트에는 MVC 구조를 사용했는데, Eclipse에서 수많은 패키지와 클래스를 수정하느라 번거로웠다. +아직은 예제 작성밖에 못하고, 개념도 확실히 이해하지 못했지만, MVVM 구조에 익숙해지면 코드 수정에 할애하는 시간이 훨씬 단축될 것이다. diff --git a/_posts/2021-04-06-Vue.js-02.markdown b/_posts/2021-04-06-Vue.js-02.markdown new file mode 100644 index 000000000..833dc16bd --- /dev/null +++ b/_posts/2021-04-06-Vue.js-02.markdown @@ -0,0 +1,214 @@ +--- +layout: post +title: Vue.js 2.Vue.js기초 +date: 2021-04-06 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)값 바인딩. + + +##### \