diff --git a/.gitignore b/.gitignore index 8312df086d..48d941d282 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +.jekyll-cache _site .DS_Store *.swp diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000000..b3ca0fc69b --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,99 @@ +# CONTRIBUTING + +## 블로그 포스트를 작성할 사람 + +1. 사전 설정 + + 1. 이 repository를 본인의 계정으로 fork해주세요! 저장소 우측 상단에 fork 버튼이 있습니다. + + 2. fork한 repository를 본인의 컴퓨터로 clone하세요 + + 3. (선택) 포스트 작성을 위한 별도의 브랜치를 생성하세요 + + ```bash + ex) git checkout -b post/leemir + ``` + +2. 블로그 포스트 작성하기 + + 1. `_posts` 폴더에 포스트를 markdown형식으로 작성해주세요. + 2. 포스트 상단의 속성을 설정해주세요. (영어로 된 부분은 그대로 두고 한글 부분을 변경하시면 됩니다! 이해가 안가시면 다른 분들의 포스트를 참고해주세요.) + * `layout: post` + * `title: 포스트 제목` + * `authors: [작성자명]` + * `tags: [태그1, 태그2, 태그3]` + * `image: 포스트 커버 이미지` + * `featured: true` + 3. 포스트 작성 중, 이미지에 캡션 달기 + 1. 다음과 같이 작성해주세요(띄어쓰기 주의) + + ```markdown + ![image](../assets/images/xxxx/xxxx) + *캡션으로 달고 싶은 메시지* + ``` + + 4. VS Code 확장(`Ctrl`+`Shift`+`x`)에서 `markdownlint`를 설치해 규칙에 맞게 작성했는지 확인해주세요. + +3. 원격 저장소로 push + + * 처음에 fork했던 본인의 원격 저장소로 push합니다. 별도의 설정을 안했다면 `origin`으로 되어있습니다. + + ```bash + ex) git push origin [브랜치 이름] + ``` + +4. PR을 작성해주세요! + + * ***이 레포지토리의 master 브랜치로 Pull Request를 날려주세요!*** + * (주의) 상위 레포지토리인 [wowthemesnet](https://github.com/wowthemesnet)/**mediumish-theme-jekyll** 로 날리시면 큰일납니다. + * PR이 블로그팀에 의해 merge되기 전까지는 브랜치를 따로 옮겨서 작업하지 않는 이상 `push`만 하면 알아서 현재 PR에 추가되니, 블로그팀이 수정 요청을 할 경우 수정 내용을 `commit` 후, `push`까지 해주시면 됩니다. + +5. 동기화해주세요! + + * fork한 지 오래됐다면 PR을 날릴 때 conflict가 일어날 가능성이 높습니다. 항상 포스트를 작성하기 전에는 pull 받아주세요! + + ```bash + ex) git pull upstream master + + (만약, git remote -v를 입력했는데 upstream이 없다면 아래 명령어를 입력해주세요) + + git remote add -t master upstream https://github.com/GDSC-University-of-Seoul/gdsc-university-of-seoul.github.io.git + ``` + + ​ + +## 블로그 포스팅 수식 사용하는 방법 +md파일 작성 시 use_math:true를 추가해주세요! + +[수식 참고 사이트](https://ko.wikipedia.org/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:TeX_%EB%AC%B8%EB%B2%95#%EA%B5%AC%EB%B3%84_%EB%B6%80%ED%98%B8) + +``` +--- +layout: post +title: 포스팅 제목 +authors: [github 아이디] +tags: +image: +featured: true +use_math: true +--- + +``` + +## 블로그 author 추가하는 방법(블로그팀만) + +1. `_data` 폴더에 `author.yml`을 수정해주세요. + 1. author 속성은 다음과 같습니다. + + ```markdown + [닉네임]: + name: [이름] + display_name: [표시되는 이름] + email: [본인 이메일] + github: [Github 닉네임] + role: [역할, lead || core || normal ] + member: [현재 활동 여부 boolean] + alumni: [alumni 여부 boolean] + blog_team: [블로그 팀 테두리 입히기] + web: [블로그 주소(선택)] + ``` diff --git a/Component Design Pattern.PNG b/Component Design Pattern.PNG new file mode 100644 index 0000000000..9a41b4a2c7 Binary files /dev/null and b/Component Design Pattern.PNG differ diff --git a/Gemfile b/Gemfile deleted file mode 100644 index b8073827f0..0000000000 --- a/Gemfile +++ /dev/null @@ -1,20 +0,0 @@ -source "https://rubygems.org" - -# Hello! This is where you manage which Jekyll version is used to run. -# When you want to use a different version, change it below, save the -# file and run `bundle install`. Run Jekyll with `bundle exec`, like so: -# -# bundle exec jekyll serve -# - -# If you have any plugins, put them here! -gem 'wdm', '>= 0.1.0' if Gem.win_platform? -group :jekyll_plugins do - gem 'jekyll-feed' - gem 'jekyll-sitemap' - gem 'jekyll-paginate' - gem 'jekyll-seo-tag' - gem 'jekyll-archives' - gem 'kramdown' - gem 'rouge' -end diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index 52ff7c4619..0000000000 --- a/Gemfile.lock +++ /dev/null @@ -1,81 +0,0 @@ -GEM - remote: https://rubygems.org/ - specs: - addressable (2.6.0) - public_suffix (>= 2.0.2, < 4.0) - colorator (1.1.0) - concurrent-ruby (1.1.4) - em-websocket (0.5.1) - eventmachine (>= 0.12.9) - http_parser.rb (~> 0.6.0) - eventmachine (1.2.7) - eventmachine (1.2.7-x64-mingw32) - ffi (1.10.0) - ffi (1.10.0-x64-mingw32) - forwardable-extended (2.6.0) - http_parser.rb (0.6.0) - i18n (0.9.5) - concurrent-ruby (~> 1.0) - jekyll (3.8.5) - addressable (~> 2.4) - colorator (~> 1.0) - em-websocket (~> 0.5) - i18n (~> 0.7) - jekyll-sass-converter (~> 1.0) - jekyll-watch (~> 2.0) - kramdown (~> 1.14) - liquid (~> 4.0) - mercenary (~> 0.3.3) - pathutil (~> 0.9) - rouge (>= 1.7, < 4) - safe_yaml (~> 1.0) - jekyll-archives (2.1.1) - jekyll (>= 2.4) - jekyll-feed (0.11.0) - jekyll (~> 3.3) - jekyll-paginate (1.1.0) - jekyll-sass-converter (1.5.2) - sass (~> 3.4) - jekyll-seo-tag (2.5.0) - jekyll (~> 3.3) - jekyll-sitemap (1.2.0) - jekyll (~> 3.3) - jekyll-watch (2.1.2) - listen (~> 3.0) - kramdown (1.17.0) - liquid (4.0.1) - 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) - pathutil (0.16.2) - forwardable-extended (~> 2.6) - public_suffix (3.0.3) - rb-fsevent (0.10.3) - rb-inotify (0.10.0) - ffi (~> 1.0) - rouge (3.3.0) - ruby_dep (1.5.0) - safe_yaml (1.0.5) - 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) - -PLATFORMS - ruby - x64-mingw32 - -DEPENDENCIES - jekyll-archives - jekyll-feed - jekyll-paginate - jekyll-seo-tag - jekyll-sitemap - kramdown - rouge - -BUNDLED WITH - 2.0.1 diff --git a/LICENSE.txt b/LICENSE.txt deleted file mode 100644 index 61f4e6478d..0000000000 --- a/LICENSE.txt +++ /dev/null @@ -1,8 +0,0 @@ -Copyright (c) 2019 WowThemes.net -License: MIT - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md index a1ff70173f..c570f4d7dd 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,46 @@ -# Mediumish - Jekyll Theme +# GDSC UOS TEAM BLOG -[Live Demo](https://wowthemesnet.github.io/mediumish-theme-jekyll/)   |   [Download](https://github.com/wowthemesnet/mediumish-theme-jekyll/archive/master.zip)   |   [Documentation](https://bootstrapstarter.com/bootstrap-templates/template-mediumish-bootstrap-jekyll/)   |   [Buy me a coffee](https://www.wowthemes.net/donate/) +GDSC UOS에서 자체 운영하는 팀 블로그입니다! -![mediumish](assets/images/mediumish-jekyll-template.png) +:point_right: [Link](https://gdsc-university-of-seoul.github.io/) +
-### Copyright +포스팅 PR을 하러 오셨다면 `CONTRIBUTING.md`를 참고해주세요! -Copyright (C) 2019 Sal, https://www.wowthemes.net +:point_right: [Link](https://github.com/GDSC-University-of-Seoul/gdsc-university-of-seoul.github.io/blob/master/CONTRIBUTING.md) -**Mediumish for Jekyll** is designed and developed by [Sal](https://www.wowthemes.net) and it is *free* under MIT license. +## Stacks -Buy Me A Coffee +
+ + + + + + + + + + + + +
-### Contribute +## Contributors -1. [Fork the repo](https://github.com/wowthemesnet/mediumish-theme-jekyll). -2. Clone a copy of your fork on your local -3. Create a branch off of master and give it a meaningful name (e.g. my-new-mediumish-feature). -4. Make necessary changes, commit, push and open a pull request on GitHub. +### 20 F/W -Thank you! +[Ukjae Jeong(Jay)](https://github.com/jeongukjae)|[Enoch Kim](https://github.com/Enoch-Kim)|[MOBUMIN](https://github.com/MOBUMIN)|[Minsik Choi](https://github.com/min6choi) +|:---:|:---:|:---:|:---:| +||| + +### 21 S/S + +[Ukjae Jeong(Jay)](https://github.com/jeongukjae)|[Enoch Kim](https://github.com/Enoch-Kim)|[MOBUMIN](https://github.com/MOBUMIN)|[Minsik Choi](https://github.com/min6choi)| +|:---:|:---:|:---:|:---:| +||| +[**LeeMir**](https://github.com/LeeMir)|[**hyehyeonmoon**](https://github.com/hyehyeonmoon)|[**yuniwisdom**](https://github.com/yuniwisdom) +||| + +### 21 F/W diff --git a/_config.yml b/_config.yml index 8f192fabcd..3ea60687b5 100644 --- a/_config.yml +++ b/_config.yml @@ -1,59 +1,28 @@ # Site -name: "Mediumish" -title: "Mediumish" -description: "Jekyll template, Medium styled, free for bloggers." -logo: 'assets/images/logo.png' -favicon: 'assets/images/logo.png' -baseurl: /mediumish-theme-jekyll -google_analytics: 'UA-46278016-1' -disqus: 'demowebsite' -mailchimp-list: 'https://wowthemes.us11.list-manage.com/subscribe/post?u=8aeb20a530e124561927d3bd8&id=8c3d2d214b' +name: "GDSC UOS" +description: "GDSC UOS 블로그입니다." + +baseurl: include: ["_pages"] permalink: /:title/ -# Authors -authors: - sal: - name: Sal - display_name: Sal - gravatar: e56154546cf4be74e393c62d1ae9f9d4 - email: wowthemesnet@gmail.com - web: https://www.wowthemes.net - twitter: https://twitter.com/wowthemesnet - description: "Author of Mediumish, a Bootstrap Medium styled template available for WordPress, HTML, Ghost and Jekyll. You are currently previewing Jekyll template demo." - john: - name: John - display_name: John - avatar: 'assets/images/avatar.png' - gravatar: b1cc14991db7a456fcd761680bbc8f81 - email: wowthemesnet@gmail.com - web: https://www.wowthemes.net - twitter: https://twitter.com/wowthemesnet - description: "This is the author box. Write a short description of the author here. You are currently previewing Mediumish demo, a Jekyll template compatible with Github pages." +logo: 'assets/images/dsclogo.png' +full_logo: 'assets/images/dsc_full_logo.png' +google_analytics: 'UA-179269963-1' +disqus: 'dscuos' # Plugins plugins: - jekyll-paginate - jekyll-sitemap - jekyll-feed - - jekyll-seo-tag - - jekyll-archives - -# Archives -jekyll-archives: - enabled: - - categories - layout: archive - permalinks: - category: '/category/:name/' - -# Pagination -paginate: 6 + +# Pagination +paginate: 12 paginate_path: /page:num/ - + # Other markdown: kramdown - kramdown: input: GFM syntax_highlighter: rouge @@ -61,12 +30,19 @@ kramdown: block: line_numbers: true -# Adsense (change to "enabled" to activate, also your client id and ad slot. Create a new ad unit from your Adsense account to get the slot.) -adsense: "disabled" -adsense-data-ad-client: "ca-pub-3412143450191416" -adsense-data-ad-slot: "1363087678" - # Lazy Images ("enabled" or "disabled") lazyimages: "disabled" -exclude: [changelog.md, LICENSE.txt, README.md, Gemfile, Gemfile.lock] +exclude: + - Gemfile + - Gemfile.lock + - .vscode + - .git + - .gitignore + - .DS_Store + - CONTRIBUTING.md + +# MathJax +lsi: false +excerpt_separator: "\n\n" +incremental: false \ No newline at end of file diff --git a/_data/author.yml b/_data/author.yml new file mode 100644 index 0000000000..331b1141f8 --- /dev/null +++ b/_data/author.yml @@ -0,0 +1,685 @@ +# 2020 F/W ~ 2021 S/S Alumni + +hojunee: + name: 이호준 + display_name: 호준 + email: relativity1915@gmail.com + github: hojunee + role: lead + member: false + alumni: true + web: +Enoch-Kim: + name: 김유현 + display_name: 유현 + email: enochkim1220@gmail.com + github: Enoch-Kim + role: core + member: false + alumni: true + blog_team: true + web: +MOBUMIN: + name: 김수빈 + display_name: 수빈 + email: kiju23@naver.com + github: MOBUMIN + role: core + member: false + alumni: true + blog_team: true + web: +r4k0nb4k0n: + name: 최형진 + display_name: 형진 + email: chj6097@gmail.com + github: r4k0nb4k0n + role: core + member: false + alumni: true + web: https://r4k0nb4k0n.github.io/ +gusrb3164: + name: 김현규 + display_name: 현규 + email: gusrb3164@gmail.com + github: gusrb3164 + role: core + member: false + alumni: true + web: https://gusrb3164.github.io +min6choi: + name: 최민식 + display_name: 민식 + email: minsik617@gmail.com + github: min6choi + role: core + member: false + alumni: true + blog_team: true + web: +easter: + name: 이승현 + display_name: 승현 + email: easter3163@gmail.com + github: lsh3163 + role: core + member: false + alumni: true + web: +handal95: + name: 한상일 + display_name: 상일 + email: handal0131@gmail.com + github: handal95 + role: core + member: false + alumni: true + web: +edit8080: + name: 이태희 + display_name: 태희 + email: leetaehee0205@gmail.com + github: edit8080 + role: core + member: false + alumni: true + web: +jeongukjae: + name: 정욱재 + display_name: 욱재 + email: jeongukjae@gmail.com + github: jeongukjae + role: normal + member: false + alumni: true + blog_team: true + web: +hye1ng: + name: 박혜인 + display_name: 혜인 + email: hye1ng@gmail.com + github: Hye1ng + role: normal + member: false + alumni: false + web: +howtolivelikehuman: + name: 엄현식 + display_name: 현식 + email: yoich_@naver.com + github: howtolivelikehuman + role: normal + member: false + alumni: true + web: https://howtolivelikehuman.tistory.com/ +hoyeon94: + name: 임호연 + display_name: 호연 + email: hoyeon351@gmail.com + github: hoyeon94 + role: normal + member: false + alumni: true + web: +maybeluna: + name: 김수빈 + display_name: 수빈 + email: ksb981703@gmail.com + github: maybeluna + role: normal + member: false + alumni: true + web: +lsh110600: + name: 이상헌 + display_name: 상헌 + email: lsh110600@naver.com + github: lsh110600 + role: normal + member: false + alumni: true + web: +GoonLee: + name: 이근희 + display_name: 근희 + email: auteur.kor@gmail.com + github: GoonLee + role: normal + member: false + alumni: true + web: +koreanhole: + name: 권순형 + display_name: 순형 + email: koreanhole1@gmail.com + github: koreanhole + role: normal + member: false + alumni: true + web: +coloryourlife: + name: 황제홍 + display_name: 제홍 + email: 95chris0319@gmail.com + github: coloryourlife + role: normal + member: false + alumni: true + web: +zeze1004: + name: 김소정 + display_name: 소정 + email: whoiszeze1004@gmail.com + github: zeze1004 + role: normal + member: false + alumni: false + web: +leegwae: + name: 이준영 + display_name: 준영 + email: leegwae@gmail.com + github: leegwae + role: normal + member: false + alumni: false + web: +KoDaHyeon: + name: 고다현 + display_name: 다현 + email: ekgusdl__@naver.com + github: KoDaHyeon + role: normal + member: false + alumni: false + web: +presentnine: + name: 김현구 + display_name: 현구 + email: presentnine@naver.com + github: presentnine + role: normal + member: false + alumni: true + web: https://presentnine.tistory.com +sally0226: + name: 김바다 + display_name: 바다 + email: sally734595@gmail.com + github: sally0226 + role: normal + member: false + alumni: false + web: https://bba-dda.tistory.com +yuniwisdom: + name: 최윤지 + display_name: 윤지 + email: dbswlchl66@gmail.com + github: yuniwisdom + role: normal + member: false + alumni: false + blog_team: true + web: +sejkimm: + name: 김승종 + display_name: 승종 + email: sjkhalladay@gmail.com + github: sejkimm + role: normal + member: false + alumni: false + web: +keepproceeding: + name: 오원진 + display_name: 원진 + email: jason7655@naver.com + github: keepproceeding + role: normal + member: false + alumni: true + web: https://keepproceeding.github.io +kir3i: + name: 유시온 + display_name: 시온 + email: kirei7091@gmail.com + github: kir3i + role: normal + member: false + alumni: true + web: https://velog.io/@kir3i +owao: + name: 염정윤 + display_name: 정윤 + email: kori0423@naver.com + github: owao + role: normal + member: false + alumni: true + web: +aerojohn1223: + name: 황보겸 + display_name: 겸 + email: johnhwangbo17@gmail.com + github: aerojohn1223 + role: normal + member: false + alumni: true + web: + +# - - - - - - - - - - - + +# 2021 F/W ~ 2022 S/S Alumni + +sheele41: + name: 석종규 + display_name: 종규 + email: mevius1718@gmail.com + github: SHEELE41 + role: lead + member: false + alumni: true + web: https://oasisfores.com +suin0730: + name: 곽수인 + display_name: 수인 + email: ei654029@gmail.com + github: suin0730 + role: core + member: false + alumni: true + web: https://suintodev.tistory.com +LeeMir: + name: 이명재 + display_name: 명재 + email: manofgodmj@gmail.com + github: LeeMir + role: core + member: false + alumni: true + blog_team: true + web: https://leemir.github.io +happiesoo41: + name: 김수연 + display_name: 수연 + email: happiesoo41@gmail.com + github: happiesoo41 + role: core + member: false + alumni: true + web: +YubeenSon: + name: 손유빈 + display_name: 유빈 + email: s49451392@gmail.com + github: YubeenSon + role: core + member: false + alumni: true + web: +kstew16: + name: 태은우 + display_name: 은우 + email: kstew9916@gmail.com + github: kstew16 + role: core + member: false + alumni: true + web: +rxdcxdrnine: + name: 강창구 + display_name: 창구 + email: rkckr1@naver.com + github: rxdcxdrnine + role: normal + member: false + alumni: true + web: +hyehyeonmoon: + name: 문혜현 + display_name: 혜현 + email: angelfox4@naver.com + github: hyehyeonmoon + role: normal + member: false + alumni: true + blog_team: true + web: +solbat: + name: 김민중 + display_name: 민중 + email: kimminjun9@naver.com + github: solbat + role: normal + member: false + alumni: true + web: +0inhae0: + name: 서인해 + display_name: 인해 + email: 0inha0@gmail.com + github: 0inhae0 + role: normal + member: false + alumni: true + web: +jminie-o8o: + name: 정현우 + display_name: 현우 + email: jminie@naver.com + github: jminie-o8o + role: normal + member: false + alumni: true + web: +qf9ar8nv: + name: 차현철 + display_name: 현철 + email: ckguscjf0@gmail.com + github: qf9ar8nv + role: normal + member: false + alumni: true + web: https://velog.io/@qf9ar8nv + +# - - - - - - - - - - - + +# GDSC Lead + +iju1633: + name: 임재욱 + display_name: 재욱 + email: iju1633@gmail.com + github: iju1633 + role: lead + member: true + alumni: false + web: + +# DSC CORE MEMBER +poiu694: + name: 이상민 + display_name: 상민 + email: poiu694@naver.com + github: poiu694 + role: core + member: true + alumni: false + web: +custardcream98: + name: 박시우 + display_name: 시우 + email: custardcream@kakao.com + github: custardcream98 + role: core + member: true + alumni: false + web: https://custardcream.vercel.app/ +baebae02: + name: 배서현 + display_name: 서현 + email: bae4614@gmail.com + github: baebae02 + role: core + member: true + alumni: false + web: https://blog.naver.com/bae4614 +pasly0920: + name: 정인우 + display_name: 인우 + email: inwoo920621@gmail.com + github: pasly0920 + role: core + member: true + alumni: false + web: https://velog.io/@inwoo920 +SSUHYUNKIM: + name: 김수현 + display_name: 수현 + email: yellosuhyun@naver.com + github: SSUHYUNKIM + role: core + member: true + alumni: false + blog_team: true + web: +hjm507: + name: 황진민 + display_name: 진민 + email: hjm507@naver.com + github: hjm507 + role: core + member: true + alumni: false + web: +seunghb320: + name: 백승현 + display_name: 승현 + email: seunghb320@gmail.com + github: seunghb320 + role: core + member: true + alumni: false + web: +yurishin929: + name: 신유리 + display_name: 유리 + email: yurishin929@gmail.com + github: yurishin929 + role: core + member: true + alumni: false + web: +00HS: + name: 신현서 + display_name: 현서 + email: hseo98@naver.com + github: 00HS + role: core + member: true + alumni: false + web: +dlalsrb0248: + name: 이민규 + display_name: 민규 + email: mk020408@gmail.com + github: dlalsrb0248 + role: core + member: true + alumni: false + blog_team: true + web: +hfjxjjd123: + name: 이학림 + display_name: 학림 + email: hakrim0504@gmail.com + github: hfjxjjd123 + role: core + member: true + alumni: false + web: +paulben0410: + name: 전민석 + display_name: 민석 + email: paulben0410@gmail.com + github: paulben0410 + role: core + member: true + alumni: false + web: https://wendi-learning.tistory.com/ +hoqn: + name: 전호균 + display_name: 호균 + email: akzm9999@gmail.com + github: hoqn + role: core + member: true + alumni: false + blog_team: true + web: https://hoqn.net +beautifulchoi: + name: 최용준 + display_name: 용준 + email: ccyjun123@naver.com + github: beautifulchoi + role: core + member: true + alumni: false + web: + + +# GDSC MEMBER +ms9648: + name: 김민서 + display_name: 민서 + email: ms9648@naver.com + github: ms9648 + role: normal + member: true + alumni: false + blog_team: true + web: https://ms9648@github.io +JihamSong: + name: 송지함 + display_name: 지함 + email: jeeham0226@gmail.com + github: JihamSong + role: normal + member: true + alumni: false + web: +tnghd5761: + name: 강수홍 + display_name: 수홍 + email: tnghd5761@gmail.com + github: tnghd5761 + role: normal + member: true + alumni: false + web: https://velog.io/@tnghd5761 +dghg: + name: 강동형 + display_name: 동형 + email: donghyeongzz@gmail.com + github: dghg + role: normal + member: true + alumni: false + web: +marsboy02: + name: 강형준 + display_name: 형준 + email: marsboy0619@gmail.com + github: marsboy02 + role: normal + member: true + alumni: false + web: https://velog.io/@marsboy0619 +airtic21: + name: 고대영 + display_name: 대영 + email: airtic@naver.com + github: airtic21 + role: normal + member: true + alumni: false + web: +mingo0229: + name: 김민섭 + display_name: 민섭 + email: mingo0229@naver.com + github: mingo0229 + role: normal + member: true + alumni: false + web: +kimjoe1850: + name: 김지오 + display_name: 지오 + email: rlawldh01@gmail.com + github: kimjoe1850 + role: normal + member: true + alumni: false + web: +nsunwoo: + name: 남선우 + display_name: 선우 + email: sunwoo.stats@gmail.com + github: nsunwoo + role: normal + member: true + alumni: false + web: +daehoidar: + name: 박민우 + display_name: 민우 + email: minubag613@gmail.com + github: daehoidar + role: normal + member: true + alumni: false + web: +BackJiwan: + name: 백지완 + display_name: 지완 + email: minubag613@gmail.com + github: BackJiwan + role: normal + member: true + alumni: false + web: +simpack0513: + name: 신지호 + display_name: 지호 + email: sjm010529@gmail.com + github: simpack0513 + role: normal + member: true + alumni: false + web: +Yooonlee: + name: 이경윤 + display_name: 경윤 + email: lky3685@naver.com + github: Yooonlee + role: normal + member: true + alumni: false + web: +Lee-Sang-Min1998: + name: 이상민 + display_name: 상민 + email: dkwkghkdlxld2@gmail.com + github: Lee-Sang-Min1998 + role: normal + member: true + alumni: false + web: https://velog.io/@sangmin1998 +Relaxed-Mind: + name: 이진수 + display_name: 진수 + email: dlwlstn0709@uos.ac.kr + github: Relaxed-Mind + role: normal + member: true + alumni: false + web: https://velog.io/@slowcom +ha789ha: + name: 이하준 + display_name: 하준 + email: hahava789@gmail.com + github: ha789ha + role: normal + member: true + alumni: false + web: ha789ha.tistory.com +choidongjune: + name: 최동준 + display_name: 동준 + email: coine00.choi@gmail.com + github: choidongjune + role: normal + member: true + alumni: false + web: \ No newline at end of file diff --git a/_includes/authorbox.html b/_includes/authorbox.html new file mode 100644 index 0000000000..00010b55cc --- /dev/null +++ b/_includes/authorbox.html @@ -0,0 +1,43 @@ + +{% capture className %} img-circle {% endcapture %} +{% if author.blog_team == true %} +{% capture className %} img-circle author-blog-team-border {% endcapture %} +{% endif %} + +{% if author.name != "_blank" %} +
+
+
+ {% if site.lazyimages == "enabled" %} + {% assign className = className | append: " lazyimg" %} + {{ author.name }} + {% else %} + {{ author.name }} + {% endif %} +
+
+

+ {{ author.name }} +

+
+ + + {% if author.web %} + + {% endif %} +
+ +
+
+
+ +{% else %} +
+ +{% endif %} + \ No newline at end of file diff --git a/_includes/featuredbox.html b/_includes/featuredbox.html index 90f1b2902d..99d3b07b52 100644 --- a/_includes/featuredbox.html +++ b/_includes/featuredbox.html @@ -1,5 +1,5 @@ -{% assign author = site.authors[post.author] %} +{% assign author = site.data.author[post.authors.first] %}
@@ -22,24 +22,15 @@

{{ post.title }} - {% if post.rating %} -
- {% include star_rating_postbox.html %} -
- {% endif %}

{{ post.excerpt | strip_html | truncatewords:25 }}

- {% if post.author %} + {% if post.authors %} - {% if author.avatar %} - {{ author.display_name }} - {% else %} - {{ author.display_name }} - {% endif %} + {{ author.display_name }} {{ author.display_name }}
@@ -56,4 +47,4 @@

{{ post.excerpt | strip_html | truncatewords:25 }}

- \ No newline at end of file + diff --git a/_includes/mathjax_support.html b/_includes/mathjax_support.html new file mode 100644 index 0000000000..ffa83b6ac4 --- /dev/null +++ b/_includes/mathjax_support.html @@ -0,0 +1,24 @@ + + + \ No newline at end of file diff --git a/_includes/postbox.html b/_includes/postbox.html index 80160e2d43..d07dcbe2d0 100644 --- a/_includes/postbox.html +++ b/_includes/postbox.html @@ -1,5 +1,5 @@ -{% assign author = site.authors[post.author] %} +{% assign author = site.data.author[post.authors.first] %}
@@ -10,7 +10,7 @@ {% if site.lazyimages == "enabled" %} {{ post.title }} {% else %} - {{ post.title }} + {{ post.title }} {% endif %} {% endif %} @@ -19,23 +19,14 @@

{{ post.title }} - {% if post.rating %} -
- {% include star_rating_postbox.html %} -
- {% endif %}

{{ post.excerpt | strip_html | truncatewords:30 }}

- {% if post.author %} + {% if post.authors %} - {% if author.avatar %} - {{ author.display_name }} - {% else %} - {{ author.display_name }} - {% endif %} + {{ author.display_name }} {{ author.display_name }}
@@ -48,4 +39,4 @@

{{ post.excerpt | strip_html | truncatewords:30 }}

- \ No newline at end of file + diff --git a/_includes/star_rating.html b/_includes/star_rating.html deleted file mode 100644 index e81dc72d49..0000000000 --- a/_includes/star_rating.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
- - - - - -
-
\ No newline at end of file diff --git a/_includes/star_rating_postbox.html b/_includes/star_rating_postbox.html deleted file mode 100644 index f511462aa4..0000000000 --- a/_includes/star_rating_postbox.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
- - - - - -
-
\ No newline at end of file diff --git a/_layouts/about.html b/_layouts/about.html new file mode 100644 index 0000000000..8b32519976 --- /dev/null +++ b/_layouts/about.html @@ -0,0 +1,101 @@ +--- +layout: default +--- + +
+
+

+ {{ page.title }} + Special Alumni +

+
+ +
+ {{content}} +
+
+
+ +
+

Lead


+ +
+ {% assign authors = site.data.author | where: 'role', 'lead' %} + {% for author in authors %} + {% if author.member == true %} + {% include authorbox.html %} + {% endif %} + {% endfor %} +
+
+ + +
+

Core Member


+
+ {% assign authors = site.data.author | where: 'role', 'core' %} + {% for author in authors %} + {% if author.member == true %} + {% include authorbox.html %} + {% endif %} + {% endfor %} + +
+
+ + +
+

Member

+
+ {% assign authors = site.data.author | where: 'role', 'normal' %} + {% for author in authors %} + {% if author.member == true %} + {% include authorbox.html %} + {% endif %} + {% endfor %} + +
+
+
+
+ +
+

GDSC UOS Alumni

+
+ {% assign authors = site.data.author | where: 'alumni', 'true' %} + {% for author in authors %} + {% include authorbox.html %} + {% endfor %} +
+
+
+
+ + + +
diff --git a/_layouts/archive.html b/_layouts/archive.html deleted file mode 100644 index ca47d31da8..0000000000 --- a/_layouts/archive.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -layout: default -title: Archive ---- - - -
-
-

Archive of posts with {{ page.type }} '{{ page.title }}'

-
-
- -{% for post in page.posts %} - - {% include postbox.html %} - -{% endfor %} - -
-
diff --git a/_layouts/categories.html b/_layouts/categories.html deleted file mode 100644 index 75963ad94c..0000000000 --- a/_layouts/categories.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: "Categories" -layout: default -permalink: "/categories.html" ---- - -
-{% for category in site.categories %} -
-

Category {{ category[0] }}

-
-{% assign pages_list = category[1] %} -{% for post in pages_list %} -{% if post.title != null %} -{% if group == null or group == post.group %} -{% include postbox.html %} -{% endif %} -{% endif %} -{% endfor %} -{% assign pages_list = nil %} -{% assign group = nil %} -{% endfor %} -
\ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 337b917db3..aafd486842 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,208 +1,177 @@ - + - - - - - -{{ page.title }} | {{site.name}} - -{% seo %} - - - - - - - - - + {% if page.use_math %} + {% include mathjax_support.html %} + {% endif %} + {{ page.title }} | {{ site.name }} + + + + + + + {% if jekyll.environment == 'production' %} {% endif %} -{% capture layout %}{% if page.layout %}layout-{{ page.layout }}{% endif %}{% endcapture %} - - - - + + - - + -
- -
+
+
- -
-

{{ site.name }}

-

- {{ site.description }} -

-
- - -
- {{ content }} -
- -{% if site.mailchimp-list %} - -
-
- {{site.title}}   Never miss a story from us, subscribe to our newsletter -
-
- - +
+ {{ content }}
- -
-
-{% endif %} - -
+
- -
-
-
-
-

Explore →

+ +
+
+
+
+

Explore by Tags →

+
+
+
+ {% assign tags_list = site.tags %} + {% if tags_list.first[0] == null %} + {% for tag in tags_list %} + {{ tag | camelcase }} + ({{ site.tags[tag].size }}) + {% endfor %} + {% else %} + {% for tag in tags_list %} + {{ tag[0] | camelcase }} + ({{ tag[1].size }}) + {% endfor %} + {% endif %} + {% assign tags_list = nil %} +
-
-
- {% assign categories_list = site.categories %} - {% if categories_list.first[0] == null %} - {% for category in categories_list %} - {{ category | camelcase }} ({{ site.tags[category].size }}) - {% endfor %} - {% else %} - {% for category in categories_list %} - {{ category[0] | camelcase }} ({{ category[1].size }}) - {% endfor %} - {% endif %} - {% assign categories_list = nil %} -
-
-
+
- -
-
-
-
- Copyright © {{ site.time | date: "%Y" }} {{ site.name }} +
+
+
+
+ Copyright © {{ site.time | date: "%Y" }} {{ site.name }} +
+
-
- Mediumish Jekyll Theme by WowThemes.net -
-
-
-
- -
+
- - + - + - + -{% if site.lazyimages == "enabled" %} - -{% endif %} - - + {% if site.lazyimages == "enabled" %} + + {% endif %} -{% if page.layout == 'post' %} - -{% endif %} + + {% if page.layout == 'post' %} + + {% endif %} + diff --git a/_layouts/page.html b/_layouts/page.html index 1c7bfccae9..88a2a5ba5e 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -2,7 +2,6 @@ layout: default --- -

{{ page.title }}

@@ -21,4 +20,4 @@

{{ page.title }}

{% endif %} -
\ No newline at end of file + diff --git a/_layouts/post.html b/_layouts/post.html index 418d42cede..eb9da42642 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -16,33 +16,32 @@
- {% assign author = site.authors[page.author] %}
-
+
+ +

{{ page.title }}

- {% if page.author %} -
-
- {% if author.avatar %} - {{ author.display_name }} - {% else %} - {{ author.display_name }} - {% endif %} -
-
- {{ author.display_name }} - {{ author.description }} + {% if page.authors %} +
+
+ {% for author_name in page.authors %} + {% assign author = site.data.author[author_name] %} +

+ {{ author.display_name }} + {{ author.display_name }} + + + {% if author.web %} + + {% endif %} +

+ {% endfor %}
+ {% endif %}
- {% endif %} - - -

{{ page.title }}

-
- {% if site.adsense == "enabled" %} {% include adsense-under-header.html %} @@ -77,43 +76,23 @@

Summary

{{content}}
- - {% if page.rating %} -
- Rating: {% include star_rating.html %} -
- {% endif %} -

- + {% if page.last_modified_at %} (Updated: ) {% endif %}

- -
-
    - {% assign sortedCategories = page.categories | sort %} - {% for category in sortedCategories %} -
  • - {{ category }} -
    • - {% endfor %} -
-
- -
    {% assign sortedTags = page.tags | sort %} {% for tag in sortedTags %}
  • - #{{ tag }} + #{{ tag }}
    • {% endfor %}
@@ -123,10 +102,10 @@

Summary

{% if page.previous.url %} - + {% endif %} {% if page.next.url %} - + {% endif %}
@@ -153,29 +132,3 @@

Summary

{% endif %} - - -{% if page.rating %} - -{% endif %} \ No newline at end of file diff --git a/_layouts/tags.html b/_layouts/tags.html index 751999617a..8807c9eb96 100644 --- a/_layouts/tags.html +++ b/_layouts/tags.html @@ -7,7 +7,7 @@
{% for tag in site.tags %}
-

Tag {{ tag[0] }}

+

Tag {{ tag[0] }}

{% assign pages_list = tag[1] %} {% for post in pages_list %} diff --git a/_pages/about.md b/_pages/about.md index da251d91cf..8c9173ffd2 100644 --- a/_pages/about.md +++ b/_pages/about.md @@ -1,35 +1,19 @@ --- -layout: page -title: Mediumish Template for Jekyll +layout: about permalink: /about +title: About GDSC UOS comments: true --- -
-
+#### Google Developer Student Clubs -

This website is built with Jekyll and Mediumish template for Jekyll. It's for demonstration purposes, no real content can be found. Mediumish template for Jekyll is compatible with Github pages, in fact even this demo is created with Github Pages and hosted with Github.

+GDSC([Google Developer Student Club](https://developers.google.com/community/dsc))는 Google의 지원으로 운영되는 대학생 개발자 커뮤니티로 학생들에게 유익한 영향을 미치고 역량을 강화하여 기술을 통해 공동체에 가치있는 영향을 미치고자 하는 목표를 바탕으로 진행되고 있습니다. -

jekyll template mediumish

-

Documentation

+세계 각국에서 GDSC가 진행되고 있으며 한국은 GDSC korea라는 이름으로 작년 2019년 8월에 시작되어 현재 많은 대학교에서 운영되고 있습니다. -

Please, read the docs here.

+#### GDSC University of Seoul -

Questions or bug reports?

+GDSC UOS는 개발에 관심이 있는 서울시립대학교 학생들로 구성된 커뮤니티로, 지역사회에 공헌할 수 있는 프로젝트를 만들고자 하는 공동 목표를 가지고 함께 운영하고 있습니다. -

Head over to our Github repository!

- -
- -
- -
-
Buy me a coffee
- -

Thank you for your support! Your donation helps me to maintain and improve Mediumish .

- -Buy me a coffee Documentation - -
-
-
+현재 한명의 리드와 9명의 코어 멤버가 운영진으로 GDSC UOS를 관리하고 있습니다. +이들 모두가 각자의 역할을 넘어서 한명의 멤버로서 함께 소통하고 개발하는 커뮤니티를 구성합니다. diff --git a/_pages/categories.md b/_pages/categories.md deleted file mode 100644 index 5e0add40a5..0000000000 --- a/_pages/categories.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -layout: categories -title: Categories -permalink: /categories ---- \ No newline at end of file diff --git a/_posts/2018-01-11-customer-service.md b/_posts/2018-01-11-customer-service.md deleted file mode 100644 index 902b51bfc7..0000000000 --- a/_posts/2018-01-11-customer-service.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -layout: post -title: "Inception Movie" -author: john -categories: [ Jekyll, tutorial ] -tags: [red, yellow] -image: assets/images/11.jpg -description: "My review of Inception movie. Acting, plot and something else in this short description." -featured: true -hidden: true -rating: 4.5 ---- - -Review products, books, movies, restaurant and anything you like on your Jekyll blog with Mediumish! JSON-LD ready for review property. - -#### How to use? - -It's actually really simple! Add the rating in your YAML front matter. It also supports halfs: - -```html ---- -layout: post -title: "Inception Movie" -author: john -categories: [ Jekyll, tutorial ] -tags: [red, yellow] -image: assets/images/11.jpg -description: "My review of Inception movie. Actors, directing and more." -rating: 4.5 ---- -``` diff --git a/_posts/2018-01-11-quick-start-guide.md b/_posts/2018-01-11-quick-start-guide.md deleted file mode 100644 index 178e04003c..0000000000 --- a/_posts/2018-01-11-quick-start-guide.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -layout: post -title: "Let's test spoilers" -author: sal -categories: [ Jekyll, tutorial ] -image: assets/images/12.jpg -featured: true -hidden: true ---- - -Director Roland Suso Richter's enigmatic psychological thriller (direct to video/DVD) was based upon screenwriter Michael Cooney's own play "Point of Death" - a title that gave away the film's entire plot twist premise. - -As in many similar films, such as Jacob's Ladder (1990), Soul Survivors (2001), and The Butterfly Effect (2004), events and people were thoroughly distorted and confused because the protagonist was at the point of death. The tagline was misleading: - -"When You Don't Have a Memory, How Can You Remember Who to Trust?" - -The mind-warping film opened with a hospital patient Simon Cable (Ryan Phillippe) awakening in a hospital with little knowledge (amnesia perhaps?) of what had happened, and why he was there, etc. He was told by attending Dr. Jeremy Newman (Stephen Rea) that it was July 29, 2002 (Simon thought it was the year 2000 - he was confused - he heard a doctor say 20:00 hours!) and that he had died for two minutes from cardiac arrest following the near-fatal accident -- but he had been revived ("You're as good as new"). Dr. Newman: "Simon, this is the 29th of July. The year is 2002. And your wife, whose name is Anna, is waiting outside." - -(The doctor left off four crucial additional words, revealed in the film's ending.) (Spoiler: Simon had died and was not resuscitated!). - -A major clue to everything that truly happened was the scene that played next under the credits - hospital staff failed to bring a patient back to life with a defibrillator after a car accident. Chest compressions failed and there was no pulse. A second major clue was provided by hospital orderly Travis (Stephen Graham): Everybody dies. No mystery there. But why and how everyone dies. Now, there's a mystery worth solving. Probably the biggest mystery there is. - -#### So how do we do spoilers? - -```html -My hidden paragraph here. -``` diff --git a/_posts/2018-01-12-is-intelligence-enough.md b/_posts/2018-01-12-is-intelligence-enough.md deleted file mode 100644 index 707f8d97af..0000000000 --- a/_posts/2018-01-12-is-intelligence-enough.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: post -title: "External Featured Image" -author: sal -categories: [ Jekyll, tutorial, web development ] -image: "https://images.unsplash.com/photo-1541544537156-7627a7a4aa1c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a20c472bc23308e390c8ffae3dd90c60&auto=format&fit=crop&w=750&q=80" ---- -Education must also train one for quick, resolute and effective thinking. To think incisively and to think for one's self is very difficult. - -> We are prone to let our mental life become invaded by legions of half truths, prejudices, and propaganda. At this point, I often wonder whether or not education is fulfilling its purpose. A great majority of the so-called educated people do not think logically and scientifically. - -Even the press, the classroom, the platform, and the pulpit in many instances do not give us objective and unbiased truths. To save man from the morass of propaganda, in my opinion, is one of the chief aims of education. Education must enable one to sift and weigh evidence, to discern the true from the false, the real from the unreal, and the facts from the fiction. - -The function of education, therefore, is to teach one to think intensively and to think critically. But education which stops with efficiency may prove the greatest menace to society. The most dangerous criminal may be the man gifted with reason, but with no morals. - -The late Eugene Talmadge, in my opinion, possessed one of the better minds of Georgia, or even America. Moreover, he wore the Phi Beta Kappa key. By all measuring rods, Mr. Talmadge could think critically and intensively; yet he contends that I am an inferior being. Are those the types of men we call educated? - -We must remember that intelligence is not enough. Intelligence plus character--that is the goal of true education. The complete education gives one not only power of concentration, but worthy objectives upon which to concentrate. The broad education will, therefore, transmit to one not only the accumulated knowledge of the race but also the accumulated experience of social living. - diff --git a/_posts/2018-01-12-never-stopped-worrying-never-loved-bomb.md b/_posts/2018-01-12-never-stopped-worrying-never-loved-bomb.md deleted file mode 100644 index e790de4793..0000000000 --- a/_posts/2018-01-12-never-stopped-worrying-never-loved-bomb.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -layout: post -title: "Never stopped worrying or loving the bomb" -author: sal -categories: [ Jekyll ] -image: assets/images/14.jpg ---- -> I’ve been through fire and water, I tell you! From my earliest pebblehood the wildest things you could imagine have been happening to this world of ours, and I have been right in the midst of them. - -So begins Hallam Hawksworth’s The Strange Adventures of a Pebble. Written in the 1920s, the book was part of a series which also included The Adventures of a Grain of Dust and A Year in the Wonderland of Trees, all of which were supposed to introduce children to the world of Natural Sciences. In each of them, Hawksworth personifies the natural object he is exploring, and using a mixture of folk tales, scientific facts and colloquial, friendly explanations guides the reader through the history of the natural world. It’s a real thrill of a ride, dramatizing the life cycle of supposedly dull things. The Adventures of a Grain of Dust begins even more loudly than Pebble: - -I don’t want you to think that I’m boasting, but I do believe I’m one of the greatest travellers that ever was; and if anybody, living or dead, has ever gone through with more than I have I’d like to hear about it. -Hallam Hawksworth was the pen-name of teacher Francis Blake Atkinson. He was married to the author Eleanor Stackhouse Atkinson, author of the children’s classic Greyfriars Bobby, which was based on the (supposedly) true story of a Scottish dog who spent fourteen years guarding his masters grave. The couple were both committed to education and published a weekly magazine for Chicago high school students called The Little Chronicle, as well as working for Encyclopaedia companies later in life. diff --git a/_posts/2018-01-12-options-for-creating-new-site-with-jekyll.md b/_posts/2018-01-12-options-for-creating-new-site-with-jekyll.md deleted file mode 100644 index c71c09e484..0000000000 --- a/_posts/2018-01-12-options-for-creating-new-site-with-jekyll.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -layout: post -title: "Options for creating a new site with Jekyll" -author: john -categories: [ Jekyll, tutorial ] -image: assets/images/13.jpg ---- - -`jekyll new ` installs a new Jekyll site at the path specified (relative to current directory). In this case, Jekyll will be installed in a directory called `myblog`. Here are some additional details: - -- To install the Jekyll site into the directory you're currently in, run `jekyll new` . If the existing directory isn't empty, you can pass the --force option with jekyll new . --force. -- `jekyll new` automatically initiates `bundle install` to install the dependencies required. (If you don't want Bundler to install the gems, use `jekyll new myblog --skip-bundle`.) -- By default, the Jekyll site installed by `jekyll new` uses a gem-based theme called Minima. With gem-based themes, some of the directories and files are stored in the theme-gem, hidden from your immediate view. -- We recommend setting up Jekyll with a gem-based theme but if you want to start with a blank slate, use `jekyll new myblog --blank` -- To learn about other parameters you can include with `jekyll new`, type `jekyll new --help`. \ No newline at end of file diff --git a/_posts/2018-01-12-press-and-education.md b/_posts/2018-01-12-press-and-education.md deleted file mode 100644 index 98e8c70d58..0000000000 --- a/_posts/2018-01-12-press-and-education.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -layout: post -title: "Press and education" -author: sal -categories: [ Jekyll, tutorial ] -image: assets/images/7.jpg ---- -Even the press, the classroom, the platform, and the pulpit in many instances do not give us objective and unbiased truths. To save man from the morass of propaganda, in my opinion, is one of the chief aims of education. Education must enable one to sift and weigh evidence, to discern the true from the false, the real from the unreal, and the facts from the fiction. - -Education must also train one for quick, **resolute and effective thinking**. To think incisively and to think for one's self is very difficult. - -> We are prone to let our mental life become invaded by legions of half truths, prejudices, and propaganda. At this point, I often wonder whether or not education is fulfilling its purpose. A great majority of the so-called educated people do not think logically and scientifically. - - -The function of education, therefore, is to teach one to think intensively and to think critically. But education which stops with efficiency may prove the greatest menace to society. The most dangerous criminal may be the man gifted with reason, but with no morals. - -The late Eugene Talmadge, in my opinion, possessed one of the better minds of Georgia, or even America. Moreover, he wore the Phi Beta Kappa key. By all measuring rods, Mr. Talmadge could think critically and intensively; yet he contends that I am an inferior being. Are those the types of men we call educated? - -We must remember that intelligence is not enough. Intelligence plus character--that is the goal of true education. The complete education gives one not only power of concentration, but worthy objectives upon which to concentrate. The broad education will, therefore, transmit to one not only the accumulated knowledge of the race but also the accumulated experience of social living. - diff --git a/_posts/2018-01-12-red-riding.md b/_posts/2018-01-12-red-riding.md deleted file mode 100644 index 66ad47606a..0000000000 --- a/_posts/2018-01-12-red-riding.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -layout: post -title: "Red Riding Hood" -author: sal -categories: [ Jekyll, tutorial ] -image: assets/images/1.jpg ---- -The first mass-produced book to deviate from a rectilinear format, at least in the United States, is thought to be this 1863 edition of Red Riding Hood, cut into the shape of the protagonist herself with the troublesome wolf curled at her feet. Produced by the Boston-based publisher Louis Prang, this is the first in their “Doll Series”, a set of five “die-cut” books, known also as shape books — the other titles being Robinson Crusoe, Goody Two-Shoes (also written by Red Riding Hood author Lydia Very), Cinderella, and King Winter. - -An 1868 Prang catalogue would later claim that such “books in the shape of a regular paper Doll… originated with us”. - -> It would seem the claim could also extend to die cut books in general, as we can’t find anything sooner, but do let us know in the comments if you have further light to shed on this! Such books are, of course, still popular in children’s publishing today, though the die cutting is not now limited to mere outlines, as evidenced in a beautiful 2014 version of the same Little Red Riding Hood story. - -The die cut has also been employed in the non-juvenile sphere as well, a recent example being Jonathan Safran Foer’s ambitious Tree of Codes. - -As for this particular rendition of Charles Perrault’s classic tale, the text and design is by Lydia Very (1823-1901), sister of Transcendentalist poet Jones Very. The gruesome ending of the original — which sees Little Red Riding Hood being gobbled up as well as her grandmother — is avoided here, the gore giving way to the less bloody aims of the morality tale, and the lesson that one should not disobey one’s mother. diff --git a/_posts/2018-01-12-tree-of-codes.md b/_posts/2018-01-12-tree-of-codes.md deleted file mode 100644 index e5ccc4fbab..0000000000 --- a/_posts/2018-01-12-tree-of-codes.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -layout: post -title: "Tree of Codes" -author: sal -categories: [ Jekyll, tutorial ] -image: assets/images/9.jpg ---- -The first mass-produced book to deviate from a rectilinear format, at least in the United States, is thought to be this 1863 edition of Red Riding Hood, cut into the shape of the protagonist herself with the troublesome wolf curled at her feet. Produced by the Boston-based publisher Louis Prang, this is the first in their “Doll Series”, a set of five “die-cut” books, known also as shape books — the other titles being Robinson Crusoe, Goody Two-Shoes (also written by Red Riding Hood author Lydia Very), Cinderella, and King Winter. - -As for this particular rendition of Charles Perrault’s classic tale, the text and design is by Lydia Very (1823-1901), sister of Transcendentalist poet Jones Very. The gruesome ending of the original — which sees Little Red Riding Hood being gobbled up as well as her grandmother — is avoided here, the gore giving way to the less bloody aims of the morality tale, and the lesson that one should not disobey one’s mother. - -> It would seem the claim could also extend to die cut books in general, as we can’t find anything sooner, but do let us know in the comments if you have further light to shed on this! Such books are, of course, still popular in children’s publishing today, though the die cutting is not now limited to mere outlines, as evidenced in a beautiful 2014 version of the same Little Red Riding Hood story. - - -An 1868 Prang catalogue would later claim that such “books in the shape of a regular paper Doll… originated with us”. - -The die cut has also been employed in the non-juvenile sphere as well, a recent example being Jonathan Safran Foer’s ambitious Tree of Codes. - diff --git a/_posts/2018-01-12-we-all-wait-for-summer.md b/_posts/2018-01-12-we-all-wait-for-summer.md deleted file mode 100644 index a8683bc721..0000000000 --- a/_posts/2018-01-12-we-all-wait-for-summer.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -layout: post -title: "We all wait for summer" -author: john -categories: [ Jekyll, tutorial ] -image: assets/images/5.jpg -rating: .5 ---- -As I engage in the so-called "bull sessions" around and about the school, I too often find that most college men have a misconception of the purpose of education. Most of the "brethren" think that education should equip them with the proper instruments of exploitation so that they can forever trample over the masses. Still others think that education should furnish them with noble ends rather than means to an end. - -It seems to me that education has a two-fold function to perform in the life of man and in society: the one is utility and the other is culture. Education must enable a man to become more efficient, to achieve with increasing facility the ligitimate goals of his life. \ No newline at end of file diff --git a/_posts/2018-05-12-about-bundler.md b/_posts/2018-05-12-about-bundler.md deleted file mode 100644 index 5b289c0374..0000000000 --- a/_posts/2018-05-12-about-bundler.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -layout: post -title: "About Bundler" -author: sal -categories: [ Jekyll ] -image: assets/images/2.jpg -rating: 3 ---- -`gem install bundler` installs the bundler gem through RubyGems. You only need to install it once - not every time you create a new Jekyll project. Here are some additional details: - -`bundler` is a gem that manages other Ruby gems. It makes sure your gems and gem versions are compatible, and that you have all necessary dependencies each gem requires. - -The `Gemfile` and `Gemfile.lock` files inform `Bundler` about the gem requirements in your site. If your site doesn’t have these Gemfiles, you can omit `bundle exec` and just `run jekyll serve`. - -When you run `bundle exec jekyll serve`, `Bundler` uses the gems and versions as specified in `Gemfile.lock` to ensure your Jekyll site builds with no compatibility or dependency conflicts. - -For more information about how to use `Bundler` in your Jekyll project, this tutorial should provide answers to the most common questions and explain how to get up and running quickly. diff --git a/_posts/2018-06-12-acumulated-experience.md b/_posts/2018-06-12-acumulated-experience.md deleted file mode 100644 index 40b880569e..0000000000 --- a/_posts/2018-06-12-acumulated-experience.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -layout: post -title: "Accumulated experience of social living" -author: sal -categories: [ Jekyll, tutorial ] -image: assets/images/15.jpg ---- -The die cut has also been employed in the non-juvenile sphere as well, a recent example being Jonathan Safran Foer’s ambitious Tree of Codes. - -As for this particular rendition of Charles Perrault’s classic tale, the text and design is by Lydia Very (1823-1901), sister of Transcendentalist poet Jones Very. The gruesome ending of the original - which sees Little Red Riding Hood being gobbled up as well as her grandmother - is avoided here, the gore giving way to the less bloody aims of the morality tale, and the lesson that one should not disobey one’s mother. - -The first mass-produced book to deviate from a rectilinear format, at least in the United States, is thought to be this 1863 edition of Red Riding Hood, cut into the shape of the protagonist herself with the troublesome wolf curled at her feet. Produced by the Boston-based publisher Louis Prang, this is the first in their “Doll Series”, a set of five “die-cut” books, known also as shape books — the other titles being Robinson Crusoe, Goody Two-Shoes (also written by Red Riding Hood author Lydia Very), Cinderella, and King Winter. - -An 1868 Prang catalogue would later claim that such “books in the shape of a regular paper Doll... originated with us”. - -> It would seem the claim could also extend to die cut books in general, as we can’t find anything sooner, but do let us know in the comments if you have further light to shed on this! Such books are, of course, still popular in children’s publishing today, though the die cutting is not now limited to mere outlines, as evidenced in a beautiful 2014 version of the same Little Red Riding Hood story. \ No newline at end of file diff --git a/_posts/2018-06-12-education.md b/_posts/2018-06-12-education.md deleted file mode 100644 index 50e19abe61..0000000000 --- a/_posts/2018-06-12-education.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -layout: post -title: "Education must also train one for quick, resolute and effective thinking." -author: john -categories: [ Jekyll, tutorial ] -image: assets/images/3.jpg -beforetoc: "Markdown editor is a very powerful thing. In this article I'm going to show you what you can actually do with it, some tricks and tips while editing your post." -toc: true ---- -There are lots of powerful things you can do with the Markdown editor - -If you've gotten pretty comfortable with writing in Markdown, then you may enjoy some more advanced tips about the types of things you can do with Markdown! - -As with the last post about the editor, you'll want to be actually editing this post as you read it so that you can see all the Markdown code we're using. - - -## Special formatting - -As well as bold and italics, you can also use some other special formatting in Markdown when the need arises, for example: - -+ ~~strike through~~ -+ ==highlight== -+ \*escaped characters\* - - -## Writing code blocks - -There are two types of code elements which can be inserted in Markdown, the first is inline, and the other is block. Inline code is formatted by wrapping any word or words in back-ticks, `like this`. Larger snippets of code can be displayed across multiple lines using triple back ticks: - -``` -.my-link { - text-decoration: underline; -} -``` - -If you want to get really fancy, you can even add syntax highlighting using Rouge. - - -![walking]({{ site.baseurl }}/assets/images/8.jpg) - -## Reference lists - -The quick brown jumped over the lazy. - -Another way to insert links in markdown is using reference lists. You might want to use this style of linking to cite reference material in a Wikipedia-style. All of the links are listed at the end of the document, so you can maintain full separation between content and its source or reference. - -## Full HTML - -Perhaps the best part of Markdown is that you're never limited to just Markdown. You can write HTML directly in the Markdown editor and it will just work as HTML usually does. No limits! Here's a standard YouTube embed code as an example: - -

\ No newline at end of file diff --git a/_posts/2018-06-12-first-mass-produced.md b/_posts/2018-06-12-first-mass-produced.md deleted file mode 100644 index 605b9519df..0000000000 --- a/_posts/2018-06-12-first-mass-produced.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -layout: post -title: "The first mass-produced book to deviate from a rectilinear format" -author: sal -categories: [ Jekyll, tutorial ] -image: assets/images/17.jpg ---- -The first mass-produced book to deviate from a rectilinear format, at least in the United States, is thought to be this 1863 edition of Red Riding Hood, cut into the shape of the protagonist herself with the troublesome wolf curled at her feet. Produced by the Boston-based publisher Louis Prang, this is the first in their “Doll Series”, a set of five “die-cut” books, known also as shape books — the other titles being Robinson Crusoe, Goody Two-Shoes (also written by Red Riding Hood author Lydia Very), Cinderella, and King Winter. - -An 1868 Prang catalogue would later claim that such “books in the shape of a regular paper Doll... originated with us”. - -> It would seem the claim could also extend to die cut books in general, as we can’t find anything sooner, but do let us know in the comments if you have further light to shed on this! Such books are, of course, still popular in children’s publishing today, though the die cutting is not now limited to mere outlines, as evidenced in a beautiful 2014 version of the same Little Red Riding Hood story. - -The die cut has also been employed in the non-juvenile sphere as well, a recent example being Jonathan Safran Foer’s ambitious Tree of Codes. - -As for this particular rendition of Charles Perrault’s classic tale, the text and design is by Lydia Very (1823-1901), sister of Transcendentalist poet Jones Very. The gruesome ending of the original - which sees Little Red Riding Hood being gobbled up as well as her grandmother - is avoided here, the gore giving way to the less bloody aims of the morality tale, and the lesson that one should not disobey one’s mother. diff --git a/_posts/2018-06-12-powerful-things-markdown-editor.md b/_posts/2018-06-12-powerful-things-markdown-editor.md deleted file mode 100644 index 2d0f3f594f..0000000000 --- a/_posts/2018-06-12-powerful-things-markdown-editor.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -layout: post -title: "Powerful things you can do with the Markdown editor" -author: sal -categories: [ Jekyll, tutorial ] -image: assets/images/16.jpg ---- -There are lots of powerful things you can do with the Markdown editor. If you've gotten pretty comfortable with writing in Markdown, then you may enjoy some more advanced tips about the types of things you can do with Markdown! - -As with the last post about the editor, you'll want to be actually editing this post as you read it so that you can see all the Markdown code we're using. - - -## Special formatting - -As well as bold and italics, you can also use some other special formatting in Markdown when the need arises, for example: - -+ ~~strike through~~ -+ ==highlight== -+ \*escaped characters\* - - -## Writing code blocks - -There are two types of code elements which can be inserted in Markdown, the first is inline, and the other is block. Inline code is formatted by wrapping any word or words in back-ticks, `like this`. Larger snippets of code can be displayed across multiple lines using triple back ticks: - -``` -.my-link { - text-decoration: underline; -} -``` - -#### HTML - -```html -
  • - - - -
    • -``` - -#### CSS - -```css -.highlight .c { - color: #999988; - font-style: italic; -} -.highlight .err { - color: #a61717; - background-color: #e3d2d2; -} -``` - -#### JS - -```js -// alertbar later -$(document).scroll(function () { - var y = $(this).scrollTop(); - if (y > 280) { - $('.alertbar').fadeIn(); - } else { - $('.alertbar').fadeOut(); - } -}); -``` - -#### Python - -```python -print("Hello World") -``` - -#### Ruby - -```ruby -require 'redcarpet' -markdown = Redcarpet.new("Hello World!") -puts markdown.to_html -``` - -#### C - -```c -printf("Hello World"); -``` - - - - -![walking]({{ site.baseurl }}/assets/images/8.jpg) - -## Reference lists - -The quick brown jumped over the lazy. - -Another way to insert links in markdown is using reference lists. You might want to use this style of linking to cite reference material in a Wikipedia-style. All of the links are listed at the end of the document, so you can maintain full separation between content and its source or reference. - -## Full HTML - -Perhaps the best part of Markdown is that you're never limited to just Markdown. You can write HTML directly in the Markdown editor and it will just work as HTML usually does. No limits! Here's a standard YouTube embed code as an example: - -

    \ No newline at end of file diff --git a/_posts/2020-09-28-make-blog-by-jekyll.md b/_posts/2020-09-28-make-blog-by-jekyll.md new file mode 100644 index 0000000000..7378515e70 --- /dev/null +++ b/_posts/2020-09-28-make-blog-by-jekyll.md @@ -0,0 +1,239 @@ +--- +layout: post +title: "Jekyll을 사용한 나만의 블로그 만들기" +authors: [Enoch-Kim] +tags: ["Web"] +image: assets/images/jekyll-logo.png +description: "DSC 블로그를 만들며 정리한 내용." +featured: true +--- + +macOS 환경 기준입니다. +macOS의 경우 Xcode가 설치돼있기 때문에 Ruby도 함께 설치되어 있어 바로 사용할 수 있습니다. +만약 설치가 안되어 있다면 terminal창을 열고 다음의 command를 통해 Xcode Development Tool과 Ruby를 설치해 주세요. + +```sh +# xcode development tool이 없다면 다음 커맨드로 설치 +xcode-select --install + +# Homebrew가 없다면 다음 커맨드를 통해 Homebrew를 설치 +/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" + +# Ruby 설치 및 환경변수 설정 +brew install ruby +echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.bash_profile + +# Ruby가 설치되었는지 확인 +which ruby +# /usr/local/opt/ruby/bin/ruby 가 나와야 합니다. +ruby -v +``` + +우선 ruby를 통해 jekyll을 설치해줍니다. + +```sh +sudo gem install jekyll +``` + +내 `{깃헙 username}.github.io` 형식으로 jekyll 폴더를 생성합니다. +(깃헙 username이 대문자여도 소문자로 생성하는게 좋습니다. 저의 경우 `Enoch-Kim` 이지만 `enoch-kim.github.io`로 만들었습니다.) + +```sh +jekyll new enoch-kim.github.io + +# 폴더를 확인 후 해당 폴더로 이동 +ls -al +cd enoch-kim.github.io +``` + +이제 자신의 github에 repository를 생성해줍니다. 이때, 위에서 생성한 폴더 이름과 동일한 repository를 만들어줘야합니다. + +**여기서 잠깐!!! 이렇게 블로그를 만들면 처음부터 끝까지 커스텀해야하기 때문에 매우 ~~빡칩니다~~ 번거롭습니다.** +**만든 폴더를 삭제하고 좀 있다 소개할 블로그 템플릿을 이용하는 것을 권장합니다.** + +```sh +# jekyll로 생성한 폴더로 이동 +ls -al +cd enoch-kim.github.io + +# git 생성 및 remote 연결 +git init +git add . +git commit -m "jekyll initialize" +git branch -M master +git push -u origin master +``` + +이제 repository를 보면 jekyll 폴더들이 올라와 있음을 볼 수 있습니다. + +*** + +## 이제 Jekyll Themes 에서 원하는 템플릿을 골라 블로그를 만드는 법을 다루겠습니다 + +[JEKYLL TEMES](https://jekyll-themes.com/) 사이트에 접속하여 원하는 테마를 고릅니다. +고른 테마의 repository로 이동합니다. (다음 화면의 REPOSITORY 버튼을 클릭) + +![Capture](../assets/images/post-make-blog-by-jekyll/capture-jekyll-themes.png) + +Repository 오른쪽 위의 Star을 한번 클릭해주고 Fork 해옵니다. (~~fork할 때 Star 박아주는게 국룰...~~) + +![Capture](../assets/images/post-make-blog-by-jekyll/capture-repo.png) + +Fork 해온 repository의 setting으로 들어가 이름을 `{username}.github.io`로 변경해줍니다. + +아래의 사진의 `mediumish-theme-jekyll` 을 `{username}.github.io`로 변경하고 Rename 버튼을 누릅니다. +(`{username}.github.io` 형식으로 repository를 생성하면 github이 이를 웹사이트로 인식하여 +`https://{username}.github.io` 로 url 접속 시 `index.html` 또는 `index.md`를 웹 페이지로 출력해줍니다.) + +![Capture](../assets/images/post-make-blog-by-jekyll/capture-change-repo-name.png) + +이제 해당 repository를 clone 해오면 기본 준비가 끝납니다! +repository의 SSH를 복사한 후 clone해 줍니다. + +(SSH 설정을 안하셨다구요..? ~~Googling gogo~~ [Mac SSh](https://syung05.tistory.com/20) / [Window SSH](https://medium.com/beyond-the-windows-korean-edition/use-windows10-open-ssh-tips-e6e9c77de433) 참고) + +![Capture](../assets/images/post-make-blog-by-jekyll/capture-repo-clone.png) + +```sh +git clone git@github.com:Enoch-Kim/enoch-kim.github.io.git +cd enoch-kim.github.io.git +ls -al +``` + +*** + +이제 jekyll 서버를 동작해봅시다. + +```sh +jekyll serve +``` + +이런 에러가 발생할 거예요. + +```sh +/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.1/lib/bundler/spec_set.rb:87:in +`block in materialize': Could not find public_suffix-3.0.3 in any of the sources (Bundler::GemNotFound) +``` + +당황하지 말고 `index.html` 혹은 `index.md`를 열고 다음의 사진에서 `jekyll-seo-tag` 와 `jekyll-archives`를 제거해주세요. + +![Capture](../assets/images/post-make-blog-by-jekyll/capture-jekyll-plugins.png) + +아래쪽에 있는 `archives` 관련 코드들도 없애주세요. + +![Capture](../assets/images/post-make-blog-by-jekyll/capture-jekyll-archives.png) + +`/_layouts/default.html` 에 있는 `seo` 관련 코드도 삭제해주세요. + +![Capture](../assets/images/post-make-blog-by-jekyll/capture-jekyll-seo.png) + +여기서 `{ %seo% }` 를 제거해주시면 됩니다. +(이 외에도 나중에 `jekyll serve` 실행 시 오류가 발생하면 관련 코드들을 제거해주어야합니다.) + +그리고 이와 관련된 다음 파일들을 삭제해주세요 + +- `/Gemfile` +- `/Gemfile.lock` +- `/feed.xml` + +**참고: 이 파일들은 각자 용도가 있으나 간단한 블로그를 만들기 위해 삭제한 거예요. +관심이 있으면 한번씩 구글링 해보셔서 사용하시는 것을 권장드립니다.** + +이제 jekyll server를 실행해봅시다. + +```sh +$ jekyll serve +Configuration file: /Users/enoc/github.com/Enoch-Kim/enoch-kim.github.io/_config.yml + Source: /Users/enoc/github.com/Enoch-Kim/enoch-kim.github.io + Destination: /Users/enoc/github.com/Enoch-Kim/enoch-kim.github.io/_site + Incremental build: disabled. Enable with --incremental + Generating... + done in 0.549 seconds. + Auto-regeneration: enabled for '/Users/enoc/github.com/Enoch-Kim/enoch-kim.github.io' + Server address: http://127.0.0.1:4000/mediumish-theme-jekyll/ + Server running... press ctrl-c to stop. +``` + +위의 주석에서 Server address 로 접속해보시면 잘 나오는 것을 알 수 있습니다! + +![Capture](../assets/images/post-make-blog-by-jekyll/capture-jekyll-success.png) + +이제 한번 자신의 웹사이트에 접속해 봅시다. `{username}.github.io` 로 접속해보시면 됩니다. (저의 경우 [enoch-kim.github.io](https://enoch-kim.github.io) 입니다.) + +그럼 다음과 같이 결과가?! + +![Capture](../assets/images/post-make-blog-by-jekyll/capture-jekyll-fail.png) + +이렇게 되는 이유는 `_config.yml` 파일에서 `base_url`이 `/mediumish-jekyll-themes`로 되어있기 때문입니다. +repository의 `root` 디렉토리가 `index.html`과 동일한 위치이고, `/assets` 파일은 `root` 디렉토리에 있으나 +`/mediumish-jekyll-themes/assets` 으로 파일 경로를 불러와서 이렇게 되는 것입니다. + +`_config.yml` 파일의 `base_url`을 `/` 로 바꿔 `root` 디렉토리로 연결해줍시다. +이제 다시 push 후 자신의 웹사이트로 접속해보면 정상적으로 작동할 것 입니다. + +다들 눈치채셨겠지만, 사실 author도 그렇고 로고도 그렇고 바꿔야할 부분이 많습니다. +지금까지 해온 방식대로 하나하나 제거해 나가면 됩니다. + +저는 이보다 다른 부분들을 다룰 생각인데요, google-analytics와 disqus를 연결해줍시다 ! + +*** + +### Google Analytics + +Google Analytics는 저희가 만든 블로그의 접속 등을 분석하기 위한 구글에서 제공하는 분석 툴입니다. +추적 ID를 설정함으로써 간단하게 이 분석 툴을 활용할 수 있습니다. 이 추적 ID를 설정하는 법을 다루겠습니다. + +우선 [Google Analytics](https://analytics.google.com/analytics/web/provision/#/provision) 에 들어가서 계정 만들기를 클릭합니다. + +1. 첫 단계인 계정 설정에서 계정 이름을 입력하고 다음을 누릅니다. + +2. 측정하려는 대상을 웹으로 선택하고 다음을 누릅니다. + +3. 웹 사이트 이름은 그냥 url(`{username}.github.io`)과 동일하게 설정해주세요. (관리가 편합니다) +또한, 웹사이트 URL 부분에서 http를 https로 변경후 동일하게 `{username}.github.io` 로 적어주신 후 시간을 한국으로 변경하여 만들어주세요. + +위의 방법대로 계정을 생성하면 다음과 같이 UA로 시작하는 추적 ID가 생성됐을 거예요. + +![Capture](../assets/images/post-make-blog-by-jekyll/capture-google-analytics.png) + +해당 추적 ID를 복사하여 `_config.yml` 파일의 `google_analytics`의 값에 넣어줍니다. +이제 Push 후 `{username}.github.io`에 들어가보면 Google Analytics 콘솔에 기록이 남을 겁니다.(~~추가적인 부분은 구글링 합시다.~~) + +*** + +### Disqus + +Disqus는 여러 블로그에서 사용하고 있는 댓글 플랫폼입니다. +다음과 같은 댓글을 보셨다면 모두 Disqus를 사용하고 있는 겁니다 ! + +![Capture](../assets/images/post-make-blog-by-jekyll/capture-disqus.png) + +Disqus는 단순히 한 블로그에만 국한되지 않고, 다른 블로그들에서도 계정이 연동되어 활동할 수 있습니다. +만약 댓글을 달고 댓글에 다른 사람들이 답글을 달면, 메일로 알려주는 기능 등의 서비스도 제공합니다. + +[Disqus](https://disqus.com/)에 접속해 계정을 생성하고 아무 블로그에 가서 댓글을 달아보세요. +그 후 Disqus 홈페이지에서 자신의 프로필 페이지에 접속하면 댓글을 단 기록을 볼 수 있습니다. + +이제 블로그와 연동해볼까요?? + +1. [Disqus](https://disqus.com/) 홈페이지에서 Get Started를 클릭합니다. + +2. I want to install Disqus on my site를 클릭합니다. + +3. 간단한 이름을 적습니다. 저는 enoch-kim으로 작성했습니다. +카테고리와 언어를 선택해줍니다. +(보시면 한국어가 언어 리스트에 없습니다. +~~만약 한국어 설정을 하고 싶으시면 [이 곳](https://dololak.tistory.com/663)을 참고해주세요.~~ +-> Disqus가 React로 코드를 옮기면서 정해진 언어만 사용하도록 고정해서 위의 방법이 안됩니다. +어쩔 수 없이 영어로 사용해야할 것 같아요...) + +4. Basic Plan을 선택한다. (스크롤을 아래로 내리면 보입니다.) +다음으로는 Platform 선택 화면에서 Jekyll을 선택합니다. + +5. General Setting에서 `Website URL` 부분에 `{username}.github.io`를 입력합니다. + +6. 이제 위에 적혀있는 Short Name을 `_config.yml` 파일의 `disqus`의 값에 넣어줍니다. + +Push 후에 댓글을 달아봅시다!! + +**바꿔야할게 많은데요, Author, favicon 등은 개인 취향에 따라 변경해주면 될 것 같습니다!!** diff --git a/_posts/2020-11-03-how-to-use-git.md b/_posts/2020-11-03-how-to-use-git.md new file mode 100644 index 0000000000..aaf4c4ae05 --- /dev/null +++ b/_posts/2020-11-03-how-to-use-git.md @@ -0,0 +1,109 @@ +--- +layout: post +title: "Git 초보의 Git 협업하기" +authors: [MOBUMIN] +tags: ["Git"] +image: assets/images/post-how-to-use-git/post-thumb.png +description: "Git 생초보 분들께 추천드리는 포스트." +featured: true +--- + +저는 이전까지 한 번도 제대로 된 협업이란 걸 해본 적이 없습니다. 전공 시간에 팀플할 때 처음으로 Git을 써 봤는데, 브랜치 한 번 바꿨다가 master 브랜치로 못 돌아가고, 수정사항이 여러개일때 commit이 안 되고, 한 사람은 애초에 commit을 할 수가 없었습니다. 그래서 결국 변경사항을 git으로 하는 게 아니라 메일이나 카톡으로 주고 받았습니다. 변경사항이 생길때마다 통째로 복붙해서 커밋했던 아련한 기억.. + +아직도 누구에게 뭘 알려줄 만한 위치는 아니지만, 저 때의 제가 Git에 대해 조금이라도 알았다면 하는 아쉬움에 포스트를 작성하게 되었습니다. + +그래서 제 포스트는 과거의 저 같은 분들을 위한 포스트입니다. *매우 착한맛.* + +준비물 : Github Desktop, Visual Studio Code + +원래 개발 초보들은 개발 환경 다르면 따라 못하는 거 아시죠?(제 얘기입니다.) 그래서 준비물이라고 표현 했습니다. 저는 저 환경 기준으로 설명하겠습니다. + +지금부터 저는 협업을 하는 경우를 크게 두 가지로 나누겠습니다. 본인이 직접 작업 환경을 만들어서 공유하는 것부터 시작해야하는 경우와, 이미 만들어진 환경에 들어가서 작업하는 경우. + +## 1) 처음부터 뚝딱뚝딱 만들어서 해야하는 경우 + +이 경우는 Organization 을 만들어도 되지만, 간단한 방법으로 repository를 만들어서 그 레포에 collaborator를 추가하는 방식을 채택하겠습니다. + +우측 상단의 profile을 눌러서 your repository를 클릭해주시고, + +![Capture](../assets/images/post-how-to-use-git/00.your-repo.png) + +new 버튼을 클릭해서 repository 하나를 만들어주세요! + +![Capture](../assets/images/post-how-to-use-git/01.new-repo.png) + +Repository Name은 원하시는 이름으로 설정하면 됩니다. Description에다가는 해당 repository에 대한 설명을 적어주세요! + +![Capture](../assets/images/post-how-to-use-git/02.new-repo.png) + +처음 git을 접하셨으면 이 repository가 뭐지? 싶으실텐데, 간단하게 폴더랑 같은 맥락으로 이해하면 편합니다! 인터넷 바탕화면(=깃) 에 있는 폴더(=레포지토리) 같은 느낌. + +그럼 이제 협업할 사람을 추가해야겠죠? Settings-Manage access에서 협업할 멤버들을 초대해주세요. + +![Capture](../assets/images/post-how-to-use-git/03.invite.png) + +이제는 branch 설정을 조금 해줄게요. Settings-Branches에서 아래처럼 설정해주세요. Required Reviewer는 몇명의 승인을 받아야 하는지 정하는 거에요. + +![Capture](../assets/images/post-how-to-use-git/04.branch.png) + +기본 브랜치 이름은 master 혹은 main이 될 수 있습니다. 요 브랜치 관련 내용은 2번에서 아주 약간 더 설명해드릴테니 일단 넘어가시죠..! + +## 2) 이미 만들어진 공간에 들어가서 협업하면 되는 경우 + +자 이제는 작업 환경이 git에는 다 만들어졌으니, 해당 repository를 제 컴퓨터에 만들어줍시다! 제 로컬 환경에 있어야 무슨 작업이든 할 수 있겠죠? + +repository의 클론 폴더를 제 컴퓨터에 만들어줄거에요! 아래 사진처럼 해줍니다. + +![Capture](../assets/images/post-how-to-use-git/05.clone.png) + +이렇게 하면 여러분의 컴퓨터의 어딘가에 GitHub라는 폴더가 생성이 되고, 그곳에 여러분들이 방금 clone한 repository가 생성되어 있을 겁니다. 저 같은 경우는 `내PC/문서`에 생성되어 있었어요! + +이제는 VScode로 협업만 하면 되겠네요! + +이 상태로 그대로 이제 다 같이 master branch에서 작업해서 commit 해볼까요? + +commit은 Git에 업로드하기 전에 제 컴퓨터에만 저장한다는 느낌으로 이해하면 편합니다. + +그런데. **그렇게 하지 마세요!!!!** 다른 사람들과 다른 파일을 작업하면 괜찮을지 몰라도, 같은 파일을 작업할 경우 다른 사람이 Commit한 내역이 저에게 없으니 필연적으로 충돌이 일어납니다. + +그래서 branch를 따로 만들 거에요. 현재의 master branch에서 잠깐 다른 줄기로 이동해서 작업을 하고, 다시 master branch와 합칠 거에요. 작업하는 사람들이 아닌 다른 사람들은 master branch의 모습만 보게 됩니다! + +[조금 더 자세한 설명이 필요하시다면 클릭해주세요.](https://backlog.com/git-tutorial/kr/stepup/stepup1_1.html){: target="_blank"} + +그럼 branch를 만들어 볼까요? Github Desktop에서 아래와 같이 해주세요. + +아, branch를 만들기 전에, 제 local에 있는 master branch가 업데이트가 안 되어 있을 수도 있으니까 Github Desktop에서 pull을 미리 해줍시다. + +![Capture](../assets/images/post-how-to-use-git/06.new-branch.png) + +branch 이름은 양식이 따로 있다면 그 양식을 따라 주시고, 없다면 다른 branch 이름 보고 눈치껏 지어줍시다. + +혹시 모르고 master branch에서 이미 작업한 내역이 있나요? 그렇다면 아래 빨간 박스로 되어 있는 부분을 눌러서 변경 내역을 가져와주세요! 변경 내역이 있을 때에만 뜨는 창입니다. + +![Capture](../assets/images/post-how-to-use-git/07.bring-change.png) + +자, 이렇게 하면 이제 작은 issue를 해결할 저만의 branch가 만들어졌네요. 해당 branch로 열심히 작업하고 난 후, 이제 commit을 해볼까요? + +![Capture](../assets/images/post-how-to-use-git/08.commit.png) + +Github Desktop 쓰시는 분들은 제가 채워둔 것처럼 commit to issue12 버튼 위의 내용을 채우셔야 버튼이 활성화 됩니다! + +이제 해당 commit을 원격 repository로 push 해줄거에요. commit은 제 local에서만 저장하는 거라면, push는 이제 Git에 업로드하는 느낌이에요. + +push까지 하고 나면, Github Desktop에 아래 그림처럼 버튼이 생길 거에요. 눌러줍시다. + +![Capture](../assets/images/post-how-to-use-git/09.PR.png) + +**base는 여러분들이 작업하는 repository로 꼭 바꿔주셔야합니다. 꼭이요! 꼭!** 안 그러면 다른데로 Pull Request를 보내게 돼요. + +![Capture](../assets/images/post-how-to-use-git/10.base.png) + +이제 팀 내의 다른 분들이 여러분들의 요청을 받아들여서 master와 merge(병합)할지, 아니면 변경을 요청할지 결정해주실 거에요! + +### markdown 포스팅을 위한 약간의 팁 + +![Capture](../assets/images/post-how-to-use-git/11.lint.PNG) + +VScode를 사용하신다면, EXTENSIONS에서 markdownlint을 설치해주세요. 그러면 형식이 틀렸을 경우 노란 줄로 표시해줍니다! + +포스트가 도움이 되었다면 좋겠습니다. diff --git a/_posts/2020-11-04-WEB_Mission1.md b/_posts/2020-11-04-WEB_Mission1.md new file mode 100644 index 0000000000..6d7409a779 --- /dev/null +++ b/_posts/2020-11-04-WEB_Mission1.md @@ -0,0 +1,161 @@ +--- +layout: post +title: "WEB Mission1 - HTML, CSS 만을 이용한 웹사이트 제작하기" +authors: [gusrb3164] +tags: ["Web"] +image: assets/images/post-WEB_Mission1/mission1_logo.PNG +description: "web팀의 첫번째 미션 일지" +featured: true +--- + +### web 팀의 첫 미션이 공개됐습니다. HTML 과 CSS를 다들 기본적으로 하신적이 있으셔서 이에 대한 감을 다시잡기 위해서 공개된 미션을 살펴봅시다 + +--- + +> + +![Mission Image](../assets/images/post-WEB_Mission1/mission1_ex.PNG) + +바로 이사이트의 UI부분을 클론코딩 하는것인데 직접 살펴보면 배경화면으로 영상이 실행되고 있고 상단 로고, 중앙 슬로건이 있네요. + +그리고 왼쪽, 오른쪽에는 커서를 갖다대면 버튼이 반응하여 변화하는 모습을 보이는 효과를 줘야합니다. 그리고 추가로 한가지더 요구사항이 있는데요 바로 중앙 슬로건이 처음 접속할때 타이핑 효과를 주는 것 입니다. + +그러면 요구사항을 한번 정리해보면 + +1. 메인화면 background 에는 영상이 실행될 것 + +2. 상단에는 DSC UOS 로고, 중앙에는 Connecting the Dots 라는 슬로건이 들어갈 것 + +3. 단 가운데 슬로건은 바로 나타나지 않고 타이핑 효과를 통해서 나타낼 것 + +4. 화면의 좌, 우측 에는 각각 Frontend, Backend 버튼이 있으며 버튼에 커서를 가져가면 버튼에 transition 효과를 줄 것 + +이렇게 4가지로 정리할 수 있습니다. 한 번 HTML과 CSS만을 이용해 작성해봅시다💻💻 + +--- + +우선 배경영상은 제공받은 아래의 영상을 이용하여 꾸며야 합니다. + +![Background Video](../assets/images/post-WEB_Mission1/mission1_video.gif) + +아무래도 영상을 그냥 삽입한다면 화면 비율에 따라 여백이 생기거나 짤리는 현상이 생깁니다.. 그래서 보이는 화면의 비율에 알맞게 꽉 채우기 위해 position을 fixed로 두고, 비율에 맞게 크기를 조절해주는 object-fit 을 cover로 설정해 줍시다! + +참고로 width와 height의 % 단위는 부모요소에 대해서 차지하는 비율이니까 backvid를 감싸고 있는 부모요소를 화면에 꽉 채우는것 명심하세요! + +```css +#backvid { + position: fixed; + width: 100%; + height: 100%; + object-fit: cover; +} +``` + +이제 전체적인 구도를 살펴보면 왼쪽 버튼, 가운데 슬로건, 오른쪽 버튼이 column 비율이 1:2:1 정도 되는걸로 보이네요! 따라서 저는 전체 화면을 grid 레이아웃을 적용해서 나누고 버튼과 중앙 slogan을 넣어보겠습니다. + +세개의 column이 grid layout을 적용할 container 안에 있어야 하는것 명심하세요😎 + +그리고 버튼에 커서를 가져다대면 반응하는 hover 를 css에 추가해봅시다. + +```css +.container { + z-index: 1; + display: grid; + grid-template-columns: 1fr 2fr 1fr; +} +.btn { + cursor: pointer; + position: relative; + width: 100%; + font-size: 3em; + height: 100vh; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + color: white; + z-index: 2; + transition: background-color 1s; + background-color: transparent; +} +#main-column { + position: relative; + height: 100vh; + text-align: center; + display: block; + align-items: center; + justify-content: center; + color: white; +} +.btn:hover { + background-color: rgba(164, 230, 230, 0.15); +} +``` + +그리고 상단 로고는 가운데 column 내에서 absolute 로 배치를 상위요소를 기준으로 정해줍니다. + +```css +#top { + width: 100%; + margin-top: 3%; + position: absolute; + text-align: center; + z-index: 2; +} +``` + +자 이제 마지막으로 남은 중앙 슬로건에 타이핑효과가 남았습니다. 보통이면 js를 활용해서 텍스트의 size에 변화를 주는 방식으로 적용하면 되겠지만 이번에는 css만을 사용해서 구현해보기로 했으니 어떤 방식을 쓰면 좋을까요?? + +바로 css의 animation과 @keyframes를 적용하는 것입니다. 이렇게 하면 한 글자 단위로 나타내기는 힘들겠지만 슬로건이 차지하는 길이의 일정 비율만큼 시간차로 나타내면서 나름 타이핑 효과를 줄 수 있게 됩니다! + +아래 코드를 살펴보면 슬로건 텍스트가 들어간 main-slogan에 animation을 설정해주고, @keyframes 함수를 통해 몇초마다 얼마만큼의 길이를 보여줄 것인지, 깜박이는 커서의 색상과 간격의 시간을 설정한 것을 볼 수 있습니다. + +```css +#main-slogan { + position: absolute; + display: inline-block; + top: 50%; + left: 50%; + font-size: 1.8em; + text-align: center; + overflow: hidden; + transform: translate(-50%, -50%); + border-right: 0.1em solid white; + white-space: nowrap; + letter-spacing: 0.3em; + animation: typing 3s steps(30, end), blink-caret 1.2s step-end infinite; +} + +@keyframes typing { + 0% { + width: 0; + } + 100% { + width: 15em; + } +} +@keyframes blink-caret { + from, + to { + border-color: transparent; + } + 50% { + border-color: rgb(255, 255, 255); + } +} +``` + +--- + +이러한 과정을 통해 만들어진 저희 WEB 멤버분들중 수빈님 작품을 보면 +타이핑 효과와 버튼의 transition 효과까지 디자인도 아주 잘 적용된 것을 볼수 있습니다👍👍👏 + +![Result](../assets/images/post-WEB_Mission1/mission1_final.PNG) + +HTML,CSS 만으로도 이렇게 멋진 사이트를 만들 수 있다는게 놀라울 따름이네요! JS까지 적용한다면 멤버 분들께서 더욱 멋진 사이트를 만들 것으로 기대됩니다😎 + +결과물로서 수빈님의 작품 링크와 형진님이 미션을 만들기 위해 작성한 미션 요구사항 사이트를 따로 첨부해드릴테니 참고해보시기 바랍니다! + +> +> +> diff --git a/_posts/2020-11-05-mobile-coroutine.md b/_posts/2020-11-05-mobile-coroutine.md new file mode 100644 index 0000000000..85507438dd --- /dev/null +++ b/_posts/2020-11-05-mobile-coroutine.md @@ -0,0 +1,426 @@ +--- +layout: post +title: "[ Kotlin ] Coroutine 기본 정리 및 Android에서의 사용 방법" +authors: [sheele41] +tags: ["Mobile"] +image: https://oasisfores.com/wp-content/uploads/2020/11/post_main.png +--- + +**시작하기 전에...** + +![coroutine\_gif](https://oasisfores.com/wp-content/uploads/2020/11/1_OEX52nKgM1SHGO4l1mvV1A.gif) + +**Coroutine**을 굳이 한 문장으로 표현하자면 **비선점(Non-Preemptive), 협력형(Cooperative) 멀티태스킹의 서브 루틴 형태로서 동시성(Concurrency)을 지원하며, 비동기 작업을 쉽게 처리할 수 있도록 도와주는 것**... 이라고 할 수 있습니다. + +네. 이렇게만 보면 대체 무슨 소리인지 이해가 하나도 되지 않습니다. +Coroutine이라는 개념은 **Kotlin에만 국한된 것이 아니며** 세상에 모습을 드러낸 것은 이미 한참 전 일이기 때문에 동작 원리부터 하나하나 설명하기 시작하면 끝이 없어집니다. + +하지만 제목에도 적혀있듯이 이 글은**Android에서의 Kotlin Coroutine 사용법**을 알려주기 위한 글이고, 이 제목을 클릭하여 들어오신 분들은 Coroutine이 무엇인지, 어디에 쓰는지는 대충 알고 계신 상태일 것이라고 생각합니다. +따라서 이번 글에서는 Coroutine의 개념적인 부분보다는 **실제로 Kotlin Android 앱 개발에서 Coroutine이 어떤 방식으로 사용되는지**를 위주로 진행하려고 합니다. (여러분의 시간은 소중하니까요.) +Coroutine이 무엇이고 어떻게 동작하는지에 대해서는 인터넷에 잘 쓰여진 글들이 정말 많으니 개인적으로 찾아보시면 도움이 될 것입니다. + +## Coroutine 사용을 위한 사전 준비 + +긴 말 필요 없이 바로 Coroutine을 만들어보...기 전에 우선 **Dependency를 추가**해주어야 합니다. +간단히 **build.gradle (:app)** 파일에 다음 코드를 입력해줌으로써 Coroutine을 사용할 수 있습니다. + +```bash +dependencies { + implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.9' +} +``` + +이 외에도 다양한 요소에 대한 Coroutine을 사용하고 싶다면 다음 링크를 참조하시기 바랍니다. ([https://developer.android.com/kotlin/ktx?hl=ko\#viewmodel](https://developer.android.com/kotlin/ktx?hl=ko#viewmodel)) + +## Coroutine 만들기 + +이제 진짜 Coroutine을 만들어봅시다. 기본적으로 Coroutine은 다음과 같은 형태로 만들 수 있습니다. + +![basic\_coroutine](https://oasisfores.com/wp-content/uploads/2020/11/basic_coroutine.png) + +아이고... 뭔가 또 복잡하죠? 일단 위에건 잊어버리고 그냥 아주 단순한 Coroutine을 하나 만들어봅시다. +1초 뒤에 Work is Done! 문자열이 출력되는 간단한 루틴입니다. +위 사진과 비교했을 때 **어떤 자리에 어떤 단어가 들어갔는지**를 잘 보시면 이해에 도움이 되실 겁니다. + +```kotlin +val scope = CoroutineScope(Dispatchers.IO) // CoroutineScope 생성 +val job = scope.launch{ // 아래 코드를 방금 만들어준 CoroutineScope에서 실행 + delay(1000) + println("Work is done!") +} +``` + +우선 **전체적인 흐름**을 설명드리면 + +1. **CoroutineContext**를 이용하여 Coroutine이 실행될 **CoroutineScope**를 만들고 +2. 만들어준 **CoroutineScope**에서 **CoroutineBuilder**를 이용하여 { } 안의 코드를 Coroutine으로 실행시킵니다. + +Coroutine이라는 단어가 너무 많네요. 위 코드를 기준으로 바꿔볼까요? + +1. **Dispatchers.IO**를 이용하여 Coroutine이 실행될**CoroutineScope**를 만들고 +2. 만들어준 **CoroutineScope**에서 **launch**를 이용하여 { } 안의 코드를 Coroutine으로 실행시킵니다. + +어떠신가요? 아직 잘 와닿지 않으시죠? +각 요소가 무엇을 의미하는지는 이후 차근차근 설명드릴테니 우선 **Coroutine의 세 가지 구성 요소와 흐름**만 기억해주세요! + +### **Context**로 **Scope**를 만들고, **Builder**를 이용하여 그 **Scope** 안에서 실행! + +### 첫 번째, CoroutineContext + +Coroutine 구성 요소 그 첫 번째, **CoroutineContext**입니다. +말 그대로 Coroutine이 실행될 **Context**, '맥락'을 지정해주는 것인데요. +간단한 예로 **올림픽 경기**를 생각해볼 수 있습니다. +'Coroutine 얘기 하다 말고 갑자기 웬 올림픽이냐' 라고 하실 수도 있겠지만 일단 그냥 생각해보자구요. ^^ + +올림픽 경기에는 수영, 달리기, 양궁, 등과 같이 여러가지 종목이 있습니다. +여러가지 종목이 있는 만큼 경기장 또한 여러 개 존재하겠죠? +이 때 경기에 참가하는 선수들은 **자신의 종목에 맞게 각 경기장에 위치**해있을 것입니다. +Coroutine 또한 이와 같습니다. 무슨 소리냐구요? +우리가 만들어줄 **Coroutine을 선수, CoroutineContext를 경기장**으로 생각하시면 됩니다. + +결국 CoroutineContext를 설정해준다는 것은 **Coroutine의 실행 목적에 맞게 실행될 특정 Thread Pool을 지정**해주는 것이라고 할 수 있습니다. +(수영 선수가 육상 경기장에 가있으면 안되겠죠? ^^) + +![basic\_coroutine](https://oasisfores.com/wp-content/uploads/2020/11/basic_coroutine.png) + +위 그림을 보시면 알 수 있듯이 CoroutineContext에는 Job, Dispatcher.Main, IO, Default... 등이 있고 각각이 의미하는 것은 아래와 같습니다. (Job에 대한 내용은 이후에 다룰 것입니다.) + +**Dispatcher.Main : UI를 구성하는 작업이 모여있는 쓰레드 풀** +**Dispatcher.IO : (파일 혹은 소켓을) 읽고 쓰는 작업이 모여있는 쓰레드 풀** +**Dispatcher.Default : 기본 쓰레드 풀, CPU 사용량이 많은 작업에 적합** +(이외에도 잘 쓰이지는 않지만 특정 목적을 위해 사용되는 몇몇 쓰레드 풀이 존재하니 자세한 것은 공식 문서를 참조하시면 좋습니다.) + +위 내용을 참조하여 만들어줄 Coroutine의 작업 내용에 맞게 Thread Pool을 선택하면 됩니다. +파일을 읽고 쓰는 작업이라면 IO를, UI 관련 작업이라면 Main을 선택하면 되겠죠? + +Coroutine에서 CoroutineContext를 지정해주는 방법은 아래와 같이 **CoroutineScope, 혹은 CoroutineBuilder에서 넘겨주는 것**인데 이 두 방식의 차이점은 이후에 따로 설명하도록 하겠습니다. + +```kotlin +val scope = CoroutineScope(Dispatchers.Main) +scope.launch { + // Foreground +} +scope.launch(Dispatchers.Default) { + // Background +} +``` + +### 두 번째, CoroutineScope + +Coroutine 구성 요소 그 두 번째, **CoroutineScope**입니다. +CoroutineContext로 Coroutine이 어디서 실행될지를 정해주었다면 이 **Coroutine을 제어할 수 있는 Scope, '범위'를 지정**해주어야 합니다. +이때 말하는 제어라는 것은 **작업을 취소**시키거나, **어떤 작업이 끝날 때까지 기다리는 것**을 의미합니다. + +**CoroutineScope의 종류**는 크게 두 가지가 있습니다. + +#### 1. 사용자 지정 CoroutineScope + +```kotlin +val scope = CoroutineScope(CoroutineContext ex. Dispatchers.Main...) +val job = scope.launch{ + // TODO +} +``` + +가장 기본이 되는 방식의 CoroutineScope입니다. +이를 이용하면 **특정 Coroutine이 필요해질 때마다 새로 선언해주고, 필요 없어지면 종료**되도록 할 수 있습니다. + +예를 들어 어떤 Activity에 보여줄 데이터를 Coroutine으로 불러오고 있다고 생각해봅시다. +만약 해당 Activity가 도중에 갑자기 종료된다면 **불러오고 있는 데이터는 더 이상 필요가 없으므로 Coroutine도 함께 종료**되어야 합니다. +이 때 **CoroutineScope를 Activity의 Life-Cycle에 맞춰주면 Activity가 종료될 때 Coroutine도 함께 종료**되도록 만들어 줄 수 있습니다. + +#### 2. GlobalScope + +```kotlin +public object GlobalScope : CoroutineScope { + /** + * Returns [EmptyCoroutineContext]. + */ + override val coroutineContext: CoroutineContext + get() = EmptyCoroutineContext +} +``` + +```kotlin +GlobalScope.launch{ + // TODO +} +``` + +CoroutineScope의 특별한 형태로, **앱이 실행될 때부터 앱이 종료될 때까지 Coroutine을 실행시킬 수 있는 Scope**입니다. +어떤 Activity에서 GlobalScope를 통해 실행된 Coroutine은 **Activity가 종료되어도 해당 Coroutine이 완료될 때까지 동작**합니다. +**앱이 실행되는 동안 장시간, 혹은 주기적으로 실행되어야 하는 Coroutine에 적합**하며, **필요할 때만 수행되어야 하는 Coroutine은 사용자 지정 CoroutineScope 사용이 권장**됩니다. +CoroutineScope에 대한 자세한 사용 방법은 아래에서 실제 예시와 함께 다룰 예정입니다. + +### 세 번째, CoroutineBuilder + +대망의 마지막, **CoroutineBuilder**입니다. +**CoroutineBuilder의 본질**은 결국 **설정해준 Context와 Scope를 통해 Coroutine을 실행시켜주는 '함수'** 입니다. +미사일을 쏠 때 launch 버튼을 누르는 것과 같이 **launch(혹은 async)로 시작된 Coroutine은 내 손을 떠나 제 갈길을 가게 되죠.** + +**CoroutineBuilder의 종류**로는 **launch{}, async{}** 이 있으며 CoroutineScope의 확장함수로써 **{} 내부의 코드를 Coroutine으로 실행시켜주는 역할**을 합니다. + +**{} 내부의 Coroutine들이 모두 완료될 때까지 현재 Thread를 Blocking하는 runBlocking{}도 있지만 Coroutine의 장점인 '일시 중단'을 못 쓰게 되어버리므로 사용이 권장되지 않습니다.** +**특히 UI 작업을 관장하는 Main Thread에서 runBlocking을 사용하여 Thread를 장시간 점유하고 있을 경우 ANR (Application Not Responding)이 발생할 수 있습니다.** + +그렇다면 **launch와 async의 차이**는 무엇일까요? +**두 함수는 동일한 기능을 하지만 다른 객체를 반환**합니다. +**launch로 실행된 Coroutine은 Job 객체를 반환**하고, **async로 실행된 Coroutine은 Deferred 객체를 반환**합니다. +(Job과 Deferred의 차이점은 Coroutine을 제어만 하는가 Coroutine의 결과도 받을 수 있는가인데 내용이 길어지므로 생략하도록 하겠습니다.) + +```kotlin +val job = scope.launch { // Job + // launch TODO +} +val deferred = scope.async { // Deferred + // async TODO +} +``` + +이렇게 반환된 **Job, Deferred 객체를 이용하여 각 Coroutine을 제어(취소, 대기...)** 할 수 있으며 각 객체에 대한 확장함수 및 필드는 [공식 문서](https://kotlin.github.io/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines/-job/index.html)에 기술되어 있습니다. + +아래 코드는 Job의 확장함수인**join()을 이용하여 Coroutine이 완료될 때까지 기다리는 예시** 로, 결과는 **Hello, World!** 입니다. + +```kotlin +val job = GlobalScope.launch { // launch a new coroutine and keep a reference to its Job + delay(1000L) + println("Hello, ") +} +job.join() // wait until child coroutine completes +println("World!") +``` + +**추가) GlobalScope와 Job** GlobalScope 사용을 지양해야하는 이유는 바로 이 Job에 있습니다. +**GlobalScope에는 연결된 Job이 없기 때문**에 구조화된 동시성에서 얻을 수 있는 모든 이점이 사라지며, GlobalScope를 사용하는 코루틴에서 예외를 발생해도 다른 코루틴에 영향을 미치지 않습니다. +**구조화된 동시성이 느슨해지는 것입니다.** + +## Coroutine 사용법 바로잡기 + +이제 Coroutine의 기본 구성 요소들은 전부 알아보았으니 **실제로 Coroutine이 어떤 형식으로 사용되는지** 알아봅시다. +**비슷비슷하지만 조금씩 다른 코드가 완전히 다른, 혹은 동일한 기능**을 할 수도 있기 때문에 헷갈리는 부분을 분명하게 잡아두는 것이 중요합니다. + +### 1. CoroutineContext의 위치 + +```kotlin +val scope = CoroutineScope(Dispatchers.Main) +scope.launch { // Main에서 실행 + // Coroutine1 +} +scope.launch(Dispatchers.Default) { // Default에서 실행 + // Coroutine2 +} +``` + +앞서 말씀드렸듯이 **CoroutineContext는 CoroutineScope에서 지정될 수도 있고 CoroutineBuilder에서 지정될 수도 있는데요.** +결론부터 말씀드리자면 **어떤 CoroutineScope에서 작동되는 Coroutine들은 기본적으로 자신이 속해있는 CoroutineScope의 CoroutineContext를 그대로 받아오지만, CoroutineBuilder에서 따로 CoroutineContext 설정을 해준다면 해당 CoroutineBuilder로 실행되는 Coroutine은 그 CoroutineContext를 따라갑니다.** +최대한 간단하게 설명하려고 한건데 제가 봐도 잘 안 읽히네요... + +예를 들자면 **UI 작업을 진행하는 여러개의 Coroutine들이 모여있는 CoroutineScope에서 하나의 Coroutine만 Background 작업으로 돌리고 싶을 때** 이러한 방식을 사용합니다. +위 코드를 한번 볼까요? + +1) 제일 처음에 CoroutineScope에서 Dispatchers.Main으로 CoroutineContext가 한 번 지정되고 +2) 그 아래에서 launch로 Coroutine1이 실행된 다음 3) 그 아래에서 launch(Dispatchers.Default)로 Coroutine2가 실행됩니다. + +이때 **Coroutine1은 Main(Foreground) Thread**에서 실행되고 **Coroutine2는 Default(Background) Thread**에서 실행됩니다. +**CoroutineScope에 기본값(Default)이 될 CoroutineContext를 지정해주고 특정 CoroutineBuilder에는 특별한 CoroutineContext를 지정**해준다는 느낌으로 이해하시면 됩니다. + +그렇다면 다음과 같은 경우는 어떨까요? + +```kotlin +val scope = CoroutineScope(Dispatchers.Main) // CoroutineScope1 +CoroutineScope(Dispatchers.Default).launch { + // CoroutineScope2, Background Running +} +scope.launch(Dispatchers.Default) { + // CoroutineScope1, Background Running +} +``` + +**첫 번째 Coroutine**은 처음에 선언한 CoroutineScope - 1과 **별개로 새로운 CoroutineScope - 2(Dispatchers.Default)를 선언**하여 **Dispatchers.Default 상에서 실행**됩니다. +**두 번째 Coroutine은 처음**에 선언한 CoroutineScope - 1(Dispatchers.Main)에서 돌아가는 Coroutine이지만 **CoroutineBuilder 단에서 CoroutineContext를 Dispatchers.Default로 재설정해주므로 역시 Dispatchers.Default 상에서 실행**됩니다. +결과적으로 **두 Coroutine 모두 Background(Dispatchers.Default)에서 실행**된다는 것을 알 수 있는데요. 이때 두 Coroutine의 CoroutineScope가 서로 다르므로 둘 중 하나의 작업을 취소해도 나머지 작업은 영향을 받지 않습니다. + +### 2. Job + +```kotlin +val job = scope.launch { // Job + // launch TODO +} +``` + +우리는 위와 같은 방식으로 **각 Coroutine에 대한 Job 객체를 반환받아 각각의 Coroutine을 제어**할 수 있다는 사실을 알고있습니다. +하지만 만약 **한 CoroutineScope 내에 여러 개의 자식 Coroutine이 존재하고 그 Coroutine들을 한번에 관리**하려면 어떻게 해야할까요? +동시에 종료되어야 하는 모든 Coroutine에 각각의 job1, job2, job3...를 연결해주고 마지막에 하나하나 .cancel로 취소해주는 것은 상상하기만 해도 끔찍합니다. + +다행히도 **Job 또한 CoroutineContext의 일종**이라는 것을 이용하면 그럴 필요가 없습니다. + +```kotlin +suspend fun main() = coroutineScope { + val job = Job() + CoroutineScope(Dispatchers.Default + job).launch { + launch{ + println("Coroutine1 Start") + delay(1000) + println("Coroutine1 End") + } + launch{ + println("Coroutine2 Start") + delay(2000) + println("Coroutine2 End") + } + } + delay(300) + job.cancel() + delay(3000) + println("All Done!") +} +``` + +**하나의 Job 객체를 선언하고 새로 생성될 CoroutineScope에서 객체를 초기화**하면 이 CoroutineScope의 Child까지 모두 영향을 받는 Job으로 활용이 가능합니다. +**어떤 CoroutineScope 내부의 Coroutine들은 기본적으로 자신이 속한 CoroutineScope의 Context를 상속받으니까요.** + +이러한 표현 방식은 이후 **Activity의 Life-Cycle을 따르는 Coroutine을 생성할 때 유용하게 사용**됩니다. + +![result\_coroutine](https://oasisfores.com/wp-content/uploads/2020/11/result_coroutine-e1604513656990.png) + +부모 CoroutineScope의 Job을 cancel 하므로 위 코드의 결과는 **Coroutine1 Start Coroutine2 Start** 가 됩니다. +코드의 실행 결과는 [https://kotlinlang.org/\#try-kotlin](https://kotlinlang.org/#try-kotlin)에서 직접 확인하실 수 있습니다. + +### 3. Coroutine의 부모 - 자식 관계 + +**Coroutine에는 부모 - 자식 관계**가 있으며 다음과 같은 특징이 존재합니다. +(위와 같은 방법이 사용 가능한 이유도 바로 이 특징 덕분입니다.) + +**부모 Coroutine이 취소되면 자식 Coroutine도 Recursive하게 취소된다.** +**부모 Coroutine은 자식 Coroutine이 모두 완료될 때 까지 대기한다.** + +그런데 여기서 또 헷갈리기 쉬운게 어떤 **CoroutineScope 안에 코드가 적혀있다고 모두 자식 Coroutine은 아니라는 것**입니다. + +```kotlin +suspend fun main() = coroutineScope { + val job = Job() + CoroutineScope(Dispatchers.Default + job).launch { + launch{ // Child / Cancel + println("Coroutine1 Start") + delay(1000) + println("Coroutine1 End") + } + CoroutineScope(Dispatchers.IO).launch{ // Not Child / No Cancel + println("Coroutine2 Start") + delay(1500) + println("Coroutine2 End") + } + CoroutineScope(Dispatchers.IO + job).launch{ // Child / Cancel + println("Coroutine3 Start") + delay(2000) + println("Coroutine3 End") + } + } + delay(300) + job.cancel() + delay(3000) + println("Final Done") +} +``` + +위 코드를 한 번 보시죠. 아까와 비슷한 코드입니다. +**하나의 launch 안에 Coroutine이 여러 개 존재**하고 있는 것을 확인할 수 있는데요. +결론부터 말씀드리면 **job.cancel()을 이용하여 최상위 Coroutine을 취소해도 두 번째 Coroutine은 취소되지 않습니다.** + +![result\_coroutine2](https://oasisfores.com/wp-content/uploads/2020/11/result_coroutine2-e1604513673714.png) + +이러한 결과가 나타나는 이유가 무엇일까요? +바로 **제어 범위, 즉 CoroutineScope가 다르기 때문**입니다. + +```kotlin +CoroutineScope(Dispatchers.IO).launch{ // Not Child / No Cancel + println("Coroutine2 Start") + delay(1500) + println("Coroutine2 End") +} +``` + +두 번째 Coroutine은 **기존 Scope와 관계없이 새로운 CoroutineScope를 생성하여 Coroutine을 실행**시키는 방식입니다. +따라서 **외부 CoroutineScope.launch의 취소 여부는 두 번째 Coroutine에 어떠한 영향도 미치지 않으므로 계속 실행**될 수 있는 것입니다. + +그런데 여기서 이상한 점이 하나 있습니다. **세 번째 Coroutine 또한 CoroutineScope를 새로 생성하는 방식인데 왜 취소된 걸까요?** + +```kotlin +CoroutineScope(Dispatchers.IO + job).launch{ // Child / Cancel + println("Coroutine3 Start") + delay(2000) + println("Coroutine3 End") +} +``` + +그에 대한 해답은 바로 **CoroutineContext의 + job**에 있습니다. +**따로 생성한 CoroutineScope를 이용하는 것도 모자라 Thread Pool까지 다르지만 이 + job 덕분에 상위 Coroutine의 영향을 받는 것입니다.** +이처럼 CoroutineContext의 일종인 Job을 잘 이용하면 **상위 Coroutine과 하위 Coroutine 사이의 관계**를 나타낼 수 있습니다. + +#### 4. suspend + +```kotlin +suspend fun myCoroutine() { + delay(1000) + println("myCoroutine") +} +``` + +위와 같이 **어떠한 함수 내부에서 Coroutine(suspend function)을 실행할 수 있게** 만들어주려면 **suspend** 라는 단어를 붙여주어야 합니다. +**suspend**를 붙여줌으로써 **해당 함수는 하나의 Coroutine으로 동작하기 위한 자격**을 얻게되며, **일시중지 및 재개(suspend & resume)이 가능**해집니다. +이렇게 만들어진 **suspend function**은 아무데서나 사용될 수 없고 어떠한 **Coroutine 혹은 suspend function 내부에서 사용**되어야 합니다. (일반 영역에서 사용 시 Compile Error) + +## Android에서 Kotlin Coroutine 사용하기 + +최대한 간결한 글을 쓰고 싶었는데 이것저것 넣다보니 앞부분이 너무 길어졌네요. +그래도 드디어 본론! **Android에서 Kotlin Coroutine 사용하기**입니다. +앞부분에서 대부분의 내용을 다 설명해버렸기 때문에 간단한 예시만 보여드리고 글을 마치려고 합니다. + +Android 환경에서는 Coroutine을 사용할 때 **Activity에 CoroutineScope를 상속받아 Coroutine을 Activity Life-Cycle에 맞추는 것을 권장**하고 있습니다. +이제 이 정도는 무슨 내용인지 다 이해할 수 있으시죠? ^^ + +위 내용을 MainActivity에 적용한 코드는 아래와 같습니다. + +```kotlin +class MainActivity : AppCompatActivity(), CoroutineScope { + lateinit var job: Job + override val coroutineContext: CoroutineContext + get() = Dispatchers.Default + job + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + setContentView(R.layout.activity_main) + job = Job() + launch { + // Coroutine + } + } + override fun onDestroy() { + super.onDestroy() + job.cancel() // Activity 종료 시 진행 중인 Coroutine 취소 + } +} +``` + +어려울 것 전혀 없습니다. +MainActivity에 **CoroutineScope interface를 상속**받아 CoroutineContext를 설정해주고, **onDestroy() 함수에 job.cancel()을 작성하여 Activity 종료 시 진행중인 Coroutine이 모두 취소**되게 한 것입니다. +CoroutineContext를 설정하는 방식에 약간의 거부감이 있을 수는 있겠지만 찬찬히 살펴보면 결국 우리가 알고 있는 방식과 별 다를 바가 없다는 것을 알 수 있습니다. + +위와 같이 Coroutine을 사용하기 위한 기본 설정이 끝났다면 **onCreate, onResume과 같은 함수에서 CoroutineScope 선언 없이 바로 launch{} 혹은 async{}를 이용하여 Coroutine을 실행**시킬 수 있습니다. +이 때 onCreate 함수 자체는 CoroutineBuilder의 { } 내부가 아니므로 **job.join()과 같은 suspend 함수를 바로 사용할 수는 없음**에 주의해야 합니다. + +Activity는 따로 제공되는 Coroutine 모듈이 없지만 ViewModel이나 Room과 같은 몇몇 객체를 위한 Coroutine 모듈은 [공식적으로 배포](https://developer.android.com/kotlin/ktx?hl=ko)되고 있으니 참고하시면 더욱 다채로운 기능 구현이 가능할 것입니다. + +## 마치며 + +이렇게 길고도 긴 **'Android에서 Kotlin Coroutine 사용하기'** 가 끝났습니다. +정신차려보니 Android는 온데간데 없고 Kotlin Coroutine만 남아있네요 ^^; + +글을 마치기 전에 제가 설명하지 않았던 부분을 마지막으로 정리해드리려고 합니다. +글의 길이가 너무 길어질 것 같아서 뺐던 내용들인데, 중요하지 않은 내용인 것은 아니니 따로 찾아서 공부하시면 반드시 도움이 될 것입니다. + +**1. Coroutine은 무엇인지, 그리고 동작 원리** +**2. Job과 Deferred의 차이점** +**3. 예외 처리 및 디버깅** +**4. Dispatchers의 다른 필드** + +이상으로 글을 마치겠습니다. 감사합니다. ^^ diff --git a/_posts/2020-11-06-CNN.md b/_posts/2020-11-06-CNN.md new file mode 100644 index 0000000000..c0d03aae1e --- /dev/null +++ b/_posts/2020-11-06-CNN.md @@ -0,0 +1,142 @@ +--- +layout: post +title: "기초부터 알아가는 CNN" +authors: [howtolivelikehuman] +tags: ["CV-image_classification"] +image: assets/images/post-image_classification/CNN_logo.png +description: "CNN에 대하여.." +featured: true +--- + +CNN 즉 합성곱신경망은 고수준의 뉴런이 저수준의 뉴런의 출력에 기반한다는 아이디어에서 나온 개념이다. + +기존의 완전연결 층에서는 3차원 데이터를 입력 층에 넣어주기위해 1차원 데이터로 변환했다. 이렇게 1차원으로 변환한 데이터는 공간적인 정보가 사라진 상태라 이미지같은 경우 구조가 깨져버려 정보가 많이 사라져버린다. 따라서 구조 정보를 보존하면서 학습하는 방법으로 등장한게 합성곱 신경망 (CNN)이다. + +LeCun에 의해 처음 개념이 개발되었고, LeNet이 그 첫번째 구조이다 + +CNN은 층을 크게 합성곱층(Convolutional Layer)과 풀링층(Pooling Layer)으로 반복하여 구성한다 + +#### Convolutional Layers (합성곱층) + +합성곱은 3차원 데이터를 필터를 통해 여러 특성을 띄는 채널 (평면)으로 나누는 과정이다. + +합성곱층은 매 층마다 모든 픽셀을 연결하는 것이 아니라, 각 뉴런의 수용영역에 있는 픽셀에만 연결이 되기 때문에 처음에는 저수준 특성에 집중하다 점점 고수준 특성으로 조합하게 해준다. + +이때 이러한 수용영역이 필터이고, 흔히 생각하는 가중치 파라미터라 할 수 있다고 한다. + +합성곱층 연산은 필터를 이동해가면서 데이터에 대응하는 원소끼리 곱한뒤 총합을 구하는 과정인데, 이를 Fused Multiply-Add(FMA)라고 한다. 물론 여기다 Bias 역시 적용될 수 있다. + +그림으로 보자면 채널 C에 따라 FN개의 필터(가중치)를 거치면, FN개의 특성을 갖는 데이터가 형성된다. + +![img](https://blog.kakaocdn.net/dn/b3FkeR/btqKibpnict/hvXg8asb8TsDP0kTVKnXsK/img.png) + +하여튼 이렇게 엄청난 합성 곱 기능을 Pytoch에서 어떻게 사용할까... + +#### Convolution 연산 + +Pytorch에서 지원하는 Convolution 연산을 위한 레이어들은 Conv1d, Conv2d, Conv3d가 있다. + +찾아보기로는 Conv1d는 주로 Text에서 많이 쓴다고 하고, 이미지 분류에는 Conv2d를 주로 사용한다고 한다. + +Conv2d는 다음과 같이 구성된다. + +`Conv2d(in_channels, out_channels, kernel_size, stride=1, padding=0, dilation=1, groups=1, bias=True, padding_mode='zeros')` + +* `in_channels` : 입력 채널 수, 흑백은 주로 1 , RGB는 주로 3 +* `out_channels` : 출력 채널 수 +* `kernel_size` : 커널 크기 +* `stride` : stride 크기 즉 입력 데이터에 필터를 적용할때 필터가 이동할 간격. 출력 데이터의 크기를 조절할때 사용. default = 1; +* `padding` : 데이터의 크기가 Conv를 지날때마다 작아지는데, 이때 가장자리의 정보가 사라지지 않게 하기 위해서 패딩 사용. 출력이 입력데이터와 공간적인 크기를 동일하게 해주기 위해 default = 0 +* `padding_mode` : padding을 뭐로 채울껀지, 근데 zero(0) 밖에 지원 안한다고 한다. +* `dilation` : 커널 사이 간격 +* `groups` : 입력 그룹 수 설정 -> 입력 채널을 그룹수로 분류, 출력 그룹 수 설정- > 입력 그룹과 출력 그룹 -> 그 그룹 안에서만 연산 +* `bias` : bias값을 설정 할지. bias 값은 임계값 같은 느낌으로, input에 가중치를 곱한 네트워크에 더해주는 값이다 (그래프를 좌-우로 움직여줌) default = true; + +이제 이미지 Tensor의 Input과 Output에 대해 살펴보자. + +Input Tensor (N, C, H, W) + +N : 배치의 크기 (몇개인지) + +C : 채널 개수 (in_channels) + +H : Input Tensor 높이 + +W : Input Tensor 너비 + +Output Tensor(N, FN, OH, OW) + +N : 배치의 크기 (몇개인지) + +FN : 출력 채널 개수 (out_channels) + +OH : $\frac{H+2padding[0]-dilation[0]*(kernal_size[0]-1)-1}{stride[0]}+1$ + +OW : $\frac{H+2padding[1]-dilation[1]*(kernal_size[1]-1)-1}{stride[1]}+1$ + +#### Pooling layer (풀링층) + +풀링의 이유에는 보통 두가지 이유가 있다고 말한다. + +하나는 풀링을 통해 데이터의 크기를 줄일 수 있다. 압축함으로써 처리해야 할 양을 줄일 수 있다. + +나머지는 풀링을 통해 추출한 특징들은 이미지 내에서 위치에 변화에 영향을 덜 받는다. + +풀링연산이 인접 픽셀들 몇개를 대상으로 진행되어 입력이 조금 변화해도 풀링된 출력들은 거의 변하지 않는데, 따라서 이미지에 있어 위치보다 특징을 더 살피게 만들어 공간적인 한계를 극복한다. + +![img](https://blog.kakaocdn.net/dn/cmI0rh/btqJ8glHhF6/mkPA9EbTlCOLwzfzWwFio1/img.png) + +크게 두가지 경우가 있는데 해당 영역에서 최대값을 찾는 MaxPooling과 평균값을 계산하는 AveragePooling이 있다. + +#### Pooling 연산 + +MaxPool1d, MaxPool2d, MaxPool3d, AvgPool1d, AvgPool2d, AvgPool3d 등이 있는데, + +역시 찾아보기로는 주로 이미지에서는 MaxPool2d을 사용한다고 한다. + +`MaxPool2d(kernel_size, stride=None, padding=0, dilation=1, return_indices=False, ceil_mode=False)` + +* `kernel_size` : 커널 크기 +* `stride`: stride 크기 +* `padding`: 패딩 크기 +* `dilation`: 커널 사이 간격 +* `return_indices`: 최대 인덱스 반환 여부 +* `ceil_mode`: true면 output 크기를 계산할 때 ceiling 함수 사용 + +이제 Input과 Output Tensor의 크기에 대해 살펴보자. + +Input Tensor (N, C, H, W) + +N : 배치의 크기 (몇개인지) + +C : 채널 개수 + +H : Input Tensor 높이 + +W : Input Tensor 너비 + +Output Tensor(N, C, OH, OW) + +N : 배치의 크기 (몇개인지) + +C : 채널 개수 + +OH : $ \lfloor\frac{H+2padding[0]-dilation[0]*(kernal_size[0]-1)-1}{stride[0]}+1\rfloor$ + +OW : $ \lfloor\frac{H+2padding[1]-dilation[1]*(kernal_size[1]-1)-1}{stride[1]}+1\rfloor$ + +이전 CIFAR-10 연습에서 사용한 LeNet-5모델은 아래와 같이 두번의 Convolution 연산과 두 번의Pooling (SubSampling)연산을 거쳐 특징을 추출한 이후에 Fully-connected 신경망에 보내 분류를 수행하는 것을 알 수 있었다!! + +한마디로 CNN은 Convolution과 Pooling을 반복적으로 사용하면서 데이터에서 불변하는 특징을 찾는 과정이다. + +이제 이러한 특징을 입력데이터로 Fully-connected 신경망에 보내 분류를 수행하면 된다. + +![img](https://blog.kakaocdn.net/dn/HA7Hq/btqJ92tU4k7/KN0jht5rqhZFBy9g66LHTk/img.png) + +[참고 자료] + +> +> +> +> +> diff --git a/_posts/2020-11-06-Fall_intro-Oct.md b/_posts/2020-11-06-Fall_intro-Oct.md new file mode 100644 index 0000000000..9b971308ad --- /dev/null +++ b/_posts/2020-11-06-Fall_intro-Oct.md @@ -0,0 +1,330 @@ +--- +layout: post +title: "Fall intro team 10월 파이썬 과제" +authors: ["maybeluna"] +tags: ["Fall intro"] +image: https://user-images.githubusercontent.com/72259053/116891473-b4cfe880-ac69-11eb-8d6b-3133a310be6e.png +description: "과제 1, 2, 3" +featured: false +--- + +개발의 '개'자도 모르고 코딩의 '코'자도 모르는 사람이 + +Don't panic 이라는 신념 하에 개발을 하는 과정을 적어나가도록 하겠습니다. + +## 1. 목표 + +- Python 기본기를 다지고 Python을 응용하여 어떠한 프로그램을 만들 수 있는 지 생각해보기 +- 개발에 익숙해지는 것 + +## 2. Python + +파이썬은 '프로그래밍 언어'로 현재 우리가 파이썬을 깐다는 것은 파이썬 번역기를 깔았다는 것 + +즉 인터프리터 코드를 명령으로 변환해주는 번역기를 깔았다는 것이다. + +## 3. Git (깃) + +코드의 분산 버전 관리 시스템이라고 불리며 여러사람이 함께 코드를 짤 때 유용한 시스템 + +로컬 저장소(개인 컴퓨터)와 원격 저장소(중앙 관리 컴퓨터 환경)로 이루어져 있으며 앞으로 Git을 통해 채점이된다. + +- 깃 사용하기 + + - 깃은 기본적으로 CLI를 사용 + - git clone을 통해 원격저장소에서 로컬 저장소로 이동 + - git add <저장 파일> 저장할 파일 지정 + - git coomit -m "남길 메세지" add 했던 것 저장 + - git push <원격 저장소 이름> + +- 우당탕탕 깃 + + - git leave + + git 설정이 꼬이면서 repository를 삭제한다는 것이 leave를 해버렸다! + + leave 기능은 소유 권한을 내려놓는 기능으로 + + leave 한 원격저장소 제거하거나 다시 소유권 부여를 통해 해결이 가능했다... + + 나의 경우 기존 원격저장소를 제거하고 git을 다시 생성하였고 다시 git을 사용할 수 있게 되었다. + + - git 꼬임 + + leave를 할 때부터 알아봤어야 했는데 git은 과제 1을 하는 내내 나를 괴롭혔다.. ㅠ + + **error: failed to push some refs to 'origin'**이 계속 나왔고 가장 최근 원격저장소로 작업해야하는데 그렇지 않아서 발생한 문제라고 되어있었다. + + 권고한대로 pull 명령어를 써보았는데 **refusing to merge unrelated histories** 가 나오면서 병합자체가 되지 않았다! + + 그래서 강제로 pull(git -hard HEAD)도 해보고 유튜브에서 git add -A를 해보라고 해서 해보기도 했지만 결과는.. 여전히 이 상태 **error failed to push some refs to 'origin'**이 뜨면서 병합 불가! + + ![git_error](https://user-images.githubusercontent.com/72259053/116881834-b7791080-ac5e-11eb-9d97-5fc9adae0ec2.png) + + 결국 git clone을 새 폴더에 다시 작업하여 시작! + + 후.. ㅠ 애증의 git.. ! + + git이 꼬인 이유를 대략 예상해보았는데 + + leave를 하면서 기존 원격저장소를 제거하고 git을 새로 생성했는데 로컬 저장소에서는 기존 파일로 작업해서 그렇지 않았나싶다..? + +## 4. Python & VScode + + 코딩 초보자가 접근하기 쉽다는 python을 사용하여, 코딩이라는 것의 뼈대를 잡아가도록 하였다. + 문서 편집기로는 vscode를 사용하여 작업을 한다. + +## 5. print + +과제 1에서 주로 사용하는 명령어 'print' + +print란 화면의 결과물을 출력하기 위해 사용되는 명령어로 다양한 방법으로 print를 활용해보았다. + +- 문자 프린트 + +```python +>>> print("Hello World!") +Hello World + +>>> print("cake") +>>> print("cookie") +>>> print("tea") +cake +cookie +tea +``` + +- 변수 프린트 + +```python +>>> my_var = 10 +>>> print(my_var) +10 +``` + +- 연산 + +```python +>>> print(5+5) +>>> print(4-2) +>>> print(2*8) +>>> print(9/3) +10 +2 +16 +3.0 + +>>> print(8 ** 2) +>>> print(53 // 7) +>>> print(7 % 4) +64 +7 +3 +``` + +### 과제 1을 통해 배운 점 + +1. python은 대소문자 구분을 한다. + + 실제로 Hello World를 프린트할 때 'W'를 소문자 'w'로 올려서 실패 + +2. 파이썬 데이터 타입이 매우 다양하기 때문에 이를 구별해주어야 한다. + + - str(string) 문자열 + - int(integer) 정수 + - float(floating-point number) 실수 + +3. 연산자 사용 + + - ** (제곱) + - // (몫) + - % (나머지) + +기존에 기본 사칙연산 관련된 연산자는 알았으나 제곱, 몫, 나머지는 잘 몰라서 매우 신기했다. + +더불어 코딩을 처음 해보고 그랬는데 깃이 꼬이면서 머리가 터질 뻔하다가 겨우 진정하고 과제를 이어나갔다. don't panic이 왜 중요한지 깨닫게 된 고마운 경험이라고 생각한다,,,! + +## 6. input과 if + +과제 2에서는 주로 input과 if를 사용했다. + +input 명령어란 사용자가 입력한 값을 어떤 변수에 대입할 때 쓰는 명령어로, input에 입력되는 모든 것은 문자열(str) 취급하기 때문에 이를 주의해야한다. + +if문은 조건을 판단하고 그 조건에 맞는 상황이 오면 if문 안의 코드를 수행하는 기능을 가졌다. 여러가지 상황이 주어졌을 때 컴퓨터에서 이를 판단하고 정확한 수행을 하기 위해 쓰인다. + +- 입력한 값 변수 대입해보기 + +```python +>>> my_var = input() +hello +>>> print(my_var) +hello + +>>> money = input() +10 +>>> print(int(money)*2) +20 +``` + +- 비교 연산자 + +```python +>>> print(3<4) +>>> print(7==8) +>>> print(15>=1) +True +False +True +``` + +- 논리 연산자 + +```python +>>> print(3 == 3 and 4 == 4) +>>> print(4 < 2 or 1 > 3) +>>> print(not 3 < 4) +True +False +False +``` + +- 조건문 + +```python +>>> n = int(input()) +28 +>>> if n % 4 == 0 and n % 7 == 0: +... print('FizzBuzz') +... elif n % 4 == 0: +... print('Fizz') +... elif n % 7 == 0: +... print('Buzz') +... else: +FizzBuzz + +>>> n = int(input()) +2 +>>> if (n+1) % 3 == 0: +.. print('Clap') +... else: +... print(n+1) +Clap +``` + +### 과제 2를 통해 배운 점 + +1. 비교 연산자 + + - a < b (a가 b보다 작으면 True, 크거나 같으면 False) + - a == b (a와 b가 똑같으면 True, 다르면 False) + - a<=b (a가 b보다 작거나 같으면 True, 크면 False) + - 연속적으로 있으면 is, is not, ==, !=, <, >, <=, >= 순서로 판단 + +2. 논리 연산자 + + - a and b (a와 b값 모두 True일 때 True, 하나라도 False면 False) + - a or b (a와 b값 중 하나만 True여도 True, 둘 다 False인 경우 False) + - not x: 논리값이 False인 것을 True로 바꿔주고 True인 것을 False로 바꿔준다. + - 연속적으로 있으면 not, and, or 순서로 판단한다. + - 비교연산자가 논리연산자보다 우선으로 판단된다. + +3. 조건문 + + - 조건문 if 끝에는 항상 콜론(:)이 필요하다 + - else는 if를 분기해주는 것으로 이 역시 콜론(:)이 필요하다. + - if 조건문에 맞는 상황에 수행할 문장(ex. print)에는 들여쓰기 필요하다. + +우리가 아무런 생각없이 사용하는 무인키오스크, 인터넷의 수많은 웹사이트들이 이러한 조건문과 다양한 연산자를 통해 실행되고 있을거라 생각하니 프로그래머 분들에게 고마움이 생겼다. 아직 응용은 버겁지만 꾸준히 하는 것을 목표로 해야겠다. + +## 3. for + +과제 3에는 주로 반복문인 for이 쓰였다. + +for문이란 순서형 자료(리스트, 튜플)의 첫 요소부터 마지막 요소까지 변수에 대입하여 수행되는 것으로 원하는 명령을 반복할 때 쓰인다. + +- 순서형 자료 + +```python +>>> system = ['Mercury', 'Venus', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'] +>>> system.insert(2, 'Earth') +>>> print(system) +['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'] + +>>> my_list = [1, 2, 3, 4, 5, 6, 7, 8] +>>> print(my_list[-3]) +6 +``` + +- 반복문 + +```python +>>> bag = [1, 3, 5, 7, 9] +>>> n = int(input()) +3 +>>> if n in bag: +... print("YES") +...else: +... print("NO") +YES + +>>> for n in range(1,101): +... print(n) +1 +2 +3 +. +. +. +100 + +>>> qm = int(input()) +3 +>>> n = [2, 3, 5, 7, 13, 17, 19, 31, 61] +>>> ms = [2**t - 1 for t in n] +>>> if qm >= 2**64: +... print("NO") +... quit() +>>> for mer in ms: +... if mer % qm == 0: +... print("YES") +... break +... else: +... print("NO") +YES +``` + +### 과제 3을 통해 배운 점 + +1. 리스트 + + - [a, b, c] 형식으로 이루어져 있다. + - 위 리스트에서 a가 0번째이며 c는 -1번째로 표현 가능하다. + +2. 반복문 + + - while, for, continue, break 같은 명령어를 이용 + - while: 조건이 참인 동안 반복 + - for: 순서열 처음부터 끝까지 반복 + - continue: 조건이 참이면 반복문 계속 + - break: 조건이 참이면 반복문 중단 + - 반복문 끝에 콜론(:) 필수 + - 반복문을 수행할 문장에는 들여쓰기 필수 + +3. range + + - range(start, end, interval) + - end 순서열은 포함되지 않는다. + +마지막 메르센소수 문제가 어려웠다. 메르센 소수 자체를 구하는 코드를 너무 어렵게 짰던 탓이었다. + +![mersenne](../assets/images/post-INTRO-Oct/mersenne.png) + +이러한 방식으로 진행햇는데 자연수를 판단하는 코드를 짜지 못해 막혀버렸다. + +결국 메르센 수 범위가 제한되어 있는 것을 보고 그 범위 안에 있는 메르센 소수를 리스트 안에 다 적용하였고 문제는 해결하였다. + +멘토님의 조언으로 메르센 수를 판단하고 소수를 판단했으면 더 확장된 범위에서 진행할 수 있을 것같아 나중에 도전해보기로 하였다. + +지난 한 달 동안 목표했던 과제 5까지 완수하지 못했다. 생각보다 시간이 없었고 게다가 시험기간이라 그런지 매일 밤새는게 일상이다보니 많이 해보지 못했던 것은 핑계일까..? + +11월 달 스프린트의 경우 시험 기간이 아니니 부지런히 해서 목표를 완수할 계획이다. 그러려면 우선 쉘이라는 것과 친해져야할 듯 하다. diff --git a/_posts/2020-11-06-knowledge-distillation.md b/_posts/2020-11-06-knowledge-distillation.md new file mode 100644 index 0000000000..58c0b817f0 --- /dev/null +++ b/_posts/2020-11-06-knowledge-distillation.md @@ -0,0 +1,96 @@ +--- +layout: post +title: "Knowledge Distillation" +authors: [easter] +tags: ["Knowledge Distillation"] +image: assets/images/kd.png +description: "Knowledge Distillation" +featured: true +--- +# Distilling the Knowledge in a Neural Network +이승현 + +Knowledge Distillation(지식전이)는 미리 잘 학습된 큰 네트워크의 지식을 실제로 사용하고자 하는 작은 네트워크에게 전달합니다. + +미리 학습이 잘 된 큰 네트워크와 경령화시키고자 하는 작은 네트워크 분류 결과차이를 최소화하도록 학습합니다. + - Background + - Neural Net Distillation + - Result + - Code Tutorial + +## Background + + - 오버피팅을 피하기 위해서 Neural Net 에서 앙상블 기법을 사용하게 됩니다. + - 앙상블은 학습 및 추런에 계산시간이 많이 걸린다는 단점이 있습니다. + - 앙상블만큼의 성능과 적은 파라미터 수를 가진 뉴럴넷 모델이 필요합니다. + +## Neural Net Distillation +Neural Net은 Class의 확률을 Softmax Layer을 Output으로 이용해서 예측합니다. + +수식은 아래와 같은데 q는 클래스에 속할 확률, z는 전 layer의 weight sum, T는 temperature라는 값으로 default 1로 둡니다. + +T가 1이면 클래스에 속할 확률은 0 또는 1의 이진화된 결과값을 얻는데 이는 확률분포를 알기 어렵게 만듭니다. + +Neural Net의 Output이 [0 0 0 1] 인 경우와 [0.1 0 0 0.9]인 경우가 있을 때, + +[0.1 0 0 0.9]에서 0번 클래스가 0.1 인 것을 아는 것이 [0 0 0 1]의 Output으로 학습할 때보다 학습에 도움이 되는 지식을 가집니다. + +개와 고양이가 같은 특징을 가지는 경우를 예를 들 수 있습니다. + +T가 클수록 더 연속적인 확률값을 얻으므로 soft한 확률 분포가 클래스마다 만들어지게 됩니다. + +soft하면 결과값이 천천히 증가한다는 뜻입니다. 하지만 T가 너무 커지면 모든 클래스의 확률이 비슷해집니다. + +![](https://gblobscdn.gitbook.com/assets%2F-M3RVHjB3jxZ_gczx5nQ%2F-M3RY_HPLzeqjNTWopMn%2F-M3RaAcFGtYuxAdS_0dp%2Fimage.png?alt=media&token=8b2b62cd-7498-43fe-8108-f400657b93c3)(T가 무한히 커지면 exp은 1에 가까워집니다.) + + +> ## Matching logits is a special case of distillation +만약 T가 무한히 커지면 Loss function에는 어떤 일이 생길까요? + +크로스엔트로피C를 logit에 대하여 미분하면 아래 식으로 정리가 됩니다. v는 soft target 확률을 생성하는 weight sum값입니다. + +![](https://gblobscdn.gitbook.com/assets%2F-M3RVHjB3jxZ_gczx5nQ%2F-M3RY_HPLzeqjNTWopMn%2F-M3Rab_zGfPxPTiXutl4%2Fimage.png?alt=media&token=4593d6fe-da50-4134-84af-4548c8f15814) + +T가 logit, z에 비하여 커지면 아래와 같이 Approximate할 수 있습니다. + +![](https://gblobscdn.gitbook.com/assets%2F-M3RVHjB3jxZ_gczx5nQ%2F-M3RY_HPLzeqjNTWopMn%2F-M3RatUQE3GPBKhCxkPb%2Fimage.png?alt=media&token=f3c51018-2074-4775-b297-6711412f5b1f) + +만약 전 layer의 output값인 z, v zero-centered하다면z/T는 0이 됩니다. + +![](https://gblobscdn.gitbook.com/assets%2F-M3RVHjB3jxZ_gczx5nQ%2F-M3RY_HPLzeqjNTWopMn%2F-M3RbNuimp2fLnony8mY%2Fimage.png?alt=media&token=a807ab9f-e351-42bb-8f9e-70b5ceab5a0b) + +여기서 알 수 있는 것은 T가 클 때는 Gradient가 작아지므로 좀 더 천천히 soft하게 학습하고, T가 작을 때는 Gradient가 커져서 좀 더 급격하게 학습합니다. + +## Result +### MNIST + - Two hidden layer + Relu : 146 test errors + - Two hidden layer + DropOut : 67 test errors + - Two hidden layer + Relu + soft target : 74 test errors + +Soft Target을 사용할 때 error가 가장 작습니다. + +또한 놀라운 점은 숫자 3에 해당하는 데이터를 보여주지 않고 학습을 하였을 때 109 test error를 보여주었습니다. + +학습하는 모델이 학습 중에 3을 본적이 없지만 soft label을 통해 3과 비슷한 숫자들을 통해 유추합니다. + +## Code +저는 Cifar10 Dataset, Tensorflow로 실험을 진행하였습니다. [Code](https://github.com/lsh3163/TF-2.0-Knowledge-Distillation) +### Performance +Temperature : 10 +온도에 따른 실험을 하진 못했습니다. + +Small Network 과 Distillation의 성능이 비슷해보이지만, 학습의 안정성은 확실히 Distillation이 높았습니다. + +추가 실험이 필요해보입니다. + +|Model | Accurarcy | +| ------ | ------ | +| Small Network | 85%| +| Big Network | 90% | +| Distillation | 85%| +### Parameter +|Model | Parameter| +| ------ | ------ | +| Small Network | 770,378| +| Big Network | 3844938| +| Distillation | 770,378| diff --git a/_posts/2020-11-07-ml-paper-review.md b/_posts/2020-11-07-ml-paper-review.md new file mode 100644 index 0000000000..4e1dfc6af3 --- /dev/null +++ b/_posts/2020-11-07-ml-paper-review.md @@ -0,0 +1,36 @@ +--- +layout: post +title: "머신러닝 논문 리뷰를 해볼까?" +authors: [jeongukjae] +tags: ["ML"] +image: +description: "머신러닝 논문 리뷰 시작해보기" +featured: false +--- + +DSC UOS에서는 다양한 스터디를 권장하고 있습니다. 해당 스터디 중 논문 리뷰 스터디도 존재합니다. 왜 이 스터디를 하기로 헀고, 어떻게 진행 중인지 적어보겠습니다. + +## _ + +머신러닝을 배울 수 있는 방법은 다양합니다. 가장 눈에 띄는 방법으로 책과 영상 강의, 논문이 있습니다. 각각의 방법들은 모두 좋은 방법이지만, 왜 DSC UOS에서는 논문 스터디를 하기로 했을까요? + +시중에는 머신러닝 대가들의 명서가 많이 존재합니다. 이 책들은 기본에 충실하면서도 좋은 인사이트를 많이 알려주죠. 하지만 현재의 트렌드를 알기에 많이 힘들죠. 더군다나 해당 책들 자체가 완독하기에 꽤나 어려운 것이 사실입니다. + +그래서 많이 접하는 매개체가 영상 강의인 것으로 보입니다. +NLP 강의인 CS224n부터, 머신러닝 강의에서 항상 추천을 받는 CS231n 등등 세계적인 학교들의 수업은 최신의 내용을 많이 담으면서도 기본적인 내용도 충실하기 때문에 좋은 매개체가 되죠. +하지만 이 강의들도 반년, 1년이 지나가면서 점점 최신의 정보를 얻기에 힘들어집니다. + +그래서 많은 분들이 책과 영상 강의를 본 후에 논문 스터디를 많이 하는 것으로 보여집니다. +저 또한 논문 리뷰 스터디를 여러 곳에서 해보면서 도움을 받은 면도 있고, 마침 스터디를 끌고 가야 하기에, DSC UOS에서 논문 스터디를 하고자 하였습니다. +책과 영상 강의에 대한 접근성은 좋지만, 논문에 대한 스터디가 부족하다는 판단도 존재하였습니다. +실제로 DSC UOS에서는 컴퓨터 비전쪽의 실습 스터디가 있었지만 이론을 공부하는 스터디는 없었습니다. + +## _ + +현재 인원이 4명이 있고, 학교 또는 회사와 동반하여 스터디를 진행하고 있기 때문에 격주에 1명씩 논문을 리뷰 하기로 하였습니다. 서로에게 부담을 덜 주면서 내용이 좋은 스터디를 하고자 하였습니다. 또한 분야 상관없이 논문을 선택하기로 했고, 좋은 글이라면 해당 글까지 가능하도록 하였습니다. + +현재까지 진행한 논문/아티클 리뷰 리스트는 아래와 같습니다. + +* PRADO: Projection Attention Networks for Document Classification On-Device +* Quasi-Recurrent Neural Networks +* [Advancing NLP with Efficient Projection-Based Model Architectures - Google AI Blog](https://ai.googleblog.com/2020/09/advancing-nlp-with-efficient-projection.html) diff --git a/_posts/2020-11-08-WEB_Mission2.md b/_posts/2020-11-08-WEB_Mission2.md new file mode 100644 index 0000000000..218b249570 --- /dev/null +++ b/_posts/2020-11-08-WEB_Mission2.md @@ -0,0 +1,141 @@ +--- +layout: post +title: "Web Mission2 - 회전목마, carousel 구현하기" +authors: [MOBUMIN] +tags: ["Web"] +image: assets/images/post-WEB-Mission2/01.clone.PNG +description: "Git 생초보 분들께 추천드리는 포스트." +featured: false +--- + +WEB 팀의 Mission2는 아래 링크된 사이트를 clone하는 것입니다! Mission 제작하느라 고생하셨을 웹 스터디 팀의 형진님께 박수를 보냅니다👏👏 + +> + +[형진님의 미션이 궁금하시다면 이곳을 클릭해주세요.](https://www.notion.so/2-Mission-Clone-using-Carousel-af5c2b2aad87451c91b022f47c005f04){: target="_blank"} + +미션 페이지에서도 알 수 있듯, 이번 미션의 목표는 아래와 같습니다. + +1. 주어진 웹사이트와 동일한 형태와 내용 +1. 주어진 사진 4장으로 2개의 carousel 배치 +1. Github Pages로 배포 + +지금부터 기억을 더듬으며 제가 만들었던 과정을 적어볼까 합니다. + +## position:fixed + +주어진 웹사이트의 가장 위에는 Pat Buomo ㅡ Curator, Journalist 라는 글자가 **고정**되어 있습니다. 스크롤을 내려도 그 자리에 유지되고 있죠. + +해당 요소는 css에서 `position:fixed`로 쉽게 고정이 가능했습니다. + +```css +header{ + position:fixed; + width: 100%; + height: 80px; + top:0; left:0; + text-align: center; + font-size:1.5rem; + color: rgba(0, 0, 0, 0.75); + z-index: 1; +} +``` + +저는 이 요소에 조금 다른 효과도 주고 싶었어요. 범위에 들어오면, 글자가 바뀌면서 메뉴가 나오게 하도록요! + +이것은 아주 간단한 js로 해결이 가능합니다. + +먼저 html에서 내가 해당 기능을 넣고자 하는 div에 `onmouseover="함수이름()" onmouseout="함수이름()"` 을 넣어주고, js에서 아래처럼 해줍니다. + +```javascript +var menutxt=document.getElementsByClassName("menu-text"); +var nav=document.getElementsByClassName("nav"); +function on_menu(){ + menutxt[0].style.display="none"; + for(var i=0;i + +위의 사이트에서는 carousel이 하나인 경우와 여러개인 경우 모두 설명해주고 있습니다. 사이트에 나온 대로 따라하면 그냥 구현이 되는 수준입니다. 좋은 사이트 공유해주신 형진님께 감사드립니다. 헤헤😊 + +위의 링크를 참고하여 작성한 코드는 아래와 같습니다. + +```javascript +/* arrow */ +var left=document.getElementsByClassName("prev"); +var right=document.getElementsByClassName("next"); +var left2=document.getElementsByClassName("prev2"); +var right2=document.getElementsByClassName("next2"); +function on_arrow(){ + left[0].style.display="block"; + right[0].style.display="block"; + left2[0].style.display="block"; + right2[0].style.display="block"; +} +function off_arrow(){ + left[0].style.display="none"; + right[0].style.display="none"; + left2[0].style.display="none"; + right2[0].style.display="none"; +} + +/* carousel */ +var slideIdx=[0,0]; +var slideID=["slide","slide2"] +showSlides(0,0); +showSlides(0,1); + +function plusSlides(n, no){ + showSlides(slideIdx[no] += n, no); +} +function showSlides(n, no){ + var i; + var x = document.getElementsByClassName(slideID[no]); + if (n > x.length-1) {slideIdx[no] = 0} + if (n < 0) {slideIdx[no] = x.length-1} + for (i = 0; i < x.length; i++) { + x[i].style.display = "none"; + } + x[slideIdx[no]].style.display = "block"; +} +``` + +이렇게 바로 사이트가 쨘 완성되었으면 좋았겠지만, 저는 이 carousel을 구현할 때 문제점에 봉착했습니다. + +클론할 사이트처럼 화살표가 아닌 다른 곳을 클릭하더라도 슬라이드가 넘어가도록 `plusSlides`를 슬라이드를 감싸고 있는 div에도 줬더니, 오른쪽 화살표는 슬라이드가 두 장씩 넘어가고 왼쪽 화살표는 먹히지 않는 문제가 있었어요. + +이 issue로 오랫동안 애먹었는데, 문제점과 해결방안을 제시해주신 **형진님** 덕분에 정말 간단하게 해결할 수 있었습니다. + +`plusSlides`를 arrow와 슬라이드를 감싸고 있는 div에 줬을 때, 범위가 겹쳐 버려서 함수가 두 번 적용되어 이런 문제가 생기고 있었던 것이었습니다. + +그래서 간단하게, arrow를 div 밖으로 빼주고 먼저 선언해주었더니 해결이 되었습니다. + +[제가 만든 클론 페이지가 궁금하시다면 이곳을 클릭해주세요!](https://mobumin.github.io/DSC-web/missionpage/mission2.html) + +## 마치며 + +Mission 2까지 완수하면서, 이론적으로만 대충 사용할 줄 알았던 html, css, js를 실전에서 사용해볼 수 있었습니다. 아직도 걸음마도 못 뗀 수준이지만, 강의만 듣던 때보다는 미션을 해결하면서 비약적인 성장을 이룬 것 같아요. + +현재는 Mission3을 진행중인데, Mission3 미션 페이지를 보자마자 아직 멀었다는 것을 깨달을 수 있었습니다. + +웹 프론트엔드 & 백엔드 개발자가 되기 위해서 열심히 해야겠다는 생각이 듭니다. 웹 팀 다 같이 힘내봐요!🙌 diff --git a/_posts/2020-12-02-WEB_Mission3.md b/_posts/2020-12-02-WEB_Mission3.md new file mode 100644 index 0000000000..342ae41afc --- /dev/null +++ b/_posts/2020-12-02-WEB_Mission3.md @@ -0,0 +1,320 @@ +--- +layout: post +title: "Web Mission3 - Something behind, REST API 웹 서버 구현하기" +authors: [r4k0nb4k0n] +tags: ["Web"] +image: assets/images/post-WEB-Mission3/01.intro.png +description: "Something behind..." +featured: false +--- + +Web Team의 Mission3는 REST API 웹 서버를 구현하는 것입니다! 부족한 설명에도 불구하고, 끝까지 포기하지 않고 동료들과 함께 결과물을 완성한 Web Team 멤버들에게 박수👏를 보냅니다😁 + +> [#3 Mission : Something behind](https://www.notion.so/r4k0nb4k0n/3-Mission-Something-behind-b507a0cf07004ac5b569aed4ffafbdc4){: target="\_blank"} + +지금부터 제가 요구사항에 따라 만드는 과정을 설명드리겠습니다. + +## 목표 및 요구사항 + +웹 관련 예제들 중 단골 소재는 Todo list입니다. 단순하지만 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create, Read, Update, Delete(CRUD)를 다룰 수 있기 때문이죠. 이번 미션의 목표도 **Todo list 기능을 하는 REST API 웹 서버를 구현하는 것**입니다. + +세부적인 요구사항은 아래와 같습니다. + +- Resource Model `todo` + + ```json + { + "id": 0, + "content": "string", + "completed": false + } + ``` + +- `GET /todos` + + - request + - no parameters required. + - response + + - `db.json`에 들어있는 `todos` 리스트를 리턴합니다. + + ```json + { + "todos": [ + { "id": 1, "content": "HTML", "completed": false }, + { "id": 2, "content": "CSS", "completed": true }, + { "id": 3, "content": "Javascript", "completed": false } + ] + } + ``` + +- `POST /todos` + + - request + + - parameter type - `body` + + ```json + { + "content": "종강하기" + } + ``` + + - response + + - `db.json`에 들어있는 `todos` 리스트에 `body`로 담겨져서 들어온 `content`를 내용으로 하는 새로운 `todo`를 추가하는 작업을 하고, 리턴합니다. + + ```json + { + "success": true, + "todo": { + "id": 4, + "content": "종강하기", + "completed": false + } + } + ``` + +- `PATCH /todos/{todo_id}` + + - request + + - parameter type - `path` + - `todo_id` + - parameter type - `body` + + ```json + { + "content": "제발 종강하기", + "completed": true + } + ``` + + - response + + - `db.json`에 들어있는 `todos` 리스트에 `path`로 담겨져서 들어온 `todo_id`를 가지는 `todo`를 `body`로 담겨져서 들어온 내용으로 수정을 하는 작업을 하고, 이를 리턴합니다. + + ```json + { + "success": true, + "todo": { + "id": 4, + "content": "제발 종강하기", + "completed": true + } + } + ``` + +- `DELETE /todos/{todo_id}` + + - request + - parameter type - `path` + - `todo_id` + - response + + - `db.json`에 들어있는 `todos` 리스트에 `path`로 담겨져서 들어온 `todo_id`를 가지는 `todo`를 삭제하는 작업을 하고, 이를 리턴합니다. + + ```json + { + "success": true + } + ``` + +## 환경 설정 + +여러 가지의 프로그래밍 언어와 프레임워크로 위 요구사항을 구현할 수 있습니다. 저는 이전에 Node.js + Express.js 조합으로 구현을 해본 경험이 있기 때문에, 새로운 것들을 접해보고자 Python과 FastAPI를 이용해보기로 결정했습니다. + +아래 과정은 macOS를 기준으로 합니다. + +```bash +$ brew install python # 패키지 매니저 Homebrew를 이용해서 python 설치 +$ easy_install pip # Python 패키지 관리 시스템인 pip를 설치 +$ pip install virtualenv # 필요한 모듈들을 글로벌 설치하지 않고 로컬로 사용하기 위해 virtualenv 모듈 설치 +$ python3 -m venv .venv # .venv 디렉토리에 virtualenv 생성 +$ . .venv/bin/activate # virtualenv 활성화 +(.venv) $ pip install fastapi[all] # virtualenv에 fastapi 모듈 설치 +(.venv) $ pip freeze > requirements.txt # 해당 프로젝트에 필요한 모듈들을 기록 +``` + +Python 프로젝트에서 필요한 모듈들을 해당 시스템에 전역 설치를 하지 않고 virtualenv를 사용하여 설치하는 이유는 다른 프로젝트나 환경과 충돌을 방지하기 위함입니다. + +```python +from fastapi import FastAPI + +app = FastAPI() + + +@app.get("/") +async def root(): + return {"message": "Hello World"} +``` + +위 `main.py`를 아래와 같이 실행하면 접속해볼 수 있습니다. + +```bash +(.venv) $ uvicorn main:app --reload +INFO: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit) +``` + +FastAPI의 장점 중 하나는 아래와 같이 API를 테스트할 수 있는 Interactive API Documentation을 자동으로 생성하여 제공한다는 점입니다. 이러면 다른 사람들과 협업할 때 매우 편하죠😊 + +![02.api-docs.png](../assets/images/post-WEB-Mission3/02.api-docs.png) + +## 구현하기 + +먼저, 실제 데이터베이스를 사용하는 대신 이를 모사하기 위해 `db.json` 파일을 사용하기 때문에 이에 필요한 내용들을 작성합니다. + +```python +# `db.json` 파일을 Python의 dict로 변환하기 위해 필요한 모듈 +import json + +# `db.json` 파일을 불러서 읽은 뒤 이를 dict로 변환한다. +db = None +with open('./db.json', 'r+', encoding='utf-8') as f: + db = json.load(f) + +# python dict인 `db`를 다시 `db.json` 파일에 담아서 저장하는 메소드. +def dbSync(): + with open('./db.json', 'w', encoding='utf-8') as f: + json.dump(db, f, indent='\t') + +# 특정 `todo_id`를 가지는 `todo`를 찾아서 리턴해주는 메소드. +def findTodoInDB(todo_id): + return next(i for i, x in enumerate(db["todos"]) if x["id"] == todo_id) +``` + +그리고 FastAPI 인스턴스를 생성하도록 합니다. + +```python +from fastapi import FastAPI + +app = FastAPI() +``` + +FastAPI에서는 Python의 decorator를 이용하여 정해진 Path와 HTTP Method에 decorated가 된 메소드가 실행되도록 합니다. + +```python +@app.get("/todos/") +async def readTodo(): + return "Implement this!" + +@app.post("/todos/") +async def createTodo(): + return "Implement this!" + +@app.patch("/todos/{todo_id}") +async def updateTodo(todo_id: int): + return "Implement this!" + +@app.delete("/todos/{todo_id}") +async def deleteTodo(todo_id: int): + return "Implement this!" +``` + +먼저 `GET /todos`를 구현하겠습니다. 이는 크게 어려울 것은 업습니다. `db.json`에 담긴 내용을 그대로 리턴하면 됩니다. 이 때 `try..except` 구문을 사용하는 이유는 도중에 예외가 발생하더라도 서버가 종료되지 않고 계속 실행되게 하여 안전성을 높이기 위함입니다. + +```python +@app.get("/todos/") +async def readTodo(): + try: + return db + except Exception as ex: + return ex +``` + +다음은 `POST /todos`를 구현하겠습니다. 여기서는 `body` parameter를 받아서 작업을 해야 하는데요. 이 때 `body`의 schema를 정해주는 방법이 `pydantic` 모듈의 `BaseModel` 클래스를 이용하는 것입니다. 이를 통해 받아온 내용을 사용하여 새로운 `todo`를 만들고 `db.json`에 반영까지 해주면 끝입니다. + +```python +from typing import Optional +from pydantic import BaseModel + +class RequestBodyTodo(BaseModel): + content: Opitonal[str] = None + completed: Optional[str] = None + +@app.post("/todos/") +async def createTodo(body: RequestBodyTodo): + try: + created = { + "id": len(db["todos"]) + 1, + "content": body.content, + "completed": False + } + db["todos"] += [ created ] + dbSync() + return { + "success": True, + "todo": created + } + except Exception as ex: + return { + "success": False + } +``` + +이젠 수정, 갱신을 담당하는 `PATCH /todos/{todo_id}`입니다. 이 경우에는 `body`, `path` parameter 두 개를 받아와야 하는데요. decorated method의 parameter에 정의해주면 간단하게 가져다 쓸 수 있습니다. `findTodoInDB()` 메소드를 통해 수정하고자 하는 `todo`의 index를 찾은 뒤 `body` parameter에서 받은 값들로 수정해주고 이를 `db.json` 파일에 반영하면 끝입니다. + +```python +from typing import Optional +from pydantic import BaseModel + +class RequestBodyTodo(BaseModel): + content: Opitonal[str] = None + completed: Optional[str] = None + +@app.patch("/todos/{todo_id}") +async def updateTodo(todo_id: int, body: RequestBodyTodo): + try: + idx = findTodoInDB(todo_id) + if body.content is not None: + db["todos"][idx]["content"] = body.content + if body.completed is not None: + db["todos"][idx]["completed"] = body.completed + dbSync() + return { + "success": True, + "todo": db["todos"][idx] + } + except Exception as ex: + return { + "success": False + } +``` + +마지막으로 `DELETE /todos/{todo_id}`입니다. `path` parameter로 받아온 `todo_id`를 가지는 `todo`를 찾은 뒤 지우기만 하면 끝입니다! 물론 `db.json` 파일에 반영하는 것도 잊지 않아야겠지요 😎 + +```python +@app.delete("/todos/{todo_id}") +async def deleteTodo(todo_id: int): + try: + idx = findTodoInDB(todo_id) + db["todos"].pop(idx) + dbSync() + return { + "success": True + } + except Exception as ex: + return { + "success": False + } +``` + +> [r4k0nb4k0n/something-behind](https://github.com/r4k0nb4k0n/something-behind) + +지금까지 구현한 REST API 웹 서버 코드를 위 깃허브 링크로 들어가시면 보실 수 있습니다! + +> [r4k0nb4k0n/something-behind-express-skeleton](https://github.com/r4k0nb4k0n/something-behind-express-skeleton) + +node.js + express.js로도 해당 미션을 핵심 부분만 구현할 수 있도록 뼈대를 만든 코드를 위 깃허브 링크로 들어가시면 보실 수 있습니다! + +> [something-behind - FastAPI - Swagger](https://something-behind.herokuapp.com/docs) + +지금까지 구현한 REST API 웹 서버를 현재 Heroku로 배포해둔 상태입니다. 언제든지 마음껏 만져보세요! Free 요금제이기 때문에 sleep mode일 떄 접속하면 최대 1분 정도 접속 시간이 소요됩니다😁 + +## 마치며 + +미션 3의 부족한 설명에도 불구하고, 끝까지 포기하지 않고 동료들과 함께 결과물을 완성한 Web Team 멤버들에게 다시 한번 박수👏를 보냅니다😁 + +개인적으로 새로운 언어와 프레임워크/라이브러리를 빠르게 습득하고 이를 해결하려는 문제에 적용해보는 연습을 할 수 있는 기회가 되었다고 생각합니다😎 + +최종 목표인 실시간 퀴즈 서비스를 위해 열심히 나아가겠습니다! 웹 팀 다 같이 힘내봐요!🙌 diff --git a/_posts/2020-12-20-image_data_augmentation.md b/_posts/2020-12-20-image_data_augmentation.md new file mode 100644 index 0000000000..f050b6c215 --- /dev/null +++ b/_posts/2020-12-20-image_data_augmentation.md @@ -0,0 +1,136 @@ +--- +layout: post +title: "Image Data Augmentation" +authors: [hoyeon94] +tags: ["computer vision","deep learning"] +image: assets/images/post-image-data-augmentation/title-image.png +description: "keras image data generator" +featured: true +--- + +## intro + +data augmentation 이란 학습 시에 overfitting이 염려될 때, 좌우반전된 이미지나 노이즈가 추가된 이미지를 학습시켜 overfitting을 방지하는 기법입니다. 단순히 데이터를 불려서 overfitting을 방지하는 기법이라고 많이 알고 계실 텐데, 관련된 자료를 찾아보던 중 data augmentation을 적용할 때 고려해야 할 점이 몇 가지 있는 것을 알게 되었습니다. 이에 대해 제가 이해한 내용을 포스팅하도록 하겠습니다. + +## 1. data augmentation을 하는 이유 + +![Capture](../assets/images/post-image-data-augmentation/aug.png) + +만약 사람을 구분하는 딥러닝 모델이 있다면, 각도가 다른 두 개의 사진 모두 같은 사람으로 인식해야 합니다. 하지만 모든 각도에서 사람을 촬영할 수는 없기에, 모델을 잘 학습시키기 위해서 이러한 데이터를 직접 만들어야 합니다. 일반적으로 data augmentation을 하는 방법은 몇 가지 방법은 다음과 같습니다. + +1. 평행이동 +2. 회전 +3. 크기 변환 +4. 좌우반전/상하반전 +5. 기울이기 + +## 2. 두 가지 data augmentation구현 방법 + +저는 처음에 data augmentation이 단순히 변형된 이미지를 추가하면 된다고 생각했었는데, 알고 보니 제 생각과 조금 달랐습니다. + +### 1) 데이터 셋 추가 + +![Capture](../assets/images/post-image-data-augmentation/method1.png) + +첫 번째 방법은 다음과 같습니다. + +1. Input 이미지를 로드한다. +2. Dataset Generator에서 data augmentation 기법을 이용하여 학습 데이터 셋에 변형된 데이터를 추가한다. +3. 추가된 이미지와 원본 이미지를 함께 학습시킨다. + +아마 가장 일반적으로 생각하는 방법일 텐데요, 이 방법에는 문제점이 있습니다. + +- 추가할 수 있는 변형된 데이터의 개수가 정해져 있습니다. +- 모델은 데이터를 통해서 학습하게 되고, 결국 추가한 변형된 데이터에 대해 다시 overfitting되는 결과를 낳게 됩니다. +- 즉, data augmentation을 통해 얻고자 했던 효과가 미미해집니다. + +### 2) 학습 시에 실시간으로 데이터를 변형하는 방법 + +![Capture](../assets/images/post-image-data-augmentation/method2.png) + +과정을 설명하자면 다음과 같습니다. + +1. 원본 이미지 데이터를 로드한다. +2. 이미지 augmentation 객체에 원본 이미지를 등록한다. +3. 학습할 때, 각 batch에 원본 이미지를 data augmetation을 적용시켜 변형한 이미지를학습시킨다. +4. 모든 batch 마다 3의 과정을 반복한다. + +위 과정이 1)에서 서술한 방법과 다른 점은 다음과 같습니다. + +- 미리 저장된 데이터 셋을 이용하지 않습니다. 대신, 학습 시 각 배치마다 원본 이미지로부터 다르게 변형된 데이터들을 학습합니다. +- 그렇기 때문에, 모델은 매 에포크마다 다른 데이터를 학습하게 됩니다. +- 결과적으로, overfitting을 방지할 확률이 조금 더 높아집니다. + +이런 방법을 이용하게 되면 원본 이미지는 전혀 학습하지 않고, data augmenation에 의해 변형된 이미지만 학습하게 됩니다. 그렇기 때문에, 이러한 방법을 이용하면 여러 방법으로 변형된 이미지를 모델이 학습할 수 있게 되면서, 모델이 조금 더 일반화되고, overfitting이 줄어듭니다. + +## 3. Keras ImageDataGenerator 예제 코드 + +```python +(x_train, y_train), (x_test, y_test) = cifar10.load_data() +y_train = np_utils.to_categorical(y_train, num_classes) +y_test = np_utils.to_categorical(y_test, num_classes) +datagen = ImageDataGenerator( +    featurewise_center=True, +    featurewise_std_normalization=True, +    rotation_range=20, +    width_shift_range=0.2, +    height_shift_range=0.2, +    horizontal_flip=True) +# here's a more "manual" example +for e in range(epochs): +    print('Epoch', e) +    batches = 0 +    for x_batch, y_batch in datagen.flow(x_train, y_train, batch_size=32): +        model.fit(x_batch, y_batch) +        batches += 1 +        if batches >= len(x_train) / 32: +            # we need to break the loop by hand because +            # the generator loops indefinitely +            break +``` + +keras 공식 예제 코드를 보며 2)와 같은 방법이 어떻게 적용되었는지 확인하도록 하겠습니다. + +예제는 cifar-10 데이터를 분류해내는 모델을 학습시키는 코드입니다. + +```python +(x_train, y_train), (x_test, y_test) = cifar10.load_data() +y_train = np_utils.to_categorical(y_train, num_classes) +y_test = np_utils.to_categorical(y_test, num_classes) +``` + +먼저, train data와 test data로 나뉜 데이터를 로드합니다. + +```python +datagen = ImageDataGenerator( +    featurewise_center=True, +    featurewise_std_normalization=True, +    rotation_range=20, +    width_shift_range=0.2, +    height_shift_range=0.2, +    horizontal_flip=True) +``` + +그다음 부분에, ImageDataGenerator 함수를 호출하는데요, 여기서 어떤 방법을 적용하여 변형된 이미지를 만들어 낼 건지를 옵션으로 넘겨줍니다. + +```python +# here's a more "manual" example +for e in range(epochs): +    print('Epoch', e) +    batches = 0 +    for x_batch, y_batch in datagen.flow(x_train, y_train, batch_size=32): +        model.fit(x_batch, y_batch) +        batches += 1 +        if batches >= len(x_train) / 32: +            # we need to break the loop by hand because +            # the generator loops indefinitely +            break +``` + +그리고, 학습을 시키게 됩니다. 여기서 보시면 for문에서 매 배치마다 datagen.flow를 호출해 매번 다른 데이터 셋을 받아오게 되는 것을 알 수 있습니다. + + + +## 결론 + +위에서 제시한 것 처럼 프레임워크에서 대부분 data generator를 구현한 함수를 제공하지만, 상황에 따라서는 image data generator 함수를 직접 구현해야 하는 경우도 있습니다. 여러분들도 직접 augmentation 코드를 구현해야 할 때, 이런 점을 고려해서 더 좋은 방법으로 구현하셨으면 좋겠습니다. diff --git a/_posts/2020-12-22-api_crawling.md b/_posts/2020-12-22-api_crawling.md new file mode 100644 index 0000000000..8ced4e10c4 --- /dev/null +++ b/_posts/2020-12-22-api_crawling.md @@ -0,0 +1,259 @@ +--- +layout: post +title: "위키 API, 구글번역API와 약간의 크롤링" +authors: [howtolivelikehuman] +tags: ["CV-image_classification"] +image: assets/images/post-image_classification/api_crawling.png +description: "아기도 할 수 있는 api 사용과 크롤링" +featured: true +--- + +Flask를 통해 구축한 서버에서, RestAPI를 사용해 DenseNet121모델을 통해 사진을 분류하고 그 결과를 보여주기까지 학습하였다. + +팀에서는 프로젝트를 위 구조를 이용해서, 개의 사진을 올리면 품종을 알려주고 그에 대한 정보를 주도록 진행하고자 하였다. + +![img](https://blog.kakaocdn.net/dn/b7yyVl/btqQNpIWchN/L2fJdulaGpsC86oMuyLhUk/img.png) + +일단 추가학습을 시키는 모델은 팀원에게 맡기고.. 이번에는 결과페이지의 구성을 알차게 하려고 한다. + +#### 위키 API 사용하기 + +우선 분류한 클래스의 결과를 위키피디아에 검색하려고 한다. + +찾아보니 위키피디아 API가 존재하였다. + +![img](https://blog.kakaocdn.net/dn/cmG6ng/btqQKvCVjMj/8BBkLEhHDucqtSg0jMHuo1/img.png) + +우선 위키피디아 api를 다운받는다. + +````python +pip install wikipedia -api +```` + +내가 숙지한 사용법은 다음과 같다. + +위키피디아의 언어를 설정하고, 내가 원하는 페이지를 찾아 데이터를 얻어오는 방식으로 사용하였다. + +````python +#위키api +import wikipediaapi + +#class_name = 분류한 개 이름 +def wiki(class_name): + wiki = wikipediaapi.Wikipedia(language='en') + p_wiki = wiki.page(class_name) + #페이지 있으면 페이지 출력 + if(p_wiki.exists()): + print(p_wiki.text) +```` + +골든 리트리버 사진을 넣었더니 golden_retriever로 분류되고, 위키 페이지에서 전체 내용을 잘 가져온다. + +![img](https://blog.kakaocdn.net/dn/DFP38/btqQUZiniEE/6ycdARdK1pTVK1ZluUqIw1/img.png) + +#### 구글 번역 API 사용하기 + +그럼 한국어로 검색하면 어떨까 + +우선 이름을 한국어로 바꿔서 검색하기 위해 구글 번역 API를 사용하고자 한다. + +아래는 무료로 제공하는 번역 api이고 유료버전인 Google Cloud Translation도 존재한다. + +![img](https://blog.kakaocdn.net/dn/DwLac/btqQU0awgqQ/9kepF1C2hha6zZgFyz7Zhk/img.png) + +무료로 제공되었던 번역 api (googletrans)가 에러가 많고, 작동이 안된다는 게시글이 많아서 기존의 install 링크가 아닌, 아래 링크에서 다운받아서 사용하였다. + +`````python +pip install git+https://github.com/alainrouillon/py-googletrans@feature/enhance-use-of-direct-api +````` + +간단한 사용법은 translate 함수를 사용해서 사용하면 된다. + +src는 원래 언어 (생략가능) -> dest는 바뀌는 언어 + +````python +from googletrans import Translator + +trans = Translator(service_urls=['translate.googleapis.com']) +result = trans.translate(class_name, dest='ko', src='en') +#origin = 원래 -> text = 변환 +print(result.origin +" " + result.text) +```` + +위 코드를 추가하고, 위키는 한국으로 바꿔서 돌려보았다. + +![img](https://blog.kakaocdn.net/dn/ZGguL/btqQNpPJPTD/ukdxQXGGSKLJDqHjkZZo7K/img.png) + +한국 위키에서도 잘 가져온다. 함수는 아래와 같다. + +````python +#english word -> translate korean -> search wiki +def wiki2(class_name): + wiki = wikipediaapi.Wikipedia( + language='ko', + extract_format=wikipediaapi.ExtractFormat.WIKI) + + trans = Translator(service_urls=['translate.googleapis.com']) + result = trans.translate(class_name, dest='ko', src='en') + class_name = result.text + + print(result.origin + " " + result.text) + + p_wiki = wiki.page(class_name) + + if(p_wiki.exists()): + print(p_wiki.text) +```` + +하지만 실제로 이렇게 사용했을때 원했던 결과와는 다른 문제점이 발생하였다. + +1- 모델에서 뱉어내는 개 이름이 정확한 품종의 풀네임이 아닌 경우가 있어서, 위키에서 검색을 잘 못한다. + +ex) 웰시코기의 경우 풀네임이 Pembroke Welsh Corgi -> Pembroke로는 검색이 안됨. + +2- 그리고 위키API에서 없는 페이지의 경우, 특정 페이지가 아닌 링크가 담긴 검색결과가 나온다. + +따라서 당장은 특정 사이트에서 크롤링하는 방법을 사용해보기로 생각했다. + +![img](https://blog.kakaocdn.net/dn/MRVM6/btqQUZKt34E/PWHmA1UiAzgcoAAKegKjT1/img.png) + +기존 사이트의 URL을 통해 크롤링을 하려고 하면, 추가 라이브러리를 사용하면 된다. + +우선 타겟으로 한 사이트는 다음과 같다. 미국 애견 협회로 세계에서 2번째로 오래되었다고 한다. + +![img](https://blog.kakaocdn.net/dn/dp90TQ/btqQPympkbS/jIXBsgNzooDx6ezhhqytR0/img.png) + +그리고 1번의 문제를 해결하기 위해, 위 사이트에서 검색한 결과에서 + +제일 상단에 위치한 저 Breed Information (종 정보) 링크를 통해 정보를 얻어내고자 한다. + +#### BeautifulSoup을 사용한 크롤링 + +파이썬으로 크롤링을 할때 가볍게 사용하는 라이브러리로 Selenium과 Beautiful Soup가 있는데, 더 간편한 느낌의 Beautiful soup를 사용하도록 하겠다. + +![img](https://blog.kakaocdn.net/dn/bSCa0y/btqQNqvg6v2/DkZzCa7MZzrCvzVK0zKSl1/img.png) + +````python +pip install requests beautifulsoup4 +```` + +간단한 사용법은 다음과 같다. 생성되는 저 BeautifulSoup 객체를 조작하여 크롤링을 하면 된다. + +````python +from bs4 import BeautifulSoup + +#파일 열어서 넘기기 +with open("htmlfile.html") as fp: + ss = BeautifulSoup(fp) + +#html 내의 내용을 문자열로 넘기기 +ss = BeautifulSoup("abcabacabc") +```` + +URL을 통해 객체를 생성하는 방법은 다음과 같다. + +````python +from urllib.request import urlopen + +#타겟 사이트 +html = urlopen("https://www.akc.org/?s=" + class_name) +bsObject = BeautifulSoup(html,"html.parser") +```` + +자 그렇다면, BeautifulSoup 객체를 어떻게 조작해야 할까. + +타겟 사이트에서 어느 부분이 html 문서에서 어떤 역할을 하는지 먼저 파악해야 한다. + +가장 간편한 방법은 크롬 개발자모드를 사용하는 방법이다. + +크롬으로 사이트 접속 -> f12 (개발자모드) -> Elements -> ctrl+shift+c 누르기 -> 궁금한 부분 클릭 + +![img](https://blog.kakaocdn.net/dn/bqyXVV/btqQ1MchNwL/G8hpwsc4xcL6R7WJFaKnPK/img.png) + +a 태그안에 들어있는 저 주소를 가져오는 것이 1차 목표이므로, + +HTML의 내부 태그에 따라 여러 메소드가 존재하지만, 나는 find_all 메소드를 사용하여 원하는 정보를 얻어내고자 한다. + +````python + #get secondUrl + for link in bsObject.find_all('a'): + url = link.get('href') + if url is not None: + if("/dog-breeds/" in url) and not(url.endswith("/dog-breeds/")): + secondUrl = url #secondUrl로 저장 + print(link.text.strip(), url) + break +```` + +a태그 내용을 다 긁어오고 -> 그중 href를 추출해서 -> 원하는 정보에 맞는 타겟만 뽑아내면 된다. +![img](https://blog.kakaocdn.net/dn/cyxjeW/btqQ3g5dc3A/Uy6bhXQWoD6RRkJfBNMzX0/img.png) + +그럼 이제 다시 이 링크를 통해 들어가서 정보를 뽑아내려한다. + +find 메소드를 다음과 같이 사용하면 태그와 특정 클래스를 특정하여 얻어낼 수 있다. + +````python +name = bsObject.find("h1",{"class" : "page-header__title"}).string +```` + +함께 제공하는 사진 역시, db에서 가져오는 링크형식이어서 무자비하게 링크를 긁어왔다. + +최종적인 메소드는 다음과 같다. + +````python +#search from site +def dogSite(class_name): + html = urlopen("https://www.akc.org/?s=" + class_name) + bsObject = BeautifulSoup(html,"html.parser") + + secondUrl = None + result = [] + img_src = [] + count = 0 + + #get secondURL + for link in bsObject.find_all('a'): + url = link.get('href') + if url is not None: + if("/dog-breeds/" in url) and not(url.endswith("/dog-breeds/")): + secondUrl = url + print(link.text.strip(), url) + break + + #search at secondURL + if secondUrl is None: + information = "Sorry, We can't find an information" + name = class_name + result = None + img_src = None + + else: + html = urlopen(secondUrl) + bsObject = BeautifulSoup(html,"html.parser") + + #종 이름 + name = bsObject.find("h1",{"class" : "page-header__title"}).string + name = name.replace("\n","").strip() + + #정보 (요약) + for contents in bsObject.find_all("span",{"class":"attribute-list__text"}): + result.append(contents.string) + + #설명 + information = bsObject.find("div",{"class" : "breed-hero__footer"}).string + information = information.replace("\n","").strip() + + + #사진 + for img in bsObject.find_all("img",{"class" : "media-wrap__image lozad"}): + + img_src.append(img.get('data-src')) + count = count+1 + #사진 5장 제한 + if(count == 6): + break + + return name, result, information, img_src +```` + +![img](https://blog.kakaocdn.net/dn/dcUNbr/btqQ1MQRBTz/CzK6SUrSV9GhFgqlRkfxX0/img.png) diff --git a/_posts/2020-12-22-dsc-miterm-review.md b/_posts/2020-12-22-dsc-miterm-review.md new file mode 100644 index 0000000000..cd16acbb5b --- /dev/null +++ b/_posts/2020-12-22-dsc-miterm-review.md @@ -0,0 +1,162 @@ +--- +layout: post +title: "DSC University of Seoul Midterm Review" +authors: [Enoch-Kim] +tags: [ "Review", "Mobile" ] +image: assets/images/dsc_full_logo.png +description: "Google DSC 서울시립대 동아리를 한 분기 진행한 리뷰입니다." +featured: true +--- +### 글을 시작하면서 + +DSC UOS가 9월에 시작된 후 벌써 4달이 흘러가네요.. 시간 빠릅니다. 혼자 공부하는 것이 심심해서 같이 공부할 사람을 찾아 지원하던게 엊그제 같은데.. 벌써 새해가 코앞입니다. +멤버로 지원했지만 호준 리드님의 감언이설에 넘어가 코어멤버가 되고, 제가 공부하는 분야와 사뭇 다른 모바일 팀의 운영진이 되었습니다. 또, DSC 블로그를 여러 코어멤버 분들과 운영하면서 +다양한 경험을 했네요 :) 이 글은 이 모든 부분을 다루겠지만, 특히나 저희 모바일 팀을 운영한 경험을 중점적으로 작성하겠습니다. + +### 역할 + +DSC에서 저는 다음의 역할을 했습니다. + +1. 코어 멤버 : DSC를 운영하는 CPU Core Member(~~옥수수 밭의 노예~~)로 전체 운영에 대한 논의와 진행을 돕는 역할 + +2. 블로그 운영진 : DSC 블로그를 운영하고 관리하는 역할 + +3. Mobile 팀 운영진 : DSC 내의 모바일 팀을 운영하고 관리하는 역할 + +## 파트별 리뷰 + +### 코어 멤버 + +저희 DSC UOS는 리드님이 채찍질하는 옥타코어로 이루어져 있는데요, 코어분들 한분 한분 코로나의 상황에서 DSC가 운영될 수 있도록 너무도 많이 수고해주신 것 같아요. +다들 바쁘게 사는 능력자들이신데.. DSC를 위해 시간내서 미션을 짜기도하고, 장기적으로 도움을 줄 수 있도록 논문 리뷰 스터디를 진행하시는 등 너무 좋은 컨텐츠를 기획하고 운영해주셨습니다. 무엇보다 여러분의 희생에 감사의 마음을 전합니다 :) 덕분에 저도 동기부여가 돼서 열심히 할 수 있었습니다!! + +### 블로그 운영진 + +DSC에 들어오기 전부터 개인 블로그를 만들 생각이었습니다. 티스토리 같은 사이트를 활용할지 개인 사이트를 커스텀할지 고민하고 있었는데, 때마침 DSC의 블로그를 운영할 사람이 필요하다고 하여 겸사겸사 자원하게 됐습니다. 가장 도움이 됐던 것은 욱재님을 영접했다는 것. 초초초능력자 욱재님과 소통하며 많은 것을 배우고 느꼈습니다. +크게 다음 것들을 경험했습니다. + +1. 블로그 글을 멤버분들께 요청하고 이를 관리하면서, 블로그 운영진이 매~~~~~~~우 귀찮음을 무릅쓰고 포스트를 요청하는 것이란 걸 깨달았습니다.(나중에 회사에서 제때 제때 줘야겠습니다 ㅠ.ㅠ) + +2. 평소에 사용하지 않던 git 기능들(cherry pick, stash etc..)을 사용하면서 git의 원리를 더 빠삭하게 이해할 수 있었습니다. (여러분 블로그 운영진 하세요^^) + +3. `Jekyll Themes`에서 테마를 고른 후 입맛에 맞게 커스텀하는 과정을 경험하고, 이를 토대로 제 블로그를 커스텀하여 제작해보면서 개인 블로그를 시작할 수 있었습니다. + +제 블로그를 만들기 위해 지원했지만, 제 목적 이상으로 얻은게 많은 시간이었습니다. (여러분 블로그 운영진 하세요^^) + +### Mobile 팀 운영진 + +호준 리드님께 영업당해 들어온 Mobile 팀. 행운이 따랐습니다. 팀원분들이 모두 열정적이고 기술에 대한 탐구심이 많아 제가 리드하지 않아도 좋은 방향으로 나아갔습니다. +제가 안드로이드 경험이 적었기에 개발하는 역할보다 진짜 운영을 하는 것에 집중했습니다. +트랜드를 알아가려했고, 클린 아키텍처 혹은 TDD 같이 어느 분야에나 적용되나 중요한 요소들을 다루려 했습니다. +또한, 팀원분들께 후의 취직에 도움되는 것들을 1on1 미팅에서 많이 얘기했습니다.(제 주제에.. 감히) +알아서 방향을 찾아가는 팀원분들을 보며 오히려 제가 자극을 받았네요 ㅎㅎ +덕분에 준비하면서 기술적인 것들을 많이 찾아보고 배울 수 있었습니다. + +## 대망의 Mobile Team Review + +제가 이 글을 쓴 이유입니다. DSC Mobile Team에서는 다양한 활동을 진행했습니다. 이 활동들은 다음과 같습니다. + +- Kotlin에 적응하기 위한 알고리즘 대회 참여 + +- 개인 프로젝트 + +- 스크럼 + +- 기술토론 + +위의 활동을 기준으로 리뷰하겠습니다. + +### Kotlin에 적응하기 위한 알고리즘 대회 참여 + +저희가 Kotlin 언어를 사용하더라도 로직을 짜는 것에 익숙해지기 위함 + 후에 취직에 도움이 되고자 치킨을 걸고 알고리즘 대회에 참여하는 것을 제안했습니다. + +하지만 어느샌가 알고리즘을 위한 공부가 되어서 의도한 것과 다르게 흘러간 것 같습니다. +팀원분들 모두가 대회를 마치고 멘붕 상태가 된것을 보고 제 마음도 착잡해졌습니다..ㅠㅠ + +결국, 앞으로 모바일 팀에서 알고리즘 관련 활동은 하지 않기로 했습니다. 특히 서울시립대에 알고리즘 동아리가 있는데 굳이 DSC에서 다룰 필요가 없음 깨달았습니다. +하지만 개발자라면 알고리즘은 당연히 따라오는 것이기에 권장은 계속 할 예정입니다. (취업해야죠.. 여러분..) + +### 개인 프로젝트 + +찐 개발자라면 자신이 원하는 것을 만들어봐야 한다는 생각에 시작한 개인 프로젝트. 각자가 아이디어를 내서 원하는 모바일 앱을 만들기로 했습니다. + +처음 진행은 목적에 맞게 흘러갔습니다. 모두가 자신이 무엇을 만들지 고민하고 계획했습니다. +하지만 시간이 지나갈수록 개인간의 프로젝트 진행도가 달라지고 개인 프로젝트인 만큼 서로가 서로의 것의 진행도를 알기 어려웠습니다. + +돌아보면 코로나의 영향이 컸습니다. +한공간에서 자유롭게 의견을 나누고 피드백을 줄 수 있다면 좋았을텐데, 영상통화 특성상 한 사람의 프로젝트만 리뷰할 수 있다는 것이 단점이었던 것 같습니다. +또한, 팀원 각자의 속도가 다르고 투자할 수 있는 시간이 다르니 진행 상황에 차이가 발생하는 것이 당연했습니다. + +앞으로 개인 프로젝트는 규모를 작게 계획해 한달내에 할 수 있도록 하는 것이 좋을 것 같습니다. +길어질수록 피드백이 어렵고, 각자 따로 노는 경향이 커지게 됩니다. +다른 파트 분들과 협업을 하기 전에 기본적인 실력을 갖추는 목적으로 진행하는 것이 알맞다고 생각합니다. + +### 스크럼 + +제가 카카오 인턴을 하면서 가장 도움되는 경험이었던 스크럼. 이 스크럼의 기본 틀을 저희 팀에 적용하기로 했습니다. + + +##### 일일 스크럼 + +저희는 매일 밤 10시에 5분정도 일일 스크럼을 진행하도록 했습니다. 다들 배우는 단계이고 협업을 하는 것이 아니기에 +각자가 하루동안 무엇을 진행했고, 앞으로 무엇을 진행할 것인지 다루며, 자신이 막힌 부분에 대한 피드백을 요청했습니다. + +일일 스크럼을 진행하는 것에 대해 처음에 고민이 많았습니다. 어떤 분들에게는 부담이 될 것 같았기 때문입니다. +그런데 오히려 일일 스크럼을 진행하면서 그 부담 때문에 한 부분이라도 더 공부하고 개발하게 되었고, +결과적으로 모두가 가장 좋은 활동으로 리뷰했습니다. + +일일 스크럼 중에 아쉬웠던 점은 회사와는 다르게 선임 개발자 분이 없기 때문에(저희는 다 안드로이드를 처음 접했습니다.) +막힌 것을 질문해도 적절한 피드백을 주지 못했다는 것입니다. 이는 추후 저희 팀원분들이 성장하면 해결될 것으로 예상됩니다. + +##### 스프린트 리뷰 + 플래닝 + +회사만큼 계획할 것이 많지 않았기 때문에 매달 말에 리뷰와 함께 플래닝을 진행했습니다. + +스프린트 리뷰와 플래닝 시간을 통해 지금까지 진행한 방식을 개선해 나가며 새로운 활동을 계획했습니다. +이 덕분에 피드백을 받으며 처음에 일정에 없던 기술 토론시간을 가질 수 있었습니다. + +아쉬웠던 점은 다들 시험기간에는 바빠서 스킵했던 것입니다. (이는 어쩔 수 없다고 생각됩니다. 여러분의 학점은 소중하니까요^^) + +##### 1on1 미팅 + +스프린트가 끝나면 팀원분들 한분 한분과 1on1 미팅을 가졌습니다. + +개인이 고민하고 있는 점과 스프린트 리뷰 때 말하지 못했던 점을 말해줘 모바일 팀을 운영하는데 큰 도움이 되었습니다. +이 시간에 취업에 관한 얘기를 많이 했던 것 같습니다. 제가 인턴을 진행하면서 느낀 점과 얻은 정보를 공유하는 시간이 됐습니다. + +1on1 미팅을 진행하면서 가장 크게 느낀 것은 '실제 현업 팀장님들은 대체 어떻게 시간을 내지?' 입니다. +스프린트 리뷰 + 플래닝에도 시간이 많이 소모되는데, 한명 한명 시간을 내서 피드백을 받는다니.. 그러면서 프로젝트를 운영하고 관리한다는게 쉽지 않다는 것을 체감했습니다. +모바일 팀을 운영하면서 가장 크게 도움이 됐던 경험이었습니다. + +##### 종합 + +종합적으로 스크럼을 도입한 것은 탁월한 선택이었습니다. 모두가 코로나의 처지는 상황에서 서로 동기부여가 되고, 모바일 팀이라는 조직이 올바른 방향으로 나아가는 기틀이 되었습니다. + +### 기술토론 + +스프린트 플래닝에서 제안된 기술토론 시간. DSC에 들어와서 가장 감격에 겨운 시간이 아니었나 싶습니다. + +앞서 선정한 주제에 대한 조사를 했고, 이 과정에서 팀원 각자가 완벽히 이해하진 못하더라도 해당 기술이 어떤 것인지 알 수 있었습니다. +또한, 단순히 기술을 설명하는 것이 아닌 기술에 대한 토론을 진행했기에 해당 기술의 필요성과 원리를 더 잘 이해하는 시간이 됐습니다. + +카카오 인턴십의 팀에서도 기술 토론 시간이 있었습니다. 그러나 각자 파트가 달랐기에 주제에 맞는 파트의 인원들에게 참여도가 집중되는 경향이 있었습니다. +저희가 같은 모바일이라는 파트를 공유했기 때문에 오히려 다같이 참여해서 열띤 토론을 진행할 수 있었습니다. + +앞으로도 계속 진행할 것이고, 다음 주제로는 'TDD 개발 방법론과 필요성'을 다룰 생각입니다. 또한, 기술 토론을 넘어 직접 구현해보며 TDD의 필요성을 체감하는 시간을 가질 예정입니다. + +### 앞으로의 방향 + +앞으로는 다른 파트 분들과 협업 프로젝트를 진행하도록 방향을 잡을 생각입니다. +이와 더불어 개인 프로젝트를 TDD 방식으로 리팩토링 해보고 협업적인 능력을 키우기 위해 벡엔드 개발을 미션을 통해 진행해보려 계획중입니다. + +결국 저희 모바일 팀이 성장할 수 있었던 것은 팀원분들 개개인이 자신의 성장을 위해 최선을 다했기 때문입니다. +지금까지 열정적으로 모바일 팀 활동에 참여해준 팀원분들께 감사의 마음을 전합니다. +앞으로 남은 분기를 더욱 알차게 보냅시다! + +## 김유현의 DSC에서의 방향 + +- 모바일 팀은 여전히 운영하는 것에 초점 + +- Google Solution Chanllenge 도전 + +- 클라우드 스터디 만들까 고민중입니다.. 관심있으시면 DM.. diff --git a/_posts/2020-12-24-Fall_intro-Nov.md b/_posts/2020-12-24-Fall_intro-Nov.md new file mode 100644 index 0000000000..1846fc910a --- /dev/null +++ b/_posts/2020-12-24-Fall_intro-Nov.md @@ -0,0 +1,465 @@ +--- +layout: post +title: "Fall intro team 11월 파이썬 과제" +authors: ["maybeluna"] +tags: ["Fall intro"] +image: https://user-images.githubusercontent.com/72259053/116891473-b4cfe880-ac69-11eb-8d6b-3133a310be6e.png +description: "과제 4, 5 & 강의 듣기" +featured: false +--- + + +## 1. shell 너의 정체가 무엇이냐? feat. 생활코딩 + +1. shell vs kernel + + - Kernel: 컴퓨터 운영체제의 핵심으로, 쉘로부터 전달받은 명령을 수행하면서 하드웨어를 직접 제어한다. + - Shell: 사용자가 입력한 명령을 해석하여 커널에게 전달한다. + +2. 대표적인 shell 종류 + + - bash: shell의 기본 카테고리 프로그램으로 가장 대중적으로 쓰인다. + + - zsh: 따로 설치해야하며 bash보다 진입장벽이 있다. + + - bash와 zsh는 명령어 차이가 약간씩 다르기 때문에 이를 확인해주어야 한다. + + - 현재 쓰는 쉘의 종류를 알고 싶을 때 + + ```shell + echo $0 + ``` + +3. shell script + + - 쉘 실행 순서 방법을 각본을 짜서 저장하는 것 + + - ```shell + ### 빈파일 생성 (a.log, b.log 생성) + touch a.log b.log + ### 디렉토리 생성 후 디렉토리에 로그 모든 파일 복사 + mkdir bak + cp *.log bak + ### backup이라는 nano 프로그램 생성 + nano backup + ### backup 실행 (권한 부여 및 실행) + chmod +x backup + ./ backup + ``` + +4. nano + + - 저장: ctrl + o (저장 전 이름 입력) + - 나가기: ctrl + x + - 전체 파일 보기: ls -l + - 일부 확장자 파일 보기: ls -al *.(확장자) + - 파일 읽기: ctrl + r + - 헬로 파일 열기: nano hello.html OR (파일명) + tap + - 오려두기: ctrl+k + - 붙여넣기: ctrl+u + - 영역 선택: ctrl+6 (방향키를 이동하며 일정 영역 텍스트 선택) + - 특정 파일 혹은 텍스트 찾기: ctrl + w + - 매뉴얼 보기: ctrl + g + +5. 파일과 디렉토리의 개념 + + - file: 정보 저장 수단, 여러 정보가 모인 덩어리 + - directory: 파일 정리정돈 해주는 수납공간 + +## 2. 우분투에 git을 깔아보자 + +**목적: 과제 4의 경우 두 환경(window, ubuntu)에서 진행되기 때문에 각 코드를 짜고 깃에 병합을 해야하므로 우분투에 git 환경을 구현해야한다.** + +1. vscode에서 ex 03 ~ 05 작업 완료 후 깃 push +2. 우분투에서 깃 clone or pull +3. 우분투에서 ex 01 ~ 02 작업 완료 후 깃 push + +```shell +### 패키지 리스트 업데이트 +sudo apt-get install.git +### 깃 설치 및 버전 알기 +sudo apt install git +git --version +### 깃 push 했을 때 올라갈 정보 입력 +git config --global user.name maybeluna +git config. --global user.mail ksb9817@gmail.com +### 깃 clone을 통해 내가 원하는 프로젝트 내려받기 +git clone <저장 폴더명> +``` + +***항상 pull을 하면 error가 떠서 늘 clone을 쓰고 있는데 왜 자꾸 에러가 뜰까? + +## 3. Assignment-4 + +### Ex 01. Show me the score - shell + +- 제출할 폴더 : `ex01/` +- 제출할 파일 : `score` + +다음과 같이 결과가 나오는 `score` 파일을 작성하세요 + +```bash +$ cat score +> A +$ +``` + +- 나의 작업 + + ```shell + ### nano 프로그램에서 score 파일 만들기 + $ nano score + ### nano + A + ### 우분투 + $ cat score + > A + ``` + + => clear 😘 + +--- + +### Ex 02. Hello World with sh -shell + +- 제출할 폴더 : `ex02/` +- 제출할 파일 : `greet` + +다음과 같이 결과가 나오는 `greet` 파일을 작성하세요 + +```bash +$ sh greet +> Hello World! +$ +``` + +- 나의 작업 + + ```shell + ### nano 프로그램에서 greet 파일 만들기 + $ nano greet + ### nano + echo "Hello World!" + ### 우분투 + $ sh greet + > Hello World! + ``` + + **echo는 유닉스 계열 운영 체제(ex. linux)에서 문자열을 컴퓨터 터미널에 출력하는 명령어로 python의 print 명령어와 비슷한 역할을 한다. + + => clear 😊 + + "명령어 자체는 쉬웠지만 우분투라는 낯선 환경을 사용하는 것이 어려웠다. 그리고 윈도우 환경과 우분투 환경을 어떻게 통합해서 과제를 제출해야하는 지 계속 고민하다가 결국 SOS를 치고서 방법을 터득하게 되었다." + +--- + +### Ex 03. Sort is awesome + +- 제출할 폴더 : `ex03/` +- 제출할 파일 : `awesome_sort.py` +- 사용 **금지**된 코드 : `sort()`, `sorted()` 등의 내장 정렬 함수 +- 리스트 `my_list`를 오름차순으로 정렬하는 코드를 작성하세요. + +```python +my_list = [1, 3, 2, 4, 5] + +... + +print(my_list) # [1, 2, 3, 4, 5] +``` + +- 정렬 알고리즘 + + - 버블 정렬: 인접한 두 원소 검사하여 크기가 순서대로 되어 있지 않으면 교환 + - 선택 정렬: 제자리 정렬 알고리즘의 하나로, 주어진 리스트 중 최솟값을 찾고 그 값을 맨 앞에 위치한 값과 교환한다. 맨 처음 위치를 뺀 나머지 리스트도 같은 방법으로 교체 + - 삽입 정렬: 자료 배열의 모든 요소를 앞에서부터 차례대로 이미 정렬된 배열 부분과 비교하여, 자신의 위치를 찾아 삽입함으로써 정렬을 완성하는 알고리즘 + +- 나의 작업 (삽입 정렬 이용) + + ```python + my_list = [1,3,2,4,5] + for i in range(1, len(my_list)): + for j in range(i, 0, -1): + if my_list[j] < my_list[j-1]: + my_list[j], my_list[j-1] = my_list[j-1], my_list[j] + else: + break + print(my_list) + ``` + + => clear 😍 + + "처음에는 정렬 알고리즘 자체를 이해하기 어려웠다. 수식을 하나하나 더듬어가며 과정을 따라가보았는데도 어려웠다. 제대로 이해하기 위해서 가시적인 자료가 필요했는데 정렬을 포크댄스로 표현해준 동영상이 많이 도움이 되었다." + +--- + +### Ex 04. This Stop is, Yaksu, Yaksu + +- 제출할 폴더 : `ex04/` +- 제출할 파일 : `yaksu.py` +- 사용 가능한 함수 : `print()` + +어떤 정수 `N`을 **입력**받았을 때, 이 N의 **약수**를 공백으로 구분하여 출력하는 코드를 작성하시오 + +```python +# 예시 1 +6 + +# 예시 출력 1 +1 2 3 6 + +# 예시 입력 2 +12 + +# 예시 출력 2 +1 2 3 4 6 12 +``` + +- range 범위: range(1, 10) > 1 ~ 9 + +- 공백을 만드는 법: end=" " + +- 나의 작업 + + ```python + yaksu = int(input()) + for a in range(1, yaksu+1): + if yaksu%a == 0: + print(a, end=" ") + ``` + + => clear 😆 + + "range 범위를 자꾸 잊어버리는데 꼭 기억하게다고 다짐했다." + +--- + +### Ex 05. I Love Combination Pizza + +- 제출할 폴더 : `ex05/` + +- 제출할 파일 : `combination.py` +- 사용 **금지**된 코드 : `itertools` + +다음과 같이 출력하는 코드를 작성하시오. + +```python +01 02 03 ... 09 12 13 ... 78 79 89 +``` + +- 규칙 찾기: 1의 자리수가 10의 자리수보다 모두 작다 + +- 나의 작업 + + ```python + for i in range(0,10): + for j in range(1,10): + if i < j: + print(str(i)+str(j), end=" ") + ``` + + **문자열을 통해 i와 j가 합산이 안되게 조정 + + => clear 😚 + + "for의 개념을 서서히 이해하고 있는 것 같다. 전에는 그저 구글링을 통해 코드를 찾아봤다면 이 코드는 내 스스로 짜보았고 통과를 해서 너무 기분이 좋았다." + +> *과제 4는 shell 개념이 들어오면서 멘붕에다가 넘쳐나는 팀플로 다소 소홀히 했는데 자꾸 멀어지려는 나를 붙들고 정신차리고 다시 시작했다. 그 결과 shell의 개념도 더 정확히 알게되었고 머리에 그저 뜬구름처럼 퍼져있었던 지식이 점차 범주화가 되는 것 같았다.* + +## 4. Assignment-5 + +- 모르는 문제가 있다면 질문합시당! +- **Don't Panic!** +- [숙제 시작하기](https://classroom.github.com/a/MHXkaASM) + +### EX 01. Uptown Func + +- 제출할 폴더 : `ex01/` + +- 제출할 파일 : `my_first_function.py` +- 사용 가능한 함수 : `print()` + +**Hello World!**를 출력하는 함수 `print_hello()`를 작성하세요 + + ```python + print_hello() + ``` + +- 매개변수(parameter) : 없음 +- 반환값(return value) : 없음 + + ```python + print_hello() + + # 출력 + Hello World! + ``` + +- 함수를 만드는 명령어 'def' + + - 함수: 어떠한 입력값을 가지고 어떤 일을 수행한 다음 결과물을 내놓는 것으로 반복 작업이 필요할 때 주로 사용한다. + + - def 함수명(매개변수): + + ​<수행할 문장> + +- 매개변수: 함수에 입격으로 전달된 값을 받는 변수 +- 반환값: 함수를 처리하고 나온 결과 +- 매개변수와 반환값 유무로 함수 형태 4가지 존재 + - 매개변수&반환값 有 / 반환값만 有 / 매개변수만 有 / 매개변수&반환값 無 + - 반환값이 없는 경우 print가 된다하더라도 수행할 문장을 이행하는 것이지 그것이 반환값이 아니다. + +- 나의 작업 > 매개변수 및 반환값 無 + + ```python + def print_hello(): + print("Hello World!") + + print_hello() + ``` + + => clear 😉 + + "이전에 'def'라는 명령어를 지나가다가 많이 보았는데 도통 어디에 사용하는 지 의문이었습다. 그러한 궁금증을 해결한 과제였습다. 다만 많은 예시가 반환값이 존재하는 경우가 많아 반환값이 없는 경우와 차이를 구별하는 것이 힘들었습다. " + +--- + +## Ex 02. +_+ + +- 제출할 폴더 : `ex02/` +- 제출할 파일 : `insert_underbar.py` + +두 문자열이 인자로 주어졌을 때, 이 둘을 언더바(_)를 이용해 연결한 문자열을 반환하는 함수 `insert_underbar()` 를 작성하세요 + +```python +insert_underbar() +``` + +- 매개변수(parameter) : 문자열 x, y +- 반환값(return value) : x와 y를 '_'를 기준으로 연결한 문자열 + +```python +# 예시 1 +print(insert_underbar('py', 'thon')) + +# 예시 출력 1 +py_thon + +# 예시 2 +print(insert_underbar('to', 'mok')) + +# 예시 출력 2 +to_mok +``` + +- 반환값을 돌려주는 명령어 'return' +- 나의 작업 > 매개변수 및 반환값 有 + + ```python + def insert_underbar(x, y) : + return str(x + '_' + y) + + print(insert_underbar('py', 'thon')) + ``` + + => clear 😉 + + "반환값을 처음 써보았는데 실제로 반환값이 있는지 확인해보기 위해서 변수를 통해 확인해보았습니다." + +--- + +## Ex 03. C To F + +- 제출할 폴더 : `ex02/` +- 제출할 파일 : `convert_temp.py` + +섭씨 온도가 인자로 주어졌을 때, 화씨 온도를 반환하는 함수 `ctof()`를 작성하세요 + +```python +ctof() +``` + +- 매개변수(parameter) : 섭씨 온도 n (n은 정수) +- 반환값(return value) : n을 화씨 온도로 변환한 값 + +```python +# 예시 1 +print(ctof(0)) + +# 예시 출력 1 +32 + +# 예시 2 +print(ctof(100)) + +# 예시 출력 2 +212 +``` + +Hint 💡 : 섭씨에서 화씨로 바꾸는 공식은.. 검색해봐야겠죠? + +- 섭씨 화씨 변환 공식: (0°C × 9/5) + 32 = 32°F +- 나의 작업 > 매개변수 및 반환값 有 + + ```python + def ctof(n): + return n * 9/5 + 32 + + print(ctof(100)) + ``` + + => clear 😉 + + "2번 문제를 응용한 것으로 섭씨, 화씨 변환 공식만 안다면 간단 한 문제였습니다." + +--- + +## Ex 04. Fibonacci + +- 제출할 폴더 : `ex04/` +- 제출할 파일 : `fibonacci.py` + +**재귀**를 이용하여 다음 점화식을 만족하는 함수 `fibo()`를 만드세요 + +- `fibo()` + - 매개변수(parameter) : 숫자 n ($n>0$) + - 반환값(return value) : n번째 피보나치 수열에 해당하는 숫자 +- 피보나치 수열은 다음 점화식을 만족하는 수열입니다 +- $fibo(n) = fibo(n-1) + fibo(n-2)$ +- $fibo(0)=0, fibo(1)=1$ + +```python +# 예시 1 +print(fibo(2)) + +# 예시 출력 1 +1 + +# 예시 2 +print(fibo(10)) + +# 예시 출력 2 +55 +``` + +- 재귀: 자기 자신을 호출하는 함수 +- 나의 작업 > 매개변수 및 반환값 有 + + ```python + def fibo(n): + if n == 0: + result = 0 + elif n == 1: + result = 1 + elif n > 1: + result = fibo(n-1) + fibo(n-2) + return result + + print(fibo(10)) + ``` + +=> clear 😉 + +"n이 0일 때와 1일때와 같이 예외 사항을 어떻게 처리해야하나 고민했던 문제입니다. 그러나 그전에 배웠단 조건문 if와 elif를 이용하여 해결하였습니다." + +> *과제 5는 함수의 초행자를 위한 파트인 것 같습니다. 어렵지는 않았지만 함수를 잘 이해했는지 함수의 조건은 무엇인지 문제를 풀면서 이해해나갔습니다. 다만 함수란 프로그램의 꽃으로 이것으로 완전히 이해했다고는 어렵습니다. 앞으로 더 많은 과제를 해내가면서 익힐 생각입니다* diff --git a/_posts/2020-12-24-Image-Translation-paper-review(vol1).md b/_posts/2020-12-24-Image-Translation-paper-review(vol1).md new file mode 100644 index 0000000000..4df362bb03 --- /dev/null +++ b/_posts/2020-12-24-Image-Translation-paper-review(vol1).md @@ -0,0 +1,168 @@ +--- +layout: post +title: "Image Translation paper review" +authors: [lsh110600] +tags: ["computer vision","deep learning"] +image: assets/images/post-image-translation/title.jpg +description: "Image Translation paper review" +featured: true +--- + + +Image Translation 논문 리뷰 + +2020 DSC-Vision team에서 Face2Cartoon 서비스를 만들 때 참고했던 [Image Translation 관련 논문](https://github.com/SystemErrorWang/White-box-Cartoonization/)입니다. + +> Wang, Xinrui, and Jinze Yu. "Learning to Cartoonize Using White-Box Cartoon Representations." Proceedings of the IEEE/CVF Conference on Computer Vision and Pattern Recognition. 2020. + +## 1. Introduction & Related Work + +CartoonGAN + +- 기존에 사용하던 CartoonGAN은 일반적인 GAN에서 사용하는 Adversarial loss를 사용하지 않았습니다. + + ⇒ 만화에서는 외곽선이 가장 중요한 특징이지만, 전체 이미지에서 차지하는 부분이 작기 때문에 output 이미지의 edge가 clear 하지 않습니다. + + ⇒ 따라서 기존의 GAN에서 사용하는 loss를 사용하기에는 적합하지 않습니다. + + ⇒ 이를 조정하기 위해 (1) Canny edge detector (2) dilate the edge regions (3) Gaussian smoothing 방법 3가지를 적용한 edge-smoothed image를 생성합니다. + + ![Capture](../assets/images/post-image-translation/paper0.png) + +- 그러나 Black-box model을 사용하여 data를 학습시키기 때문에 학습이 중구난방이고 quality가 낮은 Output image를 생성할 가능성이 높습니다. + +## 2. This work + +따라서 저자는 좋은 퀄리티의 Output 이미지를 얻기 위해 3가지 decompose 방법을 제안합니다. + +이 3가지 방법은 만화가들에게 만화를 색칠하는 과정에 대해 컨설팅을 받아서 insight를 얻었습니다. + +즉, 이미지를 만화처럼 색칠하는 알고리즘을 만들어 보겠다! 근데 만화가의 insight를 활용하겠음...(인공지능에게만 맡기는 black-box 모델이 아닌, 사람의 insight를 넣어서 white-box 라고 표현한 듯...) + +### 2-1. surface representation + +- 만화가들이 디테일한 부분을 수정하기 전에, 초안을 그리는 것으로 부터 착안했습니다. +- 이미지로부터 smooth 한 surface를 나타내기 위해서 색깔 구성과 그림의 texture만 알아 볼 수 있도록 low-frequency component 만을 추출합니다. +- 이는 마치 가우시안 블러를 적용한 것과 같습니다. + +### 2-2. structure representation + +- celluloid cartoon style(Cell Animation)으로부터 착안했습니다. +- 셀 애니메이션(Cell Animation) : Cell 이라는 투명한 종이를 뜻하는 Celluloid 를 의미합니다. 기본적으로 하나의 배경셀과 여러 장의 전경 셀들을 여러겹의 층으로 구성하여 하나의 프레임을 형성하는 방식입니다. +- . +- 입력 이미지로부터 segmentation map을 추출하여 Global한 구조 정보와 sparse한 color block을 효과적으로 포착합니다. + +### 2-3. texture representation + +- 이 특징은 미술가들이 먼저 윤곽과 디테일한 선 스케치를 그린 뒤 색을 입히는 방법에 의해 착안했습니다. +- 3개의 채널을 가진 입력이미지를 1개의 채널로 변환하는 과정입니다. +- 색상과 밝기가 제거되고 상대적인 픽셀 강도가 보존됩니다. + + ![Capture](../assets/images/post-image-translation/paper1.png) + +## 3. Proposed Approach + +- 아래 그림을 보면, image 특징을 Decompose하는 3가지 방법이 어떻게 진행되는지 알 수 있습니다. + + ![Capture](../assets/images/post-image-translation/paper2.png) + +- 이미지가 Surface Representation, Structure Representation, Texture Representation으로 분해되고 해당 Representation을 추출하기 위해 세 개의 독립 모듈을 도입했습니다. +- GAN framework는 Generator G와 Discriminator인 D_s, D_t로 구성됩니다. +- D_s는 Surface Representation을 기준으로, 생성된 image와 만화를 구별하고 D_t는 Texture Representation 으로 생성된 image와 만화를 구별합니다. + + ![Capture](../assets/images/post-image-translation/paper3.png) + +### 3-1. Learning From the Surface Representation + +- 화가들이 붓으로 초안을 그리는 스타일을 모방하여 만화와 유사한, 매끄러운 표면을 가진 화풍을 생성하고자 합니다. + + ![Capture](../assets/images/post-image-translation/paper2_1.png) + +- F_dgf는 이미지 I를 입력으로 받아서 texture와 디테일한 부분을 제거한 surface를 추출합니다. +- D_s는 모델이 생성해낸 이미지와 기준이되는 만화 이미지가 비슷한 surface를 갖는지 판단하고 generator G가 surface representation를 잘 추출할 수 있도록 가이드를 제공합니다. + + ![Capture](../assets/images/post-image-translation/paper4.png) + +- I_c는 reference cartoon images를, I_p는 input photo를 의미합니다. + +### 3-2. Learning From the Structure representation + +- felzenszwalb algorithm를 사용해서 이미지를 여러 개의 지역으로 segmentation 합니다. +- superpixel algorithms을 사용하여 픽셀들의 색 등 low level 정보를 바탕으로 비슷한 픽셀끼리 묶어서 '커다란 픽셀'을 만듭니다. + + ![Capture](../assets/images/post-image-translation/paper2_2.png) + +***Ex 1: felzenszwalb algorithm*** + +![Capture](../assets/images/post-image-translation/paper5.png) + +***Ex 2: superpixel algorithms*** + +![Capture](../assets/images/post-image-translation/paper6.png) + +***Ex 3: Selective Search*** + +- . + +- 이후 Adaptive coloring algorithm을 사용하여 이미지에 대한 Haze를 줄입니다. +- Region의 컬러값을 평균으로 취하지는 않고, adaptive하게 결정합니다. 평균으로 할 경우 darken images, hazing effect가 발생했기 떄문입니다. +- Haze란 '대상 물체와 관찰자 사이에 존재하는 물질들에 의해 빛이 진행을 방해받아 대상이 뿌옇게 보이는 현상'을 의미합니다. 아래 그림에서 (a)가 Haze가 있는 사진, (b)는 Haze를 제거한 사진입니다. + +#### Adaptive coloring algorithm + +![Capture](../assets/images/post-image-translation/paper7.png) + +![Capture](../assets/images/post-image-translation/paper8.png) + +#### Haze 유무 + +- 입력 사진은 Generator에도 들어가고 VGG 네트워크에도 들어갑니다. VGG 네트워크에서는 High level feature를 추출해냅니다. Structure 특징을 뽑아내기 위한 loss는 아래와 같습니다. + +![Capture](../assets/images/post-image-translation/paper9.png) + +![Capture](../assets/images/post-image-translation/paper10.png) + +### 3-3) Learning From the Textural Representation + +- 만화영상과 실제 사진을 구분하기 위해서는 High frequency 특징과 밝기, 색 정보를 이용해야한다. 특히 High frequency 특징 정보는 남기고 밝기와 색 정보가 주는 영향을 최소화 해야합니다. +- 즉 real world photo와 cartoon은 color와 luminance 정보로 너무 쉽게 판별이 가능하므로, 합쳐서 흑백 이미지로 만듬 + random하게 RGB를 섞는 과정을 진행합니다. + + ![Capture](../assets/images/post-image-translation/paper2_3.png) + +- F_rcs라는 random color shift algorithm을 제안했는데, 식은 아래와 같습니다. +- I_rgb는 RGB 채널을 갖는 이미지이고 I_r, I_g, I_b는 color channel을 의미합니다. Y는 RGB 이미지를 gray scale한 것을 의미합니다. +- Alpha와 Beta 값은 사용자가 변경할 수 있습니다. 논문에는 Alpha- 0.8, Beta = ~U(-1,1)을 사용했습니다. + +![Capture](../assets/images/post-image-translation/paper11.png) + +- random color shift algorithm은 밝기와 색상 정보를 제거한 상태에서 무작위 intensity maps을 생성할 수 있습니다. +- Discriminator D_t는 모델 출력물과 만화에서 추출한 질감 표현을 구별하고, Generator가 질감 표현에 저장된 명확한 윤곽과 미세한 질감을 학습하도록 합니다. +- Texture 정보를 뽑아낼 수 있는 loss는 아래 식과 같습니다. + +![Capture](../assets/images/post-image-translation/paper12.png) + +### 3-4) Full Loss + +- surface, texture, structure, content, Total Variance Loss를 합쳐 Total Loss라고 정의합니다. + + ![Capture](../assets/images/post-image-translation/paper13.png) + +- Content Loss는 cartoon 결과 이미지가 input 이미지와 semantically invariant하게 만드는 Loss입니다. + + ![Capture](../assets/images/post-image-translation/paper14.png) + +- Total Variance Loss는 high-frequency noise(ex. salt-and-pepper noise)를 제거하기 위한 Loss입니다. + + ![Capture](../assets/images/post-image-translation/paper15.png) + +## 4. Experimental Results + +- 실험 결과입니다. 위의 사진이 실제 사진이고 아래의 사진이 만화처럼 표현된 결과입니다. + + ![Capture](../assets/images/post-image-translation/paper16.png) + +- 사실 반대로 위의 사진이 만화처럼 표현된 결과이고 아래의 사진이 실제 사진입니다.(제가 눈이 침침한지, 확대 안하고 봤을 때 뭐가 어떤건지 구분이 안갔어서...) +- 실제 사진, Fast Neural Style, Image Abstraction, CycleGAN, CartoonGAN(Paprika Style, Shinkai Style, Hosoda Style, Hayao Style)과 비교하는 자료도 있습니다. + ![Capture](../assets/images/post-image-translation/paper17.png) + +이상으로 Learning to Cartoonize Using White-box Cartoon Representations 논문 리뷰를 마치겠습니다. diff --git a/_posts/2020-12-24-how-to-use-pretrained-model.md b/_posts/2020-12-24-how-to-use-pretrained-model.md new file mode 100644 index 0000000000..0c79b5fca0 --- /dev/null +++ b/_posts/2020-12-24-how-to-use-pretrained-model.md @@ -0,0 +1,127 @@ +--- +layout: post +title: "사전학습된 모델 사용하기" +authors: [GoonLee] +tags: ["CV-image_classification"] +image: assets/images/post-how-to-use-pretrained-model/thumbnail.png +description: "How to use pre-trained model?" +featured: true +--- + +Flask를 통해 구축한 서버의 모델은 사전 학습된 ResNet18 모델을 그대로 사용하고 있었습니다. + +그렇기에 강아지 사진을 업로드하면 품종을 파악하여 그에 대한 정보를 알려주는 에 그대로 사용하기에는 한계가 있었습니다. + +따라서, 사전 학습된 모델의 Classifier로써 작동하는 Fully-connected layer를 변경한 뒤 전이 학습을 거쳐 사용하기로 결정하였습니다. + +이 포스트는 Pytorch를 사용하는 저희 프로젝트에서 사전 학습된 모델과 전이 학습을 어떤 방식으로 적용하였는지를 보이고자 합니다. + +### 사전 학습된 모델 불러오기 + +먼저, PyTorch에서 어떤 모델을 제공하고 어떻게 사용할 수 있는지 알아보겠습니다. + +PyTorch는 이미지 분류, 객체 탐지, 영상 분류 등 다양한 목적에 맞는 사전 학습된 모델을 제공합니다. + +그 중 저희 프로젝트의 주제에 부합하는 이미지 분류용 사전 학습된 모델 리스트는 아래와 같습니다. + +![img](../assets/images/post-how-to-use-pretrained-model/00_pretrained-model-list.png) + +이 모델들은 torchvision 라이브러리의 models 서브패키지를 import한 다음 적절한 함수를 호출하는 간단한 과정을 통해서 사용할 수 있습니다. + +````python +# 필요 라이브러리 import +import torchvision.models as models + +# 모델 생성 함수 호출 +resnet18 = models.resnet18(pretrained=True) +vgg16 = models.vgg16(pretrained=True) +alexnet = models.alexnet(pretrained=True) +densenet = models.densenet161(pretrained=True) +```` + +이때, 매개 변수로 `pretrained=True`를 사용하였는데, 이를 명시하지 않으면 구조는 동일하지만 weight가 무작위로 초기화된 모델을 반환하게 됩니다. + +따라서 사전 학습된 모델을 사용하기 위해서는 반드시 `pretrained`를 `true`로 명시해야 합니다. + +위 예시 코드 외의 PyTorch에서 제공하는 모델에 맞는 생성 함수는 [PyTorch official document](https://pytorch.org/docs/stable/torchvision/models.html)에서 확인하여 사용할 수 있습니다. + +### 모델 수정하기 + +위 과정을 통해 불러온 모델을 바로 사용할 수 있으면 좋겠지만, 실제 프로젝트에 사용하기 위해서는 모델의 구조를 일부 수정한 뒤 weight를 사용할 dataset에 맞춰 다시 학습해야하는 경우가 대부분입니다. + +저희 프로젝트의 경우도 PyTorch가 제공하는 모델과 분류 대상의 클래스 수가 달라 모델 구조를 일부 수정해야 했는데, 그 과정은 다음과 같습니다. + +````python +# 필요 라이브러리 import +import torchvision.models as models + +# 모델 생성 +net = models.resnet18(pretrained=True) + +# 모델의 구조 출력 +print(net) +```` + +![img](../assets/images/post-how-to-use-pretrained-model/01_print-net-0.png) + +print() 함수를 통해 모델 구조를 확인해 Classifier로써 작동하는 fc 레이어를 다음 코드를 통해 변경합니다. + +````python +# fc 레이어의 input 수는 유지 +num_in = net.fc.in_features + +# 우리 프로젝트의 클래스 수는 120개이므로 output 수를 변경 +num_out = 120 + +# input, output에 맞는 레이어 사용 +net.fc = nn.Linear(in_features = num_in, + out_features = num_out, + bias=True) + +print(net) +```` + +![img](../assets/images/post-how-to-use-pretrained-model/02_print-net-1.png) + +다시 한번 print() 함수를 통해 모델의 구조를 확인하면 정상적으로 변경된 것을 확인할 수 있습니다. + +### 전이 학습 + +위와 같은 방법으로 수정한 모델을 학습하여 사용하는 것을 전이 학습이라고 하는데, 이때 학습을 시키는 방법은 아래와 같이 크게 3가지로 구분할 수 있습니다. + +![img](../assets/images/post-how-to-use-pretrained-model/03_train-strategies.png) + +처음 전이 학습에 대해 알아보면서 이 3가지 방법 중 어떤 방법을 채택하는 것이 적합할지 의문이였습니다. + +다행스럽게도 추가적인 조사를 하면서 데이터셋의 특징에 따라 일반적으로 어떤 방법을 채택하는 것이 유리한지 나타낸 아래 도표를 찾아 참고하였습니다. + +![img](../assets/images/post-how-to-use-pretrained-model/04_train-strategies-selection.png) + +저희 프로젝트의 경우 사전 학습된 모델이 분류하는 클래스에 강아지가 있었고, 전이 학습을 위한 데이터셋 자체도 이미지 2만장 정도로 크지 않다고 판단하여 feature-based learning을 하기로 결정했습니다. + +학습을 위한 모델 준비 최종 소스코드는 아래와 같습니다. + +````python +# 필요 라이브러리 import +import torchvision.models as models + +# 모델 생성 +net = models.resnet18(pretrained=True) + +# 사전 학습 모델의 layer들을 freeze +for param in net.parameters(): + param.requires_grad = False + +# fc 레이어의 input 수는 유지 +num_in = net.fc.in_features + +# 우리 프로젝트의 클래스 수는 120개이므로 output 수를 변경 +num_out = 120 + +# input, output에 맞는 레이어 사용 +net.fc = nn.Linear(in_features = num_in, + out_features = num_out, + bias=True) + +# 학습 루프 실행, 이하 생략 +```` diff --git a/_posts/2020-12-25-Fall_intro-Dec.md b/_posts/2020-12-25-Fall_intro-Dec.md new file mode 100644 index 0000000000..5e53b0cf14 --- /dev/null +++ b/_posts/2020-12-25-Fall_intro-Dec.md @@ -0,0 +1,282 @@ +--- +layout: post +title: "Fall intro team 12월 파이썬 과제" +authors: ["maybeluna"] +tags: ["Fall intro"] +image: https://user-images.githubusercontent.com/72259053/116891473-b4cfe880-ac69-11eb-8d6b-3133a310be6e.png +description: "과제 6" +featured: false +--- + + +## 1. Assignment-6 + +### Ex 01. I Know Rock only + +- 제출할 폴더 : `ex01/` +- 제출할 파일 : `rock_only.py` + +상대방이 바위를 냈을 때, 가위바위보를 진행하는 함수 `rock_only()`를 작성하세요. + +```python +rock_only() +``` + +- 매개변수(parameter) : **없음** +- 기능 + - 가위는 `scissors`, 바위는 `rock`, 보는 `paper` 문자열을 사용합니다. + - 함수를 실행하면 문자열 입력을 하나 받고, 가위바위보의 결과를 **출력**합니다. +- 반환값(return value) : **없음** + +```python +# 예시 코드 1 +rock_only() # 'scissors' 입력 + +# 예시 출력 1 +You win! + +# 예시 입력 2 +rock_only() # 'rock' 입력 + +# 예시 출력 2 +Draw + +# 예시 입력 3 +rock_only() # 'paper' 입력 + +# 예시 출력 3 +You lose... +``` + +- 나의 작업 + +```python +def rock_only(): + a = input() + if a == "scissors": + print("You win!") + elif a == "rock": + print("Draw") + elif a == "paper": + print("You lose...") +``` + +=> clear 😉 + +"조건문을 활용하여 함수를 수행해보았습니다. 다음에는 바위 뿐만 아니라 가위, 보에도 적용될 수 있는 함수를 만들어보고 싶습니다." + +--- + +### Ex 02. dot dot dot + +- 제출할 폴더 : `ex02/` +- 제출할 파일 : `dot_product.py` + +두 1차원 벡터가 리스트가 주어졌을 때, 이 둘의 **내적** 결과를 반환하는 함수 `dot_product()` 를 작성하세요. + +```python +dot_product() +``` + +- 매개변수(parameter) : 1차원 **리스트** a, b (a, b는 내적이 가능한 경우만 주어짐) +- 반환값(return value) : a, b의 내적 결과 + - 내적이 가능한 경우, 내적값을 반환 + - 내적이 불가능한 경우, 0을 반환 + +```python +# 예시 +a = [1, 2, 3] +b = [4, 5, 6] + +print(dot_product(a, b)) # 32 +``` + +Hint 💡 : Dot Product가 무엇인지 잘 모른다면? Search Google! + +- Dot product: 벡터의 내적을 말하는 것으로 a = (a1, a2, a3), b = (b1, b2, b3) 두 벡터의 내적은 a1xb1 + a2xb2 + a3xb3을 말한다. +- 할당 연산자 + - a += b: a에 b 값을 더하고 그 결과를 a에 할당하는 것으로 '+' 자리에 다른 사칙연산(Ex. -, /, *, %, //, **)에도 마찬가지로 적용된다. +- 나의 작업 + +```python +def dot_product(a, b): + if len(a) == len(b): + vector = 0 + for i in range(0, len(a)): + vector += a[i]*b[i] + result = vector + else: + result = 0 + return print(result) +``` + +"처음에 자동적으로 벡터의 내적을 적용한는 numpy 패키지를 사용했으나 이를 이용하지 않고 구해보는 것이 이 과제의 목적이라고 하셔서 다시 구했습니다. 가장 난제가 내적이 불가능한 경우, 0을 반환하는 것이었습니다. 내적이 불가능한 경우를 계속 파악하지 못해 오랜시간 고민을 하였고 결국 코어 멤버 분에게 질문을 하고 길이가 다르면 내적이 불가능하다는 답변을 들은 후 결론을 도출할 수 있었습니다. 다만 의문이 드는 것은 만약 리스트 안에 정수가 아닌 문자, 혹은 불 형식이 들어있는 것은 어떻게 파악하는 것인가 의문이 들었습니다. 이 부분은 한번 더 생각해보아야 할 것 같습니다." + +--- + +### Ex 03. 분명한명분 + +- 제출할 폴더 : `ex03/` +- 제출할 파일 : `is_palindrome.py` + +입력받은 문자열이 펠린드롬(회문)인지 확인하는 함수 `is_palindrome()` 을 작성하세요. + +```python +is_palindrome() +``` + +- 매개변수(parameter) : 문자열 `s` +- 반환값(return value) : `s`가 펠린드롬이면 True, 아니면 False + +```python +# 예시 코드 1 +print(is_palindrome("토마토")) + +# 예시 출력 1 +True + +# 예시 입력 2 +print(is_palindrome("파이썬")) + +# 예시 출력 2 +False +``` + +Hint 💡 : Palindrome이 무엇인지 잘 모른다면? Search Google! + +- Palindrome: 앞에서부터 읽으나 뒤에서부터 읽으나 똑같은 단어로 대표적으로 eye가 있다. +- 나의 작업 + +```python +def is_palindrome(s): + for i in range(len(s)//2): + if s[i] == s[-1 -i]: + result = True + else: + result = False + return print(result) +``` + +=> clear 😉 + +"리스트 순서가 0부터 시작하는 것을 인식하는 것이 이 문제의 핵심 포인트였습니다." + +--- + +### Ex 04. Strange Compare + +- 제출할 폴더 : `ex04/` +- 제출할 파일 : `strange_cmp` + +여욱이라는 아이는 숫자를 특이하게 비교하는 것으로 유명하다. + +**각 자리수를 모두 오름차순으로 정렬해버린 다음** 그 결과를 바탕으로 두 수를 비교한다. + +두 숫자가 주어졌을 때, 여욱이의 방법으로 결과를 반환하는 함수 `strange_cmp()` 을 작성하세요. + +```python +strange_cmp() +``` + +- 매개변수(parameter) : 정수(int) `x`, `y` +- 반환값(return value) : x가 y보다 크면 **"Left",** y가 x보다 크면 **"Right",** 같으면 **"Same"** + +```python +# 예시 코드 1 +print(strange_compare(123, 231)) + +# 예시 출력 1 +Same # 123 == 123 + +# 예시 입력 2 +print(strange_compare(222, 321)) + +# 예시 출력 2 +Left # 222 > 123 + +# 예시 입력 3 +print(strange_compare(911, 537)) + +# 예시 출력 3 +Right # 119 < 357 +``` + +- 나의 첫 번째 작업 + +```python +def strange_cmp(x, y): + if x > y: + result = "Left" + elif x < y: + result = "Right" + elif x == y: + result = "Same" + return result +``` + +- 리스트 정렬 + - a.reverse(): 리스트 뒤집기 + - a.sort(): 리스트 오름차순 정렬 + - a.sort(reverse=True): 리스트 내림차순 정렬 +- 나의 두 번째 작업 + +```python +def strange_cmp(x, y): + x = list(str(x)) + x.sort() + a = int("".join(x)) + y = list(str(y)) + y.sort() + b = int("".join(y)) + if a > b: + result = "Left" + elif a < b: + result = "Right" + elif a == b: + result = "Same" + return print(result) +``` + +"초반에 오름차순 있는 지 몰라서 이거는 과제6에서 그나마 쉽다고 생각했습니다. 그런데 다시 문제 확인하다가 오름차순을 알게되서 호다닥 고쳤습니다! 이 문제에서 가장 어려웠던게 정수형을 어떻게 오름차순으로 바꿀 지 였습니다. 계속 고민하다가 구글링 도중 리스트로 바꾸고 정렬시킨 다음 다시 바꾸는 방법이 있어 이를 적용해보았습니다!" + +--- + +### Ex 05. I Love Combination Pizza II + +- 제출할 폴더 : `ex05/` +- 제출할 파일 : `combi_two.py` +- 사용 **금지**된 코드 : `itertools` + +숫자 $n(1 clear 😉 + +"n자리 조합을 다 인지하는 것이 중요했습니다. 예를 들자면 3자리 수라면 일의 자리 역시 001로 인식하는 것이 필요했습니다. 그 부분을 반복문 조건문을 통해 해결해보았고 무사히 작동되었습니다. 다만 8자리수의 경우 실험을 해보다가 2시간이 지나도 완성이 안되어 강제 종료하였습니다." + +> *과제 6이 어렵다고 하셨는데 실제로 기존에 했던 것보다 어려워서 애를 먹었습니다. 특히 한 쪽을 해결하면 또 한 쪽이 문제가 생각나서 어떻게 하면 문제를 전부 해결할 수 있을까 고민했습니다. 23일 기대하지 못했던 상을 타서 매우 민망하고 아직 제가 탈 상이 아닌 것 같은데 더 노력하라는 의미로 알고 방학 때는 열코딩 하겠습니다!!* + +## 🎄🎅Merry Christmas🎁🎄 diff --git a/_posts/2020-12-25-WEB_Mission4.md b/_posts/2020-12-25-WEB_Mission4.md new file mode 100644 index 0000000000..2f22dbc4ee --- /dev/null +++ b/_posts/2020-12-25-WEB_Mission4.md @@ -0,0 +1,901 @@ +--- +layout: post +title: "Web Mission4 - React 2-3장" +authors: [zeze1004] +tags: ["Web"] +image: assets/images/post-WEB-Mission4/todolist_8.png +description: "React" +featured: false +--- + +WEB 팀의 4번째 미션은 아래의 교재로 React 공부를 하는 것입니다. + +이번 포스팅에서는 교재의 2장과 3장을 리뷰하겠습니다. + +> [#4 Mission : React](https://react.vlpt.us/) + +이번 미션은 이전 미션과 다르게 조건에 맞춰 코딩하는 것이 아닌 React를 배우는 것이 목표임으로 정해진 요구사항은 없습니다. + +교재의 각 장에 맞춰서 리뷰하겠습니다. + +## [2장] 리액트 컴포넌트 스타일링하기 + +### 1. Sass + + Sass는 CSS의 전처리기로써 웹에서 컴파일이 안되지만, CSS보다 간단한 문법을 제공합니다. + + 'node-sass' 라이브러리를 통해 Sass가 CSS로 변환되어 웹에서 컴파일 됩니다. + + Sass는 CSS와 상당히 유사한 문법을 가지고 있습니다. 지금부터 소개할 몇 가지 문법은 CSS와 다른 Sass의 문법입니다. + + 1. 변수 선언 + + ```css + $변수명: 값; + ``` + + CSS는 변수명 앞에 '$'를 붙이지 않는다는 차이점이 있습니다. + Sass는 변수 사용 시 '$변수명;'을 사용합니다. + + 2. 셀렉터 선언 + + - css로 작성시 + + ```css + div.container h4 { + color: blue; + } + div.container p { + color: green; + } + ``` + + - sass로 작성시 + + ```scss + div.container { + h4 { + color: blue; + } + p { + color: green; + } + } + ``` + + 셀렉트는 h4, p와 같이 html 스타일 요소를 뜻합니다. + + css와 달리 sass는 관련된 class 안에 셀렉터들을 선언합니다. css보다 코드가 간결해지고 셀럭터 해석이 편하다는 장점이 있습니다. + +### 2. CSS Module + + 코드가 길어지면 중복되는 클래스 이름이 생길 수 있습니다. CSS Module은 클래스 이름을 고유하게 만들어 겹치지 않도록 해줍니다. + + 따로 라이브러리를 설치할 필요 없이 기존 css 파일 확장자를 .module.css로 설정하면 됩니다. + + Sass에서도 사용 가능합니다. .module.scss로 바꿔주면 됩니다. + + 가령 Box.css를 Box.module.css로 바꾼 후 js 파일에 import할려면 아래와 같이 하면 됩니다. + + ```react + import React from "react"; + import styles from "./Box.module.css"; + + function Box() { + return
    {styles.Box}
    ; + } + ``` + + import로 불러온 styles 객체 안에 있는 값을 참조해야 합니다. + +### 3. styled-components + + styled-components는 js 안에 css(CSS in JS)를 작성할 수 있는 리액트 라이브러리입니다. + + 보통 react 컴포넌트를 스타일링할 때 외부 css 파일을 className으로 속성을 전달 받아서 렌더링하여 사용했는데요. + + styled-components을 사용하면 css를 컴포넌트 내부에 넣기 때문에 수정이 훨씬 쉽다는 장점이 있습니다. + + `npm add styled-components` 설치해주세요. + + ![blue-circle.png](../assets/images/post-WEB-Mission4/blue-circle.png) + + styled-components를 이용하여 css 파일없이 위의 파란원을 만들어봅시다. + + [App.js] + + ```react + import React from 'react'; + + import styled from 'styled-components'; + + const Circle = styled.div` + width: 5rem; + height: 5rem; + background: ${props => props.color || 'black'}; + border-radius: 50%; + `; + + + function App() { + return ; + } + + export default App; + ``` + + App.js 파일의 Circle 컴포넌트에 css가 들어갔습니다. + 이제 js파일 내에서 바로 css 수정이 가능합니다! + + div를 스타일링하였으므로 `styled.div`를 사용했습니다. + + Circle 컴포넌트에 color라는 props를 넣어 색깔도 변경 가능합니다. + + `props: <컴포넌트이름: props이름 = "값">` + +## [3장] 멋진 투두리스트 만들기 + +3장에서는 react를 사용해 투두리스트를 만듭니다. +아래 사진은 벨로스터님이 만든 투두리스트 완성본이지만 디자이너 제제는 더 멋지게 만들 것이므로 완성본이 다릅니다. +![todolist.png](../assets/images/post-WEB-Mission4/todolist.png) + +이번 장을 어떻게 리뷰해야 할지 고민이 많았어요. +긴 코드를 제가 리뷰하는 것보다 교재를 보면서 직접 해보시는게 훨씬 이해가 빠를 거라 생각이 들었습니다. 고민 끝에 저는 코드 리뷰보다는 개념 설명에 더 집중하기로 했답니다. +~~(그리고 리액트를 이해하기 포기했다고 합니다.)~~ + +### 1. 컴포넌트 만들기 + + `create-react-app`을 사용해 새로운 프로젝트를 만든 후 + `npm add styled-components` 설치해주세요. + + 만들어야 할 컴포넌트는 총 5개 입니다. + + 1. todoTemplate: 페이지의 중앙에 그림자가 적용된 흰색 박스. + 2. todoHead: 오늘의 날짜와 요일을 보여주고, 앞으로 해야 할 일이 몇 개 남았는지 보여줌. + 3. todoList: todos 배열을 map() 을 사용하여 여러 개의 TodoItem 컴포넌트를 렌더링. + 4. todoItem: 할 일의 정보를 렌더링 해주는 컴포넌트. 체크 버튼 누르면 텍스트 색상이 연해지고 텍스트에 마우스를 올리면 휴지통 아이콘이 나타남. 휴지통 아이콘 누르면 항목 삭제됨. + 5. todoCreate: 새로운 할 일을 등록할 수 있게 해주는 컴포넌트. + + 컴포넌트를 본격적으로 만들기 전에 `createGlobalStyle`을 이용해서 `App.js`에서 화면 배경을 설정합시다. + + `createGlobalStyle`은 js파일에서 `body {}` 태그를 호출해 태그 내부에서 css 적용을 시킬 수 있습니다. 이름에서부터 알 수 있듯이 글로벌 스타일을 설정할 때 사용합니다. `createGlobalStyle`을 안 쓰고 따로 css 파일에 적용해도 똑같습니다. + +#### App.js + + ```react + import React from "react"; + import { createGlobalStyle } from "styled-components"; + + const GlobalStyle = createGlobalStyle` + body { + background: pink; + } + `; + + function App() { + return ( + <> + {/* 배경 적용 */} +
    제제는 리액트가 싫어요.
    + + ); + } + + export default App; + ``` + +![todolist_1.png](../assets/images/post-WEB-Mission4/todolist_1.png) + + 분홍색 배경이 적용 되었습니다. + + 이제 to do list 컴포넌트를 만들어보겠습니다. + + `src` 폴더 내에 `components` 폴더를 만들고 `components` 폴더 내에 컴포넌트 파일을 모두 저장하겠습니다. + + 현재 폴더 구조는 아래와 같습니다. + + ![todolist_2.png](../assets/images/post-WEB-Mission4/todolist_2.png) + +#### 1) TodoTemplate.js + +첫 번째로 만들 컴포넌트입니다. + +페이지의 중앙에 그림자가 적용된 흰색 박스. 라고 위에서 소개 드렸지만 그림자 코드를 추가해도 그림자가 안 나타나서 그림자가 적용되지 않는 흰색 박스 컴포넌트를 소개하겠습니다.^^ + +```react +import React from "react"; +import styled from "styled-components"; + +const TodoTemplateBlock = styled.div` + width: 512px; + height: 768px; + + position: relative; /* 추후 박스 하단에 추가 버튼을 위치시키기 위한 설정 */ + background: skyblue; + border-radius: 30px; /* 모서리 둥근 정도 */ + + margin: 0 auto; /* 페이지 중앙에 나타나도록 설정 */ + + margin-top: 96px; + margin-bottom: 32px; + display: flex; + flex-direction: column; +`; + +function TodoTemplate({ children }) { + return {children}; +} + +export default TodoTemplate; +``` + +작성한 TodoTemplate.js를 사용하도록 App.js를 조금 수정합시다. + +[App.js] + +```react +... +import TodoTemplate from './components/TodoTemplate'; + +... + +function App() { + return ( + ... + 제제는 리액트가 싫어요. + + ); +} + +export default App; +``` + +기존 App.js에서 TodoTemplate.js를 호출하고 TodoTemplate.js에서 만든 `div`태그를 적용 시킵니다. + +![todolist_3.png](../assets/images/post-WEB-Mission4/todolist_3.png) + +배경색은 유지된 채, TodoTemplate.js에서 만든 TodoTemplateBlock이 잘 적용 되었습니다. + +#### 2) TodoHead.js + +두 번째로 만들 컴포넌트는 날짜, 요일, 남은 할 일 개수를 보여줄 겁니다. + +```react +import React from "react"; +import styled from "styled-components"; + +const TodoHeadBlock = styled.div` + padding-top: 48px; + padding-left: 32px; + padding-right: 32px; + padding-bottom: 24px; + border-bottom: 5px solid pink; /* 헤더 구분하는 실선 */ + h1 { + margin: 0; + font-size: 36px; + color: white; + } + .day { + margin-top: 4px; + color: black; + font-size: 21px; + font-weight: bold; + } + .tasks-left { + color: red; + font-size: 18px; + margin-top: 40px; + font-weight: bold; + } + /* 게으름뱅이의 이스터에그 */ + .hurry_up_zeze { + color: white; + font-size: 10px; + margin-top: 1px; + text-decoration: line-through; + } +`; + +function TodoHead() { + return ( + +
    제제 글을 마저 써...
    +

    2021년 2월 21일

    +
    일요일
    +
    할 일 2개 남음
    +     + ); +} + +export default TodoHead; +``` + +TodoHead.js 코드를 작성한 후 TodoHead.js와 마찬가지로 App.js에 파일을 적용시킵니다. + +[App.js] + +```react +... +import TodoHead from './components/TodoHead'; + + +... + +function App() { + return ( + ... + 제제는 리액트가 싫어요. + + + + ); +} + +export default App; +``` + +파란색 배경의 컴포넌트 내에 글이 보여야 하므로`` 태그 안에 ``를 삽입합니다. + +![todolist_4.png](../assets/images/post-WEB-Mission4/todolist_4.png) + +#### 3) TodoList.js + +여러 개의 할 일을 보여주는 컴포넌트를 만들겠습니다. + +```react +import React from "react"; +import styled from "styled-components"; + +const TodoListBlock = styled.div` + flex: 1; + padding: 20px 32px; + padding-bottom: 48px; + overflow-y: auto; /* 자동으로 세로 스크롤바 생성 */ +`; + +function TodoList() { + return TodoListBlock ; +} + +export default TodoList; +``` + +[App.js] + +```react +... +import TodoList from './components/TodoList'; +... +function App() { + return ( + <> + {/* 배경 적용 */} + 제제는 리액트가 싫어요. + + + + + ); +} +... +``` + +![todolist_5.png](../assets/images/post-WEB-Mission4/todolist_5.png) + +#### 4) TodoItem.js + +TodoList 위에 할 일의 항목을 보여줄 컴포넌트를 만들겠습니다. + +```react +import React from "react"; +import styled, { css } from "styled-components"; +import { MdDone, MdDelete } from "react-icons/md"; + +const Remove = styled.div` + display: flex; + justify-content: center; + color: white; + font-size: 24px; + cursor: pointer; + &:hover { + color: black; /* 아이콘을 커서로 가르키면 색 변함 */ + } + display: none; /* 커서가 항목 위에 올라오면 그 때 아이콘 보여줌 */ +`; + +// 커서가 위에 있을 때 Remove 컴포넌트를 보여줌 => 쓰레기통 아이콘 뜸 +const TodoItemBlock = styled.div` + display: flex; + align-items: center; + padding-top: 12px; + padding-bottom: 12px; + &:hover { + ${Remove} { + display: initial; + } + } +`; + +const CheckCircle = styled.div` + width: 32px; + height: 32px; + border-radius: 16px; + border: 1px solid white; + font-size: 24px; + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + margin-right: 20px; + cursor: pointer; + + /* check가 된 항목만 적용 */ + ${(props) => + props.done && + css` + border: 1px solid white; + color: red; + `} +`; + +const Text = styled.div` + flex: 1; + font-size: 21px; + color: white; + + /* check가 된 항목만 적용 */ + ${(props) => + props.done && + css` + color: gray; + `} +`; + +function TodoItem({ id, done, text }) { + return ( + + {done && } + {text} + + + + + ); +} + +export default TodoItem; +``` + +TodoItem은 TodoList에서 렌더링 됩니다. 따라서 App.js 호출하지 않고 TodoList.js에서 불러오겠습니다. + +[TodoList.js] + +```react +... +import TodoItem from './TodoItem'; +... +function TodoList() { + return ( + TodoListBlock + + + + ); +} +... +``` + +![todolist_6.png](../assets/images/post-WEB-Mission4/todolist_6.png) + +#### 5) TodoCreate.js + +할 일 항목을 추가하는 버튼을 추가할 겁니다. + +버튼을 누르면 할 일을 쓸 수 있는 `InsertForm`이 하단에 뜹니다. + +`CircleButton`을 통해 버튼을 누르면 버튼의 색깔이 바뀌는 등의 이벤트가 발생합니다. + +```react +import React, { useState } from "react"; +import styled, { css } from "styled-components"; +import { MdAdd } from "react-icons/md"; + +const CircleButton = styled.button` + background: white; + &:hover { + background: red; + } + &:active { + background: yellow; + } + + z-index: 5; + cursor: pointer; + width: 80px; + height: 80px; + display: block; + align-items: center; + justify-content: center; + font-size: 60px; + position: absolute; + left: 50%; + bottom: 0px; + transform: translate(-50%, 50%); + color: pink; + border-radius: 50%; + border: none; + outline: none; + display: flex; + align-items: center; + justify-content: center; + + transition: 0.125s all ease-in; + ${(props) => + props.open && + css` + background: #ff6b6b; + &:hover { + background: #ff8787; + } + &:active { + background: #fa5252; + } + transform: translate(-50%, 50%) rotate(45deg); + `} +`; + +const InsertFormPositioner = styled.div` + width: 100%; + bottom: 0; + left: 0; + position: absolute; +`; + +const InsertForm = styled.form` + background: #f8f9fa; + padding-left: 32px; + padding-top: 32px; + padding-right: 32px; + padding-bottom: 72px; + + border-bottom-left-radius: 16px; + border-bottom-right-radius: 16px; + border-top: 1px solid #e9ecef; +`; + +const Input = styled.input` + padding: 12px; + border-radius: 4px; + border: 1px solid #dee2e6; + width: 100%; + outline: none; + font-size: 18px; + box-sizing: border-box; +`; + +function TodoCreate() { + const [open, setOpen] = useState(false); + + const onToggle = () => setOpen(!open); + + return ( + <> + {open && ( + + + + + + )} + + + + + ); +} + +export default TodoCreate; +``` + +![todolist_7.png](../assets/images/post-WEB-Mission4/todolist_7.png) + +이렇게 5가지 컴포넌트 작성이 완성 되었습니다. 다음 파트는 `Context API 를 활용한 상태 관리`입니다. + +### 2. Context API 를 활용한 상태 관리 + + 이 파트는 개념적인 부분을 대부분 이해를 못 했습니다😢 + 따라서 실습 위주로 적겠습니다! + +![contextAPI1.png](../assets/images/post-WEB-Mission4/contextAPI1.png) + +다음과 같은 구조로 상태관리를 한다면 프로젝트 규모가 커질 시 최상위 컴포넌트인 App의 컴포넌트에서 모든 상태 관리를 하기엔 코드가 너무 복잡해질 수 있고, 여러 컴포넌트를 거쳐 props를 전달해야 하는 불편함이 있을 수 있습니다. + +![contextAPI2.png](../assets/images/post-WEB-Mission4/contextAPI2.png) + +ContextAPI를 활용하면 위처럼 구현할 수 있습니다. + +먼저 Context가 무엇인지 소개드리겠습니다. 앞서 1-22에 Context API에 대해 설명 됐는데요. + +간단히 설명드리자면 context는 다양한 레벨의 컴포넌트에게 props를 전달하는 것입니다. + +일반적으로 react에서는 첫 번째 사진 처럼 부모가 자식에게 하향식으로 값을 전달하는데요. Context API를 이용하면 두 번째 사진처럼 트리의 모든 레벨에 값을 공유할 수 있습니다. + +상위계층에서 하위계층으로 props를 넘기는 것이 아니라 필요한 컴포넌트가 데이터에 접근할 수 있기 때문에 전역적으로 데이터 관리가 가능합니다. + +Context API를 알기 위해서는 먼저 Hook 개념을 이해하셔야 합니다. +Hook은 간단히 설명하자면 class를 사용하지 않고 function에서 state를 관리할 수 있는 기능입니다. + +개념적으로 이해하기는 class 컴포넌트가 더 편하지만 function 컴포넌트는 코드가 간단해진다는 장점이 있습니다! + +1장에 hook 관련 개념에 대해서 자세히 나와 있는데요. + +이번 장에서 한 번더 언급되는 개념들만 간단히 설명하고 넘어가겠습니다. + +1. 1.7: `useState()`: 배열에 두 값을 넣어 return 됩니다. 첫 번째 배열에는 useStete의 인자값이, 두 번째 배열애는 state를 변경할 수 있는 함수가 return 됩니다. + +2. 1.20: `useReducer()`: useState()와 비슷한 함수입니다. useStete()가 컴포넌트 내부의 stste를 업데이트 한다면 useReducer()는 state를 컴포넌트 외부에서 업데이트 할 수 있습니다. + + Context API를 한 번에 이해하기 힘들었습니다. react는 업데이트가 상당히 빠른 라이브러리기 때문에 현재의 쓰임새를 이해하기 위해서는 그 전의 사용법도 알아야 했습니다. 현재의 사용법이 과거의 불편사항의 개선 결과이기 때문이죠. + + Context API가 react에서 업데이트 하기 전까지 프로젝트의 규모와 상관없이 전역 state 관리는 redux를 사용했습니다. + redux는...뭔지 잘 모르겠습니다... + + Context API를 알기 위해서는 redux를 알아야 한데서 알려고 했는데...알 수 없었습니다...😥 + + 리액트 너무 어려워요...엉엉... + Context API 코드를 마저 짜봅시다. + + src 폴더에 TodoContext.js를 생성하고 `useReducer`를 사용하여 상태 관리하는 `TodoProvider`라는 컴포넌트를 만들어봅시다. + + `TodoProvider` 함수에는 todo 들이 저장 되어 있는 `initialTodos`와 todo 기능인 `CRAET`, `TOGGLE`, `REMOVE`를 모아놓은 `todoReducer`를 컴포넌트들에 전달하여 컴포넌트들이 직접 렌더링 할 수 있게 합니다. + + [TodoContext.js] + + ```react + import React, { useReducer, createContext, useContext, useRef } from "react"; + + // TODO 저장 + const initialTodos = [ + { + id: 1, + text: "zeze는 귀여워", // TODO + done: true, // 버튼 체크 유무, 체크하면 true + }, + { + id: 2, + text: "zeze는 바보야", + done: true, + }, + ]; + + function todoReducer(state, action) { + switch (action.type) { + // TODO 생성시 이벤트 + case "CREATE": + return state.concat(action.todo); + // 버튼 클릭시 이벤트 + case "TOGGLE": + return state.map((todo) => + todo.id === action.id ? { ...todo, done: !todo.done } : todo + ); + // 휴지통 아이콘 클리시 이벤트 + case "REMOVE": + return state.filter((todo) => todo.id !== action.id); + default: + throw new Error(`Unhandled action type: ${action.type}`); + } + } + + const TodoStateContext = createContext(); + const TodoDispatchContext = createContext(); + const TodoNextIdContext = createContext(); + + export function TodoProvider({ children }) { + const [state, dispatch] = useReducer(todoReducer, initialTodos); + const nextId = useRef(5); + + return ( + + + + {children} + + + + ); + } + + export function useTodoState() { + return useContext(TodoStateContext); + } + + export function useTodoDispatch() { + return useContext(TodoDispatchContext); + } + + export function useTodoNextId() { + return useContext(TodoNextIdContext); + } + ``` + +### 3. 기능 구현하기 + + 앞서 컴포넌트를 구현하면서 to do list의 UI 구현을 마쳤습니다. 이제 기능 구현을 해보겠습니다. + + 앞서 만들어진 컴포넌트에 기능 구현 코드를 추가하겠습니다. + +#### 1) TodoHead.js + +`today.toLocaleDateString` 함수로 실제 오늘 날짜를 띄웁니다. + +to do list의 헤드의 날짜가 오늘 날짜로 바뀌는 것을 확인할 수 있습니다. + +```react +... +import { useTodoState } from '../TodoContext'; +... + +function TodoHead() { + const todos = useTodoState(); + const undoneTasks = todos.filter(todo => !todo.done); + + // 실제 오늘 날짜 보여주기 + const today = new Date(); + const dateString = today.toLocaleDateString('ko-KR', { + year: 'numeric', + month: 'long', + day: 'numeric' + }); + const dayName = today.toLocaleDateString('ko-KR', { weekday: 'long' }); + + + return ( + +
    제제 글을 마저 써...
    +

    {dateString}

    +
    {dayName}
    +
    할 일 {undoneTasks.length}개 남음
    +     + ); +} + +export default TodoHead; +``` + +#### 2) TodoList.js + +TodoContext.js에서 저장할 todo 두 개를 임시로 적어놨습니다. + +TodoList는 TodoContext의 `initialTodos`의 state를 `map` 함수 받아올 것입니다. + +```react +... +import { useTodoState } from '../TodoContext'; +... +function TodoList() { + const todos = useTodoState(); + + return ( + + {todos.map(todo => ( + + ))} + + ); +} + +export default TodoList; +``` + +![todolist_8.png](../assets/images/post-WEB-Mission4/todolist_8.png) + +TodoContext의 state를 제대로 불러와서 렌더링 한 것을 확인할 수 있습니다. + +#### 3) TodoItem.js + +TodoContext의 `dispatch`를 사용해 `TOGGLE`함수와 `REMOVE`함수를 사용할 수 있습니다. + +글을 삭제 시 TodoHead에서 TodoContext의 `useTodoState`함수를 이용해 아직 완수 되지 않은 todo의 개수를 바로 반영합니다. + +```react +... +import { useTodoDispatch } from '../TodoContext'; +... +// todo id/ 완료 true, flase / todo 내용 전달 받음 +function TodoItem({ id, done, text }) { + const dispatch = useTodoDispatch(); + const onToggle = () => dispatch({ type: 'TOGGLE', id }); + const onRemove = () => dispatch({ type: 'REMOVE', id }); + return ( + + {/* 체크버튼 누릴 시 TodoContext의 TOGGLE 이벤트 발생 */} + + {done && } + + {text} + {/* 쓰레기통 아이콘 누릴 시 TodoContext의 REMOVE 이벤트 발생 */} + + + + + ); +... +``` + +#### 4) TodoCreate.js + +마지막으로 클라이언트가 input form에 작성하면 todolist가 렌더링 해줘 새로운 todo가 뜨게 만드는 기능을 구현해 봅시다. + +```react +... +import { useTodoDispatch, useTodoNextId } from '../TodoContext'; +... + +function TodoCreate() { + const [open, setOpen] = useState(false); + const [value, setValue] = useState(''); + + const dispatch = useTodoDispatch(); + const nextId = useTodoNextId(); + + const onToggle = () => setOpen(!open); + const onChange = e => setValue(e.target.value); + const onSubmit = e => { + e.preventDefault(); // 새로고침 방지 + + // TodoTemplate에서 CREATE 이용해 todoInitial 추가 + dispatch({ + type: 'CREATE', + todo: { + id: nextId.current, + text: value, + done: false // 디폴트가 체크하지 않은 상태 + } + }); + setValue(''); + setOpen(false); + nextId.current += 1; // CREATE 호출 할 때 마다 id 1씩 증가 + }; + + return ( + <> + {open && ( + + + + + + )} + + + + + ); +} +... +``` + +이로써 모든 기능을 구현했습니다! + +[여기](https://www.youtube.com/watch?v=pH76lDisyUU&feature=youtu.be)서 구현된 모습을 영상으로 확인할 수 있습니다. + +--- + +### 글을 마치면서 + +게으른 완벽주의자가 얼마나 해로운지 다시 한 번 깨달았습니다. + +WEB팀 멤버 분들에게 너무 송구합니다...😥 + +완벽주의자가 아닌 완성주의자가 되는 제제가 되도록 노력하겠습니다. + +글을 쓸 수 있게 인내심을 가지고 응원해 준 모든 WEB 팀 여러분 사랑해요.💓💓💓 diff --git a/_posts/2020-12-27-Teachable-Machine.md b/_posts/2020-12-27-Teachable-Machine.md new file mode 100644 index 0000000000..88f2ec6c3f --- /dev/null +++ b/_posts/2020-12-27-Teachable-Machine.md @@ -0,0 +1,58 @@ +--- +layout: post +title: "ML 맛보기 - Teachable Machine" +authors: [YubeenSon] +tags: ["TeachableMachine", "ML"] +image: assets/images/post-Teachable-Machine/teachable_machine.jpeg +description: "Teachable Machine" +featured: false +--- +머신러닝이라는 것이 복잡하고 어려운 것만은 아니라고 저의 심리적 장벽을 낮춰준 것이 바로 Teachable Machine입니다. 이번 기회에 Teachable Machine을 공부한 내용을 기반으로 소개해보고자 합니다. + +## Teachable Machine + +Teachable Machine은 구글에서 제공하는 웹 기반의 머신러닝 툴입니다. 여기서 머신러닝 코드 없이 이미지, 소리, 포즈 자료를 업로드하여 인식 모델을 만들 수 있습니다. 만든 모델은 export 하여 원하는 사이트, 어플리케이션 제작에 활용 가능합니다. 머신러닝과 코딩에 대한 사전 지식이 필요하지 않고, 비개발자들도 툴을 이용해서 머신러닝을 이용한 결과물을 쉽고 빠르게 얻을 수 있다는 것이 특징입니다. + +## 원리 + +Teachable Machine은 미리 만들어진 신경망을 활용해 사용자로부터 입력받은 데이터를 처리합니다. 새로운 데이터들을 기존 모델으로부터 전이학습을 시키는 것이기 때문에 새로운 모델의 구현과 같은 복잡한 과정 없이 결과물을 얻을 수 있습니다. 다음은 Teachable Machine FAQ에 나오는 문장입니다. + +(전이학습 : 사전에 훈련된 모델의 가중치를 가지고 와서 새로운 case에 재보정해서 사용하는 것) + +>"There’s a pretrained neural network, and when you create your own classes, you can sort of picture that your classes are becoming the last layer or step of the neural net.” [1](#footnote_1) + +Teachable Machine의 사전 학습 모델들은 크게 2가지가 있습니다. +image와 관련된 프로젝트의 모델로는 MobileNet[2](#footnote_2)이 사용되고, audio와 관련된 프로젝트의 모델로는 speech command recognizer[3](#footnote_3) 이 사용되었습니다. 이를 통해 사용자는 적절한 데이터와 라벨링만으로 원하는 머신러닝 결과물을 얻을 수 있습니다. + +## 활용 방법(이미지 분류의 경우) + +![teachable_machine_page.jpeg](../assets/images/post-Teachable-Machine/teachable_machine_page.jpeg) +출처 : 생활코딩 + +앞에서 언급한 사전 학습된 모델을 바탕으로 Teachable Machine에서 코딩 없이 이미지 분류 모델을 만들고 결과물을 확인하는 과정을 알아보겠습니다. + +1. 기존의 이미지를 활용하거나, 웹캠을 통해 input 데이터를 만듭니다. +2. 만들어진 input 데이터들을 최소 2개 이상의 클래스로 분류합니다. +3. `train model` 버튼을 눌러 모델을 생성합니다. +4. 만들어진 모델에 대한 결과를 우측 화면에서 확인합니다. + +### Advanced + +Teachable Machine은 `advanced` 설정을 통해 머신러닝의 다양한 파라미터들을 사용자가 쉽게 조정할 수 있게 해줍니다. 이를 통해 일반적인 모델을 조금 더 사용자가 구체적으로 모델을 수정할 수 있게 도와줍니다. `advanced`를 통해 세부 조정 가능한 항목들은 epoch, batch size, learning rate입니다. + +> **Epoch** : 전체 데이터 셋에 대해 한 번 학습을 완료한 상태(epochs = 40이라면 전체 데이터를 40번 사용해서 학습을 거치는 것) +  - Epoch가 너무 작다면, 학습횟수가 부족해서 적절한 학습을 달성하지 못합니다. +  - Epoch가 너무 크다면, 기존 데이터 셋에 대한 의존도가 너무 큰 과적합(overfitting)이 발생해서, 새로운 데이터에 대한 예측률이 떨어질 수 있습니다. +> **Batch Size** : 메모리의 한계와 속도 저하문제로 모든 데이터를 한번에 집어넣을 수 없으므로, 학습에 사용하기 위해 분할하는 데이터(batch) 샘플들의 크기 +  - 총 데이터가 512개, batch size가 16이라면, 1번의 epoch(512개의 데이터) 당 batch size(16개의 데이터)단위로 32번의 반복(iterator)학습을 진행합니다. +> **Learning rate** : 현재 학습의 결과를 다음 번 학습에 반영하는 효율 (일반적으로 기본값은 0.01) +  - Learning rate이 너무 작다면, 목표 최적값에 수렴하기 위한이 굉장히 많은 시간이 소요됩니다. +  - Learning rate이 너무 크다면, 학습 반영이 과다하게 이루어져서 목표값에 수렴하지 못하고 발산(overshooting)하게 됩니다. + +## 마무리 + +Teachable Machine은 분명 머신러닝과 프로그래밍에 대한 지식이 없더라도 쉽게 모델을 통해 머신러닝을 체험할 수 있게 해줍니다. 다만 원하는 문제를 해결하기 위한 맞춤형 모델이 아닌 범용적으로 활용 가능한 사전 학습된 모델을 사용하기 때문에 섬세한 모델의 구현은 어렵다는 단점이 있습니다. 뚜렷한 장단점이 존재하지만 이 글을 통해 다른 분들이 Teachable Machine을 접하고 머신러닝에 관심을 가져보시면 좋을 것 같습니다. + +> 1: +> 2: +> 3: diff --git a/_posts/2020-12-27-about-react-native.md b/_posts/2020-12-27-about-react-native.md new file mode 100644 index 0000000000..20b6be5e57 --- /dev/null +++ b/_posts/2020-12-27-about-react-native.md @@ -0,0 +1,135 @@ +--- +layout: post +title: "React Native에 대해서" +authors: [koreanhole] +tags: ["Mobile", "React Native"] +image: assets/images/post-about-react-native/thumb.png +description: "React Native에 대한 설명입니다." +featured: true +--- + +## Intro + +안녕하세요 DSC UOS 모바일팀의 권순형입니다. +모바일팀에서 주로 React Native를 사용한 앱 개발을 했습니다. +이번 포스팅에서는 React Native에 대한 간략한 소개, 다른 크로스 플랫폼 앱 개발 프레임워크(Flutter)와의 비교 그리고 React Native의 작동 원리에 대해 알아보는 시간을 갖겠습니다. + +## React Native란 + +React Native는 React를 사용해서 iOS와 Android앱을 개발할 수 있는 프레임워크이다. JavaScript를 사용해서 앱 개발을 할 수 있다는것이 큰 이점이다. 기존에 React를 사용해서 웹 개발을 했던 분들이라면 더욱 쉽게 네이티브 앱 개발을 시작할 수 있다. + +React Native는 facebook이 주도하는 오픈소스 프레임워크이다. +다음과 같은 앱들이 React Native로 작성되었다고 한다. + +![Capture](../assets/images/post-about-react-native/react-native-apps.png) + +React Native를 활용해서 모바일 앱 개발 뿐만 아니라 [Windows](https://github.com/microsoft/react-native-windows#readme), [macOS](https://github.com/microsoft/react-native-macos#readme) 그리고 [web](https://github.com/necolas/react-native-web#readme) 같은 다양한 플랫폼의 앱도 개발할 수 있다. + +## 다른 앱 개발 플랫폼과 React Native의 비교 + +![Capture](../assets/images/post-about-react-native/cross-platfrom-app-stat.png) + +Shanhong Liu가 2020년 7월에 발표한 전세계 개발자가 사용하는 크로스 플랫폼 모바일 프레임워크 현황이다. + +차트를 보면 1위가 React Native이고, 그 다음으로 Flutter와 Cordova가 있다. 2019년과 2020년을 비교해보았을때 React Native의 점유율은 유지된 반면 Flutter의 점유율은 큰 상승이 있다. + +점유율의 큰 상승이 있었던 Flutter에 대해 잠시 간단하게 알아보겠다. + +### Flutter + +Flutter는 구글이 만든 크로스 플랫폼 앱 개발 프레임워크이다. 여타 크로스 플랫폼 프레임워크와 마찬가지로 단 하나의 코드베이스를 통해 iOS, Android, Web 그리고 데스크톱의 앱을 개발할 수 있다. + +Flutter는 Dart라는 언어를 통해 개발할 수 있다. Dart도 Google이 만든 프로그래밍 언어이다. 구글이 server side와 front-end 코드를 작성하는데 JavaScript보다 더 나은 언어를 원했기에 만들어졌다. Dart는 배우기 쉽고 친숙한 언어이다. Dart만으로 UX를 쉽게 작성할 수 있다. Dart로 UX를 작성하는데 markup language는 필요없다. + +### React Native vs Flutter + +#### 성능 + +![Capture](../assets/images/post-about-react-native/react-native-flutter-benchmark.jpeg) + +React Native 앱, Flutter 앱 그리고 Native 앱들의 [벤치마크](https://medium.com/swlh/flutter-vs-react-native-vs-native-deep-performance-comparison-990b90c11433)를 보면 위와 같다. 대부분의 경우 Flutter가 React Native보다 빠르며 특히 CPU 집중 작업의 경우는 Flutter의 성능이 월등하다. 다른 [벤치마크](https://medium.com/swlh/flutter-vs-native-vs-react-native-examining-performance-31338f081980)에서도 마찬가지이다. + +성능의 차이가 나는 근본적인 이유로 Native bridge의 존재 유뮤가 있다. React Native는 Native bridge를 통해 JavaScript코드가 Native side와 통신을 하기 때문에 bridge에서의 병목현상이 발생하는 반면 Flutter는 bridge를 사용하지 않고 실제 native코드로 컴파일되기 때문에 앞선 병목현상이 발생하지 않기 때문이다. + +#### 그럼에도 React Native? + +크로스 플랫폼 앱 개발 프레임워크를 선택하는 데에 있어서 100% 정답은 없다. 결국 어떤 도구를 선택하는것은 전적으로 여러분의 생각이며 현재 상황에 맞는 가장 적합한 도구를 선택해야 한다. 그래도 필자가 처음 프레임워크를 선택하며 고민하는 과정의 생각을 쓰면 다음과 같다. + +Flutter가 React Native에 비해 성능상의 이점을 갖는 것은 다들 큰 이견이 없다. 하지만 필자가 개발했던 앱과 같이 복잡한 비즈니스 로직이 들어가지 않는 소규모의 앱의 경우 많은 CPU연산을 수행하지 않기 때문에 두 프레임워크 간의 성능 차이가 크지 않을 것이다. + +또한 React Native는 이미 웹개발 영역에서의 큰 형님인 React를 사용하기 때문에 이미 다양한 자료들이 존재한다. Flutter의 [공식문서](https://flutter.dev/docs)를 보았을때 친절한 문서들이 있지만 이미 형성되어있는 React개발 커뮤니티는 이를 넘는 큰 장점이다. 또한 JavaScript의 여러가지 훌륭한 라이브러리를 사용 할 수 있다. 이 외의 차이점은 프레임워크를 선택하는데 큰 문제가 되지 않는다고 생각했다. + +결국 Flutter와 달리 React Native가 갖고 있는 React와 JavaScript의 커뮤니티로 인해 React Native를 선택했다. + +## React Native의 작동원리 + +앞서 React Native와 Flutter간 성능 차이가 나타나는 이유로 Native bridge라고 했는데 이 bridge가 무엇인지에 대해 알아보고 facebook에서 제시한 native bridge의 개선방향에 대하여 알아보겠다. 또한 React Native의 4가지 Thread의 종류에 대해, React Native앱이 실행되는 과정에 대해서도 알아보겠다. + +### React Native의 4가지 Thread + +React Native앱이 실행되는 과정을 알아보기 이전에 React Native에서 사용하는 4가지의 Thread에 대해 알아보아야 한다. + +1. UI Thread + - 메인 스레드 + - Android 혹은 iOS의 UI렌더링에 사용된다. +2. JavaScript Thread + - JavaScript로직이 실행되는 Thread + - 각종 API호출, 터치 이벤트가 처리되는 등의 스레드가 있다. + - 네이티브 뷰에 대한 업데이트는 일괄 처리되며 JavaScript Thread의 각 이벤트 루프 끝에서 네이티브 측으로 전달되며 결국에는 UI Thread에서 실행된다. + - 좋은 성능을 유지하기 위해 JavaScript Thread는 프레임 렌더링 데드라인 전에 배치 업데이트를 UI Thread에 전달할 수 있어야 한다. + - iOS의 경우 초당 60프레임을 표시하며 새로운 프레임을 생성하기까지는 16.67ms가 소요된다. + - UI를 느리게 하지 않기 위해서는 JavaScript 이벤트 루프에서 UI 변경으로 이어지는 복잡한 처리를 16.67ms이내로 처리해야 한다. + - ScrollView혹은 navigatoriOS의 경우는 JavaScript Thread에서 실행되지 않고 UI Thread에서 100% 실행 되기 때문에 위의 제약조건에 해당하지 않는다. +3. Native Modules Thread + - 앱이 플랫폼 API에 엑세스 하는 경우에 Native Modules Thread의 일부로 나타난다. +4. Render Thread + - Android L(5.0)에서만 React Native의 Render Thread가 UI를 그리는데 사용된다. Render Thread는 UI를 그리는데 필요한 OpenGL명령을 생성한다. + +### React Native앱이 실행되는 과정 + +1. 앱이 시작하면서 Main Thread(UI Thread)가 실행되며 JavaScript 번들을 로드한다. +2. JavaScript번들의 로드가 완료되면 Main Thread(UI Thread)는 JavaScript코드들을 JavaScript Thread로 보낸다. + - 그래야 JavaScript Thread가 무거운 작업을 하더라도 Main Thread(UI Thread)가 문제를 일으키지 않기 때문이다. +3. React가 렌더링을 시작하면서 조정자(Reconciler)는 **diffing**을 시작한다. 새로운 virtual DOM(layout)을 생성하고 변경점들을 다른 thread(Shadow Thread)로 전달한다. +4. Shadow Thread가 레이아웃의 계산을 끝마치면 레이아웃의 parameter혹은 object를 Main Thread(UI Thread)에 보낸다. +5. Main Thread는 shadow thread가 보낸 레이아웃을 화면에 렌더링한다. + +> Diffing Algorithm이란? +> +> 컴포넌트 내에 스테이트가 변경된 경우 React는 해당 컴포넌트를 dirty하다고 표시하고 batch에 추가한다. +> +> 그리고 virtual Dom element와 실제 Dom element를 비교 순회하면서 dirty 체크가 되어있는 엘리먼트를 처리한다. 처리하는 과정에서 속성값만 변한 경우에는 속성값만 업데이트하고 해당 엘리먼트의 태그 혹은 컴포넌트가 변경된 경우라면 해당 노드를 포함한 하위 모든 노드를 제거한 후 새로운 virtual dom으로 대체한다. +> +> 이러한 일련의 과정이 모두 마무리 된 뒤에 실제 Dom에 결과를 업데이트 한다. + +### Native Bridge + +- React Native에서는 JavaScript 스레드가 Native Bridge를 통해 Native Thread와 통신한다. + - Native Bridge가 없다면 JavaScript코드가 Native코드와 통신할 수 없다. +- JavaScript side에서 전송되는 데이터들은 JSON object로 Native Bridge를 통해 Native Side로 전달된다. +- JavaScript에서 사용되는 callback(button의 onPress와 같은 것들)의 경우는 Native side에서 버튼이 눌러졌다는 event를 다시 JavaScript side로 보낸 후 해당 이벤트에 맞는 callback function이 실행된다. +- React Native는 Main Thread → JavaScript Thread → Shadow Thread → Native side의 일련의 실행과정으로 실행이 되는데 많은 수의 연산이 필요할 경우(예를들어 매우 빠른 속도로 큰 규모의 리스트를 스크롤 할 경우) Native Bridge에서의 traffic jam이 발생한다. + - 위와 같은 traffic jam을 피하기 위해 레이아웃을 미리 계산(pre calculating)하는 방법도 있다. + - pre calculating을 통해 애초에 bridge를 건너는 횟수를 최소화하는 것이다. + +### Future Of Native Bridge + +[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/UcqRXTriUVI/0.jpg)](https://www.youtube.com/watch?v=UcqRXTriUVI) + +- Facebook도 native bridge를 사용하는것에 있어서의 성능하락을 인지하고 있으며 React Native를 위한 완전히 새로운 architecture를 작업하고 있으며 결국에는 bridge사용을 제거할것이다. +- Facebook은 JavaScript Interface라는것을 구현하는 중이다. + - JavaScript Interface(JSI)는 JavaScript코드와 JavaScript엔진 사이에 위치하는것으로, 결국은 JavaScript엔진을 제거할 것이다. +- 추가적으로 JSI를 사용하게 되면서 React Native는 Debug모드에서 Chrome브라우저(V8엔진 사용)에서도 작동될 예정이다. +- JSI의 사용으로 JavaScript side와 Native side가 통신하기 위해 더이상 JSON메시지를 보낼 필요가 없으며 Native Bridge를 사용할 필요도 없다. +- 또한 현재는 React Native앱이 실행되면서 JavaScript side에서 사용되는 모든 native모듈들은 실행과 동시에 초기화 되어야 하지만 새로운 architecture에서는 필요할때만 초기화될것이다. 따라서 앱의 초기 실행 성능에도 이점이 있을것이다. + - bridge를 사용하지 않고 JavaScript코드들이 직접적인 reference를 갖고 있기 때문에 가능한일이다. + +## 참고자료 + +[React Native Documentations](https://reactnative.dev/) + +[Cross-platform mobile frameworks used by developers worldwide 2019 and 2020](https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/) + +[How React Native Works?](https://www.codementor.io/@saketkumar95/how-react-native-works-mhjo4k6f3) + +[How the React Native bridge works and how it will change in the near future](https://dev.to/wjimmycook/how-the-react-native-bridge-works-and-how-it-will-change-in-the-near-future-4ekc) diff --git a/_posts/2020-12-31-WEB_Mission4_Chapter1.md b/_posts/2020-12-31-WEB_Mission4_Chapter1.md new file mode 100644 index 0000000000..a78434bec8 --- /dev/null +++ b/_posts/2020-12-31-WEB_Mission4_Chapter1.md @@ -0,0 +1,151 @@ +--- +layout: post +title: "Web Mission4 - React 1장. 리액트 입문" +authors: [min6choi] +tags: ["Web"] +image: assets/images/post-WEB-Mission4/react.png +description: "React Chapter1" +featured: false +--- + +Web Team의 Mission4는 React(리액트)를 공부하는 것이었습니다. 특히 이번 미션은 기존에 했던 방식과 다르게 새로운 미션을 만들어 수행하는 대신 온라인을 통해 제공되는 강의 1장과 2장을 2주동안 수강하며 리액트를 공부하고 강의 내용을 깃허브 레포지터리에 커밋하고 푸시하는 방식으로 진행되었습니다. + +저희가 공부한 웹사이트 강의는 다음과 같습니다. (그러나 리액트를 처음 접해보는 경우 이 강의를 바로 듣는 것을 추천하지 않습니다.) + +> [#4 Mission : 벨로퍼트와 함께하는 모던 리액트](https://react.vlpt.us/){: target="\_blank"} + +그럼 이번 블로그 글에서는 1장.리액트 입문에서 배운 간단한 리액트 기능에 대해 다루겠습니다. + +## 리액트를 공부하는 이유 + +형진님의 주도하에 이루어진 리액트 미션을 진행하게 된 이유는 다음과 같습니다. + +- 상대적으로 규모가 큰 웹 어플리케이션의 복잡하고 거대한 UI를 계획할 때 리액트를 이용하였을 경우 컴포넌트를 기반으로 추상화하기 때문에 개발 및 유지보수가 용이합니다. +- 특정 부분을 새로 변경할 때 DOM을 직접 건들지 않고 Virtual DOM을 이용하여 개발자가 사소한 부분을 신경쓰지 않도록 해준다는 점에서 생산성이 증가합니다. + +## 1장에서 공부한 내용들 + +- 리액트의 특징 + - 리액트 컴포넌트 예시 + + ```jsx + import React from 'react'; + + function Hello() { + return
    Hello
    + } + + export default Hello; + ``` + + 리액트 컴포넌트를 만들 때 앞에 + + ```jsx + import React from 'react'; + ``` + + 와 같은 문장을 통해 리액트를 불러와줘야 합니다. + + 그리고 문서의 마지막에는 + + ```jsx + export default Hello; + ``` + + 와 같이 Hello 라는 컴포넌트를 내보내겠다는 문장을 작성해야 합니다. + +- 리액트를 통해 동적인 부분 구현하기 + - Counter 컴포넌트 : 간단하게 +와 -버튼을 누르면 숫자가 바뀌는 컴포넌트 입니다. 이 강의에서는 화살표 함수를 이용해 **onIncrease**와 **onDecrease**를 구현했고, **onClick**으로 각 함수를 연결해주었습니다. 그리고 동적인 값을 구현하기 위해 리액트의 **useState** 함수를 사용하였습니다. + + ```jsx + import React, { useState } from 'react'; + + function Counter() { + const [number, setNumber] = useState(0); + + const onIncrease = () => { + setNumber(prevNumber => prevNumber + 1); + } + + const onDecrease = () => { + setNumber(prevNumber => prevNumber - 1); + } + + return ( +
    +

    {number}

    + + +
    + ); + } + + export default Counter; + ``` + +- 리액트를 통해 배열 렌더링 하기 + - 리액트에서 배열을 렌더링 할 때는 **key**라는 props를 설정해야 합니다. **key**값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야 합니다. 밑의 경우엔 **id**가 고유 값입니다. + + ```jsx + import React from 'react'; + + function User({ user }) { + return ( +
    + {user.username} ({user.email}) +
    + ); + } + + function UserList() { + const users = [ + { + id: 1, + username: 'velopert', + email: 'public.velopert@gmail.com' + }, + { + id: 2, + username: 'tester', + email: 'tester@example.com' + }, + { + id: 3, + username: 'liz', + email: 'liz@example.com' + } + ]; + + return ( +
    + {users.map(user => ( + + ))} +
    + ); + } + + export default UserList; + ``` + +이외에 1장에서는 리액트의 기본적인 것에 대해 간단하게 배웠습니다. 리액트의 경우 JavaScript의 기초를 기반으로 진행되기 때문에 JavaScript의 공부가 선행되어야 하는데요. 리액트에 대해 관심이 있는 분들을 위해 제가 이 강의를 들으면서 함께 공부했던 다른 강의와 사이트들도 아래 첨부했습니다. + +> [생활코딩 리액트](https://opentutorials.org/module/4058) + +이번 미션에서 공부했던 강의를 듣기 전에 맛보기로 공부하는 것을 추천합니다. + +> [리액트 홈페이지 문서](https://ko.reactjs.org/docs/getting-started.html) + +보다 자세하고 친절한 설명으로 리액트에 대한 이해를 도울 수 있습니다. + +> [생활코딩 자바스크립트의 시작](https://www.boostcourse.org/cs124) + +기초 자바스크립트 강의로 리액트를 듣기 전에 미리 듣는 것을 추천합니다. + +> [웹 프로그래밍 튜토리얼](https://poiemaweb.com/) + +웹 프로그래밍에 대한 전반적인 이해를 도울 수 있습니다. + +## 마치며 + +넘치는 과제와 함께 기말고사 기간임에도 불구하고 미션을 통해 처음 접해보는 리액트에 익숙해지기 위해 최선을 다한 웹멤버들 모두 수고하셨습니다! diff --git a/_posts/2021-02-01-RNN,LSTM,GRU.md b/_posts/2021-02-01-RNN,LSTM,GRU.md new file mode 100644 index 0000000000..0d91bc9b20 --- /dev/null +++ b/_posts/2021-02-01-RNN,LSTM,GRU.md @@ -0,0 +1,123 @@ +--- +layout: post +title: "RNN, LSTM, GRU" +authors: [howtolivelikehuman] +tags: ["ML"] +image: assets/images/post-image_classification/RNN-LSTM-GRU_logo.PNG +description: "대학교 3학년도 알 수 있는 기초 RNN" +featured: true +--- + +## RNN (Recurrent Neural Network) + +RNN은 연속적인 데이터셋을 처리하기 위해 등장하였다. + +예를 들어 문장의 경우 연속적인 단어로 이루어져 있고, 이를 처리하기 위해 RNN과 같은 시퀀스 모델이 등장하게 되었다. + +가장 기본적인 RNN의 특징은 이전 계산 값을 다시 다음번의 학습에 사용하는 것이다. + +![img](https://blog.kakaocdn.net/dn/cxgFVV/btqVkL8W2iv/zKKKNqSWqoWpWtiUtRYVJ1/img.png) + +간단하게 그림으로 표현하면 위와 같은데, 이전 학습값을 기억했다가 다음 학습에 적용하는 모습이다. + +이때 이 이전의 값을 저장하는 역할을 하는 은닉층을 메모리 셀, RNN 셀이라 표현하고 이 값을 은닉 상태(hiddens state)라 한다. + +![img](https://blog.kakaocdn.net/dn/bAv7Et/btqVh7j8W7g/zNroYDs5CftzhMYQDSQ1U0/img.png) + +RNN은 입력과 출력의 길이를 다르게 할 수 있다는데, 이를 활용해 다양한 형태로 변형시킬 수 있다. + +우선 Many to One과 같은 형태는 연속된 데이터셋인 음성으로부터 단어를 추출하는 형태로 사용된다. + +One to Many는 영상이나 사진의 주석, 스팸메일 분류 등에 사용될 수 있고, + +Many to Many는 챗봇, 문장 번역 등 에 사용될 수 있다. + +Many to Many를 활용하여 자연어 처리에 주로 사용된 Seq-to-Seq이 등장하기도 하였는데, + +Many to One을 활용한 Encoder를 통해 문장을 학습, 처리가능한 형태로 변환한 뒤 Context로 저장하고 + +이후 One to Many를 활용한 Decoder를 통해 우리가 원하는 결과값으로 출력하는 모델이다. + +![img](https://blog.kakaocdn.net/dn/tCYlX/btqVta0QDIt/PfaL57LdW4cF7qHkVVsvbK/img.png) + +위와 같이 가장 기본인 RNN을 Vanilla RNN이라 한다. (똑같은 가중치를 사용하여 계속 계산, 학습) + +## LSTM (Long Short-Term Memory) + +이러한 Vanilla RNN 역시 한계에 도달하게 된다. 시점이 길어질수록 앞의 은닉 상태가 점점 소실되는 것이다. + +예를 들어 박찬호가 등장해서 `"제가 1994년에 LA에 있었을 때...(중략)... 그래도 제가 처음 있었던 (?)에서 류현진 선수도..."` 라 했을때, + +맨 처음에 언급된 LA는 시간의 흐름에 따라 정보가 많이 소실되었기 때문에 추측하기 힘들게 된다. + +이러한 부분을 해결하기 위해 등장한 방법이 Gate를 사용하여 이전의 내용을 얼마나 기억할 지 조절하는 방법이다. + +필요한 부분이 처리되면 기억을 날려버리고, 중요한 부분은 높은 비중으로 기억하는 식의 처리를 가능하게 한다. + +![img](https://blog.kakaocdn.net/dn/sSCH5/btqVtbFqP6q/HFsSv3X6bQhL89tJ3hhrw1/img.png) + +LSTM에서는 기억해야 될 요소로 은닉 상태와 함께 셀 상태를 추가하였다. + +그림에서 셀 상태는 C, 은닉 상태는 h로 표현했다. 셀 상태를 장기 상태, 은닉 상태를 단기 상태라 표현하기도 한다. + +또한 input, forget, output의 3가지 게이트를 사용하는데, 각각의 게이트는 다음과 같다. + +![img](https://blog.kakaocdn.net/dn/cj8jZy/btqVh8wu5BX/cm6Mn94bfldeb7jwX9RbK0/img.png) + +Input Gate는 현재 입력을 기억하기 위한 게이트이다. + +입력과 그에 따른 가중치, 그리고 이전의 은닉 상태와 그에 따른 가중치와 bias를 합한 값을 각각 시그모이드와 하이퍼볼릭탄젠트를 지나게 하여 i(0~1), g(-1~1) 두가지 값을 만든다.![img](https://blog.kakaocdn.net/dn/Rej8h/btqVsxBZ46l/RK5zyEglcRKemZbV2I9Hv0/img.png) + +Forget Gate는 이전 상태를 얼마나 기억할지에 대한 게이트이다. + +역시 입력과 그에 따른 가중치, 그리고 이전의 은닉 상태와 그에 따른 가중치와 bias를 합한 값을 시그모이드 함수를 지나게 해서 구한다. + +![img](https://blog.kakaocdn.net/dn/dgfI55/btqVkK9X2W3/EdmovO3QkBkqF6mkg7SvvK/img.png) + +이제 이전 셀 상태와 f의 곱, i와 g의 곱의 합을 통해 현재의 셀 상태를 구할 수 있다. + +만약 Forget gate의 결과가 0이면, 이전 셀 상태가 전혀 반영되지 않게 된다. + +반면 Input gate에서 i, g가 0이라면 현재 셀 상태가 전혀 반영되지 않게 된다. + +결과적으로 이를 통해 Input gate에서 현재 값의 반영을, Forget gate에서 이전 값의 반영을 조절할 수 있게 된다. + +![img](https://blog.kakaocdn.net/dn/blTuXX/btqVugsZFTN/PNczCGShTAjQkO6KHFwYs0/img.png) + +Output Gate는 얼마나 출력할지에 대한 게이트이다. + +입력과 그에 따른 가중치, 그리고 이전의 은닉 상태와 그에 따른 가중치와 bias를 합한 값을 시그모이드 함수를 지나게 해서 구한다. + +이제 Hidden State 이자, LSTM의 출력값을 다음과 같이 구할 수 있다. + +## GRU (Gated Recurrent Unit) + +GRU는 LSTM이 장기적으로 기억할 수 있는 장점을 유지하면서, 기존의 3개의 게이트를 사용하던 복잡한 구조를 단순화시킨 모델이다. 셀 상태 없이 Update Gate와 Reset Gate 두 개를 사용한다. + +![img](https://blog.kakaocdn.net/dn/bWCKwf/btqVugsZCuX/GrMlo2zBia3lXkLMjk3iZk/img.png) + +Reset Gate는 이전 값을 얼마나 기억하는지 결정해준다. + +시그모이드 함수를 통해 이전 게이트를 구하는 방식과 동일하게 계산한다. + +Update Gate은 이전과 현재를 어느 정도의 비율로 업데이트하는지 결정해준다. + +역시 시그모이드 함수를 통해 이전 게이트를 구하는 방식과 동일하게 계산한다. + +이후 그림과 같이 2번, 3번 과정을 진행하여 다음 은닉 상태이자 출력을 계산한다. + +LSTM과 사실상 구조상 큰 차이가 없고, 분석 결과도 크게 차이는 없는 것으로 알려져 있다. 어쩔 때는 LSTM이 좋기도, 어쩔 때는 GRU가 좋기도 하다고 한다. + +확실한 것은, GRU에서는 학습해야 할 W가 LSTM과 적은 것을 확인할 수 있다. + +이후 인코더-디코더와 같은 seq2seq 구조를 유지하면서 RNN이 아닌 새로운 방식이 등장하게 되는데, + +RNN의 고정 크기 벡터에 따른 정보 손실과, 기울기 소실을 보완하기 위한 Attention 메커니즘이다. + +이후 2017년 구글에서 Attention을 활용한 Transformer의 발표와 함께, 이를 사용한 BERT, GPT 등의 모델들이 현재는 자연어 처리 영역에서 활발하게 사용되고 있다. + +## 참고 + +딥 러닝을 이용한 자연어 처리 입문 (유원준) **[wikidocs.net/22886](https://wikidocs.net/22886)** + +인공지능 (유하진) diff --git a/_posts/2021-02-23-cv_fall_srgan.md b/_posts/2021-02-23-cv_fall_srgan.md new file mode 100644 index 0000000000..aae7c5e2c4 --- /dev/null +++ b/_posts/2021-02-23-cv_fall_srgan.md @@ -0,0 +1,125 @@ +--- +layout: post +title: "Perceptual loss 변경을 통한 SRGAN 개선 방안" +authors: [hoyeon94] +tags: ["computer vision","deep learning"] +image: ../assets/images/post-cv-fall-srgan/cv_fall_srgan_1.png +description: "Perceptual loss 변경을 통한 SRGAN 개선 방안" +featured: true +--- + + +## 들어가며 + +작성자 : DSC uos ML 논문 팀(황제홍, 임호연) + +DSC CV 논문팀에서는 SRGAN과 관련하여 기존에 나와있는 모델에서 일부분을 수정하여 개선하는 것을 목표로 하고 있다. SRGAN은 Super-Resolution Generative Adversarial Network의 약어로 간단하게 말하면 이미지의 화질을 개선하는 인공지능 모델이다. 이번 포스팅은 우리 논문팀에서 base로 참고하고 있는 논문을 소개하고자 한다. + +논문 링크 : [https://arxiv.org/pdf/1609.04802.pdf](https://arxiv.org/pdf/1609.04802.pdf) + +참고 블로그 : [https://aigong.tistory.com/51](https://aigong.tistory.com/51) + +## Introduction + +저해상도(low resolution, LR) 이미지에서 고해상도 (high resolution, HR) 이미지를 추정하는 작업을 초해상도(super resolution, SR)이라고 한다. 최근의 작업들은 저해상도에서 복원된 HR 이미지와 원본 이미지 간의 MSE를 최소화하는 알고리즘으로 최적화하였다. MSE를 사용함으로써 당시 흔히 SR 알고리즘을 평가할 때 사용하는 PSNR(Peak Signal-to-Noise-Ratio)를 최대화할 수 있었다. 그러나 높은 질감적인 디테일 표현 같은 데에 있어 MSE와 PSNR의 사용은 제한적이었다. 아래 사진을 보면 구체적으로 알 수 있다. + +![Capture](../assets/images/post-cv-fall-srgan/cv_fall_srgan_1.png) + +사진에서 가장 최상단에 적혀있는 것은 저 해상도에서 고해상도로의 복원에 사용한 알고리즘 이름이 적혀있고, 아래의 데시벨과 숫자가 의미하는 바는 PSNR, SSIM 수치이다. PSNR 수치로만 보면 SRResNet이 SRGAN보다 높지만 사진으로 비교했을 때의 디테일은 SRGAN이 더 좋아 보이는 것을 확인할 수 있다. 마찬가지로 PSNR의 수치가 bicubic과 SRGAN을 비교했을 때 거의 비슷한 수치를 보이나 실제 결과물을 보면 극명한 차이가 나고 있음을 볼 수 있다. 이와 같은 점을 미루어 보았을 때 PSNR은 SR 성능의 절대적인 지표가 되기는 힘들어 보인다. + +그래서 본 논문에서는 ResNet 구조와 perceptual loss를 이용한 SRGAN을 제안하고, MOS(Mean opinion score)라는 설문조사 방식의 성능지표를 이용해 제안한 모델이 잘 작동함을 보였다. + +## Method + +SR의 목표는 LR input image로부터 SR image를 추정하는 것이다. 논문에서의 궁극적인 목표는 LR input image로부터 HR image를 생성하는 Generating function G를 훈련시키는 것이다. + +![Capture](../assets/images/post-cv-fall-srgan/cv_fall_srgan_2.png) + +### Adversarial network architecture + +![Capture](../assets/images/post-cv-fall-srgan/cv_fall_srgan_3.png) + +SRGAN이 하는 방식은 실제 파트에서는 HR 이미지를 넣음으로써 Discriminator가 HR 이미지로 구분하게 하고 가짜 파트에서는 LR image로 Generator가 생성한 이미지를 넣음으로써 SR 이미지를 HR 이미지로 속이는 적대적 학습을 한다는 것이 핵심이다. 이 결과로 Generator는 Discriminator를 속이기 위해 HR 이미지를 계속해서 만들어낼 것이다. Generator와 Discriminator의 네트워크 구조를 그림으로 표현하면 다음과 같다. + +![Capture](../assets/images/post-cv-fall-srgan/cv_fall_srgan_4.png) + +다음 그림에서 보이는 k는 kernel size, n은 channel, s는 stride를 의미한다. Generator에서 보이는 활성화 함수는 PReLU를 사용했다. Discriminator에서는 Leaky ReLU를 사용하며 마지막 활성화 함수로 sigmoid를 사용하며 0,1로 최종적으로 구분한다. + +### Perceptual loss function + +![Capture](../assets/images/post-cv-fall-srgan/cv_fall_srgan_5.png) + +논문에서 소개하는 가장 중요한 부분으로 Perceptual loss function을 위의 식과 같이 정의한다. 해당 함수는 두 개의 파트로 나누어지는데 앞부분의 content loss와 뒷부분의 adversarial loss로 나뉜다. + +### Content loss + +![Capture](../assets/images/post-cv-fall-srgan/cv_fall_srgan_6.png) + +보통의 MSE 기반으로 loss function을 사용할 때 위의 (4) 식과 같이 pixel-wise MSE Loss를 사용한다. 위에서 계속 얘기했듯 이 방법은 과도하게 질감(texture)를 부드럽게(smooth)하기 때문에 고품질의 디테일을 온전하게 구성하지 못하고 흐릿(blur)하게 보이는 특징이 존재한다. + +![Capture](../assets/images/post-cv-fall-srgan/cv_fall_srgan_7.png) + +때문에 이 논문에서는 위의 식 (5)와 같이 미리 학습된 VGG 네트워크에 HR 이미지와 LR 이미지를 각각 넣는다. 그 후, 마지막 layer에서 특징맵을 뽑아내고 이를 pixel-wise로 비교한다. + +### Adversarial loss + +![Capture](../assets/images/post-cv-fall-srgan/cv_fall_srgan_8.png) + +위에서의 Content loss에 더하여 GAN에서 사용하는 Adversarial loss를 덧붙여준다. 기본적으로 log(1-x)는 훈련 초기의 gradient가 매우 flat 한 경향이 있어 이것을 역으로 바꾼 -log(x) 방식을 사용한다. 그렇게 되면 gradient 초깃값이 매우 커져 학습이 더 잘 되는 경향을 보인다. 이 부분을 넣은 가장 큰 이유는 Generator가 고해상도인 상태로 훈련되기를 희망하기 때문이다. + +## 실험 결과 + +![Capture](../assets/images/post-cv-fall-srgan/cv_fall_srgan_9.png) + +test data인 SET-5, SET-14, 그리고 BSD100에 대해 PSNR, SSIM, MOS 지표를 적용하여 자신들이 제안한 SRResnet, SRGAN과 다른 SR 알고리즘을 비교하였다. + +## 성능 개선 방안 + +### 요약 + +우리 팀은 SRGAN의 perceptual loss를 구성하는 네트워크 구조가 성능에 얼마나 영향을 미치는지 비교하고, 최적의 네트워크를 찾아냄으로써 SRGAN의 성능을 향상시키고자 했다. + +### 성능 개선에 활용한 네트워크 + +기존 SRGAN 논문에서 perceptual loss function으로 사용하던 vgg 네트워크를 imagenet 데이터에 대해 미리 학습된 네트워크로 대체했다. 사용하고자 하는 네트워크는 다음과 같았다. + +- VGG16 +- VGG16_BN +- resnet152 +- densenet201 +- resnext101_32x8d +- wide_resnet_101 +- inception_v3 + +모든 네트워크의 마지막 layer를 특징맵으로 사용했다. set5,set14,bsd100를 test data로 이용하여 성능을 측정했다. + +### 진행상황 + +image net data 35만장에 대해 100에포크 가량을 학습해야 하다 보니, 학습시간이 너무 오래 걸려서 아직까지 많은 결과를 확인하지 못했다. baseline인 vgg16와 resnext101_32x8d에 대해 결과를 확인한 상태이고, 현재 densenet201을 perceptual loss로 지정하여 학습을 진행하고 있다. + +학습 결과는 다음과 같다. + +- vgg, PSNR = 24.54675320150087, SSIM = 0.7118159342212838 +- resnext101_32x8d, PSNR = 24.254839593217472, SSIM = 0.7028170706344252 + +![Capture](../assets/images/post-cv-fall-srgan/cv_fall_srgan_10.png) + +perceptual loss - vgg + +![Capture](../assets/images/post-cv-fall-srgan/cv_fall_srgan_11.png) + +perceptual loss - resnext101_32x8d + +가장 왼쪽 사진이 LR 이미지, 중간 사진이 HR 이미지이며, 가장 오른쪽 사진은 학습된 SRGAN으로부터 얻어낸 SR 이미지이다. + +![Capture](../assets/images/post-cv-fall-srgan/cv_fall_srgan_12.png) + +왼쪽 vgg16 SR 이미지의 일부, 오른쪽 resnext101_32x8d SR 이미지의 일부 + +위에 제시된 이미지와 PSNR, SSIM 지표를 보면, perceptual loss의 네트워크 종류가 결과에 영향을 꽤 미친다는 것을 확인할 수 있다. + +### 남은 작업 + +- 아직 학습시키지 못한 네트워크를 돌려보며 성능을 비교해 볼 예정이다. +- SRGAN에서 성능 지표로 사용된 PSNR, SSIM, MOS 중 MOS같은 경우에는 실제 사람에게 설문을 받아야 하는 부분이기 때문에 이를 지표로 사용하기는 어려운 부분이 많았다. 이를 대체할 수 있는 성능지표를 이용해서, 기존 SRGAN 보다 성능이 향상되었다는 것을 보일 수 있어야 한다. +- 현재 미리 학습된 네트워크는 classification 문제를 해결하기 위한 학습을 했는데, image segmentation, instance segmentation 등 다른 종류의 문제를 해결하기 위해 미리 학습된 네트워크를 이용했을 때 성능에 얼마나 영향을 미치는지 측정해볼 예정이다. diff --git a/_posts/2021-02-24-WEB_Backend_Login.md b/_posts/2021-02-24-WEB_Backend_Login.md new file mode 100644 index 0000000000..b74843a540 --- /dev/null +++ b/_posts/2021-02-24-WEB_Backend_Login.md @@ -0,0 +1,337 @@ +--- +layout: post +title: "node.js로 회원가입부터 로그인까지" +authors: [zeze1004] +tags: ["WEB"] +image: assets\images\post-WEB-Login\image1.png +description: "일단 복붙하고 실행시키면서 이해하자" +featured: false +--- + +이 포스팅은 WEB팀 클론코딩 프로젝트에서 회원가입, 로그인 파트를 맡은 제가 블로그 코드를 참조하면서 이해한 부분까지 코드 정리한 글입니다. + +부족한 부분도 많고 틀린 정보도 있을 수 있어서 상냥히 고쳐주시면 정말 감사하겠습니다.🥳 + +--- + +로그인 구현을 위해서 먼저 회원가입 구현을 했다. + +1. 회원가입 구현 + + 처음 코드를 작성할 때는 어떻게 해야할지 너무 막막하여 + 형진님이 올려주신 샘플 코드를 참고하며 `router` 파일 먼저 작성했다. + + 클라이언트가 서버로 정보를 보내는 것이므로 `post` 메소드를 사용했다. + + ```javascript + // router + // post로 클라이언트가 DB로 정보보내기 + userRoutes.post("/signup", asyncWrapper(userController.userCreate)); + ``` + + ```javascript + // model + const userSchema = new Schema({ + email: { + type: String, + required: true, + unique: true, + trim: true, + }, + password: { + type: String, + required: true, + }, + // 항상 필요 + createdAt: { + type: Date, + default: Date.now, + }, + updatedAt: {}, + }); + ``` + + ```javascript + // controller + // 회원가입 로직 + // email, password 회원가입 + import { userModel } from "./user.model"; + import { StatusCodes, ReasonPhrases } from "http-status-codes"; + + const userController = {}; + + userController.userCreate = async (req, res) => { + try { + console.log(req.body); + const user = await userModel.create({ + email: req.body.email, + password: req.body.password, + }); + return res.json(user); + } catch (error) { + return res + .status(StatusCodes.INTERNAL_SERVER_ERROR) + .send("중복된 이메일입니다."); + } + }; + ``` + + mvc 패턴으로 간단하게 회원가입 로직을 구현했다. + + 모델에서 email을 unique라고 설정했기에 중복된 email 입력 시 회원가입 되지 않게 설정했다. + + 아직 프론트단이랑 합치지 않아서 에러시 res.send만 선언되게 작성했는데 어떻게 할 지 논의해봐야 한다. + + 사용자가 이메일, 비밀번호를 post하면 `.create`를 통해 DB에 "email", "password"에 저장된다. + (`.create`: 몽고디비 메소드) + +2. password 복호화하여 저장 + + 평문 저장시 해킹 위험이 커 bcrypt 모듈을 이용해 복호화하여 저장해야 한다. + + 처음에는 비밀번호 평문 그대로 저장했으나, 형진님이 코드리뷰로 알려 주셔서 수정했다. + + ```javascript + import bcrypt from "bcrypt"; + const saltRounds = 10; + + // password 암호화 + userSchema.pre("save", function (next) { + let user = this; + + if (user.isModified("password")) { + bcrypt.genSalt(saltRounds, function (err, salt) { + if (err) return next(err); + bcrypt.hash(user.password, salt, function (err, hash) { + if (err) return next(err); + user.password = hash; + next(); + }); + }); + } else next(); + }); + ``` + + password가 저장되는 save 함수가 실행되기 전에 `bcrypt` 모듈을 이용해 password와 salt를 해싱하고 그 값을 password로 대체한다. + + 간단히 말해 `salt`로 무작위 단어를 생성한 후 새로운 해시값을 추가로 password에 적용하는 것이다. + + 🍓이미 짠 해시함수에 소금을 뿌리자!🍓 + + 비밀번호는 해시함수값으로 DB에 저장하는데 + + `Rainbow Table`에 해시값 적용하면 기존 비밀번호(plainPassword)를 알 수 있다. + + (`Rainbow Table`:단어별로 해시값을 매칭하여 저장해놓은 테이블이다.) + + [🍒리빙포인트🍒] + + Rainbow Table에는 흔히 쓰는 단어들의 해시값이 저장되었으므로 비밀번호 만들 때는 단어가 아닌 무작위 글씨, 특수기호 조합으로 만들자 ^^! + +3. 로그인 구현 + + 회원가입 된 유저가 email, password를 입력해 로그인을 시도하면 + + db에 해당 email이 있는지 먼저 검색 후 + + 해싱된 password값이랑 일치되는지 비교한다 + + ```javascript + // route + userRoutes.post('/signin', asyncWrapper(userController.login)); + ``` + + ```javascript + // model + userSchema.methods.comparePassword = function (plainPassword) { + return bcrypt + .compare(plainPassword, this.password) + .then((isMatch) => isMatch) + .catch((err) => err); + }; + ``` + + ```javascript + // 로그인시 DB에 저장된 email 먼저 찾고, email 있다면 암호화된 password랑 user가 입력한 password 비교 + userController.login = async (req, res) => { + try { + const user = await userModel.findOne({ + // email 먼저 비교 + email: req.body.email + }); + if (!user) { + return res + .status(StatusCodes.BAD_REQUEST) + .send('가입 되지 않은 회원입니다.'); + // .redirect("/api-docs"); + } + user + .comparePassword(req.body.password) + .then((isMatch) => { + // password 일치 안 할 시 + if(!isMatch) { + return res.send('비밀번호가 일치하지 않습니다.'); + } + }); + // password 일치 시 + res.send('로그인 되었습니다.'); + }) + } catch (error) { + return res + .status(StatusCodes.INTERNAL_SERVER_ERROR) + .json({ error: error.toString() }); + } + }; + ``` + + `.findOne`(mongoDB 메소드)을 통해 DB에서 email을 찾는다 + + email이 있을 시 model 파일에 작성된 `comparePassword(plainPassword)`가 실행된다. + + 입력 받은 `req.body.password`를 인자로 받은 `comparePassword`는 + + `bcrypt.compare` 함수를 통해 `req.body.password`와 해싱된 password를 비교한다. + + 일치 시 토큰을 user에게 부여하고 로그인 시킨다. + +4. 토큰 부여 + + ```javascript + // model + // 토큰 생성 + userSchema.methods.generateToken = function () { + const token = jwt.sign(this._id.toHexString(), "zeze"); // secretKey + this.token = token; + return this.save().then((user) => user); + // .catch((err) => err); + }; + ``` + + `jwt.sign(payload, secretKey)`에서 payload는 string 형식이어야 한다. + + 그러나 mongoDB에서 생성되는 \_id는 정수이므로 mongoDB 함수인`.toHexString()`를 통해 형변환 해줘야 한다. + + 생성된 토큰은 DB에 저장해야 하므로 model에 token을 추가로 만들어준다. + + ```javascript + // model + const userSchema = new Schema({ + ..., + token: { + type: String + }, + ... + }); + ``` + + ```javascript + // controller + userController.login = async (req, res) => { + try { + const user = await userModel.findOne({ + // email 먼저 비교 + email: req.body.email, + }); + if (!user) { + return res + .status(StatusCodes.BAD_REQUEST) + .send("가입 되지 않은 회원입니다."); + } + user.comparePassword(req.body.password).then((isMatch) => { + // password 일치 안 할 시 + if (!isMatch) { + return res.send("비밀번호가 일치하지 않습니다."); + } + }); + // password 일치 시 + user.generateToken().then((user) => { + res + .cookie("x_auth", user.token) + .status(200) + .send("로그인 되었습니다."); + }); + } catch (error) { + return res + .status(StatusCodes.INTERNAL_SERVER_ERROR) + .json({ error: error.toString() }); + } + }; + ``` + + 다시 login cotroller로 돌아가서 password가 일치된 user에 한해서 token을 부여한다. + + user.generateToken()을 통해 token을 만들고 cookie에 쿠키에 token을 저장하여 + + 유저가 서버에 request할 때마다 서버는 token이 일치하는지만 검증하면 된다. + +### 🍒JWT에 대해 알아보자🍒 + + Token Based Auth + + ![토큰1](..\assets\images\post-WEB-Login\image2.png) + 그림판으로 쓴 것 같지만...웹툰 작가의 꿈을 갖구 산 태블릿으로 열심히 적은 것이 반전...! + 악필은 노력해도 악필일 뿐... + + JWT는 크게 3가지 구조로 구분된다. + + `헤더`, `페이로드`, `시그니처`. + +#### 헤더: Algorithm, Token type + +- 어떤 알고리즘으로 인크립션(암호화)할건지 결정 + + ```json + { + "alg": "HS256", + "typ": "JWT" + } + ``` + +#### 페이로드: Data + +- 개발자가 원하는 걸 저장하면 된다. + +- 네트워크에 정보가 올라가므로 최소한의 데이터만 저장하는 걸 권장 + + ```javascript + { + "id": "1223034", // 사용자 unique id + "exp": 21313, // 토큰 만료기간 + ..., + "CreditCardNum": 3242342 // 절대 X, 헤더와 페이로드는 암호화되지 않음 + } + ``` + +#### 시그니쳐 + +- 헤더와 페이로드에 시크릿키를 추가한 채 저장 + + ```javascript + HMACSHA256( + base64UrlEncode(header) + "." + base64UrlEncode(payload), + ZEZE // SECRET KET + ) + ``` + + [jwt.io](https://jwt.io/) 사이트에서 JWT를 사용해 해시값을 직접 확인할 수 있다. 훨씬 이해하기 쉬울 것이다. + +--- + +### 글을 마치면서 + +코드리뷰가 얼마나 소중한고 중요한 것인지 알게 되었다. + +좋은 기회를 준 DSC 멤버 분들, 특히 우리 WEB팀 멤버 분들에게 감사의 인사를 전한다. + +코드리뷰로 전체적인 방향을 잡아준 형진님🦝 + +직접 화면 공유 봐주면서 후추랑 오류 잡아준 현GYU🐕‍🦺 +(후추야 사랑해...! 눈아 닭가슴살 진짜 잘 삶아) + +처음 시작이 막막했는데 폴더 구조부터 DOCKER사용법까지 친히 알려주신 핸섬 창구님까지🐳 + +비록 클론코딩 완성하지 못해서 너무 아쉽지만...(쒸익 고다현 가만안도) + +백엔드 분들 덕분에 이 글을 완성할 수 있었습니다. + +감사합니다. 여러분😍 diff --git a/_posts/2021-02-24-WEB_Mission5_websocket.md b/_posts/2021-02-24-WEB_Mission5_websocket.md new file mode 100644 index 0000000000..38c08cf030 --- /dev/null +++ b/_posts/2021-02-24-WEB_Mission5_websocket.md @@ -0,0 +1,216 @@ +--- +layout: post +title: "Web Mission5 - WebSocket 구현하기" +authors: [rxdcxdrnine] + +tags: ["Web"] +image: ../assets/images/post-WEB-Mission5/websocket_0.png +description: "Socket.io 를 이용한 웹소켓 구현" +featured: false +--- + +WEB 팀의 Mission 5는 Socket.io를 이용한 웹소켓 구현입니다. 웹 스터디 팀의 코어 멤버인 형진 님이 미션 수행 목표와 웹 소켓에 관한 자세한 설명을 아래 노션 문서에 작성해 주셨습니다. + +[#5 Mission : WebSocket](https://www.notion.so/5-Mission-WebSocket-af63722f93f84a438d7659a18f525741) + +## 웹소켓이란? + +먼저 웹소켓이 무엇인지부터 알아보도록 하겠습니다! + +웹소켓은 사용자의 브라우저와 서버 사이에 실시간 양방향 데이터 전송을 위한 기술로, HTTP와 다르게 WS 라는 프로토콜을 사용합니다. 따라서 브라우저와 서버가 WS 프로토콜을 지원하면 사용할 수 있으며, 최신 브라우저들은 대부분 웹 소켓을 지원합니다. (IE9 등의 오래된 브라우저에서는 지원하지 않습니다!) + +웹소켓 이전에는 HTTP 기술을 사용하여 실시간 데이터 전송을 사용하였는데, 그 중 한가지가 **폴링 (polling)** 방식입니다. HTTP가 클라이언트에서 서버로 향하는 단방향 통신이므로, 주기적으로 서버에 새로운 업데이트가 있는지 확인하는 요청을 보낸 후, 있다면 새로운 내용을 가져오는 방식이었습니다. + +이에 반해 웹소켓은 클라이언트와 서버 사이의 **양방향 통신 세션 (two-way interactive communication session)** 입니다. 따라서 서버에 메시지를 보낼 때, 업데이트를 확인하기 위해 주기적으로 서버에 요청을 보낼 필요 없이 (without having to poll the server for a reply) 이벤트 기반 응답을 받을 수 있습니다. + +아래는 폴링 방식과 웹소켓 방식을 비교한 그림입니다. + +![05.websocket_with_polling.png](../assets/images/post-WEB-Mission5/websocket_1.png) + +(출처: ) + +그럼 웹 소켓을 언제 사용해야 할까요? 웹소켓은 기존의 기술에 비해 더욱 진보되었지만, 몇 가지 단점이 있습니다. 먼저 미지원 브라우저가 존재한다는 점입니다. 인터넷 익스플로러 (IE) 구버전에서는 웹소켓이 지원되지 않으며, 기존의 프로그램 구현에 보다 많은 복잡성을 불러올 수 있습니다. 따라서 양방향 통신이 필요한 경우에 사용해아하며, 아래에서 다룰 실시간 채팅 등에 사용되어야 합니다. + +## 목표 및 요구사항 + +이번 미션의 목표는 다음과 같습니다! + +1. Echo Service + - 웹소켓으로 전송된 메시지를 그대로 답신합니다. +2. Simple Chat Service + - 브로드캐스트 기능을 이용하여 받은 메시지를 웹소켓에 접속한 인원들에게 모두 전달합니다. +3. Bledding-Edge Chat Service + - 별명 기능을 추가합니다. + - 누군가 접속하거나 나가면 이를 접속한 인원들에게 브로드캐스트 기능을 이용하여 알립니다. + - `{user nickname}이 입력 중입니다...` 기능을 추가합니다. + +## Socket.IO + +미션에 들어가기 앞서, 웹소켓 구현을 위한 자바스크립트의 socket.IO 라이브러리에 대해 알아보겠습니다. Socket.IO는 웹소켓을 지원하지 않는 브라우저에서는 웹소켓 대신 폴링 방식을 사용하여 실시간 전송을 가능하게 합니다. 클라이언트를 먼저 폴링 방식으로 서버와 연결한 후, 웹소켓을 사용할 수 있다면 웹소켓으로 업그레이드 합니다. 따라서 웹소켓을 지원하는 않는 브라우저는 폴링 방식으로, 웹소켓을 지원하는 브라우저는 웹소켓 방식으로 사용 가능합니다. + +1. Socket.IO 설치 + + ```bash + npm install socket.io + ``` + +2. 웹소켓 서버 생성 + + ```javascript + const http = require("http") + const express = require("express") + const socket = require("socket.io") + + const app = express(); + const server = http.createServer(app); + const io = socket(server, { path: "/socket" }); + ``` + + socket.IO를 사용할 때 http 모듈을 이용해 직접 작업해야하므로, express 모듈의 앱에 대하여 http.createServer() 함수를 이용해 http 서버를 생성합니다. 그리고 생성된 http 서버를 socket.IO의 서버로 업그레이드 합니다. + +3. 웹소켓 서버 연결 + + ```javascript + io.on("connection", (socket) => { + // socket 객체에 대하여 이벤트 연결 + }) + ``` + + 웹소켓 서버 io 에 connection 이벤트 핸들러를 연결합니다. connection 이벤트는 클라이언트가 접속했을 때 발생하고, 콜백으로 소켓 객체 socket을 제공합니다. 이 소켓 객체 socket에 다른 이벤트를 연결하여, 클라이언트에서 발생하는 이벤트를 서버에서 처리합니다. + +4. 소켓 객체 이벤트 연결 + + - disconnect 이벤트 연결 + + ```javascript + socket.on("disconnect", (data) => { + // disconnect 이벤트가 발생했을 때 처리할 서버의 코드 + }) + ``` + + 소켓 객체 socket에 disconnect 이벤트를 연결합니다. disconnect 이벤트는 클라이언트가 접속을 종료했을 때 발생합니다. + + - 사용자 정의 이벤트 연결 (client->server) + + ```javascript + // index.html (client) + socket.emit("client_event", data) + + // index.js (server) + socket.on("client_event", (data) => { + // client_event 발생 시 클라이언트가 보낸 data 를 처리할 서버의 코드 + }) + ``` + + - 사용자 정의 이벤트 연결 (server->client) + + ```javascript + // index.js (server) + socket.emit("client_event", data) + + // index.html (client) + socket.on("custom_event", (data) => { + // server_event 발생 시 서버가 보낸 data 를 처리할 클라이언트의 코드 + }) + ``` + + 클라이언트와 혹은 서버 측에서 발생할 이벤트에 대하여, 데이터를 건네받을 쪽에서 데이터를 처리할 코드를 작성합니다. 이벤트 발생 시 socket.emit() 함수를 이용해 데이터를 전달하며, socket.on() 함수를 이용해 이벤트를 연결한 뒤 콜백에서 데이터를 전달받습니다. + +## 구현하기 + +그럼 웹소켓과 Socket.IO 에 대하여 알아보았으니, 본격적으로 실시간 채팅을 구현을 해보도록 하겠습니다. 프론트엔드는 React + Redux, 백엔드는 Node.js 를 이용하였으며, 위의 목표 및 요구사항을 제외한 기본적인 boiler-plate는 형진님이 작성하여 올려주셨습니다. 아래 링크에 형진 님과 제가 fork 한 뒤 작성한 코드를 올려두겠습니다! + +[boiler-plate](https://github.com/r4k0nb4k0n/mission-5-websocket-boilerplate) +[boiler-plate + Socket.IO](https://github.com/rxdcxdrnine/mission-5-websocket-boilerplate) + +1. Echo Service 구현 + - 웹소켓으로 전송된 메시지를 그대로 답신합니다. + + ```javascript + socket.on("chat", (message) => { + // ECHO SERVICE + socket.emit("chat", message); + ``` + +2. Simple Chat Service 구현 + - 브로드캐스트 기능을 이용하여 받은 메시지를 웹소켓에 접속한 인원들에게 모두 전달합니다. + + ```javascript + socket.on("chat", (message) => { + //BRAODCAST SERVICE + socket.broadcast.emit("chat", message); + }); + ``` + + Echo 와 Broadcast 통신은 각각 socket.emit(), socket.broadcast.emit() 함수를 이용해서 구현할 수 있습니다. 이외에도 특정 클라이언트의 id 를 입력하여 해당 클라이언트에만 메시지를 전달하는 private 통신이 있습니다. + +3. Bledding-Edge Chat Service + - 별명 기능을 추가합니다. + + ```javascript + // chat.js + const [inputNickname, setNickname] = useState(`${Math.random().toString(36).substr(2,11)}`); + const handleNicknameChange = (event) => { + setNickname(event.target.value); + }; + ... + + + + + {logs.map((log, index) => ( + + + + + + + + ))} + + + + ... + + + + + ``` + + react 프레임워크 렌더링 시에 랜덤 문자열을 별명으로 부여하며, 브라우저의 좌측에 별명을 변경할 수 있는 입력창을 만듭니다. 또한 유저가 메시지를 전달할 때, 메시지의 앞에 닉네임을 붙여 전달합니다. + + - 누군가 접속하거나 나가면 이를 접속한 인원들에게 브로드캐스트 기능을 이용하여 알립니다. + + ```javascript + window.onload = () => { + socket.emit("chat", `${inputNickname} 님이 입장하였습니다.`); + } + + window.onunload = () => { + socket.emit("chat", `${inputNickname} 님이 퇴장하였습니다.`); + } + ``` + + window 객체에 대하여 유저가 브라우저 창을 키거나 닫을 때 랜덤으로 부여받은 닉네임을 포함한 메시지를 다른 유저들에게 전송합니다. + + - ~~`{user nickname}이 입력 중입니다...` 기능을 추가합니다.~~ + 해당 기능은 브라우저의 메시지 입력 창에 유저가 입력할 경우, `{user nickname}이 입력 중입니다...` 와 같은 메시지를 다른 유저들에게 broadcast 통신으로 보내는 방법으로 구현 가능합니다. 하지만 저는 유저가 각 글자를 입력할 때마다 다른 유저들에게 메시지룰 매번 새로 보내도록 구현하여, 정확한 기능 구현까지는 다다르지 못했습니다. + +구현을 마친 뒤의 모습은 아래와 같습니다. + +![05.websocket_chat.png](../assets/images/post-WEB-Mission5/websocket_2.png) + +## 마치며 + +형진님이 만들어주신 boiler-plate 덕분에 node.js 외에도 react 와 redux 를 간접적으로 사용해볼 수 있는 좋은 기회였습니다. 웹소켓 덕분에 프론트엔드와 백엔드의 통신 방식에 대해 더 깊게 알아볼 수 있어, 양 쪽 모두의 이해도를 더 높일 수 있었습니다. + +2월을 마지막으로 2020 fall DSC UOS WEB TEAM의 활동이 마무리 되는데, 형진님을 비롯한 코어 멤버분들 덕분에 쉽지 않은 미션들을 헤쳐나갈 수 있어 감사했습니다! diff --git a/_posts/2021-04-29-ReactHook.md b/_posts/2021-04-29-ReactHook.md new file mode 100644 index 0000000000..b3ace78c2c --- /dev/null +++ b/_posts/2021-04-29-ReactHook.md @@ -0,0 +1,484 @@ +--- +layout: post +title: "React Hook, 친해질래?" +authors: [poiu694] +tags: ["Web"] +image: assets/images/post-React-Hook/thumb.png +description: "TODO-LIST With React Hook" +featured: true +--- + +## Hooks develop + +React는 Logic을 재사용하려면 `Higher-order components`과 `Render props`를 이용했었다. + +둘 다 몇몇의 패턴에는 사용하기 정말 좋다. 하지만, 단점은 명확하다. + +React를 엄청 복잡한 예제에서 무언가 가져오려면 구조를 바꿔야 하는 경우가 생겼을 때 우리는 쉽게 wrapper 지옥에 빠질 수 있다. + +아니면 코드가 중복돼있거나 엉켜있는 Giant Component를 바라보고 있을 수 있다. + +이런 경우는 생각보다 자주 일어나고 사람과 컴퓨터가 힘들어진다😂 + +리액트의 대가인 Dan은 위에서 얘기하는 문제들을 포괄해서 얘기한다. + +React가 더 가볍고 좋은 primitive나 add state를 제공하지 않기 때문에 생기는 현상이라고 말한다. + +그래서 React 팀은 기존의 코드를 엎지 않을 수 있으면서 새로운 API를 제공해 주려고 노력했다. 그게 바로 React Hook다! + +React Hook은 React 버전 16.8부터 추가되었다. + +실제 React에서 Hooks가 구현된 크기는 ~1.5kB(min + gzip).이다. + +단지 크기가 작다는 걸 얘기하는 게 아니다. + +기존에 만들었던 Class만으로 이루어진 프로젝트에 Hooks을 도입한다면 bundle size를 줄일 수 있다는 얘기다🧐 + +## What are hooks? + +그렇다면 React Hook이 왜 특별한지, 그리고 무엇인지 알아보자😊 + +먼저, React Hook은 다음과 같은 특징을 지녔다. + +- Hook은 `props`, `state`, `context`, `refs`, `lifecycle`에 관한 직관적인 API를 제공한다. +- `Class Component` -> `Functional Component`로 바꾼다. +- 코드를 공유하기 편하다. +- `Custom Hook`을 만들 수 있어 유용한 기능을 담긴 Hook을 사용자 간의 공유가 가능하다. + +React Hook의 종류는 엄청 많다. 그 중에서 기본적인 Hooks를 소개시켜주려고 한다🤗 + +### State Hook ( useState ) + +- `useState`는 `state`를 `class`가 아닌 곳에서 다룰 수 있게 해준다. + +- 기본형은 다음과 같다. + +```react +import {useState} from "react"; + +const [value, setValue] = useState(0); +``` + +- `useState`는 0-index에서는 `state`, 1-index에서는 `state`를 변경해 주는 함수를 반환한다. + +- `useState`괄호 안에 적어준 초깃값은 첫 번째 렌더링에만 딱 한 번만 사용한다. + +- 예시 + +```react +import React, { useState } from "react"; + +const Example = () =>{ + const [count, setCount] = useState(0); + + return ( +
    +

    {count} times

    + +
    + ); +} +``` + +전에 했던 `class`를 만들고 작업했던 그 과정을 이렇게 단순하게 줄일 수 있다. 코드가 엄청 줄었고, 직관적으로 보인다. + +`state`를 관리하기 위해 어렵게 했던 그런 모습을 이제 벗어나 보자😎 + +### Effect Hook ( useEffect ) + +- 데이터를 가져오거나, DOM을 직접 조작하는 `side effects`를 수행한다. + +- `componentDidMount`, `componentDidUpdate`, `componentWillUnmout`를 하나로 통합한다. + +- 예시 + +```react + import React, { useState, useEffect } from "react"; + + const Example = () =>{ + const [count, setCount] = useState(0); + + useEffect(() => { + document.title = `click ${count} times`; + }, [count]); + + return ( +
    +

    {count} times

    + +
    + ); + } +``` + +위 코드에서 `useEffect`는 세 개의 함수를 통합해서 단 한 번에 끝낼 수 있다😁 + +`ComponentDidMount`와 `ComponentWillUpdate`로 count에 따라 `title`이 바뀌는 게 간단히 끝이 난다! + +조금만 더 생각해 보자. 내가 원하지 않는 경우에 `re-render`가 계속되면은 비용이 커지지 않을까? + +그래서 `useEffects`는 내부에 두 개의 파라미터를 사용한다. + +첫 번째 인자는 `render`가 될 때 어떻게 동작할지에 대한 코드, 두 번째 인자로는 `dependency`를 설정해 준다. + +`dependency`가 바뀔 때만 `useEffect`는 `update`의 역할을 해줄 것이다. + +이걸 조금 더 다르게 생각한다면 `dependency`로 `[ ]` 설정한다면 무엇이 바뀌든 `update`가 되지 않는다. + +### Context Hook ( useContext ) + +- `createContext`를 반환받아 그 `context`의 현재 값을 사용한다. + +- `context`의 현재 값은 Hook을 호출하는 컴포넌트 가장 가까이에 있는 `MyContext.Provide`에 의해 결정된다. + +- `context`값이 변경되면 항상 `re-render` 된다. + +- 예시 + + ```react + import React, {useState, useEffect, useContext} from "react"; + + const CountContext = createContext({}); + + const Counter = () =>{ + const conunt = useContext(CountContext); + return
    seconds: {count}
    + }; + + const Timer = () =>{ + const [seconds, setSeconds] = useState(0); + + useEffect(()=>{ + const interval = setInterval(() => { + setSeconds(seconds + 1); + }, 1000); + + return () => clearInterval(interval); + }); + + return( +
    + + + +
    + ); + }; + ``` + +`count`는 `value={seconds}`에서 온다. 우리는 `render prop pattern`에서 벗어날 수 있다! + +### Reducer Hook ( useReducer ) + +- `useState`의 대체함수의 역할을 한다. + +- 예시 + + ```react + import React, {useReducer} from "react"; + + const reducer = (state, action) =>{ + switch (action.type) { + case 'INC': + return state + 1; + case 'DEC': + return state - 1; + default: + return state; + } + } + + const [state, dispatch] = useReducer(reducer, initialState); + ``` + +- `reducer`는 위와 같이 함수로 정의한다. + +- `dispatch`는 `action`을 해주는 함수이며, 사용은 다음과 같이 한다. + +- ```react + dispatch({type: 'INC'}); // Increment + dispatch({type: 'DEC'}); // Decrement + ``` + +- 다수의 하위 값을 포함하는 복잡한 정적 로직을 만드는 경우나 새로운 `state`가 이전 `state`에 의존적인 경우 주로 사용한다. + +- `update`를 트리거 하는 컴포넌트의 성능을 최적화 가능하다. 왜냐면 콜백 대신 `dispatch`를 전달할 수 있기 때문이다. + +이 외에도 제공되는 React Hook은 많다. 하지만, 이걸로도 React Hook의 마술을 볼 수 있었을 것이다. + +그렇다면 우리는 지금까지 배운 React Hook을 이용해서 간단하게 TODO-LIST를 만들어 보자😆 + +## TODO-LIST with React Hook + +TODO-LIST는 우리가 웹을 공부해봤던 사람이라면 한 번씩은 만들어 봤을 것이다. + +React Hook을 이용한 방법과 다른 방식으로 했던 방법을 비교해보는 것도 좋을 것 같다😁 + +우리가 만드는 TODO-LIST에서 다음과 같은 기능을 넣을 것이다. + +1. TODO-ITEM 추가 기능 +2. TODO-ITEM 체크해서 했던 일인지, 해야 할 일인지 알 수 있는 기능(Toggle) +3. TODO-ITEM 삭제 기능(One Item / All completed Item) + +우리는 연습하고 나서 실제로 사용할 수 있게끔 `LocalStorage`를 이용해서 껐다 켜도 TODO-LIST를 유지하자! + +참고로 여기서는 `useState`, `useEffect`로만 이용해서 코드를 짤 것이다. + +왜냐면 `useContext`와 `useReducer`를 이용하는 습관은 정말 좋고 권장한다. + +하지만 `useContext`나 `useReducer`를 사용하기 전 상황에 먼저 익숙해질 필요가 있고 초심자에게 이 둘은 어렵다고 생각한다. + +여기서는 React Hook이 처음인 분들을 대상으로 TODO-LIST를 만들 것이기 때문에 앞서 얘기한 두 가지만을 이용해서 만들어 보려고 한다. + +나중에 프로젝트가 복잡해지면 `useContext`와 `useReducer`의 마법을 느껴보자😊 + +완성본 미리보기😎 + +![1619681704501](../assets/images/post-React-Hook/Todolist.png) + +### TODO + +가장 먼저, todo에는 어떤게 담겨 있을지 정해야 한다. + +우리가 만들 Todo는 무엇인지를 나타내는 `task` 다 끝낸 일인지 파악해 주는 `complete` 그리고 각각의 `id`를 가지고 있다! + +### TODO-TEMPLATE + + `TodoTemplate.js`를 만들자! + +TODO-TEMPLATE에서는 입력을 담당하는 `Header`와 `TodoList`를 포함하고 있고, `todos`를 실질적으로 저장한다. + +`TodoTemplate`에서 관리해서 `Header`와 `TodoList`가 서로 같은 `todos`를 사용할 수 있게 계속 전달해 주자. + +`todos`를 저장하고 가져올 수 있게 해주는 `LocalStorage`를 `useState`와 `useEffect`로 만든다. + +```react +const UseLocalStorage = (key, initialState) => { + const [state, setState] = useState( + () => JSON.parse(window.localStorage.getItem(key)) || initialState + ); + + useEffect( () =>{ + window.localStorage.setItem(key, JSON.stringify(state)); + }, [key, state]); + + return [state, setState]; +} + +``` + +`key`를 이용해서 저장되어 있는 값이 있으면 그것을 가져오고, 없으면 `initialState`를 가져온다. + +`useEffect`를 이용해서 `state`가 바뀌게 되면 계속해서 `LocalStorage`에 저장을 시켜주자! + +그렇다면 이를 이용해서 `todos`를 만들어보자. + +```react +// Todotemplate.js +import React, {useState} from "react"; +import UseLocalStorage from "../components/Hook/UseLocalStorage"; +import Header from "../components/Todo/Header"; +import ToDoList from "../components/Todo/ToDoList"; + +const TODOS_LS = 'TODOS'; + +const TodoTemplate = () =>{ + const [todos, setTodos] = UseLocalStorage(TODOS_LS, [{ + id:1, + task:"Submit Your TODO-LIST", + complete:false + }]); + + return ( +
    +
    + +
    + ); +} +``` + +`TodoTemplate`를 이런 식으로 구성할 수 있다!! + +### HEADER + +TODO-ITEM을 추가해 줄 수 있는 `Header`를 만들어 보자. `input`을 관리해 주는 `useState`를 하나 만들 것이다. + +```react +// Header.js +import React, {useState} from "react"; + +const Header = () =>{ + const [value, setValue] = useState(""); + + const handleChange = (e) =>{ + const { + target: {value} + } = e; + setValue(value); + } + + return( +
    +
    +

    To do List

    +
    +
    + + +
    +
    + ); +} +``` + +이렇게 만들 수 있다! `onChange` 이제 추가 기능을 만들 것인데, 추가 기능을 만들려면 `TodoTemplate`에서 만들어야 한다. + +`Header`에서 바뀌었을 때 바뀐 값을 `TodoList`에서 사용하기가 어려워서 추가된 모습을 바로 못 보기 때문이다. + +`TodoTemplate`에 다음과 같은 코드를 추가해주자! + +```react +// TodoTemplate.js +// Add Task +const addTodo = (input, validator) =>{ + let todosMap = [...todos]; + todosMap.push({ + id: todos[todos.length -1].id + 1, + task: input, + complete: false + }) + setTodos(todosMap); +} + +
    +``` + +여기서 `todosMap`을 만들어주고 `Header`에 `addTodo`를 넘겨준다. + +`useState`에서는 직접적으로 추가가 되지 않기 때문에 ! 새로운 변수를 만들어서 todos를 갱신해 준다. + +추가한 `todo`는 해야 할 일이기 때문에 default로 `complete`를 `false`로 준다. + +`Header`로 돌아가서 `addTodo`를 받아서 `handleSubmit`함수를 만들자! + +```react +// Header.js +const handleSubmit = (e) =>{ + e.preventDefault(); + addTodo(value); + setValue(""); +} +``` + +`addTodo`에 `value`를 전달하고 나서는 input 칸이 비어있게 만들기 위해 `setValue`를 위와 같이 해주자. + +이 기능을 `form`안에 넣는다면 `LocalStorage`에 저장되는 모습을 볼 수 있다! + +![1619678285863](../assets/images/post-React-Hook/LocalStorage.png) + +### TODO-LIST + +이제 화면에 보이게 만들어보자😄😄 + +```react +// TodoList.js +import React from "react"; +import ToDoItem from "./ToDoItem"; + +const ToDoList = ({todos}) => { + return( +
    + {todos.map(todo =>{ + return( + + ); + })} +
    Clear Completed
    +
    + ); +} + +export default ToDoList; +``` + +`TodoList`는 간단하다. `todos`의 크기만큼 `TodoItem`을 반환하고 전체 삭제를 해주는 부분을 만들면 된다. + +전체 삭제해 주는 부분을 `Component`를 새로 만들어서 넣어도 된다! + +여기서 주목할 부분은 `TodoItem`마다 `key`를 주어야 한다. + +이것은 `re-render`과정에서 중요하므로 반드시 해줘야 한다고만 이해해도 된다. + +👉[사이트](https://kentcdodds.com/blog/understanding-reacts-key-prop)👈를 읽어봐도 좋다😎 + +### TODO-ITEM + +```react +// TodoItem.js +import React from "react"; +import "./ToDoItem.css"; + +const ToDoItem = ({todo}) => { + return( +
    +
    ❌
    +
    {todo.task}
    +
    + ); +} + +export default ToDoItem; +``` + +이와 같이 구성하면 이제 우리는 `TodoItem`이 정상적으로 추가되는 모습을 볼 수 있다🎉🎉 + +하지만, 아직 삭제와 토글 기능을 만들지 않았다. `TodoTemplate.js`로 돌아가자. + +```react +// TodoTemplate.js +// toggle + const handleToggle = (id) => { + let todosMap = todos.map(task =>{ + return task.id === Number(id) ? {... task, complete: !task.complete} : {...task} + }); + setTodos(todosMap); + } + + // Delete Completed Tasks + const handleDeleteAll = () => { + let todosMap = todos.filter(task =>{ + return !task.complete; + }); + setTodos(todosMap); + } + + // Delete One Task + const handleDeleteItem = (id) => { + let todosMap = todos.filter(task =>{ + return task.id !== Number(id); + }); + setTodos(todosMap); + } +``` + +이걸 적절하게 주고 id 값을 이용만 해준다면 우리의 TODO-LIST를 완성할 수 있다! css는 각자의 몫으로 남기겠다😉 + +추가로 기능을 만들어보고 싶으면 다음과 같은 기능을 혼자 만들어보며 연습을 해보자! + +1. Filter 기능 ! Select-Option에 따라서 전체, 했던 일, 해야 할 일만 나오게끔 만들자. + +2. Input Validator ! input으로 빈칸은 입력이 되지 않게 만들자. + +3. Color 기능 ! 해야 할 일들을 분야로 나누어서 Color와 함께 저장을 하고, Color-Filter 기능까지 만들자. + +React Hook과 친해지는 그 날까지 응원한다 :) diff --git a/_posts/2021-04-29-typing-game.md b/_posts/2021-04-29-typing-game.md new file mode 100644 index 0000000000..e3f17bda3e --- /dev/null +++ b/_posts/2021-04-29-typing-game.md @@ -0,0 +1,137 @@ +--- +layout: post +title: "Typing game" +authors: [r4k0nb4k0n] +tags: ["Web"] +image: assets/images/post-typing-game/01.intro.gif +description: "DOM 조작과 CSS 애니메이션" +featured: false +--- + +👋 안녕하세요! 제가 만든 [r4k0nb4k0n/typing-game](https://github.com/r4k0nb4k0n/typing-game) +프로젝트를 소개하겠습니다. +[r4k0nb4k0n.github.io/typing-game](https://r4k0nb4k0n.github.io/typing-game) +에서 사용해보실 수 있습니다! + +## 🧐 이건 도대체 무엇인가요? + +주어진 문자열들을 빠르고 정확하게 입력하는 것을 목표로 시간을 재어 자신의 실력을 파악하고 기를 수 있는 웹 사이트입니다. + +## 💁 어쩌다가 만들었나요? + +저는 `2021-spring-web-beginner` 팀에서 [microsoft/Web-Devs-For-Beginner](https://github.com/microsoft/Web-Dev-For-Beginners) +를 기반으로 웹 기초 지식을 학습하고, 프로젝트를 통해 이를 응용해보고 있습니다. + +>![Primitive Typing Game Demo](https://github.com/microsoft/Web-Dev-For-Beginners/raw/main/4-typing-game/images/demo.gif) + +[Event-Driven Programming - Build a Typing Game](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/4-typing-game) +파트에서 위와 같은 데모를 봤습니다. 이걸 제가 원하는 형태와 방식으로 만들어보고 싶었습니다. + +## 🧑‍🔧 어떻게 만들었나요? + +[microsoft/Web-Devs-For-Beginner](https://github.com/microsoft/Web-Dev-For-Beginners) +를 통해 HTML/CSS/JS 기초를 학습하고 DOM 조작을 실습했습니다. +Typing game도 이를 기반으로 만들었습니다. 여기에 제가 원하는 형태의 움직임을 넣기 위해 CSS 애니메이션을 따로 찾아 구현했습니다. +Github Pages를 통해 배포했습니다. + +아래는 directory listing입니다. + +```text +📂 r4k0nb4k0n/typing-game + 📂 assets/ + 📄 GitHub-Mark-32px.png + 📄 Typing_dark_01_Videvo.mov + 📄 Typing_dark_02_Videvo.mov + 📄 Typing_dark_03_Videvo.mov + 📄 README.md + 📄 index.html + 📄 quotes.js # 타이핑할 문자열들을 배열로 저장하는 스크립트 + 📄 script.js # DOM 조작 등의 스크립트 + 📄 style.css # 스타일과 애니메이션 정의 +``` + +## 🧗 어디서 삽질을 했나요? + +### 1. Multiple videos on background + +배경에 3개의 동영상이 차례대로 나와서 반복재생 하는 것을 구현했습니다. + +처음에는 하나의 `