basics_진짜 쉽게 설명하는 코딩

• HTML : 뼈대
  
• CSS : 꾸며 주는 역할
  
• 자바스크립트 : 웹사이트를 실제로 움직이게 하는, 실제적인 기능을 갖추게 하는 역할
  
  • 보통 웹 프론트엔드 기술과 함께 사용
    
• 자바 : 백엔드 기술과 함꼐 많이 쓰는 프로그래밍 언어
  
• SQL : 데이터베이스를 다룰 수 있도록 작성하는 것
  
• return : 값을 보여준다
  
• 세미콜론(;) : 코드의 끝에 써주는 것으로 마침표와 비슷
  
• 대입연산자(=) : 오른쪽의 결과물을 왼쪽에 넣어준다는 의미의 기호
  
  • <- 기호로 나타내는 방법도 있음
    (R이라는 프로그램에서는 변수에 값을 넣을 떄 화살표처럼 생긴 연산자를 사용하기도 함)
• 메인 함수 : 작성한 코드를 실행할 때 쓰이는 함수로 특별한 말이 없단면 대부분 메인함수를 실행한 것
• System.out.println와 System.out.print의 차이
  • System.out.println : 줄 바꿈 실행
  • System.out.print : 줄 바꿈 없이 일렬로 작성

R

• 통계 및 그래프 작업을 위한 인터프리터 프로그래밍 언어
  
• 분석과 통계화, 수치화, 시각화에 가장 적합한 언어
  

인터프리터

• 프로그래밍 언어의 소스 코드를 한줄 한줄 바로 실행하는 컴퓨터 프로그램
  = 한 줄씩 바이트코드 (고급 언어로 작성된 소스 코드를 가상머신이 이해할 수 있는 중간 코드로 컴파일한 것)로 변환 후 즉시 실행
  
• 별도의 컴파일 과정을 거치지 않고, 소스 코드 각각을 한 줄씩 읽어들여 실행 (프로그램 실행시 한 번에 한 문장씩 번역)
  = 오류를 만나게 되면 그 즉시 프로그램 중지
  
• 메모리 사용면에서는 매우 효율적
  
• 별도의 실행파일을 생성하지 않기에 실행 할때마다 인터프리트 과정이 반복 수행되어 실행 시간이 오래걸림
  
• 소스 코드가 쉽게 공개됨 : 컴파일한 결과를 바이트코드 등으로 컴파일해서 배포하는 경우는 잘 없기 떄문에 쉽게 디컴파일 가능
  
• 식별자들을 알아보기 힘들게 바꾸고 해석이 어렵게 난독화하는 정도 외에 할 수 있는 방법이 없음
  
• 문자를 읽는 코드의 특성상 함수에서 취약점이 발견될 가능성이 높음
  
• ex_Python, Ruby, Javascript 등

IDE

• 자바스크립트 - jsfiddle
  • 프론트엔드와 관련된 것들을 코딩할 수 있는 곳
    
  • 자바스크립트, CSS, HTML
    
  • 좌측 하단 JavaScript 칸의 우측 ↓를 누르면 다른 언어로도 작성 가능
    
• 자바 - compilejava
  
  • 스프링 프레임워크와 함께 웹 백엔드에서 많이 사용되는 언어
    
• SQL - dbfiddle
  
  • SQL : 데이터베이스를 다루기 위해 사용되는 질의문
    
  • DBMS : 데이터베이스 관리시스템 (ex_오라클, MySQL)
    
  • SQL 문법 : 국제적으로 공인된 표준이 있기 떄문에 DBMS마다 지원하는 SQL문이 대부분 비슷
    
  • 비슷한 웹사이트로 ‘sqlfiddle’이 있음
    

1. 프로그래밍에 대해 알아보자

1. 프로그래밍할 때 고려할 다섯 가지 키워드

