Chinese (Simplified) English Italian Japanese Korean Portuguese Spanish
프론트엔드와 백엔드 차이와 퍼블리싱 뜻 (feat. 워드프레스 기초)
본문 바로가기
For.knowledge/IT 공부

프론트엔드와 백엔드 차이와 퍼블리싱 뜻 (feat. 워드프레스 기초)

by 오늘의 TIP 2023. 7. 11.
반응형

코딩이란 사업을 목적으로 하거나 취미를 목적으로 할 수 있고, 요즘 개발자가 핫한 것처럼 취업을 목적으로도 할 수 있는데요. 이번 시간에는 코딩 초보가 알아야 하는 필수 상식과 용어들에 대해서 짚어보는 시간을 가져보겠습니다. 영어가 많은 코딩을 배우는데 시간을 줄여드리겠습니다. 지금 시작합니다.

반응형

[글의 순서]

1. 코딩 용어 알기전 필수 상식

2. 코딩 용어 알아보기 

3. 앱과 웹의 차이

4. 코딩의 시작 기초

5. 프론트 엔드와 백엔드


코딩 용어 알기 전 필수 상식

 

코딩의 순 목적을 그대로 행하면 빠르게 배울 수 있지만, 하나하나 기초부터 배우게 되면 상당히 오랜 시간이 걸립니다. 외국어를 배울 때 외국어를 많이 사용하는 환경에 그대로 노출되면 그 외국어 실력이 빨리 느는 것과 같은 이치입니다. 

 

먼저 코딩을 배우려고 하면 알 수 없는 용어들이 숱하게 나옵니다. 코딩을 잘 하려면 모르면 그냥 패스입니다. 우리는 코딩을 잘하고자 하는 목표만 기억하고, 모르는 용어 하나하나 마다 집요하게 알 필요가 전혀 없기 때문입니다. 

 

완벽하게 아는 순간은 절대로 오지 않기 때문입니다. 예시로 우리는 한글을 쓰고, 말하고 있지만, 이 뜻과 유래, 적절한 표현법, 맞춤법 등 정확하게 아는 사람은 국어 국문학자 외엔 없는 것과 같은 이치입니다. 즉, 모르면 그때 검색을 하면 됩니다.


코딩이란 무엇일까요?

코딩에 대한 큰 틀을 알려주는 사람들이 논의를 하고 프로그래밍을 하는 작업을 보여주는 그림
코딩이란 코드를 짜는 것입니다.  코드를 짠다는 것은 코드로 된 문서를 만든다는 것을 의미합니다. 코드란 우리가 사용하는 앱(어플리케이션)이나 웹이나 모든 소프트웨어를 개발할 때 사용하는 언어를 말합니다.

 

즉, 코딩이란 컴퓨터들이 사용하는 언어로 문서를 만드는 것이 코딩입니다.

 

그렇다면 프로그램을 개발하는 것은 프로그래밍이라고 합니다. 그렇다면 코딩과 프로그래밍의 차이는 뭘까요?코딩은 코드를 짜는 그 행위 자체로 프로그래밍은 코딩을 포함한 프로그램을 완성하는데 필요한 모든 행위의 개념이지만 혼용해서 사용하기 때문에 그냥 코딩과 프로그래밍이 같다고 생각하시면 됩니다.

 


앱과 웹의 차이

구글 이모티콘에 대한 설명으로 구글 앱 표시가 나와있는 모습
앱은 데스크톱이나 노트북에서 google.com 등의 주소를 치고 들어가는 것이 웹입니다. 같은 구글을 치고 들어가도 스마트폰에서 보면 구글이 스마트폰 크기에 맞게 보이는 것이 모바일 웹입니다. 앱은 안드로이드라면 구글 플레이, 아이폰이라면 앱스토어에서 구글이라고 검색하고 설치하는것이 앱입니다. 
앱의 기능을 설명하는 것으로 앱의 강력한 기능을 표한한 그림으로 구글맵이 스마트폰에 표시되어 있는 모습
웹앱은 웹을 앱처럼 만들어 놓은 것이 웹앱입니다. 앱 화면 대표 이미지가 떠오르지 않나요? 네이버 앱 N, 구글 앱 G 처럼 심볼이 단순하고 유틸리티에 가깝고 도구적이고, 기능적인 이미지가 강합니다. 그래서 웹서핑이라는 말은 있지만, 앱 서핑이라는 말은 없습니다. 

코딩 시작하기 전 기초

미국인들은 영어를 쓰고, 우리는 한글을 씁니다. 그리고 컴퓨터는 사실 0과 1 두 가지 숫자만을 사용합니다. 인간의 입장에서 컴퓨터를 비롯한 하드웨어들이 알아들을 수 있게 대화하려면 0011011101 이런 식으로 알려주면 컴퓨터는 화면에 인간의 용어를 표시하게 됩니다. 이건 아무리 봐도 사람이 할 짓이 못됩니다.

 

