5주차 강의는 웹 개발자 로드맵 내용으로 웹 퍼블리셔, 프론트엔드, 백엔드 직무를 하기 위해서 공부해야할 기술들을 소개하는 내용이였다.

느낀점

여러가지 배워야 할 내용을 한눈에 볼 수 있어서 좋았다. 그 중에서 혼자 따로 공부하는 내용들도 있어서 몇가지 정리를 해놓을까 한다. 아직 초보자라 생각하고 기초부터 탄탄히 다잡을 수 있도록 노력해야 겠다.

(1) git & Github

개발자로 취직하기 위해서 여러가지 프로젝트를 경험해야 하고 포트폴리오도 작성을 해야한다는 생각은 가지고 있다. git & Github는 협업을 하기 위해 사용하는 툴로 아직은 간단한 사용법만 알고 있다. 1일1커밋 이라는 말이 있는 것처럼 본 과정에 들어가면 꾸준히 해볼 예정이다.

(2) jQuery

쇠퇴하는 방식(아직 사용하는 회사들이 있지만 미리 익혀둘 필요 없음)이라고 소개를 하고 있었지만 경험한 나로써는 Javascript를 사용하는 것 보다 편한 것을 경험해서 틈틈히 공부해 놓을 생각이다.

(3) Bootstrap

웹 디자인 프레임워크로 css와 js 파일들을 가져와 연결함으로써 정형화된 디자인 요소들 사용한다. 확실히 초기 셋팅만 하면 가져다 쓰기만 하면 구현되는 거라 유용하다고 생각한다.

(4) Ajax

jQuery와 마찬가지로 따로 공부하면서 사용법을 배웠는데 이것도 틈틈히 공부해 놓을 생각이다.

(5) Java & 스프링

내가 제일 많이 시간을 투자해야할 분야로 이 기술을 사용하는 회사로 취직을 하기 위해서 이 과정을 수강했다고 생각하면 될꺼 같다.

(6) Python & mongoDB / Flask

웹 서버를 만들고 처음 도메인 주소를 만든 웹페이지를 python 기반으로 만들었었다. java와 구문,문법은 크게 다르지 않아 어렵지 않게 배울 수 있었고 처음부터 끝까지 어떻게 구현하는지 경험할 수 있었다.

파이썬 기초문법 / 크롤링 / mongoDB사용하기

(1) (복습)API값 가지고오기 - Ajax

• 나홀로 메모장 API로 정보 가지고 오기(폴더:sparta>frontend>index.html)

<script>
    $(document).ready(function () {
        //cards-box값 비우기
        $('#cards-box').empty('');
        listing();
    });

    function listing() {
        $.ajax({
                  type: "GET",
                  url: "http://spartacodingclub.shop/post",
                  data: {},
                  success: function (response) {
                      let articles = response['articles'];
                      for (let i = 0; i < articles.length; i++) {
                          let article = articles[i];
                          let image = article["image"];
                          let url = article["url"];
                          let title = article["title"];
                          let desc = article["desc"];
                          let comment = article["comment"];
                          let temp_html = `<div class="card">
                                             <img class="card-img-top" src="${image}" alt="Card image cap">
                                             <div class="card-body">
                                               <a href="${url}" target="_blank" class="card-title">${title}</a>
                                               <p class="card-text">${desc}</p>
                                               <p class="card-text comment">${comment}</p>
                                             </div>
                                           </div>`;
                          $('#cards-box').append(temp_html);
                      }
                  }
                })
    }

    function openclose() {
        // id 값 post-box의 display 값이 block 이면
        if ($('#post-box').css('display') == 'block') {
            // post-box를 가리고
            $('#post-box').hide();
            $('#btn-posting-box').text('포스팅 박스 열기');
        } else {
            // 아니면 post-box를 펴라
            $('#post-box').show();
            $('#btn-posting-box').text('포스팅 박스 닫기');
        }
    }
</script>

(2) python - 패키지 사용하기(requests)

• 서울시 대기 OpenAPI에서, IDEX_MVL 값이 60 미만인 구만 찍어주기

  import requests # requests 라이브러리 설치 필요
  

r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99') rjson = r.json()

gus = rjson['RealtimeCityAir']['row']

for gu in gus: if gu['IDEX_MVL'] < 60: print (gu['MSRSTE_NM'], gu['IDEX_MVL'])

## (3) python - 크롤링(beautifulsoup4)

