프로그래밍 기초 마지막 강의의 주제는 다음과 같다. <개발자 커리어 로드맵> --> 이 주제에 대해 내가 왜 코딩을 시작하게 되었는지 나의 이야기를 조금 해보고자 한다.

<시작>

1) 왜 코딩을 시작하게 되었는가?

사실 나는 이미 2년짜리 계획을 세워둔 게 있다. 여러 사정이 있어 나에게 주어진 환경에서 최대한 할 수 있는 것들을 가지고 계획을 세웠다.

난 무언가를 상상한 대로 만드는 것을 어릴 때 부터 워낙 좋아했다. 그만큼 초등학생 때 부터 남땜도 할 줄 알았고 무언가를 조립하고 만드는 손재주도 좋았다. 하지만 앞에서 말한 것 처럼 여러 사정이 있어 대학도 가지 않고 19살 때 부터 일을 하며 '나를 위한' 게 아닌 '다른 사람'을 위해 살았다.

그렇게 어느덧 2022년 기준 20대 중반이 될 무렵, 이대로 살다가는 의미도 없이 해보고 싶은 것도 못하고 살 것 같다는 생각에 공부할 수 있는 기회가 생겨 어릴 적 내가 좋아하고 잘했던 기억과 꿈을 살려 "코딩"을 하기로 생각했다.

내 어릴 때 꿈은 "로봇공학자와 CEO" 였다. 그래서, 이걸 어떻게 살려서 나의 로드맵을 설계할지 1년을 고민했다.

그래서 나는 프로그래밍을 하기로 결정했고, 친구를 통해 "패스트 캠퍼스" 의 존재를 알게 되었다. 게다가 국민내일배움카드 과정도 있어 마침 잘됐다고 생각했고 그렇게 코딩의 길을 선택하면서 패스트 캠퍼스를 선택하게 되었다.

2) 그럼 나의 개발자 커리어의 방향은?

솔직하게 말하면 아직도 이 부분을 제대로 정하지 못했다. 나는 현재 코딩 분야 이외에 경영학 학사 취득을 위해 학점은행제를 병행하고 있다.

학사 학위가 있으면 뭔가를 더 많은 걸 도전할 수 있기 때문이다. 대학을 가면 더 좋겠지만 말했다시피 나는 형편이 좋지 않아 대학을 갈 수 없다. (사실...학교 성적도 그닥 좋지 않아서...장학금 받을 자신이...수급자 자격도 이제 없고....)

고로 나는 아직 프론트앤드/백앤드/웹퍼블리셔 중 어느 길도 선택하지 못했다. (사실 마지막 5주차 강의를 들었어도 잘 모르겠더라....ㅎㅎ)

다 들어본 거지만 많다....

그래서! 최대한 국민내일배움카드를 통해 최대한 많은 분야를 찍어먹어볼 생각이다! "아니 그러면 너무 중구남방 아닌가?" 라고 생각할 수 있지만 나는 도전해보는 게 무섭지 않다. 직접 해보지 않고 시도하지 않고 보는 것 만으로는 확신할 수 없다. 그래서 나는 여건이 될 때 마다 패스트 캠퍼스에서 제공하는 국민내일배움카드 과정을 최대한 들어보고자 한다.

그러면 언젠가 하나의 방향을 잡을 수 있지 않을까? 하나의 방향을 잡아서 전문적으로 가고 어차피 나중에는 다방면으로 공부해야하니까~

<시작>

1. append 함수

• 어떠한 콘텐츠를 선택된 요소 내부에 삽입

  • 즉, 생성되어 있는 spanElement 라는 요소가 있다면, 그 요소에 '노드' 나 '문자열' 등을 html의 어떠한 요소 안에 삽입할 수 있다.

    var spanElement = document.createElement("span");
    spanElement.append("안녕하세요.");
    document.querySelector("li").append(spanElement);
    // 그것을 코드로 나타내면 위와 같다.

2. createElement()

   • () 안에 어떠한 이름의 요소를 생성하겠다는 명령어

     • itsme 라는 이름의 요소를 생성

       var createElement("itsme");

3. querySelector

