어제 합류하고 나서 바로 사전 스터디를 신청했더니 오늘 팀을 매칭해줬다.

나 포함 5명.

나랑 똑같이 어제 합류하신 분 빼고는 이미 진도가 많이 나가신거 같아서 빠르게 따라 잡아야겠다.

지금 계획으로는 일단 1주씩을 하루 안으로 진도 나갈 계획.

일단 1회차 강의는 각자 진도를 내고 1회차가 종료하면 2회차를 팀원분들과 같이 진도를 내면서 아이디어를 모아 본격 수업 일주일 전에 한가지 토이 프로젝트를 진행해 보기로 했다.

다들 의지가 대단해서 나도 덩달아 의지가 솟는 느낌! 

2-1 / 2주차 오늘 배울것

Javascript 복습 : 홀수 판별

  

    
    
    
    Copy
  
let count = 0
function hey(){
	count += 1
    if (count % 2 == 0){
		alert('짝수입니다')
    } else {
		alert('홀수입니다')
    }
}

2-2 / JQuery 시작하기

JQuery 란?

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리. 누군가가 CSS를 편하게 부트스트랩 처럼 만들어 놓은거 처럼 JQuery또한  Javascript를 편하게 작성해둔 것. JQuery가 javascript 보다 직관적.

2-3 / JQuery 다뤄보기

CSS에서는 class로 이름을 지칭해서 다뤘다면 JQuery에서는 id로 이름 지칭해서 다룸

value값을 주는 JQuery를 먹이고 싶다면

  

    
    
    
    Copy
  
// jQuery & console
// #url  - id가 url인 것을 찾아
// $( ) - jQeury를 먹일건데
// .val() - value 값을 먹이고 싶다 라는 표현을 아래처럼 표현

$('#url').val('입력을 하고 싶다')

value값을 받아오는 JQuery를 먹이고 싶다면

  

    
    
    
    Copy
  
$('#url').val()

특정 부분을 숨기고 싶다면 or 보여주고 싶다면

  

    
    
    
    Copy
  
// 1
// 원하는 부분에 아이디 부여 ex) <div class="mypost" id="post-box">
// 숨기는 함수 hide() / 보여주는 함수 show()

$('#post-box').hide()
$('#post-box').show()

특정 부분을 추가로 붙이고 싶다면

  

    
    
    
    Copy
  
// 일반 문자열과 변수등을 같이 편리하게 사용할 수 있게 하는 `(백틱,ESC아래키) 사용, 자바스크립트에서만 가능

let temp_html = `<div class="col">
        <div class="card h-100">
          <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
               class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">여기에 제목이 들어갑니다.</h5>
            <p class="card-text">여기에 내용이 들어가지요.</p>
            <p>⭐⭐⭐</p>
            <p class="mycomment">여기에 코멘트가 들어가지요.</p>
          </div>
        </div>
      </div>`
     
// 원하는 아이디 부분에 해당 요소를 덧붙임
$('#cards-box').append(temp_html)

2-4 / JQuery 적용하기 (포스팅 박스)

onclick과 hide(), show() 사용

  

    
    
    
    Copy
  
function open_box(){
  $('#post-box').show()
}
function close_box(){
  $('#post-box').hide()
}

해당하는 각각의 버튼에 onclick으로 적용시키고 기본적으로 포스팅 박스를 안보이게 하기 위해서

포스팅 박스의 CSS에 display:none; 적용

2-5 /  Quiz_JQuery 연습하기

Q1

(내가 짠 코드)

  

    
    
    
    Copy
  
function q1() {
  let val1 = $('#input-q1').val()
  if (val1 == ''){
    alert('입력하세요!')
  } else {
    alert(val1)
  }
}

Q2

(내가 짠 코드)

includes() : 문자열 안에 특정 문자, 문자열이 있는지 확인하는 함수 (반환값: true / false)

  

    
    
    
    Copy
  
function q2() {
  let val2 = $('#input-q2').val()
  let alert_message = ''
  if (val2.includes('@')){
    alert_message = val2.split('@')[1].split('.')[0]
  } else {
    alert_message = '이메일이 아닙니다'
  }
  alert (alert_message)
 }

+ 궁금증

+ 참고

(선생님 코드)

  

    
    
    
    Copy
  
function q2() {
  let val2 = $('#input-q2').val()
  if (val2.includes('@' == true)){
    alert(val2.split('@')[1].split('.')[0])
  } else {
    alert('이메일이 아닙니다')
  }
 }

Q3 (내가 짠 코드)

