절차지향(Procedural Programming)이란?

물이 위에서 아래로 흐르는 것처럼 순차적인 처리가 중요시 되며 프로그램 전체가 유기적으로 연결되도록 만드는 프로그래밍 기법입니다. 대표적인 절차지향 언어에는 C언어가 있습니다.

이는 컴퓨터의 작업 처리 방식과 유사하기 때문에 객체지향 언어를 사용하는 것에 비해 더 빨리 처리되어 시간적으로 유리합니다. 옛날에는 하드웨어와 소프트웨어의 개발 속도차이가 크지 않았습니다. 하지만 하드웨어의 빠른 발전을 통해 컴퓨팅 환경은 급속도로 증가했지만 소프트웨어 개발 시간이 따라가지 못하게 되고 이런 상황에 소프트웨어의 개발시간을 단축하되 하드웨어에 기본적인 사양을 잡아먹어도 더 이상 큰 단점이 아니기에 모듈화, 캡슐화해서 개념적으로 접근하는 형태를 갖는 객체지향 프로그래밍이 탄생했습니다. 객체지향 프로그래밍은 개발하려는 것을 기능별로 묶어 모듈화를 함으로써 같은 기능을 중복으로 연산하지 않거나 모듈을 재활용하기 때문에 유지보수에 유리합니다.

장점

  • 컴퓨터의 처리구조와 유사해 실행속도가 빠름

단점

  • 유지보수가 어려움
  • 실행 순서가 정해져 있으므로 코드의 순서가 바뀌면 동일한 결과를 보장하기 어려움
  • 디버깅이 어려움

객체지향(Object Oriented Programming)이란?

객체지향의 정의를 살펴보면 객체지향이란 실제 세계를 모델링하여 소프트웨어를 개발하는 방법입니다. 객체지향 프로그래밍에서는 데이터와 절차를 하나의 덩어리로 묶어서 생각하게 됩니다. 이는 마치 컴퓨터 부품을 하나씩 사다가 컴퓨터를 조립하는 것과 같은 방법입니다. 객체 지향의 3대 특성은 다음과 같습니다.

1. 캡슐화(은닉화)

  • 캡슐화 : 관련된 데이터와 알고리즘(코드)이 하나의 묶음으로 정리된 것으로써 개발자가 만들었으며, 관련된 코드와 데이터가 묶여있고 오류가 없어 사용이 편리합니다. 데이터를 감추고 외부 세계와의 상호작용은 메소드를 통하는 방법인데, 라이브러리로 만들어 업그레이드하면 쉽게 바꿀 수 있습니다.
  • 메소드 : 메시지에 따라 실행시킬 프로시저로서 객체지향 언어에서 사용되는 것. 객체지향 언어에서는 메시지를 보내 메소드를 수행시킴으로써 통신(communication)을 수행

2. 상속

  • 상속은 이미 작성된 클래스를 이어 받아서 새로운 클래스를 생성하는 기법으로 위에서 말한 기존 코드를 재활용해서 사용하는 것을 의미합니다. 객체지향 방법의 큰 장점중 하나입니다.

3. 다형성

  • 다형성이란 하나의 이름(방법)으로 많은 상황에 대처하는 기법입니다. 개념적으로 동일한 작업을 하는 함수들에 똑같은 이름을 부여할 수 있으므로 코드가 더 간단해지는 효과가 있습니다.

위의 특성들로 인해 생기는 객체지향 방법의 장점은 다음과 같습니다.

  • 신뢰성 있는 소프트웨어를 쉽게 작성할 수 있다
  • 코드를 재사용하기 쉽다.
  • 디버깅이 쉽다.

