PHP와 JavaScript에 대하여

 웹개발 코딩에 대해서

개인적으로 제가 코딩을 시작하게 된 계기는 대학시절 매트랩을 접하고 이를 학업에, 특히 공학적 계산과 시뮬레이션에 활용하기 시작하면서부터입니다. 이때는 코딩이란 용어도 낯설만큼 '아, 내가 이런 툴로 컴퓨터에게 무언갈 일하도록 만들 수 있구나'라는 재미에 빠져있었던 것 같습니다.

모든 사람이 코딩을 시작하게 된 계기가 각각 다를텐데요 저처럼 공대 출신들은 교과목상 계산을 위해 분명 하나 이상의 프레임워크와 언어를 접했으리라 여겨집니다.

또 어떤 분들은 본 블로그에도 여러번 소개드린 어플리케이션 제작과 관련하여 코딩을 접하시기도 했을텐데요, 오늘은 계산이나 스마트폰 어플이 아닌, 웹 개발에 대해서 잠깐 소개드리고자 합니다.

 정적인 언어

웹 개발과 관련하여 지난 글에서도 HTML과 CSS 그리고 JavaScript에 대해 간략히 소개드린 적이 있습니다.

코딩이란

이전 포스팅의 내용을 간략히 요약하자면, 우리가 웹 브라우저를 통해 방문하는 대부분의 사이트가 그 구조를 HTML로 잡고, 구조 안의 스타일을 CSS로 꾸미며, 구조들 간의 동작을 JavaScript로 작성한다고 볼 수 있습니다.

이때 웹사이트를 아파트에 비유하여 HTML을 아파트의 골격, CSS를 아파트의 벽지 및 디자인, 그리고 JavaScript는 아파트의 승강기 등 기능을 가지고 움직이는 것들에 해당한다고 했습니다.

여기서 HTML과 CSS의 경우 움직이지 않는 정적인 부분을 담당하는 것을 알 수 있습니다. 즉, HTML과 CSS는 정적인 언어로, 웹사이트의 변동성이 없는 부분을 담당하고 있습니다.

 동적인 언어

앞서 설명드린대로 JavaScript는 웹사이트 개발 시 웹사이트의 동작을 담당하는 동적인 언어입니다. 

동적인 언어에 한가지 더 추가를 하자면 PHP가 있는데요, PHP의 경우, JavaScript와 유사한 기능을 담당하지만 두 언어간에는 조금의 차이가 있습니다.

그 차이는 바로 웹통신 단계 중 두 언어가 어느 단계에서 동작하는가에 있는데요, JavaScript의 경우 최종적으로 사용자가 바라보는 웹브라우저단에서 동작하는 언어인 반면, PHP는 서버 단에서 동작하는 언어입니다.

이렇게 글로 작성하면 잘 와닿지 않는데요, 코드를 작성해서 예시를 들면 오히려 이해하기가 더 어려울 것 같아 아래에서 간단한 연산을 예시로 설명해보겠습니다.

 PHP와 JavaScript

일단 먼저 웹사이트에서 동적으로 어떤 기능을 한다는 것이 무슨 의미인지 예를 들어보도록 하겠습니다.

우리가 웹 브라우저를 통해 네이버 뉴스와 네이버 계산기 페이지를 각각 띄운 상태라고 가정하겠습니다.

네이버 뉴스의경우 검색결과에서 정보를 보여주기만 하면 되지만, 계산기의 경우는 우리가 입력하는 수식대로 계산을 해서 다시 화면에 표시해줘야합니다.

이 경우 계산기는 동작을하는 페이지이므로 높은 확률로 동적인 언어로 작성되어있을 것입니다.

그럼 이번에는 이 계산기를 기준으로 PHP와 JavaScript를 비교해보도록 하겠습니다.

먼저 이해를 위해 한가지 동작을 특정해서 비교해보겠습니다. 여기서는 6x5를 계산하도록 하는 경우를 가정해보겠습니다.

일단 화면에 표시되는 계산기의 디자인은 정적인 언어로 모두 작성되어 있습니다.

예를 들어 계산기의 계산 결과가 표시되는 영역, 숫자를 클릭할 수 있는 영역, 사칙연산 버튼 영역 등은 HTML을 통해 구역으로 정해둡니다.

그런 뒤 CSS를 활용하여 이 HTML로 구성한 구역들에 색을 입히고 영역의 너비와 두께 등 스타일링을 해주게 됩니다. 

즉, HTML로 스케치를 했고, CSS로 컬러링하며 스케치한 구조를 적당한 선에서 수정하는 것입니다.

이러면 일단 계산기의 외관이 완성됩니다. 그럼 이 계산기가 진짜 계산기로서 기능을 하기 위해서는 이제 동적 언어를 사용할 차례입니다.

사용자는 웹브라우저 창에 나타나는 화면을 바라볼 뿐입니다. 그러면 PHP로 계산을 하든 JavaScript로 계산을 하든 6x5를 명렁하면, 둘다 동이랗게 30이라는 숫자를 화면에 반환해줄 뿐입니다.

그런데 우리는 이 계산이 어디서 이뤄지는지를 구분할 필요가 있습니다.

만약 PHP로 코딩이 된 상태라고 하면, 사용자가 숫자6, 곱하기, 숫자5를 차례로 입력하면 이 정보가 서버측으로 전송되고, 서버에서 계산 결과로 30이란 숫자를 다시 브라우저로 반환해줍니다. 그러면 브라우저 단에서 웹페이지의 소스코드를 확인해보면, 30이란 숫자만 적혀있을 뿐입니다.

반대로 만약 JavaScript를 활용해 계산기를 구현한 경우는 어떻게 될까요. 동일하게 사용자가 숫자6, 곱하기, 숫자5를 차례로 입력한 경우, 웹페이지의 소스코드를 확인해보면, JavaScript언어로 해당 계산을 실행하라는 코드를 확인할 수 있을 것입니다.

즉, 소스코드 상으로는 계산을 하라는 코드가 되어있고, 우리 눈으로는 브라우저에서 계산이 되어 결과값이 30이 출력되는 것입니다.

이렇게 두 경우를 비교해보면, 각각 어디서 계산이 이뤄지냐가 다르기때문에, 상황에 따라 장단점이 있을 수 있습니다.

두 언어의 장점과 단점에 대해서는 다음 포스팅에서 조금 더 자세히 다뤄보도록 하겠습니다.

 

함께 보면 좋은 글

2022.01.30 - [분류 전체보기] - 지금 꼭 파이썬(python)을 시작해야하는 이유

지금 꼭 파이썬(python)을 시작해야하는 이유

2022.02.16 - [분류 전체보기] - 구글 Flutter로 어플개발을 시작해야하는 이유

구글 Flutter로 어플개발을 시작해야하는 이유

2022.02.26 - [분류 전체보기] - 구글 플러터 통합개발환경(IDE)란

구글 플러터 통합개발환경(IDE)란