Javascript의   `(백틱) 안에서 변수를 쓸땐 ${ } 달러사인과 브레이스 사용 

  

    
    
    
    Copy
  
function q3() {
  let val3 = $('#input-q3').val()
  let temp_html = `<li>${val3}</li>`
  $('#names-q3').append(temp_html)
}

function q3_remove() {
  $('#names-q3').empty()
}

2-6 /  서버-클라이언트 통신 이해하기

서울시에서 내려주는 실제 데이터 형태 살펴보기

JSON을 좀 더 정렬된 형태로 보여주는 크롬확장프로그램 JSONView 설치

https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko 

API 란? 

비유하자면 은행 창구. 같은 창구이지만 고객이 다양한 서비스를 요청하고 거기에 맞게 제공하는 것처럼 클라이언트 요청 타입에 따라 데이터를 처리

• 요청 타입 종류

•  GET : 주로 데이터 조회 (Read)를 요청할 때

위 주소에서 "?"를 기준으로 앞부분은 <서버주소>, 뒷부분은 <영화번호>

GET 방식은 ?마크 이후부터 전달할 데이터가 작성 되고 하나 이상의 데이터가 전달 될때는 &(앰퍼샌드)로 추가

전달되는 데이터 변수명은 FE개발자와 BE개발자의 약속으로 결정

• POST : 주로 데이터를 생성(Create), 변경(Update), 삭제(Delete) 요청할 때               (웹개발 종합반 4주차에서 공부) 

2-7 /  Ajax 시작하기

Ajax 란?

Javascript의 라이브러리 중 하나로 비동기식 자바스크립트와 xml (Asynchronous Javascript And Xml)의 약자이다.

전체 페이지를 새로 고침하지 않고 페이지 일부만을 위한 데이터를 로드하는 기법. 자바스크립트로 서버에 요청하는 것

https://99geo.tistory.com/65

JSON 이란? 

비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷

https://velog.io/@surim014/JSON%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

  

    
    
    
    Copy
  
    $.ajax({
      type: "GET",
      url: "http://spartacodingclub.shop/sparta_api/seoulair",
      data: {},
      success: function (response) {
        console.log(response['RealtimeCityAir'])
      }
    })
    
    // Get타입
    // 해당 url에 요청
    // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
    // success: 성공하면, response 값에 서버의 결과 값을 담아서 콜백함수를 실행

콜백 함수란
1. 다른 함수의 인자로써 이용되는 함수.
2. 어떤 이벤트에 의해 호출되어지는 함수.

https://satisfactoryplace.tistory.com/18

좀 더 원하는 데이터를 뽑기 위한 처리

  

    
    
    
    Copy
  
    $.ajax({
      type: "GET",
      url: "http://spartacodingclub.shop/sparta_api/seoulair",
      data: {},
      success: function (response) {
        let rows = response['RealtimeCityAir']['row']
        //데이터 구조를 잘 이해해서 뽑아야
        for(let i = 0; i < rows.length; i++){
          console.log(rows[i]['MSRSTE_NM'],rows[i]['IDEX_MVL'])
        }
      }
    })

2-8 /  Ajax 함께 연습하기

  

    
    
    
    Copy
  
function q1() {
  $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    data: {},
    success: function (response) {
      $('#names-q1').empty()
      let rows = response['RealtimeCityAir']['row']
      for (let i = 0; i < rows.length; i++){
        let gu_name = rows[i]['MSRSTE_NM']
        let gu_mise = rows[i]['IDEX_MVL']
        let temp_html = ``

        if (gu_mise > 40){
          temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
        } else {
          temp_html = `<li>${gu_name} : ${gu_mise}</li>`
        }
        
        $('#names-q1').append(temp_html)
      }
    }
  })
}

// 하필? 날씨가 너무 좋아서 기준을 40으로 함

2-9 /  Quiz_Ajax 연습하기(1)

2-8과 유사하지만 서울 따릉이 데이터를 가지고 출력해보기

  

    
    
    
    Copy
  
    function q1() {
      $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                  $('#names-q1').empty()
                  let rows = response['getStationList']['row']
                  for (let i = 0; i < rows.length; i++){
                    let name = rows[i]['stationName']
                    let rack = rows[i]['rackTotCnt']
                    let bike = rows[i]['parkingBikeTotCnt']
                    let temp_html = ``

                    if (bike < 5){
                        temp_html = `    <tr class="urgent">
                                            <td>${name}</td>
                                            <td>${rack}</td>
                                            <td>${bike}</td>
                                          </tr>`
                    } else {
                        temp_html = `    <tr>
                                            <td>${name}</td>
                                            <td>${rack}</td>
                                            <td>${bike}</td>
                                          </tr>`
                    }

                    $('#names-q1').append(temp_html)
                  }
                }
              }
      )
    }

2-10 /  Quiz_Ajax 연습하기(2)

이미지와 텍스트 교체

  

    
    
    
    Copy
  
function q1() {
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/rtan",
        data: {},
        success: function (response) {
            let rtan_msg = response['msg']
            let rtan_url = response['url']

            $('#img-rtan').attr('src',rtan_url)
            $('#text-rtan').text(rtan_msg)
        }
    })
}

2-11 /  숙제 설명

서울시 온도 데이터 가져와서 적용하기

1-1 / 1주차 오늘 배울것

1-2 / 필수 프로그램 설치

1. 파이참 설치 - "Professional 버전으로 다운"

별도의 설정사항 없이 Next로 넘겨 설치 

https://www.jetbrains.com/ko-kr/pycharm/download/#section=windows

2. JetBrains 회원가입

https://account.jetbrains.com/login

3. 스파르타에서 제공하는 라이센스 코드를 입력 (4개월 짜리용) 

4. 해당계정으로 파이참 로그인 및 라이센스 엑티브

5. AWS 가입

https://portal.aws.amazon.com/billing/signup#/start

1-3 / HTML, CSS 기본내용

prac.html 생성

1-4 / HTML 기초 실습

로그인 틀 만들기

1-5 /  CSS 기초

이름(클래스)를 붙여주고 이름표를 어떻게 하라고 수식한다.

CSS 부모자식 관계를 따른다.

head 부분에 <style></style>을 추가하여 안에 작성하거나 별도의 css파일을 만들어 링크로 연결하여 사용

1-6 / CSS 실습

백그라운드 이미지, 글자 배열, padding, margin, font color, width, height, border-radius 등

1-7 / 폰트, 주석, 파일분리

구글 폰트에서 마음에 드는 것을 선택

1번은 title 아래에

2번은 style 안 * {} 안에  (CSS 안에서 * {} 은 모든것에 적용되는 CSS)

1-8 / 부트스트랩, 예쁜 CSS 모음집

https://getbootstrap.com/docs/5.0/components/

1-9 / CSS 꿀팁 한번 더 배우기

* 내용물 정렬할 때

  

    
    
    
    Copy
  
.mytitle {
    display: flex;
    flex-direction: column;
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;
}

* 배경이미지에 변화주기 (url 앞에 linear-gradient)

  

    
    
    
    Copy
  
.mytitle {
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) , url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
background-position: center;
background-size: cover;
}

1-10 / 본격 부트스트랩 써보기

부트스트랩 카드 이용

한 row마다 카드 개수 바꾸는 건 부트스트랩의 Grid system을 이해하면 됨

https://getbootstrap.com/docs/5.0/layout/grid/

  

    
    
    
    Copy
  
<div class="row row-cols-1 row-cols-md-3 g-4">

row-cols-md-3 : md 사이즈 display에서 또는 그 이상 경우 col 3개가 1개의 row로 

row-cols-1 : 그 보다 작은 디스플레이 경우 col 1개가 1개의 row로

https://record-than-remember.tistory.com/entry/bootstrap-%EA%B7%B8%EB%A6%AC%EB%93%9Cgrid

https://csmoon.tistory.com/21

1-11 / Quiz_포스팅박스를 완성하기!

모바일 처리 예시 (최대 500px까지 커질수 있고 그 전까지는 화면의 95%까지만 채운다)

  

    
    
    
    Copy
  
.mypost {
  max-width: 500px;
  width: 95%;
  }

1-12 / Javascript 맛보기

Javascript란?

프로그래밍 언어 중 하나로 브라우저가 알아듣는 언어. 여러언어로 만들게 되면 그 언어 마다의 전용 브라우저가 필요하는 등의 혼란을 야기할 수 있기 때문에 모두가 약속 즉, 표준을 만들었다. 그것이 바로 Javascript.

이름으로 Java와 관련있어보이지만 둘은 전혀 상관관계가 없다.

head 부분에 <script></script> 을 추가하여 안에 작성

1-13 /  Javascript 기초 문법 배우기(1)

크롬에서 F12로 눌렀을때 뜨는 console 창이 script 안과 동일하다 보고 테스트할때 F12를 적극 활용

프로그래밍 언어를 배울때 알아두어야할 것 5가지 : 변수, 자료형, 함수, 반복문, 조건문

list = 데이터를 한번에 모아놓고 정렬한 자료형  ( [ ] 사용 )

+ list형 변수.push(넣을데이터) = list에 데이터 추가

dict = 딕셔너리, key 와 value로 정리되어진 자료형 ( { } 사용 )

+ 변수명.split('@') = at 사인 기준으로 나누어 리스트로 반환 (원래 변수값이 변하는 건 아님)

  

    
    
    
    Copy
  
let mymail = 'sparta@gmail.com'
mymail.split('@')
// ['sparta','gmail.com']
mymail.split('@')[1]
// 'gmail.com'
mymail.split('@')[1].split('.')
// ['gmail','com']
mymail.split('@')[1].split('.')[0]
// 'gmail'

1-14 /  Javascript 기초 문법 배우기(2)

헤더부분부터 읽히기 때문에 바디보다 먼저 스크립트가 읽힘

조건문 if문 

  

    
    
    
    Copy
  
function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	} 
}

is_adult(19)

// 청소년이에요

반복문 for문 

  

    
    
    
    Copy
  
let a_list = ['사과','배','감','딸기']
for (let i = 0; i < a_list.length; i++){
	console.log(a_list[i])
}

// 사과
// 배
// 감
// 딸기

1-15 /  Javascript 연습

실제 데이터로 특정값 출력하기

1-16 /  숙제 설명

배운것을 기초로 html과  css를 사용하여 페이지 만들어 제출!

합격하고 나서 결제를 하고 나면 사전 준비사항이 안내된다

설치해야할 것, 사전 스터디, 사전시험 등 다양하게 안내함

slack과 notion, gather를 이용해 주로 소통하는 거 같아서 일단 전부 가입 

슬랙공지에서 사전 스터디를 신청할 수 있어서 바로 신청했다 

나름 사람의 성향따라 팀 구성해주려고 mbti나 취향을 묻는게 귀여워 보였음 ㅋㅋㅋ 

일단 11월 7일에 본격 항해를 하기전

사전 시험 대비 및 기초 지식을 위한 웹강의를 2회 완독 하는 것을 의무로 하게 된다.

아직 스터디 팀 배정은 안됬지만 먼저 시작하는 걸로 

오랜만에 다시 개발자로 이력서 쓰고 면접 보면서 내가 너무 전에 무르게 일했다는걸 알게됬다

경력자체도 빈약한데 거기에 3년이라는 공백이라니 이제와서 했던일을 정리하기에도 여러모로 부족하다.

이 상태로면 취업이 되고 대화가 안될거 같아 무서울 정도

이러다 보니 이력서에 그럴듯하게 써놓고서 면접때는 꿀먹은 벙어리가 됬다

최근들어 IT쪽은 보지도 않았으니까 새로운 기술에 대해서도 일체 모르고..

면접 보면 볼수록 아.. 나라도 안뽑겠다라는 자괴감이 들더라

신입보다 못한 애매한 경력직 그게 바로 나다. 

그래서 다시 시작하려고 하니 국비지원 쪽은 다 방식이 비슷함을 알았다.

나라에서 정해주는 커리큘럼을 따라야 한다나

그래서 이거저거 찾아보다가 재정적으로 시간적으로 가장 맞아보이고 본격적인 협업을 경험해 볼 수 있어보이는 항해99를 지원해보려고 한다.

후기 보면 비전공자와 전공자의 격차가 크고 중도하차도 많다는 이야기도 많지만

좋은 사람들과 성장하면서 오롯이 프로젝트를 경험하고 피드백 받는거 같아서 괜찮아보인다.

홈페이지를 통해 자신의 전공여부, 나이, 연락처 등과 지원하는 마음가짐에 대한 글을 적고 제출하면 바로 면접스케쥴을 잡아주는 연락이 온다

10월 04일에 4시 반쯤 지원했고 면접은 바로 당일 오후 9시에 잡히는거 보니 일 처리는 여태 경험해 봤던 스피드와는 차원이 다르긴 하다. 

면접은 어떨까 면접 노이로제인 나는 이것도 살짝 떨리네 ㅠ 

면접은 Gather을 이용한 가상현실에서 함 

8시 55분에 보내주신 링크를 통해 접속하면 내 카메라와 마이크를 체크할 수 있는 화면과 캐릭터 커마(아 못참지), 그리고 이름을 적을수 있는 창이 나온다. 

다 설정 확인하고 들어가면 아래 같은 이미지처럼 교무실같은 느낌의 공간으로 들어가게 된다.

후기로는 알고 있었는데 뭔가 시각적으로 보이니까 일반 화상면접이랑 느낌이 다르달까.

면접관님은 항해99 5기 수료하시고 지금 현업으로 계시는 개발자님이셨다.

수료하고 싶은 캠프를 졸업하시고 현업에 계시는 분이라서 그런지 급 친근하게 느껴지고 더 적극적으로 물어볼 수 있었다.

주로 묻는 질문은 왜 강의를 듣고자 하는지, 왜 항해99를 선택했는지, 어떤 개발자가 되고 싶은지 등의 의지에 관련된 질문이었다.

전혀 면접의 딱딱한 느낌이 아니라 오히려 상담하는 느낌으로 편안하게 25분 정도 대화를 했다. 너무편해서 중간에 자세가 흐트러질뻔

끝나고 면접 결과도 오늘 중에 통보해주신다고 한다. (뭐야 이 속도 난생 처음보는 속도야)

10시 반에 결과 날아옴!! 합격!!!