그래서 C언어를 비롯한 인간들이 쓰기에 편리한 언어들이 나오게 되었습니다.  이러한 언어들은 컴파일이라는 과정을 거치게 되는데요. 컴파일이란 인간이 알아들을 수 있는 코드로 된 문서를 PC가 알아 볼 수 있도록 번역을 하는 과정입니다.

 

코드로 된 문서는 소스라고 하고, 윈도우 확장자가 exe인데 예를 들면 코드로 된 문서를 만들어 놓고 이 파일을 컴파일 시키면 문서가 번역되는 것이고, 결과물로 exe 파일이 나오게 되는 것입니다. 코드로 된 문서는 소스라고 하고, exe 는 결과물이됩니다.

 

결과물만 사용자들에게 배포되거나 판매되기 때문에 사용자는 소스를 볼 수가 없게 됩니다. 그래서 따라 만들수도 없습니다. 반대로 소스가 배포되면 누구든 비슷한 결과물을 만들 수 있게 됩니다. 어떤 기기든 인터페이스가 있는 소프트웨어를 만들고 싶다면 여러분은 html과 css 그리고 Java Script를 가장 먼저 하시면 됩니다. 

개발의 기초 프론트엔드와 백엔드

 

 

 

 

일반적으로 프론트&개발이라고 불리는 개발에는 프론트엔드와 백엔드가 있습니다. 프런트엔드는 사용자의 눈에 보이는 화면 앱 화면 웹 화면이고요, 백엔드는 눈에 안보입니다.

 

프론트엔드

예를 들어 유튜브라고 하면 유튜브의 영상 내용은 항상 달라지지만 화면에 틀 레이아웃은 항상 그대로입니다. 왼쪽 상단에 유튜브 로고가 있고 누르면 홈 화면으로 가는 걸 알고 있습니다. 그리고 돋보기 아이콘을 누르면 검색이라는 걸 알고 있습니다. 

 

이건 누가 알려주지 않았는데도 불구하고 우리가 알 수 있는 이유는 바로 유저 인터페이스, 유저 익스피리언스 줄여서 UI와 UX 때문입니다. 사용자들의 기준 경험이 자연스럽게 이 버튼은 그 행동을 하겠구나 하고, 학습이 되고 인지가 된 것이죠. 

 

마치 암묵적인 약속으로 왼쪽 위에는 로고가 있고, 오른쪽 위에는 로그인된 사용자 메뉴가 있습니다. 이게 맨날 바뀌면 검색이 어디있는지 찾기가 어렵겠죠? 이런 혼란을 막고, 사용자의 경험을 올려주는 것 이것이 바로 프론트 엔드 영역의 담당이자 목적입니다.

 

즉, 서비스와 사용자 간의 커뮤니케이션을 하는 역할입니다. 그리고 사용자에게 더 편하고, 더 좋은 경험을 제공하는 목적을 가지고 있습니다. 

 

백엔드

유튜브에 메인 틀은 그대로지만 반면에 메인에 노출되는 영상은 새로고침 할 때마다 바뀌죠 내가 관심있어 할 만한 영상을 메인에서 자꾸 노출시켜 줍니다 이런 영상들을 유튜브 알고리즘이 선택해 줬다고 말을 합니다. 이런 알고리즘의 선택이 바로 백엔드예요.

백엔드에서 내가 이전에 봤던 영상이나 구독 상태를 반영해서 뭘 노출시킬 건지 결정을 했고 이걸 프론트엔드에게 알려줍니다 그럼 프론트엔드는 정해진 틀에서 백핸드가 알려준 결과대로 보여주는 역할만 하는 거죠.

좀 전에 말씀드렸던 대로 사용자와데이터 즉 백엔드 간의 대화를 중재하는 역할이에요. 원활한 중재를 위해서 좋은 ui/ux가 필요한것이고요. 사용자가 유튜브 메인에 접근합니다. 그리고 나면 프론트엔드가 어떤 영상을 메인에 보여줘야 할지 백엔드한테 물어봅니다.

 

이때 물어보는 행동을 API 호출이라고 합니다. api를 호출하면 백엔드에서 응답을 합니다. 이 응답은 보통 json이라는 문서 형태로 응답합니다. 응답의 결과인 제이슨을 프론트엔드가 얻고 화면에 표시를 해줍니다 사용자가 프론트엔드와 백엔드 간의 일련의 상호작용을 합니다.


그럼 프론트엔드와 백엔드 중 뭐가 더 재밌을까요? 사람마다 다르겠죠 보통은 프론트엔드가 사용자들에게 직관적으로 드러나기 때문에 더 재미있는 편입니다. 하지만 백엔드도 데이터 베이스를 잘 다루게 되면 상당히 재미있습니다.

기술의 가치는 일반적으로 백엔드가 더 높은 편이지만 고민하면 안 되는 문제입니다 프론트엔드건 백엔드건 다 하는게 너무 당연합니다. 진짜 개발을 위해서라면요 .


코딩을 하기전 필수 상식과 프론트 엔드, 백엔드, api 호출과 제이슨, 코딩 개념에 대해서 알아보았습니다. 긴 글 읽어주셔서 감사합니다.

 

 

 

 

 

반응형
그리드형

댓글