오즈코딩 스쿨 사업개발 캠프 25일차

Chapter 2-9. 웹사이트 동작 원리 이해

• 학습목표
  • 개발 언어의 특징을 알고 이해하기
  • 웹 사이트의 구동방식 이해하기.
• 웹개발에 쓰이는 언어
  • HTML, CSS, Bootstrap, jQuery, PhP, react.js, javascript, vue.is, phthon, asp, jsp
  • 웹 브라우저가 읽는 것.
    • 마크업 언어(Markup Language)
      • HTML, CSS
    • 클라이언트 사이드 스크립트 언어(Client Side Script Language)
      • Javascript
    • 라이브러리(Library)
      • react.js, Bootstrap, vue.js, jQuery.
  • 웹 브라우저가 읽을 수 없는 것. 
    • 서버 사이드 스크립트 언어
      • Python, jsp, PhP, asp
    • 웹 브라우저란
      • 크롬, 사파리, 익스플로러.등
  • 브라우저란
    • ex) 파워포인트 프로그램
      • 파워포인트에서 읽어 올 수 있는 파일의 형식의 프로그램.
    • 웹브라우저에서 읽어 올 수 있는 파일 :  '.html'
    • 웹브라우저에서 읽을 수 있는 언어
      • 마크업 언어(HTML, CSS)
      • 클라이언트 사이드 스크립트 언어(Javascript)
    • 라이브러리 언어
      • Javascript 언어에서 파생된 언어.
  • 웹서비스 아키텍처 기초
    • Client(클라이언트) = 핸드폰, PC, 웹브라우저
    • 1)도메인 주소 전달 -> DNS 서버
      • 도메인 : 숫자로 이루어진 인터넷상의 컴퓨터 주소를 알기 쉬운 글자로 표현한 것(들어가고 자 하는 사이트 이름을 지어준 것임. 만일 도메인이 없었다면 숫자(IP) 로 접속해야 했음)
        • ex) google.com, youtube.com, daum.net
      • IP(Internet Protocol) : 인터넷에 연결되어 있는 각 컴퓨터의 숫자로 이루어진 고유 주소
        • ex)112.23.21.333
      • Server(서버) :  ex)노트북, PC, 데스크탑, 핸드폰.개념임.
        • 외부에서 내 데스크탑, PC, 노트북 다 막아 놨음.
        • 서버로 사용하는 컴퓨터 : 문을 열어 놓은 컴퓨터
        • 데스크탑에 문을 열게 된다면, 서버라고 말해도 된다.
        • DNS 서버는 뭘하는 것인지?
    • 2) IP주소 리턴
      • IP 주소 이탈 한다, IP주소를 브라우저로 돌져준다. 
      • 문을 열어 놓은 컴퓨터 중에 naver.com 도메인 주소 전달, 
        • IP주소가 이탈한다.
        • ex)naver site code
      • HTML 사이트가 들어가 있는 컴퓨터에 IP주소 되돌려줌.
    • 3) IP주소 서버로 접근.
    • 4) 80번 문이 열려져 있음.(웹사이트 정보를 가지고 올 때 여는 문) 
    • 5) 방(폴더)에서 HTML 코드 가져오기.
    • 6) HTML 코드 전달
      • 웹브라우저에서 썼던 프로그램(웹브라우저)으로 HTML 코드 전달.
    • 7) HTML 코드 읽어서 사이트 출력

Chapter 2-10. 코딩 기초 이론 - [변수] [상수] [함수]