• 프로그래밍 : 하나의 프로그램을 만드는 것
• 키워드 : 속도, 편리성, 효율성, 가독성, 안전성
  • 속도, 편리성, 효율성 : 프로그램을 제작하여 편리하고 빠르게 원하는 결과물을 얻기 위해 코딩하기 때문
  • 가독성 : 협업하여 만드는 경우때문에 여러 사람이 자신이 작성한 코드를 쉽게 읽을 수 있어야함
  • 안전성 : 버그가 많거나 보안이 취약한 프로그램은 불필요함

2. 데이터를 보기 좋게 가공하는 것

• 프로그래밍의 궁극적인 목적
  • 데이터를 가공하여 사용자에게 보기 좋게 보여주는 것
    (가공되지 않은 날것의 데이터를 입맛대로 가공하여 결과물을 보여 주기 위해)

선언하다 : 함수를 만드는 일
호출하다 : 함수를 사용하는 것

2. 코딩할 때 필요한 최소한의 지식

1. 우리가 보고 있는 화면의 모든 것, 웹 프론트엔드

• 웹사이트 화면의 모든 것 : 로그인 버튼, 스크롤, 로딩 화면 등 모니터에 보이는 모든 컴포넌트들이 해당
• 컴포넌트 : 컴퓨터와 사용자를 서로 이어주는 ‘인터페이스 역할’ 수행
  • ex_로그인 버튼을 눌렀을 때 그 다음 과정으로 넘어가는 것
• 관련 기술 : HTML, CSS, 자바스크립트, 리액트 등

2. 서버의 관리자, 웹 백엔드

• 눈에 보이는 웹사이트 화면 그 너머를 구성
• 데이터베이스를 활용한 개발을 진행 : DB 질의어인 쿼리 다룸
• 서버 및 클라우드 관리, 데이터베이스 관리, API 개발 등 수행
• 관련 기술 : 클라우드, 쿼리, 자바, 파이썬 등

3. 객체지향 프로그래밍 vs 절차지향 프로그래밍

• 객체지향 프로그래밍 : 명령과 데이터로 구성된 낱낱개의 객체를 중신으로 기술하는 프로그래밍 기법
  • 자바와 파이썬 등 현재 사용되는 언어들이 대부분 객체 지향 프로그래밍 언어
  • 절차지향 프로그래밍의 단점을 보완한 프로그래밍 기법
  • 장점
    • 버그를 찾기 쉽고 유지, 보수에 용이함
    • 코드를 재사용하기에 좋고 보안적 측면에서도 안정성이 높음
  • 단점
    • 처리속도가 절차지향보다 느림
    • 처음 설계 시 많은 시간 소요
• 절차지향 프로그래밍 : 시간적 흐름대로, 순차적으로 코딩
  • ex_C 언어
  • 장점
    • 순서대로 일을 처리하기 때문에 실행 속도가 빠름
      (컴퓨터의 처리 구조와 유사하고 이를 빨리 받아들이기 때문)
    • 설계하는 데 시간이 많이 걸리지 않음
    • 순서대로 진행되기 때문에 프로그램의 흐름을 쉽게 파악할 수 있음
  • 단점
    • 실행 순서가 정해져있기 때문에 코드의 순서가 바뀌면 같은 결과가 나온다는 보장이 불가능함
    • 역할을 중심으로 나누어져있지 않기 때문에 버그가 발생하면 어디서 발생했는지 찾기 어려움
• 어떤 언어든 상관없이 절차지향적, 객체지향적으로 코딩이 가능하나 각 프로그래밍에 특화된 언어가 존재하는 것임 (= 그런 경향이 있는 것)

4. 객체의 의미

• 객체 : 실제 존재하거나 추상적으로 생각할 수 있는 요소 중에서 다른 것과 식별이 가능한 것
  (세상에 존재하는 거의 모든 것이 객체가 될 수 있음)
  • 속성 : 이름, 나이 등
  • 메서드 : 객체의 행위
• 온점(.)
  • ~의 : 각 객체의 속성을 나타낼 때
  • ~가 ~를 한다 : 객체의 행위(메서드)를 나타내는 것을 표현할 때