이론적으로만 본다면 객체지향 언어는 절차지향 언어에 비해 장점이 많습니다. 하지만 프로그래밍을 할 때 항상 객체지향 언어만 사용하는 것은 아닙니다. 객체지향 언어는 어떤 모듈에 있는 하나의 기능만 필요하더라도 모듈 전체를 가져와야 하기 때문에 절차지향 프로그래밍보다 프로그램 사이즈가 더 커질 수도 있습니다. 또한 데이터에 대한 접근도 상대적으로 절차지향식보다 느려질 가능성이 많습니다. 메소드를 통해서만 접근이 가능하기 때문에 절차지향식처럼 특정 함수에 접근할 수 없고, 식으로만 접근이 가능해 속도적인 측면에서 불이익이 있습니다.

장점

  • 코드의 재활용성이 높음
  • 코딩이 절차지향보다 간편함
  • 디버깅이 쉬움

단점

  • 처리속도가 절차지향보다 느림
  • 설계에 많은 시간소요가 들어감

객체지향과 절차지향의 차이점

객체지향과 절차지향은 서로 반대되는 의미는 아닙니다. 절차지향은 순차적으로 실행에 초점이 되어 있고, 객체지향은 객체간의 관계/조직 초점을 두고 있습니다. 이렇게 설명하면 객체지향은 절차적으로 실행되지 않냐? 라는 의문이 드는데 객체지향 역시 절차지향과 동일한 순서로 실행됩니다.

Ajax(Asynchronous JavaScript and XML)

비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 웹 개발 기술

Ajax를 사용하면 웹 페이지가 전체적으로 새로고침 되지 않고도 필요한 부분만 업데이트할 수 있으며,

이를 통해 웹 페이지의 사용성과 반응성을 높일 수 있다고함

 

Ajax의 특징

  • 비동기성: Ajax는 페이지를 전체적으로 새로고침하지 않으므로, 비동기적으로 데이터를 처리할 수 있음
    클라이언트 측 스크립트 기술: Ajax는 자바스크립트를 기반으로 하며, 서버와 데이터를 주고받을 때
    XML, JSON, HTML 등 다양한 데이터 형식을 사용할 수 있음.
  • 서버와의 데이터 교환: Ajax는 서버와 브라우저 간에 데이터를 비동기적으로 교환할 수 있으며,
    이를 통해 서버에서 데이터를 받아와서 페이지를 업데이트할 수 있음.
  • DOM 조작: Ajax는 DOM을 조작하여 데이터를 동적으로 업데이트할 수 있음.

동기 비동기?

더보기

동기적(Synchronous) 작업은 어떤 작업을 수행할 때, 그 작업이 끝나기 전까지는 다른 작업을 수행할 수 없는 방식임

이전 작업이 끝나지 않으면 다음 작업을 시작할 수 없어서,브라우저는 이전 작업이 완료될 때까지 화면을 갱신하지 않고 멈춰있게 됩니다.

따라서, 사용자가 화면의 다른 부분을 조작할 수 없게 되고, 사용자 경험이 저하됩니다.

비동기적(Asynchronous) 작업은 작업을 수행할 때, 해당 작업이 완료되지 않더라도 다른 작업을 수행할 수 있는 방식입니다. 비동기 작업은 백그라운드에서 수행되며, 작업이 완료되면 결과를 반환하거나 콜백 함수를 호출합니다. 이러한 방식으로 작업을 처리하면 브라우저는 작업이 완료되기 전에도 다른 작업을 수행할 수 있으므로 사용자 경험을 향상시킬 수 있습니다.


DOM 이란?

더보기

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

 

Ajax의 주요 속성

  • type: HTTP 요청 메서드 (GET, POST, PUT, DELETE 등)
  • url: 요청을 보낼 서버의 URL
  • data: 요청에 함께 보낼 데이터 (JSON, XML, HTML, 텍스트 등)
  • dataType: 서버에서 받아올 데이터의 타입 (JSON, XML, HTML, 텍스트 등)
  • success: 요청이 성공적으로 완료되었을 때 실행할 콜백 함수
  • error: 요청이 실패했을 때 실행할 콜백 함수
  • complete: 요청이 완료되었을 때 실행할 콜백 함수