• Javascript 코딩 기초 이론
  • 변수 : 어떤 관계나 범위 안에서 여러 가지 값으로 변할 수 있는 수
  • 상수 : 변하지 않고 항상 같은 값을 가지는 수
    • var, let, const
    • 수학에서 변수는... x=3
    • 코딩에서는? => 
      • let 변수명 = 넣고자 하는 값;
      • Const 상수명 = 넣고자 하는 값;
        • let myAge = 29;        let myName = "주형"
        • Const bloodType = "0";
      • 'var'의 기능이 미완성된 부분이 많아서 새롭게 리뉴얼 되어 나온 것이 'let'임.
      • 숫자, 글자 모두 가능
      • a = a+5;
        • 수학에서는 틀림, 하지만 코딩에서는 맞음.
        • a의 값이 5가 증가 한것을 다시 a에 넣은 것임.
        • 코딩에서는 같다는 의미가 아니라 대입한다는 의미.
        • 다시 말해 a+5;를 a에 대입한다.
        • 프로그램은 위에서 아래로 읽어 내려온다. 
          • 에러 확인 방법
            • 웹브라우저 => 검사(inspect)=> console => error.

 

에러 이미지.

• 상수에는 할당이 불가능하기 때문에 오류가 난 것임
• 상수는 절대 값이 바뀌면 안됨.
• 함수(function) = 기능
  • 수학에서의 함수는  => 함수의 정의: f(x)= 3x+1
  • 코딩에서는 
    • function 함수(매개 변수){
      함수가 하는 일; 
      }
    • ex) function plus(x,y){
               return x+y;
            }
    • 여러번 3*x+1을 써야 할 때가 있다. 함수는 함수를 만들어주고 기능을 기능으로 만들어주는 것임.
    • ex) function getBmi(weight,height){
            return weight/(height * height);
            }
      getBmi(70,1.17);

Chapter 2-11. 코딩 기초 이론 - if문

• if
  • 영어에서의 if는....
    • if I learn programming,(조건)
    • I can make my website.(조건 성립시, 실행)
  • if(조건) {
        조건이 True인 경우
        실행되는 일;
    }else {
    위 조건이 다 False인 경우
    실행되는 일;
    }
    • 조건이 참일 경우에만 이 중 괄호 안에 있는 내용이 실행되는 구조.
      • ex) let x = 20;
        
               if(x/5 == 4){
                  box("A");
        }else{
            box("C")
        }
    • '==' => 같다 한 개. 
    • 조건이 여러 개인 경우
      • if(조건) {
            조건이 True인 경우
            실행되는 일;
        }else if(조건){
              조건이 True인 경우
              실행 되는 일;
        }else {
        위 조건이 다 False인 경우
        실행되는 일;
        }
      • ex) let x = 20;
        
               if(x/5 == 4){
                  box("A");
        }else if(x/4 == 5){
            box("B")
        else{
            box("C")
        }
      • 이런식의 else if를 무한대로 늘릴 수 있음.
      • but, if는 조건문이 시작할 때만 if를 쓸 수 있음.

Chapter 2-12. 코딩 기초 이론 - 연산자

• 연산자
  • 더하기 , 빼기, 곱하기, 나누기, 나머지(%)
  • if(연산자)는 무조건 있어야 한다.
  •  ex) let a = 20;
    
        if(a%2==1){
          alert("홀수");
        }else{
          alert("짝수");
        }
  • ex)     let a = 19;
    
        if(a%2==1){
          alert("3의 배수입니다.");
        }else if(){
          alert("2의 배수입니다.");
        }else if(){
          alert("5의 배수입니다.");
        }
    • 출력 되지 않음
      • 19는 3의 배수도, 2의 배수도, 5의 배수도 아니기 때문.
  •     let a = 19;
    
        if(a%3==0){
          alert("3의 배수입니다.");
        }else if(a%2==0){
          alert("2의 배수입니다.");
        }else if(a%5==0){
          alert("5의 배수입니다.");
        }else{
          alert("3,2,5배수 다 아니다")
        }
    • "3,2,5배수 다 아니다" 창이 뜸.
      • 19는 3,2,5 배수가 아니기 때문.
  •     let a = 6;
    
        if(a%3==0){
          alert("3의 배수입니다.");
        }
    
        if(a%2==0){
          alert("2의 배수입니다.");
        }
    • if함수가 두 개가 들어있으면 2개의 영역이 적용된다.
    • "3의 배수 입니다.","2의 배수입니다." 창이 뜸.
      • 6은 3의 배수 면서 2의 배수 이기 때문입니다.