5. 공급자와 수요자, 웹 서버오 웹 클라이언트

• 웹 서버, 웹 클라이언트의 의미
  • 클라이언트 : 서비스를 구매 및 사용하는 고객
  • 서버 : 서비스 공급자
  • 웹 서버 : 클라이언트에게 웹 서비스를 제공하기 위해 만들어진 서버 프로그램(응답)
  • 웹 클라이언트 : 웹 서버 서비스를 이용하는 컴퓨터(요청)
  • 웹 클라이언트가 사용하는 대표적인 프로그램 : 크롬과 같은 웹 브라우저
  • 웹 브라우저 : 사용자가 원하는 정보를 웹 서버에 요청하고 HTML 언어를 해독해 줌
    (= 웹 서버가 제공하는 웹 서비스를 사용자가 볼 수 있게 바꾸어주는 프로그램)
  • 웹 서비스를 받으면 웹 클라이언트, 게임 서비스를 받으면 게임 클라이언트, 메일 서비스를 받으면 메일 클라이언트로 지칭
• 데이터 택배, 패킷
  • 패킷 : 웹 서버와 웹 클라이언트가 요청하고 응답하는 과정에서 주고 받는 데이터 뭉치
    • 헤더와 바디로 구성
    • 요청 패킷 : 웹 클라이언트가 웹 서버에서 요청할 때
      • 헤더
        • 요청하는 페이지 주소
        • 클라이언트 정보
        • 요청 방식(ex_POST, GET)
      • 바디 : 보통은 비어있으나 POST 방식일 경우(웹 클라이언트가 정보를 제공해야할 경우) 서버로 전송되는 데이터를 담음
    • 응답 패킷 : 웹 서버가 웹 클라이언트에게 응답할 때
      • 헤더
        • 3자리 숫자로 이뤄진 응답 코드 : 응답이 잘 되었는지, 안됐다면 이유를 숫자로 나타냄
        • 서버와 관련된 정보
      • 바디
        • 서버에서 보내주는 데이터 : 이 데이터를 이용해 웹 페이지 구성 및 사용자에게 보여줌
          (ex_HTML 문서 등)
  • 패킷을 주고 받는 행위를 ‘패킷 교환’이라 부름
  • 프로토콜 : 패킷 교환 과정에서 지켜야하는 규칙
    • HTTP 프로토콜 : 웹 서버와 웹 클라이언트가 소통할 때 사용하는 것
      (URL 작성 시 앞에 HTTP를 붙이는 것은 ‘HTTP 프로토콜을 사용하여 데이터를 통신함 이라는 의미)

6. 정보를 보내는 GET과 POST 방식

• HTTP 메서드 : 웹 클라이언트가 웹 서버에게 필요한 정보를 보내는 방식
  (ex_GET, PATCH, POST, DELETE, PUT 등)
  • GET 방식 : 요청 정보를 URL에 담아 보내는 방식 (헤더만 존재)
    • 장점
      • 빠르다 : 캐싱 전략을 사용하기 때문
    • 단점
      • 단순히 URL에 데이터를 담아 보냄
        • www.~.com/~?id=1111&password=2222
          • id=1111 : 키와 값이 쌍
          • ’?’부터는 어떤 정보가 담겨있는지 알리는 시작점
          • 1개 이상의 정보가 존재하면 ‘& 기호’를 이용하여 연결
        • 데이터 보내는 양의 한계 존재
        • 보안 취약
  • POST 방식 : 요청 정보를 바디에 담아 보내는 방식 (헤더와 바디 모두 존재)
    • 장점
      • 데이터 양에 제한이 없음
    • 단점
      • 캐싱 전략을 사용하지 않기 때문에 GET에 비해서 상대적으로 느림

캐싱 전략

• 한 번 보고 기억해뒀다가 그 다음부터는 기억한 것을 토대로 행동

