안녕하세요? 뜻밖의 행운입니다.
패스트 캠퍼스 50일차 까지
모두 과제 통과하여 드디어 드디어~!
최종 과제에 도전할 기회를 받았습니다.
50일 동안 빠짐없이 과제를 수행한 제 자신을 칭찬합니다.
22년 칭찬할 일이 그렇게 많지 않았는데 이런 작은 성공이라도 이루어서
칭찬할 거리가 생겼네요
하지만 아직 강의는 끝까지 다 수강한 상태가 아니라서 계속해서 이어가야겠습니다.
일단 50일동안 강의를 들었던 느낌을 정리해보겠습니다.
마지막 과제가 최소 4000자를 써야 하는 거라서
길게 길게 써야 합니다. 거기에 또 공백은 제외 해야 하는 아주 빡센 조건입니다.
진짜 이력서 쓸때나 4000자 채우라고 하는데 쉽지 않은 조건 입니다.
더구나 요즘 IT 시장에서 구성원 새로 뽑을 때 이력서 쓰기 귀찮아 하는거 알아서
최대한 많은 인재 보려고 이력서도 간소화 하는 방향으로 가는데
4000자라니 올해 써야 할 글자수는 여기에 다쓰게 생겼네요
우선 패스트 캠퍼스 온라인 강의가 아쉬운 점은 글을 쓰는 날짜 기준으로 IOS에는 어플이 없습니다.
안드로이드는 있을지 모르겠네요
패스트 캠퍼스 웹이 모바일에서도 잘 호환이 되어서 없는지 모르겠지만 불편하긴 합니다.
그 외에는 저렇게 오른쪽 위에 전체 강의의 녹화 시간 및 내가 수강한 시간
그리고 강의 진척률을 보여줘서 도전의식을 심어 줍니다.
그리고 자기가 어디까지 봤는지 다 기억하고 저렇게 팝업창으로 안내해주는 친절함이 있습니다.
저는 50일 도전 끝나고 다시 여기서 부터 이어가려고 합니다.
챕터 8 함수 고급
챕터 안에 또 여러 주제가 굉장히 많아서 완강까지 가려면 아직 갈길이 멀지만
포기하지 않고 쭈욱 달려야겠죠
맨마지막 강의는 무엇일까 궁금해서 한번 미리 눌러봤습니다.
이런저런 미니 프로젝트 하다가 최종은 쇼핑몰 만드는 프로젝트네요
재미있겠습니다.
95시간 정도 시간을 투자하면 쇼핑몰까지 만들 수 있게 되니!
배운 내용을 또 응용하고 배우면서 모르는 내용을 추가로 찾아간다면
제가 원하고 필요한 기능을 스스로 만들어서 활용 하겠죠
진짜 요즘 세상 개발능력이 필요하다는 것이 절실하네요
먼 과거에 오피스 프로그램을 잘 다루면 경쟁력이 있듯이
이제는 이러한 간단한 개발 언어를 배우고 개발을 해서 단순한 업무를 자동화 하며
업무를 효율적으로 할 수 있어야 경쟁력이 생기는 듯 합니다.
제 자식대에 가서는 얼마나 더 배워야 할지 ㅠㅠ
힘내시길
뒤를 보니 각 프레임 워크를 활용해서 다른 프로젝트를 진행하네요
얼핏 강의 안내서를 보니 프레임워크 별로 적절한 프로젝트가 있다더니
그것을 강조하려고 저렇게 프레임워크 별로 프로젝트를 나둔듯 합니다.
그렇죠 세상에 만능인 것은 없는게 맞는듯 합니다.
각자 다 장단점이 있고 특정 case에는 특정 프레임워크가 유용한 경우가 있으니
case에 따라 프레임워크는 잘 활용하면 되겠지요
가끔 프레임워크에 맞춰서 프로젝트를 진행할 때도 있는데 진짜 그것은 주객전도 이니 가급적 그런일이 없기를 바라야 겠습니다. 하지만 회사일은 마음대로 되지 않는 법 ㅎ
강의 자료는 전체적으로 각 강사분들의 정성이 느껴져서 좋았습니다.
한 가지 아쉬운 것은 대다수 강의 자료가 반드시 동영상 강의와 같이 봐야지만 도움이 되는 것들이라 아쉽긴 하네요
제가 기대한것은 강의를 보지 않고 텍스트 파일만 봐도 이해가 되면 그것이 최고의 자료라고 생각 되는데
그건 그냥 높은 기대치고 동영상 강의가 알차고 강의의 질이 좋다면
우선 핵심 가치는 갖춘것이니 괜찮은 것이겠지요 아무튼 강의자료는
동영상 강의 내용을 보조 하는 느낌입니다.
강의 마다 다른데 한강의 전체를 강사님 한 분이 하는 것은 아니고 특정 주제에 따라 여러 강사님이 계십니다.
저는 아직 파이썬만 듣고 있고 챕터 8까지만 해서 전체 강의를 평가하기는 어려우나
해당 강사님이 좋았던 점은 그래도 한 가지라도 더 전달 하기위해 노력하시는 모습이 좋았고
강의를 하면서 수강생이 포기하지 않도록 잘 응원해주시는 모습이 좋았습니다.
뒤에 강사님들도 이랬으면 좋을 듯하네요
오 여기까지 오는데 대충 1500자 정도 됩니다.
패스트 캠퍼스 이벤트 담당하시는 분들 요즘 블로그 글이 4000자 쓰면 방문자 분들이 끝까지 읽으실까요?
더구나나 공백제외 4000자면 이거 진짜 강의 후기를 TMI 수준으로 적어 내려가야 할듯 한데 조건이 그러하니
계속 이어 가겠습니다.
어쨌든 수많은 강의중 에서 제가 해당 강의를 선택한 이유는
우선 파이썬 언어는 쉽고 좋은 라이브러리들을 이미 똑똑한 사람들이 만들어 두었기 때문에
해당 라이브러리를 찾아서 레고 처럼 조립하여 활용하기 위함이었습니다.
즉 실용적인 언어를 하나 배우고 싶어서였죠
개발 능력을 키우는데 있어서 가장 좋은 것은 실제로 자기가 필요한 것을 개발해보는 것인데
기본적인 내용은 그래도 알고 개발을 해야지 아예 0 에서 시작하면 절대 결과가 나올 수가 없지요
그리고 그 기본을 채운다음에 실력을 키우기 좋은 것이 바로 클론코딩
이미 만들어져 있는 것을 한번 구현해보는 것입니다.
다행히 이미 정답이 있어서 내가 구현하면서 비교하고 하니 실력이 늘어날 수 밖에 없죠
실제 글쓰기도 이미 훌륭한 작가님들이 쓴 글을 그대로 옮겨서 적으면
어느 정도 글쓰기 실력이 늘어나는 것처럼 코딩도 비슷합니다.
그런의미에서 해당 강의에도 그런 클론 코딩 내용이 있었습니다.
바로 githup 랜딩존 클론 코딩이었습니다.
GitHub (quirky-mcclintock-a14da0.netlify.app)
GitHub
One platform, from start to finish With hundreds of integrations, GitHub is flexible enough to be at the center of your development process.
quirky-mcclintock-a14da0.netlify.app
클론 코딩을 할 때 그냥 클론으로 만들면 재미가 없는데
이렇게 뭔가 이뻐보이고 그럴싸 한 것을 따라 한다면 더욱 의욕이 솟구치기 마련입니다.
사이트 이뻐서 좋네요
파이썬 강의이긴 한데 올인원 답게 프론트 엔드 관련 내용도 나왔습니다.
Html / css 를 알아야 하는건가?
사실 티스토리 블로그를 하면서 모를 수 없는 내용이죠
위 홈페이지 html 클론 코딩을 해보면
-----------------------------------------------------------------------------------------------------------------------------------
<!--HERO-->
< h1 > Where the world builds software </ h1 >
< p > Millions of developers and companies build, ship, and maintain their software on GitHub—the largest and most advanced development platform in the world. </ p >
<!--FEATURES-->
< h5 >< strong > For everything you build </ strong ></ h5 >
< p > Host and manage your code on GitHub. You can keep your work private or share it with the world. </ p >
< h5 >< strong > A better way to work </ strong ></ h5 >
< p > From hobbyists to professionals, GitHub helps developers simplify the way they build software. </ p >
< h5 >< strong > Millions of projects </ strong ></ h5 >
< p > GitHub is home to millions of open source projects. Try one out or get inspired to create your own. </ p >
< h5 >< strong > One platform, from start to finish </ strong ></ h5 >
< p > With hundreds of integrations, GitHub is flexible enough to be at the center of your development process. </ p >
<!--MAP-->
< h1 > Where is GitHub? </ h1 >
< p > GitHub is where people build software. More than 18 million people use GitHub to discover, fork, and contribute to over 48 million projects. </ p >
<!--FOOTER-->
< h5 > Product </ h5 >
< ul >
< li >< a href = "#" > Features </ a ></ li >
< li >< a href = "#" > Security </ a ></ li >
< li >< a href = "#" > Team </ a ></ li >
< li >< a href = "#" > Enterprise </ a ></ li >
< li >< a href = "#" > Customer stories </ a ></ li >
< li >< a href = "#" > The ReadME Project </ a ></ li >
< li >< a href = "#" > Pricing </ a ></ li >
< li >< a href = "#" > Resources </ a ></ li >
< li >< a href = "#" > Roadmap </ a ></ li >
</ ul >
< h5 > Platform </ h5 >
< ul >
< li >< a href = "#" > Developer API </ a ></ li >
< li >< a href = "#" > Partners </ a ></ li >
< li >< a href = "#" > Atom </ a ></ li >
< li >< a href = "#" > Electron </ a ></ li >
< li >< a href = "#" > GitHub Desktop </ a ></ li >
</ ul >
< h5 > Support </ h5 >
< ul >
< li >< a href = "#" > Docs </ a ></ li >
< li >< a href = "#" > Community Forum </ a ></ li >
< li >< a href = "#" > Professional Services </ a ></ li >
< li >< a href = "#" > Learning Lab </ a ></ li >
< li >< a href = "#" > Status </ a ></ li >
< li >< a href = "#" > Contact GitHub </ a ></ li >
</ ul >
< h5 > Company </ h5 >
< ul >
< li >< a href = "#" > About </ a ></ li >
< li >< a href = "#" > Blog </ a ></ li >
< li >< a href = "#" > Careers </ a ></ li >
< li >< a href = "#" > Press </ a ></ li >
< li >< a href = "#" > DI&B </ a ></ li >
< li >< a href = "#" > Social Impact </ a ></ li >
< li >< a href = "#" > Shop </ a ></ li >
</ ul >
< ul >
< li > © 2021 GitHub, Inc. </ li >
< li >< a href = "#" > Terms </ a ></ li >
< li >< a href = "#" > Privacy </ a ></ li >
< li >< a href = "#" > Site Map </ a ></ li >
< li >< a href = "#" > What is Git? </ a ></ li >
</ ul >
-----------------------------------------------------------------------------------------------------------------------------------
파이썬과 비슷하게 주석 그리고 본문 크기등
css가 들어가지 않아서 훨씬 간편합니다.
그리고 파이썬 같은 개발언어가 아니다 보니 진짜 너무 너무 쉽게 읽힙니다.
개발이 이런식이면 얼마나 좋을까요?
노가다가 강한 느낌이었지만 그래도 요즘 devops에서 빼놓을 수 없는 git의 랜딩 페이지를
어찌되었던 클론 코딩을 해봤는 다는데 의의를 두겠습니다.
뒤에가면 이런 간단한 html 클론 코딩 말고 실제로 기능 구현도 하겠지요 파이썬 함수 배우면서
꼬이고 꼬였던것을 잠시나마 이렇게 쉬어가는 느낌으로
어찌 되었던 이렇게 각종 과제를 수행하니 강의 자체는 다음 강의가 궁금할 정도입니다.
이정도 궁금증이 있어야 계속해서 의지를 가지고 이어서 듣겠지요
아무리 좋은 강의라도 듣지 않고 그냥 묵히면 정말 쓸모 없는 것이니까요
하지만 저거 해놓고 클론 코딩에 성공했다 좋아했다가 뒤에 최종 완성해 나가야 하는 것을 보고
역시 세상에 쉬운 것은 없구나 했습니다.
클론 이니까 당연히 css도 구현을 했습니다.
하지만 이미 html도 저세상
최종 완성 html 파일은 아래와 같았습니다.
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > GitHub </ title >
<!-- Favicon -->
< link rel = "icon" href = "./favicon.png" >
<!-- Google Fonts -->
<!-- Bootstrap -->
< link rel = "stylesheet" href = "./main.css" >
< script >
// Initialize Google Map.
function initMap () {
const myLatLng = {
lat: 37.782293 ,
lng: - 122.391240
}
const map = new google . maps . Map ( document . getElementById ( 'map' ), {
center: myLatLng ,
scrollwheel: false ,
zoom: 18
})
const marker = new google . maps . Marker ({
position: myLatLng ,
map: map ,
title: 'GitHub'
})
}
</ script >
</ head >
< body >
<!-- HERO -->
< section class = "hero" >
< img class = "globe" src = "./images/hero-globe.jpg" alt = "Globe" >
< img class = "glow" src = "./images/hero-glow.svg" alt = "Glow" >
<!-- HEADER -->
< header >
< div class = "container d-flex align-items-center py-3" >
< a class = "logo me-2" href = "#" >
< img src = "./images/header-logo.svg" alt = "GitHub Logo" >
</ a >
< ul class = "nav flex-grow-1" >
< li class = "nav-item" >
< a class = "nav-link text-light" href = "#" > Personal </ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link text-light" href = "#" > Open source </ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link text-light" href = "#" > Business </ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link text-light" href = "#" > Explore </ a >
</ li >
</ ul >
< div class = "forms d-flex" >
< input class = "form-control me-2" type = "text" placeholder = "Search GitHub" >
< button class = "btn btn-link text-light text-decoration-none flex-shrink-0 me-2" > Sign in </ button >
< button class = "btn btn-outline-light flex-shrink-0" > Sign up </ button >
</ div >
< button class = "btn ms-2" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvas" >
< img src = "./images/menu.svg" alt = "Menu Icon" >
</ button >
< div class = "offcanvas offcanvas-end" id = "offcanvas" >
< div class = "offcanvas-header" >
< button class = "btn-close" data-bs-dismiss = "offcanvas" ></ button >
</ div >
< div class = "offcanvas-body" >
< ul class = "list-group list-group-flush mb-4" >
< li class = "list-group-item" >
< a href = "#" > Personal </ a >
</ li >
< li class = "list-group-item" >
< a href = "#" > Open source </ a >
</ li >
< li class = "list-group-item" >
< a href = "#" > Business </ a >
</ li >
< li class = "list-group-item" >
< a href = "#" > Explore </ a >
</ li >
</ ul >
< input class = "form-control mb-2" type = "text" placeholder = "Search GitHub" >
< div class = "d-grid mb-2" >
< button class = "btn btn-outline-primary" > Sign in </ button >
</ div >
< div class = "d-grid" >
< button class = "btn btn-primary" > Sign up </ button >
</ div >
</ div >
</ div >
</ div >
</ header >
< div class = "container" >
< div class = "row" >
< div class = "col-lg-7 col-12" >
< div class = "headline" >
< h1 class = "text-white" > Where the world builds software </ h1 >
< p class = "text-white-50" > Millions of developers and companies build, ship, and maintain their software on GitHub—the largest and most advanced development platform in the world. </ p >
</ div >
</ div >
</ div >
< div class = "row" >
< div class = "col-lg-5 col-md-6 col-12" >
< form >
< input class = "form-control form-control-lg mb-3" type = "text" placeholder = "Email address" >
< input class = "form-control form-control-lg mb-3" type = "password" placeholder = "Password" >
< div class = "d-grid" >
< button class = "btn btn-primary btn-lg" > Sign up for GitHub </ button >
</ div >
</ form >
</ div >
</ div >
</ div >
< img class = "curve" src = "./images/curve.svg" alt = "Curve" >
</ section >
<!--YOUTUBE-->
< section class = "youtube" >
< div class = "container" >
< img class = "astronaut" src = "./images/hero-astronaut.svg" alt = "Astronaut" >
< div class = "ratio ratio-16x9" >
</ div >
</ div >
</ section >
<!--FEATURES-->
< section class = "features border-top border-bottom" >
< div class = "container" >
< div class = "row" >
< div class = "col-lg-3 col-6" >
< div class = "card" >
< img class = "card-img-top" src = "./images/features-build.png" alt = "Build" >
< div class = "card-body text-center" >
< h5 class = "card-title" >< strong > For everything you build </ strong ></ h5 >
< p class = "card-text" > Host and manage your code on GitHub. You can keep your work private or share it with the world. </ p >
</ div >
</ div >
</ div >
< div class = "col-lg-3 col-6" >
< div class = "card" >
< img class = "card-img-top" src = "./images/features-work.png" alt = "Work" >
< div class = "card-body text-center" >
< h5 class = "card-title" >< strong > A better way to work </ strong ></ h5 >
< p class = "card-text" > From hobbyists to professionals, GitHub helps developers simplify the way they build software. </ p >
</ div >
</ div >
</ div >
< div class = "col-lg-3 col-6" >
< div class = "card" >
< img class = "card-img-top" src = "./images/features-projects.png" alt = "Projects" >
< div class = "card-body text-center" >
< h5 class = "card-title" >< strong > Millions of projects </ strong ></ h5 >
< p class = "card-text" > GitHub is home to millions of open source projects. Try one out or get inspired to create your own. </ p >
</ div >
</ div >
</ div >
< div class = "col-lg-3 col-6" >
< div class = "card" >
< img class = "card-img-top" src = "./images/features-platform.png" alt = "Platform" >
< div class = "card-body text-center" >
< h5 class = "card-title" >< strong > One platform, from start to finish </ strong ></ h5 >
< p class = "card-text" > With hundreds of integrations, GitHub is flexible enough to be at the center of your development process. </ p >
</ div >
</ div >
</ div >
</ div >
</ div >
</ section >
<!--MAP-->
< section class = "map" >
< div class = "container" >
< div class = "row" >
< div class = "col-lg-4 col-12" >
< h1 > Where is GitHub? </ h1 >
< p > GitHub is where people build software. More than 18 million people use GitHub to discover, fork, and contribute to over 48 million projects. </ p >
</ div >
< div class = "col-lg-8 col-12" >
< div id = "map" class = "shadow" ></ div >
</ div >
</ div >
</ div >
</ section >
<!--FOOTER-->
< footer >
< img class = "curve" src = "./images/curve.svg" alt = "Curve" >
< div class = "container" >
< img class = "illustration" src = "./images/footer-illustration.webp" alt = "Illustration" >
< div class = "row" >
< div class = "col-lg-4 col-12" >
< img class = "logo" src = "./images/footer-logo.svg" alt = "Logo" >
</ div >
< div class = "col-lg-2 col-md-3 col-6" >
< h5 > Product </ h5 >
< ul class = "list-unstyled" >
< li >< a href = "#" > Features </ a ></ li >
< li >< a href = "#" > Security </ a ></ li >
< li >< a href = "#" > Team </ a ></ li >
< li >< a href = "#" > Enterprise </ a ></ li >
< li >< a href = "#" > Customer stories </ a ></ li >
< li >< a href = "#" > The ReadME Project </ a ></ li >
< li >< a href = "#" > Pricing </ a ></ li >
< li >< a href = "#" > Resources </ a ></ li >
< li >< a href = "#" > Roadmap </ a ></ li >
</ ul >
</ div >
< div class = "col-lg-2 col-md-3 col-6" >
< h5 > Platform </ h5 >
< ul class = "list-unstyled" >
< li >< a href = "#" > Developer API </ a ></ li >
< li >< a href = "#" > Partners </ a ></ li >
< li >< a href = "#" > Atom </ a ></ li >
< li >< a href = "#" > Electron </ a ></ li >
< li >< a href = "#" > GitHub Desktop </ a ></ li >
</ ul >
</ div >
< div class = "col-lg-2 col-md-3 col-6" >
< h5 > Support </ h5 >
< ul class = "list-unstyled" >
< li >< a href = "#" > Docs </ a ></ li >
< li >< a href = "#" > Community Forum </ a ></ li >
< li >< a href = "#" > Professional Services </ a ></ li >
< li >< a href = "#" > Learning Lab </ a ></ li >
< li >< a href = "#" > Status </ a ></ li >
< li >< a href = "#" > Contact GitHub </ a ></ li >
</ ul >
</ div >
< div class = "col-lg-2 col-md-3 col-6" >
< h5 > Company </ h5 >
< ul class = "list-unstyled" >
< li >< a href = "#" > About </ a ></ li >
< li >< a href = "#" > Blog </ a ></ li >
< li >< a href = "#" > Careers </ a ></ li >
< li >< a href = "#" > Press </ a ></ li >
< li >< a href = "#" > DI&B </ a ></ li >
< li >< a href = "#" > Social Impact </ a ></ li >
< li >< a href = "#" > Shop </ a ></ li >
</ ul >
</ div >
</ div >
</ div >
< ul class = "site-links list-unstyled" >
< li > © 2021 GitHub, Inc. </ li >
< li >< a href = "#" > Terms </ a ></ li >
< li >< a href = "#" > Privacy </ a ></ li >
< li >< a href = "#" > Site Map </ a ></ li >
< li >< a href = "#" > What is Git? </ a ></ li >
</ ul >
</ footer >
</ body >
</ html >
시작은 미미 했지만 끝은 창대하리라
이렇게 배운 내용을 쓰라고 4000자를 준것일까요?
아무튼 저는 파이썬을 배우려고 했는데 이렇게 관련된
어쩌면 이제 IT에 있다면 교양이라고 할 수 있는 html과 css까지 같이 배워서 유용하긴 했습니다.
그리고 처음 배울때 별거 아니네 했던 html도 얼마든지 저렇게 이어질 수 있다.
끝없이 div ㅎㅎㅎ 진짜
그리고 저렇게 끝나지 않는 html이 그냥 바로 눈앞에 보이는 1 page의 웹화면이었다니
앞으로 포탈이나 다른 사이트 다니면서 처음 보이는 웹화면을 무시해서는 안되겠습니다.
진짜 피땀으로 만들어진 것이니까요 ㅎ
역시 사람은 아는 만큼 보인다?