Ajax의 추가 속성

  • async: 비동기 요청 여부 (기본값은 true)
  • beforeSend: 요청을 보내기 전에 실행할 콜백 함수
  • timeout: 요청에 대한 제한 시간 (밀리초 단위)
  • cache: 캐시 사용 여부 (기본값은 true)
  • contentType: 요청 본문의 MIME 타입
  • processData: 데이터 처리 여부 (기본값은 true)
  • complete: 요청이 완료되었을 때 실행할 콜백 함수
  • headers : HTTP 헤더를 설정할 때 사용됩니다.

MIME타입 이란?

더보기

MIME 타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘입니다.

웹에서 파일의 확장자는 별 의미가 없습니다. 그러므로, 각 문서와 함께 올바른 MIME 타입을 전송하도록,

서버가 정확히 설정하는 것이 중요합니다.

브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 대게 MIME 타입을 사용합니다.

application/x-www-form-urlencoded, multipart/form-data, text/plain 등의 값을 가질 수 있으며.
이 속성을 설정하지 않으면 jQuery가 기본적으로
application/x-www-form-urlencoded로 설정합니다.

 

 

Ajax의 성공/실패 여부

Ajax 요청이 성공적으로 수행된 경우에는 success 함수를, 실패한 경우에는 error 함수를 사용하여 결과를 처리가능

추가 예정 사항

상태코드, 

response들

dom구조 추가설명

'수업정리 > JavaScript' 카테고리의 다른 글

AJAX 오류  (0) 2023.06.07

 

* 깃허브를 이용하여 VSCode에 작성한 내용을 업로드 하는 것에 대한 내용만 작성하였습니다

 

 

 

1) 깃 설치하기

https://git-scm.com/downloads

 

Git - Downloads

Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp

git-scm.com

다른 변동사항 없이 next로 다 넘겨서 그냥 설치했습니다

 

 

설치 후 Git Bash 실행

 

git bash 실행화면

 

 

Git Bash에 git version을 적으면 설치된 git의 버전 확인이 가능합니다. 

 

 

2) Git Bash에 정보 등록하기

본인의 깃허브 이메일과 아이디를 작성합니다.

git config --global user.name "깃허브 아이디"
git config --global user.email "깃허브 메일 주소"

 

 

잘 작성되었는지 확인하는 방법

git config --list

이메일과 아이디가 뜨면 성공!

 

 

3) 깃허브에 로그인 후 repositories에 새로운 저장소 생성하기

 

텍스트 복사해서 VSCode 내부 cmd 창 실행해서 붙여넣기

 

그러면 README.md 라는 파일이 생기면서 파일들이 초록색이 되는 걸 볼 수 있습니다.

 

 

4) .gitignore 파일 생성하기

.gitignore 파일을 생성해야하는 이유는 

업로드 하지 않아도 될 파일을 제외하기 위해서 입니다.

.gitignore 파일이 없으면 커밋해야하는 항목이 굉장히 많아지게 되니 되도록이면 함께 만들어주세요

 

 

밑의 링크로 들어가셔서

https://www.toptal.com/developers/gitignore

 

gitignore.io

Create useful .gitignore files for your project

www.toptal.com

 

 

본인의 프로젝트에 사용하는 언어나 라이브러리를 넣어서 생성을 클릭하면

 

새 창에 텍스트가 뜨고 그 텍스트를 모두 복사하여 .gitignore 파일에 붙여 넣기하면 됩니다.

 

 

5) 커밋하기

메세지를 작성하고 커밋버튼을 누르면 되는데 메세지에 대한 규칙도 존재하나 지금은 연동이 목적이기 때문에 패스하겠습니다.

메세지 작성 후 커밋 누르기
게시 누르기
이 화면이 뜬다면 성공!

 

 

6) 깃허브에서 확인하기

 

+ Recent posts