7. 징검다리 역할을 하는 API

• 애플리케이션을 프로그래밍할 때 사용하는 인터페이스
  = 운영체제가 제공하는 함수의 집합체 (미리 필요 함수를 만들어 모아둔 모음집)
• API는 리모컨과 매우 비슷한 역할을 수행함 : 사용자와 서버를 이어주는 인터페이스
  • 리모컨 버튼만 누르면 기기 조작가능 한 것처럼 API를 이용해 굳이 사용자가 정보를 얻지 않아도 요청 변수만 입력하면 원하는 데이터를 얻을 수 있음
• 웹 프론트엔드와 웹 백엔드 사이에는 API라는 연결고리가 존재함
  • 백엔드 : API를 만들어 줌
  • 프론트엔드 : API를 가져다 씀 (ex_버튼을 클릭하면 백엔드에서 만들어 둔 API를 호출)
• Open API : 누구나 사용할 수 있게 허락된 API
• 요청 변수
  • 웹 클라이언트가 웹 서버에게 보내는 정보 ( = 웹 서버에 요청할 때 담아 보내는 정보)
  • 사용자가 원하는 대로 값을 벼경하여 넣을 수 있기 떄문에 요청변수로 불림
  • 필수로 넣어야하는 ‘필수 변수’와 선택적으로 넣을 수 있는 ‘옵션 변수’가 있음
• 출력 결과
  • 요청 변수를 알맞게 입력하여 해당 API를 호출하면 그 결과물이 출력 결과에 담겨 웹 클라이언트에게 되돌아 감
    (결과가 잘 이루어졌는지 말해 주는 결과 코드와 결과 메시지 포함)

3. 개발자의 절친, 크롬 개발자 도구

1. 크롬 개발자 도구를 쓰는 이유

• 어디에서 오류가 나는건지 확인하고 고치고 싶을 때 유용함 : 웹 개발 및 웹 디자인에 많이 이용됨

2. 웹 페이지의 요소를 볼 수 있는 Element 탭

• 웹 페이지 요소들을 보고, 원하는 대로 변경 가능
• 원하는 버튼 등에 마우스 우클 후 ‘검사’를 눌러 개발자 도구에 접속 가능 (파란색으로 표시된 부분이 사용자가 찾는 부분)

3. 컴퓨터와 소통하는 console 탭

• 개발을 하면서 컴퓨터와 대화할 수 있는 장소
  • 로그를 남겨 원하는 데이터가 제대로 들어갔는지 확인
  • 정보 보기
  • 컴퓨터에게 계산 요청
  • 웹 사이트에 경고창 띄우기

4. 그 밖의 기능들

• 모바일 및 태블릿 화면으로 보기
• 관찰 모드 : 화면을 훝어보기에 좋음
• Network 탭
  • 웹 페이지에 포함된 모든 자원 로딩 시간, 자원 파일 크기, 상태 코드, 자원 타입, 파일명 등의 정보 확인 가능
  • 상태 코드
    • 클라이언트의 요청에 서버가 잘 응답했는지 상태 코드로 확인 가능
    • 100 ~ 199 : 정보 응답
    • 200 ~ 299 : 성공적 응답
    • 300 ~ 399 : 리디렉션 메시지
    • 400 ~ 499 : 클라이언트 오류 응답
    • 500 ~ 599 : 서버 오류 응답
• Source 탭 : 웹 페이지에 포함된 모든 자원들을 왼쪽 탭에서 찾아 열어볼 수 있음
  (ex_CSS, 자바스크립트 파일, 동영상, 이미지 등)
• Appication 탭 : 실행 중인 코드의 프로세스, 스토리지(로컬, 세션), 쿠키, 캐시 정보 표시
• Memory 탭 : 메모리 사용량 모니터링
• Performance 탭 : 페이지 로딩 성능 측정

리디렉션

• 사용자가 특정 사이트나 페이지를 방문했을 때 자동으로 다른 URL로 이동되는 메커니즘