• 입력한 선택자와 일치하는 문서 내의 요소를 반환하는 명령어

  • 맨 처음의 예시에서 볼 수 있듯이 만들어 둔 자바스크립트 요소를 불러와 html의 li에 안녕하세요 라는 spanElement를 나타내 주는 것이다.

    spanElement.append("안녕하세요.");
    document.querySelector("li").append(spanElement);

4. forEach
   • 주어진 함수를 배열 요소 각각에 대해 실행

     • JS에서 forEach로 a,b,c 각각에 요소에 주어진 함수를 실행해 주는 것이다.

       var sortButtons = document.querySelectorAll("#sorts ul");
       // sortButtons 라는 요소를 생성하고 sorts ul에 반환해줄 것
       sortButtons.forEach(function (sortButton){//중략}
       // 반환해줄 요소 각각에 모두 실행해줄 것

5. 마지막으로 단순한 오타였지만 1시간을 헤매게 만든 친구 소개

• 실습 과제에서 data.js란 파일이 있었는데 그거까지 보는 생각을 하지 못한 채 1시간을 해멨다.

  • data.js 파일에 like밖에 없는데 바보같이 다른 곳에서 이름으로 지정해준 likes를 적은거임...
  • 그래서 오타를 수정해주니 웹사이트에 표시하려는 사진이 그제서야 잘 나왔다. 저작권 문제로 더 자세하게 올릴 수 없어서 아쉽다 ㅠㅠ

따라서, 이번 주 포스팅은 3주차 실습을 하면서 HTML과 CSS 두 가지에 대해 몰랐던 부분, 헤멘 부분에 대해 쓸 것이다.

<시작> ① HTML 파트

1. id와 class의 차이
   • id : 요소(콘텐츠)를 한 가지만 지정할 때 사용한다. 단, 하나의 문서에는 하나의 고유한 id만 사용 가능하다.

     <input id="input-name"/>
     <label for="input-name">이름</label>
     ==> "input-name" 이라는 id를 지정했다면 이 id는 다른 곳에서 중복 사용이 불가

• class : 요소(콘텐츠)를 그룹으로 묶어서 지정할 때 사용한다.

    <aside class="aside">
      <div class="div-class"></div>
      <ul>
        <li class="on"></li>
        <li></li>
      </ul>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </aside>
  ==> "aside"로 지정된 <asdie>는 <aside> ~ </aside>까지
   하나의 "aside" 그룹으로 묶어서 지정한 것이다.

2. aside 태그 : 페이지의 다른 콘텐츠들과 연관성을 가지고 있으나, 그 콘텐츠들과 분리하기 위해 사용한다. 즉, 'aside' 태그는 어떠한 주 콘텐츠에 대한 '부가 설명' 또는 '부가 항목' 같은 부가적인 역할을 해준다. 이를 사용할 때에는 반드시 메인 콘텐츠나 어떠한 콘텐츠와 연관성이 있어야 함을 주의해야 한다.

3. article 태그 : 독립적이고 자체적인 콘텐츠를 지정할 때 사용한다. 즉, aside와는 다르게 A라는 주제에 대한 개인의 독자적인 게시물 같은 것을 말할 수 있다.

• article 태그를 요소를 사용할 수 있는 위치의 예

```html 포럼 게시물, 블로그 게시물, 사용자 의견, 제품 카드, 신문 기사들

4. 이번 실습에서 2시간을 헤메게 한 치명적 실수

• 별 것 아닌데 이런 실수를 하는 바람에 아주 생고생을 했지...

```html

② CSS

1. box-shadow 태그 에서 그림자가 나오게 하려면?

• '/(슬래시)' 없으면 그림자 효과가 들어가지 않는다.

  box-shadow: 0 0 6px rgb(0 0 0 / 50%);

2. hover 태그 : 'hover' 태그는 포인터를 어떠한 요소에 올렸을 때 상호작용 중이라는 것을 보여주기 위해 그 요소에 특정 효과를 넣어주는 역할을 하는데, 다양한 효과들이 있다.

• 효과 종류를 몇 개만 적어보자

  a:hover { opacity: 0.67; } /* 투명도 */
  a:hover { background-color: red; } /* 뒤쪽 배경색 */
  a:hover { transition : 2s; } /* 효과가 변하는 데 까지 시간 지정 */
  a:hover { transform: scale(2); } /* 상호작용 시 박스의 크기 변화 */
  a:hover { font-size : 10px; } /* 상호작용 시 글씨의 크기 변화 */

3. padding 과 margin 의 차이

   • padding : object 내의 내부 여백 설정

   • margin : object와 화면과의 외부 여백 설정

4. cursor 태그 : 특정 요소에 마우스를 올리거나 할 때 표시될 마우스 커서 모양 설정

5. height의 종류

   • line-height : 행간 높이 조정
   • max-height : 요소의 최대 행간 높이를 조정하며, height 속성의 사용값이 자신의 값보다 커지는걸 방지
   • min-height : 요소의 최소 행간 높이를 조정하며, height 속성의 사용값이 자신의 값보다 작아지는걸 방지

6. background-repeat : 배경 이미지의 반복 방법을 지정. 가로축 및 세로축을 따라 반복적(연속적)으로 출력되게 하거나, 아예 반복적(연속적)으로 출력되지 않게 할 수도 있다.

7. CSS를 통해 이미지를 불러오거나 삽입하는 방법 (background-image: url)

• HTML과 CSS를 하면서 실습에서 제시된 태그는 개인 PC 환경이나 자료를 저장한 경로에 따라 이미지의 경로 지정이 다 다르다는 걸 지난 주에 확인한 바가 있다. 근데 CSS에서 HTML과 비슷하게 방법을 시도해봐도 해결되지 않아서 이미지 삽입에서 다시 한 번 헤메게 되었다. 그럼 어떻게 해결했는지 아래에 간단하게 적어보자.

• CSS "background-image: url" 에서 () 안에 인터넷 주소 외에 컴퓨터에 저장된 이미지를 불러오는 방법

1. () 안에 /을 입력해서 나타나는 경로를 하나하나 클릭해서 지정
2. 이미지가 있는 폴더 뒤에 다른 폴더들이 여러 개 있는 경우, 상위 폴더를 하나 벗어날 때마다 점(.) 점(.) 슬래쉬(/) 를 사용 ==> 쉬운 이해를 위해 내가 사용한 방법을 이미지로 참고해보자
   • 내 파일 경로
   • 경로 지정

2주차 실습 과제는 이미 CSS로 디자인된 상태의 코드에 HTML 요소들을 채워넣는 것인데, 이번 포스팅에서는 실습 과제를 하면서 내가 쓴 코드와 달랐던 부분과 헤멘 부분 대해서 쓰려고 한다.

<시작>

1. b 태그와 strong 태그의 차이점
   • 먼저 내가 쓴 코드를 보자

• 내가 쓴 코드

  수많은 이용자들이 공유하는 멋진 <b>사진</b>들을 구경하고

완성본 이미지에서 "사진" 부분에 굵은 글씨로 처리되어 있길래 '아무렇게나 써도 되겠지' 라고 생각하고 b 태그를 사용했다. 하지만, 나는 여기서 '사진을 왜 굵게 했는가?' 라는 부분을 놓치고 있었다. "사진" 이라는 부분은 단순한 스타일로 표현하고자 한 것이 아니라 정말 중요한 요소이니 꼭 첨부해 달라는 의미였다는 것이다. 따라서, "사진"은 브라우저에게도, 코드를 볼 사람에게도 strong 태그를 사용해 이 부분은 중요한 부분이라고 해석할 수 있도록 했어야 한다는 것이다.

그럼 올바른 코드로 수정해보자.

• 올바른 코드

수많은 이용자들이 공유하는 멋진 <strong>사진</strong>들을 구경하고


아울러, b와 Strong 뿐만 아니라 기울임을 나타내주는 i와 em 태그도 이와 동일하게 설명이 가능하니 잘 기억하자.

-------

2. 이미지 태그의 절대/상대 경로 설정
 - 이번 실습에서 특히나 이 부분에서 배운대로 했는데 자꾸 웹에서 이미지가 출력되지 않아 나름 애먹은 부분이다.
어떤 문제가 있었는지 아래 코드와 사진을 보고 더 자세히 이야기해 보고자 한다.

> - 수업에서 배운대로 작성한 2개의 이미지 경로 설정 코드
```html
1. 상대 경로
<img src="img\fastcampus-ad.png" alt="패스트캠퍼스 광고"/>
2. 절대 경로
<img src="C:\Users\Admin\Desktop\코딩자료\img\fastcampus-ad.png" alt="패스트캠퍼스 광고"/>

• 웹 출력 결과

이렇게 보면 분명 배운대로 탐색기에서 경로 복사를 했으니까 이미지가 정상 출력이 되야하는 게 분명한데 그렇지 않았다는 것이다. 보다시피 위 사진처럼 절대/상대 경로 둘 다 이미지 파일에 문제가 있는 걸로 나온다.

그렇게 30분 동안 머리를 막 싸매면서 이것저것 입력해보고 인터넷에서 검색해도 해결 방법이 도무지 보이지 않았다. 그래서 에라 모르겠다 일단 해보자는 생각으로 "역슬래시" 하나를 붙여봤는데 문제가 해결된 것이다.

이게 이렇게 해결된 순간 정말 어이가 없었고, 프로그래머가 흔하게 느낀다는 이 표현이 절로 나왔다.

'이게 왜 되는거지?'

나는 궁금한 걸 절대 못참는 성격이라 그 이유를 면밀히 확인해봤고 이런 생각을 해보게 되었다.

'이미지 파일이 들어있는 폴더 뒤에 다른 폴더의 경로가 더 있어서 그런 건 아닐까?'

내가 왜 이렇게 생각했는지는 이미지와 절대 경로를 통해 이야기하려고 한다.

• VS Code 탐색기 화면

• 내가 입력했던 절대 경로

  <img src="C:\Users\Admin\Desktop\코딩자료\img\fastcampus-ad.png" alt="패스트캠퍼스 광고"/>

보다시피 나는 "코딩자료"폴더의 "img"폴더 안에 fastcampus-ad.png 이미지 파일을 넣어두었다.

그럼 절대 경로를 통해서는 이미지가 당연히 출력되지 않는다는 건 확실하니까 상대 경로 에서 문제를 해결해보자 생각을 해봤다.

자, 그럼 문제를 해결한 경로 설정 코드를 보자

• 방법을 해결한 경로 설정 코드

<img src="\img\fastcampus-ad.png" alt="패스트캠퍼스 광고"/>

• 웹 출력 화면

이렇게 "img" 앞에 역슬래시를 붙여 컴퓨터에게 '이미지가 있는 폴더 이전에 다른 폴더가 더 있다.' 라고 가르쳐 줬다고 말할 수 있다.

• 이렇게 문제를 해결하고 앞으로도 같은 문제를 보았을 때 이걸 잊지 않기 위해 VS Code에다가 주석처리를 통해 이렇게 필기했다.

<!--
현재 이미지 삽입을 위해 상대 경로 복사를 해야하는데, img\fastcampus-ad.png 그대로 붙혀넣을 경우 이미지 출력X
img' 폴더 이전에 '코딩자료' 폴더가 있기 때문에 앞에 '\'를 붙혀 \img\fastcampus-ad.png 로 기입해야 정상 출력됨.
-->

<결론> 그래도 나름 고등학교 때 실습에서 조금 배운 코딩 소지식이 아직 어렴풋이 남아있어서 그런지 다행히도 아직까지는 할만한 것 같다. 앞으로 점점 난이도가 높아지고 어려워지겠지만 내 나름대로 재미를 느끼고 있는 것 같아서 다행이라는 생각이 드는 2주차였다. 더 어려워지더라도 지금처럼 끈기있게 문제를 찾아서 해결하고 복습보다는 혼자서 뭐 하나라도 만들면서 나아질 나를 기대해본다!

1. 왜 프로그래밍을 배워야 하는가? 2. 프로그래밍 샌드위치 만들기 3. 엘리베이터의 알고리즘을 살펴보자 4. 어떤 프로그래밍 언어가 있나요? 5. 개발자와 대화하기 (상) 6. 개발자와 대화하기 (하) 7. 네이버에 접속하면 일어나는 일

1주차는 위의 내용에 대해 정리하고 내 생각을 적으려고 한다.

// 본론

1. 왜 프로그래밍을 배워야 하는가? 사실 오래 전 부터 각종 매체에서 프로그래밍을 배우는 사람들이 많다고 했기도 했고, 학창시절 수포자였던 나를 생각해보면 코딩은 배우기 힘들 것이라고 생각했다.

그럼에도 불구하고 나는 "내가 좋아하는 것, 하고싶은 것, 과거 경험, 미래성" 등 많은 걸 고려했을 때 프로그래밍에 도전해보고 싶다는 확신이 들었고 시작하게 되었다.

2. 프로그래밍 샌드위치 만들기

• 프로그래밍 샌드위치란 우리의 상식이 아닌 컴퓨터의 이해 논리 방식을 만드는 과정을 말한다.
• 사람에게 당연한 건 컴퓨터에게는 당연한 게 아니다.
• 컴퓨터에게 가르칠 때는 어린 아이에게 가르친다고 생각해라.
• 컴퓨터는 그 조건이 성립될 때 까지 반복시켜줘야 한다.
• 구글에 정렬(배열) 알고리즘을 검색해보거나 가장 기본적인 버블 정렬을 찾아서 직접 생각해보자
• 내가 더 많이 알게 된다면 지시를 좀 더 짧게 컴퓨터가 더 효율적으로 움직이도록 할 수 있다.

  (예시) 4 1 5 2 3 이 5~1까지 배열되는 조건이 만족되는 반복문을 쓴다면

  ordered'라는 빈 배열을 만든다. numbers 안에 든 숫자가 갯수가 0이 될 때까지 X는 1이다. Y는 numbers의 X번째 숫자다 X가 numbers의 내 숫자의 갯수를 넘기 전까지 numbers의 X번째 숫자가 Y보다 크다면 //조건문 Y를 numbers의 X번째 숫자로 바꾼다. //조건이 성립하지 않는다면 X를 1 증가시킨다 // 반복시킨다. numbers에서 Y에 해당하는 숫자를 빼낸다. ordered'에 Y를 추가한다. ordered를 반환한다.

3. 엘리베이터의 알고리즘을 살펴보자

• 프로그래밍을 하는 것이란 과정의 세분화 뿐만 아니라 여러 상태의 조합으로 구체화해서 조건을 부여하고 그에 따라 실행되는 방식을 지정해주는 것의 반복이다.
• 알고리즘을 벤다이어그램으로 그려본다면 좀 더 쉽고 빠르게 이해하고 파악할 수 있다.
• 일상에서 접하는 것들의 알고리즘을 벤다이어그램으로 그려본다면 더 좋은 공부가 될 것이다.

  • 엘리베이터의 상태 : 멈춰있음 / 움직이는 중
  • 버튼들의 상태 : 안에서 누름 / ▲ / ▼

    <코드 1> //눌려있는 버튼이 없는 상태에서는 엘리베이터는 새로 눌리는 첫 버튼의 층으로 최종 도착지가 결정되고 그에 따라 상승 또는 하강 상태로 바뀐다. <코드 2> //엘리베이터가 이미 있는 층의 버튼은 눌리지 않는다. <코드 3> //엘리베이터가 이동 중일 때 이동방향의 최종지점에 도달하기 전까지는 이동방향을 바꾸지 않는다. <코드 4> //엘리베이터가 이동 중 버튼이 눌린 층이 있을 때 엘리베이터의 이동 방향이 다르지 않다면 (즉 방향이 같거나 중립이라면) 정지한다. <코드 5> //엘리베이터가 이동 중일 때 이동방향의 최종 목적지보다 멀리 있는 층의 버튼이 눌리면 최종 목적지를 그리로 수정한다. ==> 코드 5의 알고리즘은 코드 3에 접목시켜서 간소화가 가능하다. <코드 3 + 코드 5> //엘리베이터가 특정 방향의 최종 목적지에 도달하면 다른 눌려있는 버튼이 하나 이상 있을 시 이동 방향을 바꾸고, 그방향의 가장 끝점으로 최종 목적지를 변경한다.

4. 어떤 프로그래밍 언어가 있나요?

• 엑셀도 일종의 프로그래밍을 해본 것과 유사하다.
• 나만의 소프트웨어를 만들려면 어떤 프로그램으로 컴퓨터와 소통해야 할까?

  //Programming language rank 를 구글링해서 일단 알아볼 수 있다.

  • 2021기준 파이선 - C언어 - 자바 순서로 1~3위임
  • High Level : 사람에게 가까운 언어
  • Low Level : 기계에 가까운 언어 // High --> Low 로 갈수록 난이도는 어려워지고 할 수 있는 제약이 점점 없어진다.
• 과거에는 어셈블리어, 01010 같은 언어를 썼으니 현대에는 안쓰는 것이 아니다. 2021년 기준으로 어셈블리어는 9위에 있을 정도로 많이 쓰고있다.

//현재 많이 쓰는 프로그래밍 언어들

• C : 기초, 교양 과목으로 배울 정도의 필수 언어이며 사용자 능력에 따라 Low Level까지 간다.
• C++ : 하드웨어가 중요하고 게임, 그래픽같은 분야에 많이 사용
• C# : 마소에서 개발했고 윈도우에 동작하는 프로그램에 사용
• JAVA : 우리나라에서 압도적 사용량. 웹,앱에 많이 사용. 국내 정부 사이트에서 많이 쓰고있음. 국내에서 취업 시장도 넓음
• Python : 많은 코딩의 자리를 대체하고 있고, 초보자도 배우기 쉽고 적은 분량으로 코딩 가능하고, 커뮤니티도 크고, 머신러닝 / IOT 등에서도 많이 쓰고있음
• RUBY : 파이썬의 라이벌이라고 불리며 일본에서 개발
• PHP : 간단한 사이트에 쓸만하지만, 보안이나 사이트가 커지면 쓰기 힘듬
• Swift : 파이썬이나 루비처럼 간결하고 쉬운 언어
• Kotlin : 안드로이드쪽 개발에 점점 많이 사용되어지고 있음
• JAVA Script : JAVA와는 전혀 다른 프로그램이며, 웹사이트 제작에 최적화 되어있어 웹사이트 제작 이외의 범위에서 벗어나지 못한다는 단점이 있다. ++ 그러나, 지금은 node.js가 등장하고 웹사이트라는 제약에서 벗어남.

==> 국내에선 JAVA, Python을 많이 쓴다.

5. 개발자와 대화하기 (상)

• 프로그래머와의 커뮤니케이션이 쉽지 않은 이유 1) 우리가 개발자의 언어를 잘 모른다. 2) 개발자들도 보통은 이 언어를 잘 설명할 줄 모른다. ==> 프로그래밍 용어들은 하나하나의 복잡한 개념을 알아야 이해하고 그걸 이해하면 또 다른 복잡한 개념을 이해하고의 반복이기 때문에 쉽게 알아듣기 어렵다는 것이다.

• 가상의 대화를 통해 한 번 알아보자

  • Server : 서버는 기본적으로 컴퓨터이다. : 다른 컴퓨터 안에 있다가 내 컴퓨터에 전달하는 것이다.(예 : 손님 <-- 커피 제공자) : "제 컴퓨터에 서 좀 깔게요" 여기서의 서버는 컴퓨터를 서버로 만들어주는 소프트웨어다.

    1) 제공자 역할을 하는 컴퓨터 2) 컴퓨터를 제공자로 만드는 프로그램이다.

  • 프론트앤드(Front-end) / 백앤드(Back-end) : 식당에 비유하면 프론트앤드는 메뉴판, 점원, 음식이다. : 백앤드는 눈에 보이지 않는 부분 주방이다.

    • 페이스북 로그인 1) 백앤드 : 서버에서는 내 계정을 인지하고 친구 소식 광고들의 데이터를 정리해서 내 컴퓨터에 보내줌 2) 프론트엔드 : 크롬, 파폭, 익스플로러 등에 브라우저에서는 데이터를 받아 스크린에 출력해줌

  • 퍼블리싱(Publishing) : 브라우저가 뭔가요? 호환성에 문제가 있네요

    • 브라우저 : 다양한 브라우저가 있으면 이용자는 선택권이 넓어져 좋지만 프론트앤드, 퍼블리셔, 웹 디자이너에게는 머리아픈 일이다.
    • 호환성 : 모든 사용자를 배려하기 위한 꼭 지켜야할 요소이며, 퍼블리싱에서도 중요하다.

  • 네이티브 앱 / 웹 앱
    • 네이티브 앱 : AOS, iOS ==> 각각 따로 개발해야하기 때문에 사용되는 언어와 기술도 다르다. : 요즘에는 두 가지 앱을 한 번에 만드는 앱도 나왔지만 아직까지는 제약이 있다.

      (장점) 1) 각각의 OS의 한계에 맞게 만들어져 해당 환경에 최적화 되어있다. 2) 성능도 파워풀하고 각 OS의 모든 기능들을 최적화해서 사용할 수 있다. (단점) 1) 각 OS를 모두 다룰 줄 알아야하고 개발도 할 줄 알아야한다. 2) 앱을 업데이트할 때 검토 및 배포 과정에서 적용 시간이 달라 일괄적으로 하기 어렵다.

    • 웹 앱

      : 네이티브 앱은 틀만 만들어주고 그 안에 내용물은 웹 앱이 만들어준다. : html, css, js 로 만들어진 웹사이트의 요소들이다. (장점) 1) 네이티브 앱의 단점을 보완해서 진행이 가능하다. 2) 각 OS별로 업데이트할 필요 없이 웹 하나만 변경하면 되서 편하다. 3) 시간과 비용이 절약된다. (단점) 1) 성능이 따라줘야하는 부드러운 애니메이션 등에는 사용하기 어렵다

6. 개발자와 대화하기 (하)

• 적응형 웹 / 반응형 웹

  • 적응형 웹 : PC와 Mobile를 구별해서 웹사이트를 만들어야 하는 시대가 왔다. : 주소를 확인해보면 주소창에 m.nate.com / nate.com 처럼 m 하나로 PC와 모바일 차이가 난다.
  • 반응형 웹 : 페이지를 만들 때 스크린의 크기에 따라 모습을 유동적으로 변하도록 만드는 것이다.

    1) 적응형으로 만들지 반응형으로 만들지를 결정하는 데는 사이트의 기용하는 방식에 따라 적절한 판단이 필요하다. 2) 구조와 특성에 따라 적응형이 쉬울수도 반응형이 쉬울수도 있다. 3) PC / 모바일에서 각각 사이트 구조가 크게 바뀐다면 '적응형'이 좋다. 4) 컨텐츠의 배치 정도만 달라지는 가벼운 페이지는 '반응형'으로 유용하게 만드는 게 좋다.

• 쿠키 / 세션 / 캐시

  • 쿠키 : 사이트를 만드는 개발자가 특정 정보가 사용자의 브라우저에 저장되도록 만드는 것 : 개인 컴퓨터에 저장되는 것이다. : 쿠키는 사용자가 자유롭게 삭제할 수 있다. : 즉, 공개되어도 문제가 없는 내용들을 저장시키는 것이다.

  • 세션 : 특정 정보가 서버에 저장되는 것 : 내 이용 현황 정보를 기업이 가지고 있는 것이 예다. : 결제 정보 같은 중요한 보안이 필요한 정보를 저장시키는 것이다. : 서버의 자원을 쓰기에 모든 것을 세션에 저장하면 서버에 부하가 걸린다.

    • 쿠키와 세션이 둘 다 사용되는 경우 : 로그인

  • 캐시 : 이미지, 코드 등 용량이 큰 파일을 사이트에 최초 접속 시 미리 다운받고 이후 재접속 시 다시 다운받지 않도록 하는 것

    • 쿠키/세션 : 특정 정보를 기억해두는 것이다.
    • 캐시 : 시간과 통신 데이터 절약을 위해 한 번 로드한 데이터를 놔뒀다가 재사용 하는 것이다.

• API : Appliocation Prgram Interface 의 약자 : 공공/특정 그룹에게 공개되어 정보를 읽거나 넣거나 변경할 수 있는 것이다. : 일종의 자판기 같은 것 : 앱/프론트앤드 웹에서 서버에 요청한 정보를 백앤드 개발자들이 구축한 API를 사용하는 것이다.

  • 공공 API : 국가/기업 등에서 누구든 소프트웨어를 만들거나 사용할 수 있도록 축척된 특정 데이터를 개방한 것이다.

    • 공공 데이터 포탈 - data.go. kr
    • Naver Developer : 이런 사이트에서 무료 또는 적은 비용으로 사용할 수 있도록 공개되어 있다.

  • 디버그 / 컴파일 / 빌드

    • 디버그 : 벌레를 찾아 치운다는 의미로 오류를 찾아내는 작업을 뜻한다. : 버그는 오타, 논리 오류, 외부 변수 등에 의해 발생한다. : 특수 분야가 아니면 High Level 언어를 쓰는데, 컴파일 언어 / 스크립트 언어로 나뉘어진다.
    • 컴파일
      • 스트립트 언어 : Python, Jave Script - 작성된 코드 그대로 기계가 그때그때 번역해서 실행
      • 컴파일 언어 : Java, C - 프로그래머가 작성한 언어를 기계가 읽을 수 있는 언어로 바꾸는 작업
    • 빌드 : 컴파일도 포함 : 개발자의 컴퓨터에서 코드로 작성한 소프트웨어를 사용자의 PC, 모바일에 설치하거나 서버에 올라가 실행될 수 있는 형태 : 가볍고 군더더기 없고 필요에 따라서는 분석하기 어려운 상태로 최총 포장되어 나오는 형태 : 김밥 재료를 손님에게 내려면 잘 만들고 썰어서 내야하는 것과 같다. : 제품 포장 중...이라고 이해하면 좋을 것 같다.

  • 프레임워크 / 쓰던 언어가 아니라 : 프로그래밍 언어는 여러가지가 있고 각각 나름의 체계와 특성 설계 철학이 있다. : 하지만, Jave를 쓰던 사람이 C#,Time Script를 봐도 뭐 하는 코드인지 쉽사리 파악이 가능하다. : 표준어 쓰는 사람이 사투리를 못알아듣지 않는 것 처럼 : 개발자란 직업은 언어 하나로 할 수 있는 게 아니다. : 여러 개를 배우고 주 종목 하나를 가지고 있는 것이다. : 개발자 주 종목 언어로 개발하도록 해주는 것이 좋다.

    • 프레임워크 : 큰 회사, 기관, 개인 등이 만들어 놓은 서버 프로그램들의 틀을 사람들이 그것들을 가져다가 확장해서 사용할 수 있도록 공개해놓은 것이다. : 내 것으로 익히는 기간은 프레임워크가 비교적 짧다.

      • Library Framework ==> 집을 짓는것과 비교하면 : Library - 문짝, 창문, 타일 같은 개별적인 조각들 / 특정 기능들을 코딩해 놓은 것 : Framework - 조각들을 어느정도 조합한 기초 틀 / 그것들을 조합해서 뼈대를 갖춘 것
      • 특정 종류의 소프트웨어를 만들기 위한 일종의 만들기 키트가 있다. : Jave <-> Spring, Python <-> Django, RUBY <-> RAILS

• 호스팅 / AWS / 클라우드

  • 호스팅 : 서버가 없는 규모가 작은 회사들이 사용하는 것이다. : 호스팅 업체에서 서버로 사용될 컴퓨터를 마련하고 일정 비용을 받아 제공 : 내 집들을 월세를 내주는 것과 같다.
  • AWS / 클라우드 : 필요한 만큼만 빌릴 수 있고, 원할 때 마나 추가로 빌리거나 줄일 수 있다. : 어떻게 쓰느냐에 따라 필요한 만큼만 쓸 수 있기에 비용 절감도 가능하다. : Amazon Web Service, Google Cloud, Azure, Naver Cloud Platform : AWS란 대형 호텔이라고 생각하면 된다.

7. 네이버에 접속하면 일어나는 일

• html, CSS, Jave Script를 다음 시간부터 배우게 될 것
• 이것들이 정확히 어떤 것들이고 어떤 방식으로 동작해서 웹사이트의 형태로 보여지는지 알아보자 : 우리가 아는 웹사이트 주소는 사실 IP Adress로 되어있다. : 근데 이것을 도메인으로 바꿔서 사용하는 것이다. : http / https - 서버와 클라이언드 간 주고받는 데이터의 한 형식 : https는 http에서 암호화 기능을 추가해서 보안을 강화한 형태이다. : DNS <-> 사용자 컴퓨터 <-> Server : view-source:https://www.naver.com/ 를 보면 html, CSS, Jave Script의 조합으로 되어있다.

  어....나도 이렇게 할 수 있을거야....있겠지...?

• IDE(Intergrated Development Environment) = 통합 개발 환경
• html : 갖다 놓고 -> CSS : 꾸미고 -> JS : 시킨다
  • html : 아무것도 없는 화면에 텍스트를 집어넣는 것이다.
  • CSS : 텍스트에 색, 그림자, 그라데이션 등의 효과를 부여하는 것이다.
  • Java Script : 웹 페이지가 동작하도록 해주는 것이다.