- 크롤링하여 영화제목 가지고 오기 
```python
import requests
from bs4 import BeautifulSoup

# URL을 읽어서 HTML를 받아오고,
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup = BeautifulSoup(data.text, 'html.parser')

# select를 이용해서, tr들을 불러오기
movies = soup.select('#old_content > table > tbody > tr')

# movies (tr들) 의 반복문을 돌리기
for movie in movies:
    # movie 안에 a 가 있으면,
    a_tag = movie.select_one('td.title > div > a')
    if a_tag is not None:
        # a의 text를 찍어본다.
        print (a_tag.text)

• bs4 기본 개념

  # 선택자를 사용하는 방법 (copy selector)
  soup.select('태그명')
  soup.select('.클래스명')
  soup.select('#아이디명')
  

soup.select('상위태그명 > 하위태그명 > 하위태그명') soup.select('상위태그명.클래스명 > 하위태그명.클래스명')

태그와 속성값으로 찾는 방법

soup.select('태그명[속성="값"]')

한 개만 가져오고 싶은 경우

soup.select_one('위와 동일')

## (4) python - mongoDB조작하기(pymongo)
- 기본 셋팅
```python
from pymongo import MongoClient           # pymongo를 임포트 하기
client = MongoClient('localhost', 27017)  # mongoDB는 27017 포트로 돌아갑니다.
db = client.dbsparta                      # 'dbsparta'라는 이름의 db를 만듭니다.

• pymongo 기본 코드(저장,찾기,바꾸기,지우기)

  # 저장 - 예시
  doc = {'name':'bobby','age':21}
  db.users.insert_one(doc)
  

한 개 찾기 - 예시

user = db.users.find_one({'name':'bobby'})

여러개 찾기 - 예시 ( _id 값은 제외하고 출력)

same_ages = list(db.users.find({'age':21},{'_id':False}))

바꾸기 - 예시

db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

지우기 - 예시

db.users.delete_one({'name':'bobby'})