Chapter 2-13. 코코딩 기초 이론 - [연산자] [반복문]

• 코딩 연산자
  • = (대입)
  • == (같다)
  • != (다르다)
  • <> (작다, 크다)
  • <==> (작거나(크거나) 같다)
  • 예시
    •     let a = 20;
          a = a + 10;
          alert(a);
    •     let a = 20;
          a = a + 10;
          if(a > 35){
            alert("A");
          }
• || (또는), &&(그리고)
  •     let a = 20;
        let b = 30;
    
        if(a > 15){
          alert("B");
        }
  •     let a = 20;
        let b = 30;
    
        if(a > 15 && b<25){
          alert("B");
        }
    • 안나옴
    • 2개가 모두 참이여야 a가 25보다 크고 b가 25보다 작으면.
  •     let a = 20;
        let b = 30;
    
        if(a > 15 || b<25){
          alert("B");
        }
    • 둘 중 하나가 참이면 참이다. 
• ++ (1증가), -- (1감소)
  •     let a = 20;
        let b = 30;
    
        a++;
        alert(a);
    • a = a+1 = a++
    • a = a-1 = a--
• for 
  • 여러번 반복적으로 시킬 수 있는 문법
  • 예시
    • for(시작 조건; 끝 조건; 증감 조건){
            실행 되는 일
      }
    • for(let i = 0; i < 5; i=i+1) {
         alert("안녕");
      }
      • 그 전에는 alert("안녕");을 5번 반복해야 같은 결과가 나옴.
      • 시작조건 : 1이 0이다. 
      • 끝 조건 : i가 5보다 작을 때 까지 반복, 
      • 증감 조건 : i를 한 번 반복 할 때 마다 i를 몇 씩 증가 시킬 것인지를 적어 놓는다. 
  • 1부터 99까지의 합 = 4950
    • let sum = 0;
      for(let i = 0; i < 100; i++) {
         sum = sum + i;
      }
      alert(sum);
  • 예시
    • 1에서 99까지의 합 = 4950 
      •     let sum = 0;
        
            for(let i=1; i<100; i++){
              sum = sum + i;
            }
            alert(sum);
    •    'alert(sum);' 이 }의 안에 있으냐 밖에 있느냐는 천지차이
      • 밖에 있으면 마지막으로 합산 한 sum이 출력 됨
      • 안에 있으면 alert하는 것도 반복됨.
        • 중괄호에 있는 내용을 다 반복해줘라.

Chapter 2-14. 코딩 기초 이론 - 배열

• 변수에 여러 개의 수를 담고 싶은 경우
  • let alphabet = ["A", "B", "C", "D"];
  • alphabet[0](인덱스)
    • 인덱스는 0부터 시작. 
  • alphabet.length : 배열의 길이 = 배열에 들어가 있는 값의 개수
• 과일명 5개를 담은 배열 만들기   
  •  let b = ["바나나", "사과", "딸기", "포도", "수박"];
        let price = [500, 1000, 200, 300, 5000];
    
        for(let i=0; i<5; i++){
          alert(b[i]);
        }
  • 모든 과일 5개를 순차적으로 문구를 띄우게 됨.
• for문으로 과일 가격의 합 구하기
  •     let b = ["바나나", "사과", "딸기", "포도", "수박"];
        let price = [500, 1000, 200, 300, 5000];
    
        for(let i=0; i<5; i++){
          alert(b[i]);
        }
    
    
        let sum = 0;
    
        for(let j=0;j<5;j++){
          sum = sum + price[j];
        }
        alert(sum);
  •   for문으로 과일 가격의 합 구하기(alert (sum)을 안으로 뺀 것)
  •   let b = ["바나나", "사과", "딸기", "포도", "수박"];
        let price = [500, 1000, 200, 300, 5000];
    
        for(let i=0; i<5; i++){
          alert(b[i]);
        }
    
    
        let sum = 0;
    
        for(let j=0;j<5;j++){
          sum = sum + price[j];
          alert(sum);
        }