## (5) 크롤링 결과 DB에 저장/가져오기
```python
import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient           # pymongo를 임포트 하기(패키지 인스톨 먼저 해야겠죠?)
client = MongoClient('localhost', 27017)  # mongoDB는 27017 포트로 돌아갑니다.
db = client.dbsparta                      # 'dbsparta'라는 이름의 db를 만듭니다.

# URL을 읽어서 HTML를 받아오고,
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup = BeautifulSoup(data.text, 'html.parser')

# select를 이용해서, tr들을 불러오기
movies = soup.select('#old_content > table > tbody > tr')

# movies (tr들) 의 반복문을 돌리기
for movie in movies:
    # movie 안에 a 가 있으면,
    a_tag = movie.select_one('td.title > div > a')
    if a_tag is not None:
        rank = movie.select_one('td:nth-child(1) > img')['alt'] # img 태그의 alt 속성값을 가져오기
        title = a_tag.text                                      # a 태그 사이의 텍스트를 가져오기
        star = movie.select_one('td.point').text                # td 태그 사이의 텍스트를 가져오기
        doc = {
            'rank' : rank,
            'title' : title,
            'star' : star
        }
        db.movies.insert_one(doc)

#매트릭스 평점 가지고 오기
target_movie = db.movies.find_one({'title':'매트릭스'})
print (target_movie['star'])

#매트릭스와 평점 같은 영화 제목 가지고 오기
target_star = target_movie['star']
movies = list(db.movies.find({'star':target_star}))

for movie in movies:
    print(movie['title'])

#매트릭스 평점 '0'으로 바꾸기
db.movies.update_one({'title':'매트릭스'},{'$set':{'star':'0'}})

(6) 3주차 과제 - 지니뮤직 크롤링

import requests
from bs4 import BeautifulSoup

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://www.genie.co.kr/chart/top200?ditc=D&ymd=20200403&hh=23&rtm=N&pg=1',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

trs = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

for tr in trs:
    title = tr.select_one('td.info > a.title.ellipsis').text.strip()
    rank = tr.select_one('td.number').text[0:2].strip()
    artist = tr.select_one('td.info > a.artist.ellipsis').text
    print(rank, title, artist)

(7) 느낀점

처음에 Javascript로 공부할때는 구문자체가 좀 복잡하다는 느낌이 있었는데 jQuery와 jAax가 사용하기 간편한 것 같다. python은 자바를 공부해놔서 인지 크게 어려움이 있지는 않았다. 크롤링 하는 것도 처음 접해보는 거라 재미있게 배울수 있었다.

4주차 강의는 Javascript 부분으로 웹사이트에서 동작에 따라 변화되는 내용을 만들어 보았다.

(1)실습 내용

• 이번 Javascript부분은 별도 과제는 없이 같이 실습하면서 만들어나가는 과정으로 진행하였다.
• header태그의 nav메뉴 선택시 화면 전환과 main태그 side-bar 보기옵션 클릭시 조건에 맞게 화면이 보여지는 기능을 만들면 된다.

(2)실습 결과물

1️⃣ header태그의 nav 메뉴 선택시 화면 전환

[html]

<nav class="nav">
  <ul>
    <li class="gallery on" onclick="setMenu('gallery')">사진들 보기</li>
    <li class="upload" onclick="setMenu('upload')">사진 올리기</li>
    <li class="myinfo" onclick="setMenu('myinfo')">내 정보</li>
  </ul>
</nav>

[Javascript]

function setMenu(_menu) {
    //main 요소 클래스 설정
    document.querySelector("main").className = _menu;
    //모든 메뉴 버튼의 on 해제하기
    let filterButtons = document.querySelectorAll("nav li");
    filterButtons.forEach(function(filterButton) {
        filterButton.classList.remove("on");        
    });
    //선택한 메뉴 버튼 on으로 설정하기
    document.querySelector("nav li."+_menu).classList.add("on");
}

2️⃣ upload메뉴에서 input에 입력한 글자수 표기

[html]

<div class="instruction">나만의 특별한 사진을 업로드합니다.</div>
<input class="description" type="text" maxlength="20" placeholder="사진 설명을 20자 이내로 적어주세요." onkeyup="setDescLength()"/>
<span class="descLength">0/20</span>

[Javascript]

//글자수 입력 표기 함수
function setDescLength() {
    let descLength = document.querySelector(".descLength");
    let description = document.querySelector(".description");
    descLength.innerHTML = description.value.length + "/20";
}

3️⃣ 페이지 로드시 내정보 메뉴 셋팅

=> init함수에 showMyInfo함수 호출/body 태그에 onload="init()" 속성 추가

4️⃣ 내정보 수정&확인&취소 버튼 기능 만들기

[html]

<div class="mi-dep non-edit button" onclick="setEditMyInfo(true)">수정</div>
<div class="mi-dep edit button" onclick="updateMyInfo()">확인</div>
<div class="mi-dep edit button cancel" onclick="setEditMyInfo(false)">취소</div>

[javascript]

//내정보 보여주기
function showMyInfo() {
    //my_info 항목 내용 채우기
    document.querySelector("#myInfoId").innerHTML = my_info.id;
    document.querySelector("#myInfoUserName").innerHTML = my_info.user_name;
    document.querySelector("#sp-intro").innerHTML = my_info.introduction;
    document.querySelector("#ip-intro").value = my_info.introduction;
    //radio타입 input 체크 설정
    document.querySelector("#myinfo input[type=radio][value="+my_info.as+"]").checked = true;

    //checkbox타입 input 체크 설정
    //interest항목 전체 check해제 하기
    document.querySelectorAll("#myinfo input[type=checkbox]")
        .forEach(function(checkbox) {
            checkbox.checked = false;
        });
    //myinfo interest항목 check설정 하기
    my_info.interest.forEach(function(interest) {
        document.querySelector("#myinfo input[type=checkbox][value="+interest+"]").checked = true;
    });
}

//myinfo 수정 모드 켜고 끄기
function setEditMyInfo (on) {
    //"edit","non-edit"요소 클래스 선택
    document.querySelector("#myinfo > div").className = on ? "edit" : "non-edit";
    //input항목 입력 활성화
    document.querySelectorAll("#myinfo input").forEach(function(input) {
        input.disabled = !on;
    });
    //수정하다 취소시 입력창 원상복구
    showMyInfo();
}

function updateMyInfo() {
    //소개input 수정한 값 저장
    my_info.introduction = document.querySelector("#ip-intro").value;
    //취미input 수정한 값 저장
    my_info.as = document.querySelector("#myinfo input[type=radio]:checked").value;
    //흥미input 배열로 수정한 값 저장
    let interests = [];
    document.querySelectorAll("#myinfo input[type=checkbox]:checked")
        .forEach(function(checked) {
            interests.push(checked.value);
        });
    my_info.interest = interests;
    //취소버튼 선택시 원래값 그대로 저장
    setEditMyInfo(false);
    //확인버튼 선택시 수정 저장된 값 반영하여 저장
    showMyInfo();
}

5️⃣ article 요소와 photo객체 보여주기

[html]

<section id="gallery" class="dep _gallery ">
  <article class="hidden">
    <div class="photo"></div>
    <div class="info">
      <div class="like"></div>
      <div class="author"></div>
      <div class="desc"></div>
    </div>
  </article>
</section>

[Javascript]

//photos 객체 보여주기
function showPhotos() {
    //현존하는 썸네일 삭제
    let existingNodes = document.querySelectorAll("#gallery article:not(.hidden)");
    existingNodes.forEach(function(existingNode) {
        existingNode.remove();
    }); 
    //gallery클래스 선택
    let gallery = document.querySelector("#gallery");

    photos.forEach(function(photo) {
        //photos객체 보여주기 위한 클론노드 만들고 숨김 풀기
        let photoNode = document.querySelector("article.hidden").cloneNode(true);
        photoNode.classList.remove("hidden");

        //photos 객체 저장
        photoNode.querySelector(".author").innerHTML = photo.user_name;
        photoNode.querySelector(".desc").innerHTML = photo.description;
        photoNode.querySelector(".like").innerHTML = photo.likes;
        photoNode.querySelector(".photo").style.backgroundImage
            = "url('./img/photo/"+photo.file_name+"')";

        // my_info like 선택 시 heart on 표시    
        if (my_info.like.indexOf(photo.idx) > -1) {
            photoNode.querySelector(".like").classList.add("on");
        }
        // toggle버튼 리스너 
        photoNode.querySelector(".like").addEventListener(
            "click", function () { toggleLike(photo.idx) }
        );
        //photoNode에 저장한 객체 gallery에 보내기
        gallery.append(photoNode);
    });
}

function toggleLike(idx) {
    if(my_info.like.indexOf(idx) === -1) {
        //my_info가 좋아요하지 않은 사진일 때 -> 좋아요로 바꿈
        my_info.like.push(idx);
        for(let i=0 ; i<photos.length ; i++) {
            if(photos[i].idx === idx) {
                photos[i].likes++;
                break;
            }
        }
    } else {
        //my_info가 좋아요한 사진일 때 -> 좋아요 해제
        my_info.like = my_info.like.filter(function (it) {
            return it !== idx; 
        });
        for (var i = 0; i < photos.length; i++) {
            if (photos[i].idx === idx) {
                photos[i].likes--;
                break;
            }
        }
    }
    showPhotos();
}

6️⃣ side-bar 정렬기능 넣기

[html]

<ul id="sorts" class="dep _gallery">
  <li class="recent on" onclick="setSort('recent')">최신순 보기</li>
  <li class="like" onclick="setSort('like')">좋아요 순 보기</li>
</ul>
<ul id="filters" class="dep _gallery">
  <li class="all on" onclick="setFilter('all')">전체 사진</li>
  <li class="mine" onclick="setFilter('mine')">내 사진 사진</li>
  <li class="like" onclick="setFilter('like')">좋아요 한 사진</li>
  <li class="follow" onclick="setFilter('follow')">팔로우 회원 사진</li>
</ul>

[Javascript]

//정렬방식(최신순,좋아요순)
let sorts = {
    recent: function (a, b) { return (a.idx > b.idx) ? -1 : 1 },
    like: function (a, b) { return (a.likes > b.likes) ? -1 : 1 }
};
//현재 정렬방식(최신순)
let sort = sorts.recent;

//side-bar 메뉴 선택시 정렬 및 on 표시
function setSort(_sort) {
    //모든 메뉴 on 제거
    let sortButtons = document.querySelectorAll("#sorts li");
    sortButtons.forEach(function(sortButton) {
        sortButton.classList.remove('on');        
    });
    //선택한 메뉴에 on 표시
    document.querySelector("#sorts ."+_sort).classList.add("on");
    sort = sorts[_sort];
    showPhotos();
}

//필터방식(전체,내사진,좋아요한 사진,팔로우한 사진)
let filters = {
    all: function (it) { return true; },
    mine: function (it) { return it.user_id === my_info.id; },
    like: function (it) { return my_info.like.indexOf(it.idx) > -1; },
    follow: function (it) { return my_info.follow.indexOf(it.user_id) > -1; }
}

//현재 필터방식(전체)
let filter = filters.all;

//side-bar 메뉴 선택시 필터 및 on 표시
function setFilter(_filter) {
    //모든 메뉴 on 제거
    let filterButtons = document.querySelectorAll("#filters li");
    filterButtons.forEach(function(filterButton) {
        filterButton.classList.remove('on');
    });
    //선택한 메뉴에 on 표시
    document.querySelector("#filters ."+_filter).classList.add("on");
    filter = filters[_filter];
    showPhotos();
}

⏹showphotos() 함수에 필터&정렬 적용하기

    var filtered = photos.filter(filter);
    filtered.sort(sort);

    filtered.forEach(function(photo) {
        ...
    }

4주차 수강 후기

기본 웹페이지에 생명을 불어 넣는다는 느낌이랄까. 버튼을 클릭 했을때 페이지가 보여지고 동작하는 것에 대한 재미가 느껴졌다. 처음 강의를 들을 때 객체나 배열의 자바스크립트 동작하는 게 아직은 버벅거리지만 두번째 혼자 하면서 함수 기능 및 동작을 제대로 이해할 수 있었다. 여러번 반복하다 보면 익숙해 질 것이라고 생각한다.

JQuery와 Ajax로 환율API를 사용하여 홈페이지 주소 입력시 환율이 바로 보여지게 하기(1주차 과제 화면에 기능 추가)

(1) script부분

//홈페이지 주소 입력시 바로 환율정보 보여주는 기능
$(document).ready(function () {
    exchange();
})

function alarm() {
    alert('주문이 완료 되었습니다!');
}

//환율 API에서 환율정보 가지고 오기
function exchange() {
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/rate",
        data: {},
        success: function (response) {
            let dollar = response.rate;
            temp_html = `<p>달러-원 환율 : ${dollar}</p>`;
            $('#exchange-dollar').append(temp_html);
        }
    })
}

(2) 나머지(body,style)

div태그에 id="exchange-dollar" class="doller"로 명시하여

.dollar {
    color : blue;
    font-size: 1.5em;
    font-weight: bold;
}

로 꾸며주었다.

(3) 최종 화면

(4) 느낀점

JQuery와 Ajax는 처음 다뤄봤는데 자바스크립트랑 동일 선상이라는 느낌을 많이 받아서 크게 이해하기 어려운 부분은 없었던 거 같다. 그래도 강좌에서 배운 부분은 극히 일부분이라고 생각하고 나중에 다른 자료를 찾아서 조금 더 공부를 할 예정이다. API 정보를 가지고 올때 객체 정보를 잘 파악해서 어떤 값을 가지고 와야하는지 헤메지 않도록 반복 연습 잊지 말기!

패스트캠퍼스에서 백엔드과정 프리코스로 [프로그래밍기초] 수업을 듣고 있지만, 설 연휴기간에 스파르타코딩클럽에서 제공하는 무료강의 2개(덕담코딩,코딩용어)를 듣고 나서 핵심만 딱딱 집어준다는 느낌이 들어 웹개발종합반 국비지원 강의도 신청해서 듣게 되었다. 5주 코스인데 최대 8개 강의까지 들을 수 있어서 하루에 8개씩 쭉쭉 듣고 있는 중이다.

1주차 과제

아래 기획서를 보고, 부트스트랩을 활용해서 나만의쇼핑몰의 메인 페이지를 완성해주세요.(아이템은 랜덤)

• 기능: 주문하기 버튼을 클릭했을 때 '주문이 완료되었습니다.'라는 얼럿을 띄워주세요.

(1) html(body부분)

input요소들은 부트스트랩에 있는 템플릿을 사용하였으니 참고하면 될꺼 같다.

<div class="wrap">
    <div class="product_photo"></div>
    <div class="product_desc">
        <h1>락앤락 퓨어텀블러<span>가격:12,500원/1개</span></h1>
        <p>다섯가지 파스텔 컬러로 만나는 퓨어텀블러! 한손으로 간편하게 오픈하는 스윙형 뚜껑. 좌우로 돌려 간편하게 오픈하는 스윙형 마개로 운전 중에도
            한 손으로 캡을 열어 마실 수 있으며, 오픈 된 마개에 스트로우를 꽂아 사용할 수 있어 편리합니다. 아래가 좁아지는 디자인으로 그립감을 살려
            한 손에 들고 마시기 편리하며, 차량 컵 홀더에도 거치하기 좋아요.</p>
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">주문자 이름</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <label class="input-group-text" for="inputGroupSelect01">수량</label>
        </div>
        <select class="custom-select" id="inputGroupSelect01">
            <option selected>--수량을 선택하세요--</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">주소</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">전화번호</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <button type="button" class="btn btn-primary" onclick="alarm()">주문하기</button>
</div>

(2) CSS,Javascript

<style>
    * {
        font-family: 'Nanum Pen Script', cursive;
    }

    .wrap {
        width: 600px;
        margin: 50px auto;
    }

    .product_photo {
        width: 400px;
        height: 400px;
        margin: 10px auto;
        background-image: url("http://img.danawa.com/prod_img/500000/990/828/img/8828990_1.jpg?shrink=330:330&_v=20210309173752");
        background-position: center;
        background-size: cover;
    }

    .product_desc span {
        font-size: 24px;
    }

    .product_desc p {
        font-size: 20px
    }

    .btn-primary {
        display: block;
        margin: 0 auto;
    }
</style>

<script>
    function alarm() {
        alert('주문이 완료 되었습니다!');
    }
</script>

(3) 최종 화면

(4) 느낀점

부트스트랩 템플릿을 이용하니 만족스러운 디자인으로 웹페이지를 만들수 있어서 좋은 거 같다. 처음부터 하나하나 짜보는 것도 중요하지만 필요한 기능을 찾아서 적절히 사용하는 것을 많이 할거 같아서 중요한 부분과 필요한 코드를 따로 정리하여 한눈에 볼 수 있도록 보관해야 겠다.

3주차 강의는 CSS부분 전체적인 내용으로 html,css문서를 따로 저장하여 작성하는 것까지 만들어 보았다.

(1) 과제 내용

• 아래 사이트에 CSS 요소들을 적용해 완성하는 과제이다.
• 대략적인 코드는 작성이 되어 있는 상태이고 main태그의 content클래스의 CSS를 입혀주면 된다.

(2) 과제 결과

• 원래는 주황색인 것을 보라색으로도 변경해 보았다.
• 크게 어려운 부분은 없었는데 gird 레이아웃의 개념이 처음에 잘 안잡혀서 별도로 개념 검색을 했는데 좋은 사이트를 발견해서 참고로 남겨둔다.(https://studiomeal.com/archives/533)

3주차 수강 후기

CSS부분 강의로 듣고 나니 전반적으로 소스를 보면 어떤 속성들이 쓰였는지 확인이 가능할 정도가 된거 같다. 아직까지는 클론코딩 하는 것도 버벅 거리지만 많이 연습하다 보면 이것 또한 익숙해질 거라고 생각한다. 반복만이 살길! grid 레이아웃을 생각할 때와 margin/padding을 어느 부모/자식에 넣어야 되는지가 헷갈리는데 이부분을 중점으로 확실히 집고 넘어갈 수 있도록 해야겠다.

2주차

2주차 강의는 HTML 뼈대 만들기 내용으로 body태그 내에 작성되는 HTML기본 태그 위주의 강의였다. 주로 사용하는 div태그와 class명을 잘 주어야 하는 것, 좋은 코드를 위해 시맨틱 태그를 잘 활용해야 하는 점을 숙지하였다. 과제로 주어진 코드에 빈칸을 채우는 형식으로 aside클래스 부분 section intro클래스 부분, 테이블을 이용한 section form 클래스 부분을 만들어 보았다.

(1) aside클래스, section intro 클래스

• ul, li 태그를 이용해서 aside 클래스 작성

  <aside class="aside">
    <div class="option-title">사진 업로드</div>
    <!-- 이곳을 채워넣으세요. -->
    <ol>
        <li>양식을 작성한다.</li>
        <li>사진파일을 첨부한다.</li>
        <li>올리기 버튼을 누른다.</li>
    </ol>
  </aside>

• h1, p 태그를 이용해서 section intro 클래스 작성

  <section class="section intro">
     <!-- 이곳을 채워넣으세요. -->
    <h1>사진 올리기</h1>
    <p>
    수많은 이용자들이 공유하는 멋진 <b>사진</b>들을 구경하고<br>
    내가 직접 찍은 작품들을 공유하세요!
    </p>
  </section>

  

(2) section form 클래스

• table, form 태그를 이용하여 작성

  <section class="section form">
    <!-- 이곳을 채워넣으세요. -->
    <table>
        <caption>사진 업로드 폼</caption>
        <tr>
            <th>저자 정보</th>
            <td>
                <label for="uName">이름</label>
                <input id="uName" type="text" />
                <br>
                <input id="public" name="person" type="radio" checked />
                <label for="public">일반인</label>
                <input id="master" name="person" type="radio" />
                <label for="master">전문가</label>
            </td>
            <td rowspan="3">
                <p>패스트캠퍼스 광고</p>
                <img src="img/fastcampus-ad.png" alt="패스트캠퍼스 광고"/>
                <p>패스트캠퍼스의 프로그래밍 첫걸음 올인원 패키지 강좌로<br>여러분의 설레는 첫 코딩을 시작하세요!</p>
                <a href="https://fastcampus.co.kr/" target="_blank">패스트캠퍼스 사이트 바로가기</a> 
            </td>
        </tr>
        <th>사진 정보</th>
        <td>
            <label for="title">제목</label>
            <input id="title" type="text" />
            <br>
            <label for="thema">주제</label>
            <select id="thema">
                <option value="nature">자연</option>
                <option value="city">도시</option>
                <option value="object">사물</option>
                <option value="people">사람</option>
                <option value="animal">동물</option>
            </select>
            <br>
            <label for="explain">설명</label>
            <textarea id="explain" placeholder="사진에 담은 생각 등을 자유롭게 적어주세요." rows="15"></textarea>
        </td>
        <tr>
            <th colspan="2" align="left">
                <label for="photo">사진 첨부</label>
                <input id="photo" type="file" />
            </th>
        </tr>
        <tr>
            <th colspan="3" align="left">
                <button type="submit">올리기</button>
                <button type="button">취소</button>
            </th>
        </tr>
    </table>
  </section>

  

2주차 수강 후기

아직 이해하기 어렵거나 복잡한 게 나오지 않아 특별히 어렵거나 힘든 점은 없다. 점점 진도가 나가면서 나오는 개념들을 따로 정리를 해서 반복적으로 볼수 있도록 단원화를 하고 있다. 아직 영타가 어색해서 느린편인데 예제 코드나 클론 코딩을 하면서 반복적으로 꾸준히 하다 보면 나아질 것이라고 생각한다.

프로그래밍 기초를 배우는 건 아니였고 "메가바이트 스쿨-핀테크 서비스 백엔드 개발자 취업 완성"수강의 프리 코스로 수료시 가산점이 있다고 해서 수강하게 되었고, 기초도 다시 복기할 겸 빠르게 수강할 계획이다.

1주차

1주차 강의는 강의 진행방식과 프로그래밍 공부 시작 전 개요의 내용이 대부분으로 가볍게 들었고 그 중에 "개발자와 대화하기" 부분에서 익숙치 않은 키워드 중심으로 따로 정리를 해봤다. 기술 면접 등 개념을 익히는 정도로 보면 좋을꺼 같다.

(1) 퍼블리셔 : 정해진 일정에 따라 인터넷상에서 정보나 콘텐츠를 수집하고 이용자에게 정보를 제공하는 서비스를 수행하는 프로그램(시각화를 위한 가벼운 코딩정도)

(2) 브라우저의 호환성

• 웹 표준 : 어떤 브라우저를 쓰든 표준화에 맞춰서 제작(크롬,사파리 등)

         ※인터넷 익스플로러 : 유일하게 웹 표준을 지키지 않는 존재

• 호환성 : 어떤 브라우저를 사용하던 동일하게 보여지게 하는 것

(3) Native, WebApp

• Native : 각 모바일 OS에 따라 맞춰서 개발(둘다 돌아가는 것도 있음:플러터)/해당환경에 최적화되어 있음,개발자를 따로 둬야함, 업데이트에 대한 불편(검토 및 심사시간발생)
• WebApp : 앱 안에 웹사이트 형태로 올라가게 개발/바로 변경이 가능하다. 성능의 제약은 있음

(5) 적응형, 반응형 크기에 따라 PC용/모바일용 따로 보여지는 사이트 → 적응형 웹 페이지를 하나만 만들어서 페이지 크기에따라 변화하는 사이트 → 반응형 웹

(6) 쿠키, 세션, 캐시

• 쿠키 : 특정 정보가 사용자의 브라우저에 저장하게끔 하는 것/내가 직접 끌고 다니는 카트 개념/수정,삭제 가능
• 세션 : 서버에 저장하게끔 하는 것/마트측에서 보유한 나의 정보/보안상의 정보
• 캐시 : 용량이 큰 파일의 경우 재 접속했을 때 따로 보관하는 것(재사용)

(7) 프레임워크 : 특정 종류의 소프트웨어를 만들기 위한 키트, 서버 프로그램 틀(뼈대)을 만들어놔서 손쉽게 쓸수 있게 하는것

(8) 호스팅, AWS, 클라우드

• 호스팅 : 기업의 대용량 메모리 공간 일부를 이용하여 사용자의 홈페이지나 웹 서버 기능을 대행하는 서비스
• AWS : 인프라를 빌려주는 클라우드 서비스
• 클라우드 : 데이터를 인터넷과 연결된 중앙컴퓨터에 저장해서 인터넷에 접속하기만 하면 언제 어디서든 데이터를 이용할 수 있는것

1주차 수강 후기

뒤늦게 전공을 살려서 취업하기 위해 투자하는 만큼 기본기부터 제대로 다져서 내 것으로 만들자라는 생각을 가지고 수강하였다. 이후 웹페이지 만드는 강의 부터는 좀 더 깊게 파보는 노력을 하기 위해 마음을 다 잡아야겠다.

이번에 스파르타코딩클럽에서 설 무료강의로 덕담 공유 페이지 만들기 강좌가 있어서 맛보기 겸해서 수강하게 되었다. 가장 기본적인 HTML과 CSS코딩만 가지고 만들 수 있어서 프론트엔드에 관심있는 취준생에게는 좋은 강좌라고 생각한다. 이번 목표는 배포까지 하는 과정을 이해하는데에 의미를 두었다.

VS Code 프로그램으로 코딩

HTML body구조

<body>
    <div class="background">
        <div class="title">
            <h1>덕담 하나 주면 안 잡아먹지!</h1>
            <p>경철 님이 받은 덕담 : <span>2개</span></p>
        </div>
        <div class="box"></div>
        <div class="btn">바구니에 덕담 남기기</div>
    </div>

</body>

크게 div구조로 4개의 구조로 클래스명으로 background, title, box, btn 으로 만들었다

(1) background클래스 CSS

.background {
    width: 100vw;
    height: 100vh;

    max-width: 450px;

    background-image: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png');
    background-position: center;
    background-size: cover;
    margin: auto;
}

이미지는 강좌에서 제공하는 이미지로 모바일 환경 기준으로 짤리지 않도록 viewpoint 너비,높이의 100%로 잡아주고 가운데 정렬하였다.

(2) title클래스 CSS

.title {
    color: #3f3732;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding-top: 5vh;
}

.title > h1 {
    font-size: 22px;
    background-color: white;
    padding: 8px 16px;
    border-radius: 16px;

    margin-bottom: 16px;
}

.title > p {
    font-size: 16px;
}

.title > p > span {
    font-size: 20px;
    font-weight: bold;
}

이 부분의 CSS로 여기서 h1태그와 p태그로 나눠서 따로 적용을 하였고 글을 쓸때마다 증가된 갯수를 카운트 하기위해 span태그와 속성을 따로 줘서 사용하였다.

(3)box클래스 CSS

.box > img {
    width: 70px;

    position: absolute;
    bottom: 50%;
    left: 50%;
}

가운데에 뿌려주는 이미지 공간으로 자유로운 배치를 위해 position:absolute; 속성을 주었다.

(4) btn클래스 CSS

.btn {
    background-color: #3f3732;
    color: white;

    width:300px;
    height: 50px;
    border-radius: 10px;
    font-size: 18px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    position: fixed;
    bottom: 16px;

    left: calc(50% - 150px);
}

덕담 남기기 버튼의 CSS 속성으로 배경기준 하단 고정된 위치에 가운데 정렬로 위치하고 마우스를 올렸을 때 손가락 모양의 커서도 같이 표현하였다.

하여 Javascript와 폰트 CSS까지 추가하고 강좌에서 미리 만들어 놓은 AWS를 통해 배포하면 다음과 같은 페이지가 완성된다.

https://deokdam.spartacodingclub.kr/PceF0ZBHIBrP/index.html (덕담갯수가 3,6,9,...로 증가되면 background에 호랑이 그림이 바뀌는 숨은 javascript코드도 같이 있다)

개발자 전향을 하게된 이유

컴퓨터전공을 졸업했지만 20살때부터 서비스직 아르바이트를 하였고 졸업해서도 이 직종이 맞다고 판단하여 쉼 없이 일을 하였다. 2015년도에 졸업때만 해도 개발직군이 빛을 보지 못했는데 2020년 접어들면서 체감상 개발자 열풍이 불어온거 같았다. 그 때만 해도 매장(현장)쪽으로만 일을 해서 직종을 전환 하리라고는 생각지도 않았다. 왜냐면 월급 제때나오고 나름 만족하면서 살았었으니깐... 그러다 2021년 9월에 모빌리티 회사 플랫폼운영팀에서 CS업무로 이직을 해서 일을 하게 되었고, 고객CS 뿐만 아니라 서비스운영까지 일을 하다보니 앱서비스 런칭 전에 시범서비스 진행을 구글 시트 수기로 진행하였다. 그러다 보니 "수기로 하는 일을 시스템화 하는게 오래 걸리고 어려운건가?"라는 의문점으로 시작해서 지금 내가 하고 있는 일이 소모적일 뿐 내 커리어에 도움이 되지 않는다는 생각이 불현듯 들기 시작했다.

그래서 더 늦기전에 전공을 살려 일을 해보자 결심을 하게 되었고, 친구가 조언도 이것저것 해줘서 2022년 1월 인프런 강의부터 다시 복기하기 시작했다. 프론트보다는 백엔드 서버 개발이 경쟁력이 있다고 판단하였고 국비지원 찾아보던 중에 패스트캠퍼스에서 진행하는 백엔드 과정을 신청하였다.

패스트캠퍼스 국비지원 강의명 : [핀테크 서비스 백엔드 개발자 양성 과정] 본 과정 : 2022년 3월 28일 개강(7개월) 13:00~22:00

교육내용 :

처음에 신청서를 내고, 기초소양평가, AI면접까지 치르고 나서 그 후 프리코스 과정 수료 안내가 와서 현재는 수강 신청해서 대기 하고 있는 상태이다.

Pre-course : 2022년2월9일 ~ 3월16일(5주과정) 강의명 : 패스트캠퍼스 K-디지털 크레딧 '프로그래밍 첫걸음 시작하기' 교육내용 : HTML/CSS/JavaScript

원래는 직장 다니면서 하려했지만 올해 안에 전향하고자 1월까지만 회사를 다니고 길면 1년 짧으면 해당 과정 수료 후에 이직 하려고 한다.

정보처리기사도 올해 1차 필기시험 신청 완료하여 본 과정 들어가기 전에 필기 합격을 만들어 놓을 예정이다.

2022년3월5일(토) 13:00 정보처리기사 필기시험

늦은만큼 조바심도 나고 조급해진 것은 맞지만 올해 상반기 열심히 해서 좋은 결과가 나왔으면 좋겠다.

(1) 먼저 github에 회원가입 후 로그인 하면 아래 화면처럼 나타납니다. (2) new 버튼을 누르면 아래 화면으로 전환되며 github에 저장소 이름과 Public(전체공개)을 설정 후 Create repository를 입력합니다. (3) github에 Test3 이름의 저장소가 생성되었고 이제 이 저장소에 eclipse에서 생성한 자바프로젝트를 연동을 합니다.

추가적으로 eclipse에서 push 인증시 21.8.13부로 비밀번호 인증이 끝났고 토큰을 사용해야 하기 때문에 토큰 생성법을 알려드릴게요

(1) github 우측 상단의 계정을 클릭하면 Settings 메뉴가 보입니다. 들어가셔서 왼쪽 메뉴 중에 "Developer settings"에 들어가서 "Personal access tokens"-"Generate new token"을 들어가주세요. (2) Note에 토근 이름을 작성하고 Select Scopes에서 repo를 체크한다. ※ 레퍼지터리 관리 정도만 할 거라면 repo에 체크해준다. (3) 토큰이 생성되었고 따로 보관을 위해 복사를 해놓는 것을 권장한다. 이제부터는 github에 push 등의 작업을 수행할 때, pw를 입력하라고 하면 방금 생성한 토큰을 입력하면 된다.

eclipse 연동하기

제가 알고 있는 방법으로 설명드리는 거라서 다른 방법대로 하는 것도 좋다고 생각합니다. 편하신 방법으로 사용해보세요!

(1) 자바 프로젝트 우클릭-Team-share Project 클릭 (2) 첫번째 빨간색 상자 클릭 후 → 두번째 빨간색 상자를 클릭하면 Create Repository버튼 옆에 주소가 자동 입력되며 Create Repository버튼 클릭 → Finish버튼 클릭 (3) 자바 프로젝트 우클릭-Team-Add to Index클릭 후 자바 프로젝트 우클릭-Team-Commit 클릭(Commit은 local pc의 저장소에 변경된 내용을 반영하는 과정) (4) Commit Message에 간단하게 작성(예-Commit) 후 Commit and Push버튼 클릭 (5) URL에 생성한 github 저장소 주소를 넣고 아이디/토큰을 입력 후 Preview버튼 클릭 (6) 각 생성되는 팝업창의 Preview/Push 버튼을 눌러주면 완료 / 마지막 팝업창의 Close버튼 (7)해당 github 저장소 가면 연동이 잘 되어있는 것을 확인할 수 있습니다.

여기까지 github에 eclipse 연동하기 였고요. 구글에 검색하면 많이 나와 있지만 한번 정리를 하면 좋을꺼 같아서 올려봤습니다.