자바스크립트

통상 웹 사이트에서 동적인 기능을 구현하는데 쓰는 프로그래밍 언어가 바로 자바스크립트다.

 

HTML로 구조물을 가져다 놓고, CSS로 꾸며놓고, 자바스크립트로 일을 시킨다는 개념으로 접근하면 이해가 쉬울 것이다.

 

 

웹 표준

인터넷 익스플로러를 제외한 나머지 브라우저들이 웹 표준을 발족하고 그에 맞게끔 개발하였다.

 

현재는 웹 표준을 따르지 않는 인터넷 익스플로러는 사양길을 걷고 있다.

 

액티브 X의 악명을 아는 사람들이라면야..

 

2022년 06월 부터 익스플로러는 사용할 수 없는 브라우저로 보면 된다.

 

 

반응형 Vs 적응형

반응형 웹은 페이지 내 요소들을 신축성 있게 만들어 어떤 기기서 접속하여도 화면을 알맞게 자동으로 조정하는 웹사이트

 

들이다.

 

 

각 웹 페이지를 하나씩만 만들 되, 메뉴나 본문 영역, 메인 이미지등 같은 콘텐츠들의 모습을 기기에 따라 능동적으로

 

대응할 수 있게끔 CSS와 자바스크립트로 프로그래밍하면 끝이다.

 

예전에는 상상도 못하던 일이다.

 

 

화면 크기에 따라 검색 창이나 긴 서브 메뉴, 손가락으로 터치하기 너무 작은 버튼들 등은 아무리 반응형 웹으로 만든다고

 

해도 컴팩트한 기기에서는 표현이 다소 아쉬울 수 있다.

 

 

그래서 이를 좀 더 가용성 있게 만든 것이 적응형 웹이다.

 

화면 크기에 따라 PC용과 모바일용 웹사이트를 따로 만드는 것으로

 

어떤 기기에서 접속하느냐에 따라 PC용이냐 모바일용이냐로 나눠서 접속하게끔 만들어주는 것이다.

 

 

통상 간단한 기능의 웹 페이지라면 반응형 웹으로 만들고,

 

복잡한 기능을 가진 웹 페이지라면 적응형 웹으로 따로따로 만드는 게 더 효율적이다.

 

이유는 반응형 웹으로 복잡한 기능을 구현하다보면 기기에 따라 고려해야 될 변수가 너무 많기 때문이다.

 

그렇기 때문에 초기 설계시 소프트웨어 아키텍처는 이를 치밀하게 계산하여 반영하여야

 

추후 있을지도 모르는 유지보수에서의 비용을 세이브할 수 있다.

 

 

 

 

'개발자와 커뮤니케이션' 카테고리의 다른 글

개발자들의 용어 정리 10 [토큰, 캐시, CDN]  (0) 2022.12.10
개발자들의 용어 정리 9 [쿠키, 세션]  (0) 2022.12.09
개발자들의 용어 정리 7 [웹사이트, 웹 브라우저, HTML, CSS]  (0) 2022.12.06
개발자들의 용어 정리 6 [IaaS, PaaS, SaaS], AWS EC2 등 Note.  (0) 2022.12.05
개발자들의 용어 정리 5 [서버, 데이터 센터, AWS]  (0) 2022.12.04

웹 사이트

사용자가 가장 많은 소프트웨어가 웹 사이트이다.

 

모바일 애플리케이션(일명 앱)이라고 알고 있는 S/w 중 실제론 웹 사이트 인 것이 많다.

 

사용자가 많은 만큼 IT업계에 웹 개발자 비율도 매우 높은 편.

 

 

웹 브라우저

웹 사이트 열람에 필요한 S/w

 

웹 사이트를 열어 인터넷 서핑을 하는데 사용되는 S/w를 웹 브라우저, 줄여서 브라우저 라고 한다.

 

*.html 형식으로 문서를 읽는다.

 

검색창 -> 주소 입력(요청하다) -> 사용자 + 브라우저(요청) + 서버(응답) -> 화면 표현(클라우드단)

 

 

화면 표현(클라우드단)시 

 

화면의 골격은 HTML로, 꾸며주는 기능은 CSS, 각 요소에 프로그래밍은 Javascript로 기능들이 구성된다.

 

HTML, CSS : 정적 언어

 

Javascript : 동적 언어

 

 

HTML

요소를 가져다 놓는 마크업 언어

 

body, div, h1 등을 태그라 부르며 <태그>로 시작, </태그>로 마무리 하는 형식을 갖는다.

 

Ex> 

 

<body>

  <div>

  <h1>버튼 클릭 수 표시<h1>  // h1 형식으로 문자열 "버튼 클릭 수 표시"

  <span>0</span>                   // "0" 표시

  <button>클릭!</button>        // 버튼 그림 불러오며 "클릭!" 문자열 표시.

 </div>

</body>

 

위처럼 HTML은 웹 페이지에 어떤 요소를 어떻게 놓을지

 

그저 "배치"하는 설계도 입니다.

 

즉, 구조도에 불과합니다.

 

※ 문서나 데이터의 구조를 표현하는 데 사용되는 언어를 마크업 언어라고 함.

 

 

CSS

요소를 꾸미는 스타일 언어

 

HTML 코드를 예쁘게 꾸며주는 것이 CSS 이다.

 

CSS는 HTML과 마찬가지로 마크업 언어(Markup language)이며 실제로 표시되는 방법을 기술하는만큼

 

스타일 언어(style sheet language)라고 한다.

 

 

Ex>

 

body {

  margin: 24px;

}

  div {

     display: inline-block;

     padding: 12px 32px 24px 32px;

     border: 2px solid #b6d4fe;

     border-radius: 12px;

     text-align: center;

}

 

 

CSS는 디자인 속성을 지정해주는 역할만 담당하므로 프로그래밍 언어는 아닌 스타일 언어로 불린다.

 

주로 웹 디자이너들이 잘 쓴다.

'개발자와 커뮤니케이션' 카테고리의 다른 글

개발자들의 용어 정리 9 [쿠키, 세션]  (0) 2022.12.09
개발자들의 용어 정리 8 [자바스크립트, 웹표준, 반응형+적응형]  (0) 2022.12.08
개발자들의 용어 정리 6 [IaaS, PaaS, SaaS], AWS EC2 등 Note.  (0) 2022.12.05
개발자들의 용어 정리 5 [서버, 데이터 센터, AWS]  (0) 2022.12.04
개발자들의 용어 정리 4 [코드리뷰, 문서화]  (0) 2022.12.04

클라우드 업체가 어디까지 해주느냐에 따라 3가지 용어로 정리가 가능하다.

 

IaaS

(자유도↑ 보안, 기술력 필요)

이아스, 아이아스는 클라우드를 이용, 서버용 인프라를 대여해주는 시스템이다.

 

즉, 가상화된 컴퓨터를 대여해 주는 서비스.

 

자유도는 높으나 서버 보안, 네트워크 설정 등 기술적 난이도가 조금 있다.

 

AWS의 EC2 가 대표적인 서비스

 

 

 

PaaS

(자유도↓ 애플리케이션 개발에만 몰두 가능)

파스는 서버, 운영체제, 개발 환경 등을 자동으로 설치하고 제공 함으로써

 

애플리케이션 개발에만 몰두 할 수 있도록 일종의 플랫폼을 서비스한다.

 

 

인프라 구축과 유지비용 등 고려할 필요 없이

 

그저 S/w 개발만 하면 된다.

 

 

Aws의 일래스틱 빈스토크나 헤로쿠 등이 있다.

ㄴ 일래스틱 빈스토크와 헤로쿠를 사용시 별도의 서버 관련 작업 없이 작업한 소스코드를 업로드하여 

웹사이트와 같은 온라인 프로그램을 구동할 수 있다.

 

 

 

SaaS

(자유도↓↓ 사용료만 내면 사용가능, 그러나 만들어진 걸 가져다 쓰는 개념이므로 불필요한 기능이 비용에 포함되어 있을 확률이 크다.)

싸스는 S/w가 이미 완성된 형태로 제공되는 클라우드 서비스다.

 

이용자는 SaaS를 이용하기 위해 그저 돈만 지불하면 된다.

 

사용료만 지불하면 AWS 자체적인 프로그램을 S/w 형식으로 사용할 수 있다.

 

 

IaaS나 PaaS와 달리 초기 구축 비용을 대폭 줄일 수 있다.

(물론 트래픽이 증가하면 할수록 사용료는 기하급수적으로 증가하므로

재설계는 필수적이다.)

 

구글 드라이브, 네이버 N클라우드, 드롭박스, MS 오피스 365 등의 프로덕트가 있다.

 

 

'개발자와 커뮤니케이션' 카테고리의 다른 글

개발자들의 용어 정리 8 [자바스크립트, 웹표준, 반응형+적응형]  (0) 2022.12.08
개발자들의 용어 정리 7 [웹사이트, 웹 브라우저, HTML, CSS]  (0) 2022.12.06
개발자들의 용어 정리 5 [서버, 데이터 센터, AWS]  (0) 2022.12.04
개발자들의 용어 정리 4 [코드리뷰, 문서화]  (0) 2022.12.04
개발자들의 용어 정리 3 [배포, 유지보수, 리팩토링]  (0) 2022.12.04

서버

서버는 역할의 개념이다.

 

주는 곳(서버), 받는 곳(클라이언트)이라 생각하면 된다.

 

따라서 개인용 컴퓨터도 서버의 역할을 할 수 있다.

(개인용 컴퓨터로 외부서 접속할 수 있게끔 온라인 서비스를 할 수 있으나 H/w의 구조적 문제와 S/w의 효율성 문제로 여러가지 제약이 따른다.)

 

서버는 '컴퓨터에 서버 역할을 하게끔 만들어주는 소프트웨어'라고 지칭한다.

Ex> 아파치 http 서버와 같이 "컴퓨터의 특정 폴더" 안의 "HTML 파일"로 웹사이트에 띄울 수 있도록 하는 프로그램을

★웹 서버 라고 합니다.(예전 FTP 시스템을 활용한 서버 폴더 안의 HTML 파일을 웹 사이트로 불러오는 방식)

 

일반 PC(물리 PC) -> Apach S/w(웹 서버 프로그램 설치&실행) -> 서버 PC로 활용 가능(물리PC&Sw server) -> 웹 사이트 제공

 

 

 

데이터 센터

서버 역할에 적합한 H/w 구성, 안정적인 네트워크, 해킹으로부터 안전해야 한다.

 

위와 같은 조건을 갖춘 시설은 데이터 센터, 혹은 IDC(Internet Data Center) 라고 한다.

ㄴ 통신설비, 냉각 장치로 이뤄져 있다.

 

2021년 기준 한국에만 150곳 정도가 있다.

 

데이터 센터를 가지지 못한 개인에게 임대해 주는 것을 ★서버 호스팅 이라 한다.

 

서버 호스팅으로 외부 데이터 센터에 두기 민감한 정보는 사내 전산실에 서버를 구축(Ex> Server + Intranet)합니다.

 

회사 자체적으로 서버를 갖추고 운영하는 것을 ★온프레미스(On-premise)라 한다.

※ 보안 이슈 + 회사의 자유도가 필요 => 온프레미스 방식

ㄴ 서버 구축에 굉장한 난이도와 전문성 필요. 

 

※ 외부 호스팅 서버로 대여 받은 서버 => ★호스티드(Hosted server) 서버

ㄴ 서버 호스팅은 원가 절감 측면에선 좋지만 유출되면 안되는 정보를 외부 컴퓨터에 둔다는 리스크도 있다.

 

단순 서버호스팅 관점에서의 장, 단점(물리적 Server -> 통신을 통한 물리적 Server 임대)

장점 단점
자유도가 높다 사용 가능 용량이 한정적
초기 자본에서 원가가 저렴하다 운영체제, 네트워크, 보안 솔루션 등 다양한 프로그램 구축해야 한다.

 

 

 

 

AWS(물리적 서버를 클라우드화:가상화 -> 가상화된 파편서버를 임대)

ㄴ 네트워킹 기반으로 가상 컴퓨터와 스토리지, 네트워크 인프라 등 다양한 서비스를 제공한다.

앞서 단순 서버호스팅의 단점을 모두 상쇄시켜주는 게 AWS이다.

 

필요한만큼 가변적으로 용량을 늘릴 수 있으며 다양한 솔루션을 직접 설치할 필요가 없다.

 

단, 가격이 더 비싸다.

 

서버, 저장소, 데이터베이스, 네트워킹, S/w 등 과 같은 ★컴퓨팅 서비스를 제공하는 방식입니다.

 

 

원리는 다음과 같습니다.

 

물리적으로 수 많은 컴퓨터를 ★가상화 기술을 이용하여 ★클라우드 형태로 합친 뒤 유저들에게 필요한만큼

 

작은 조각들로 떼어서 임대하는 것이다.

 

 

장점 : ⓐ 사용량을 탄력적으로 조절 가능, ⓑ 서버에 대한 어려운 기술적 요소들 제공 받는다.

 

단점 : ⓐ 온프레미스 대비 제한된 자유도, ⓑ 높은 비용, ⓒ 데이터가 외부에 있다는 점

 

 

 

 

 

'개발자와 커뮤니케이션' 카테고리의 다른 글

개발자들의 용어 정리 7 [웹사이트, 웹 브라우저, HTML, CSS]  (0) 2022.12.06
개발자들의 용어 정리 6 [IaaS, PaaS, SaaS], AWS EC2 등 Note.  (0) 2022.12.05
개발자들의 용어 정리 4 [코드리뷰, 문서화]  (0) 2022.12.04
개발자들의 용어 정리 3 [배포, 유지보수, 리팩토링]  (0) 2022.12.04
개발자들의 용어 정리 2 [빌드 번호, 버전 번호]  (0) 2022.12.03

코드리뷰

일정 규모 이상의 프로젝트는 클라우드 문서 같은 곳에서 공유된 장소(Git hub, Docker etc..)에 소스코드를 올려두고

 

각자 파트에서 프로그래밍을 한다.

 

작성이 완료된 후 소스 코드를 적용하기 전에 동료 개발자들과 작성한 코드를 확인하고 의견을 주고 받는데

 

이를 코드 리뷰라고 한다.

 

 

장점은 다음과 같다.

ⓐ 작성자가 발견치 못한 오류를 타인이 발견하여 수정할 수 있다.

ⓑ 선임이 후임 개발자의 코드에서 미진한 부분을 짚어낼 수 있고, 선임개발자의 코드를 봄으로 인해서 실전 지식을 습득 가능

ⓒ "코딩컨벤션(변수의 이름을 짓는 법, 코드 줄을 맞추는 법 등 회사 내의 코딩스타일 규약)"을 지켜서 소스 코드에 대한 일관성을 지켜 가독성 및 스타일 공유로 빠르게 파악이 가능해진다.

 

 

문서화

개발자들은 가급적 코드를 가독성 있게 작성하고, 코드 중간에 설명을 달아서 다른 개발자 혹은 자신이 나중에 봤을 때 

 

이해하기 쉽게 글을 작성해 놓는 경향이 있다.(주석처리)

ㄴ 주석처리란? 소스코드에서 예외 처리 되는 문장으로 이 부분은 컴파일시 무시되므로 프로그램에 영향을 끼치지 않는 구문이다.

 

하지만 실무에선 워낙 소스코드가 방대하기 때문에 이와 같은 주석처리론 부족하다.

 

따라서 각 기능을 어떤 코드에서 어떻게 사용하면 되는지 등을 정리한 문서가 필요하다.

 

이는 앞으로 S/W를 사용할 사람들, 이를 수정, 개선하는 사람들을 위한 일종의 설명서다.

 

 

다소 시간이 걸리는 행위이지만 결과론적으로 S/W 품질 관리라는 측면에서 봤을 때

 

오류 발생시 작성한 코드의 분석 시간 단축, 시간적, 물적 비용 감소 등

 

문제 해결에 있어 걸리는 Loss를 최소화 하기 위해 반드시 필요한 작업이다.

 

 

어느정도 개발이 완료될 때마다 해당 코드, 설계에 대한 문서화는 반드시 업무 문화로 자리 잡도록 해야 한다.

 

'개발자와 커뮤니케이션' 카테고리의 다른 글

개발자들의 용어 정리 6 [IaaS, PaaS, SaaS], AWS EC2 등 Note.  (0) 2022.12.05
개발자들의 용어 정리 5 [서버, 데이터 센터, AWS]  (0) 2022.12.04
개발자들의 용어 정리 3 [배포, 유지보수, 리팩토링]  (0) 2022.12.04
개발자들의 용어 정리 2 [빌드 번호, 버전 번호]  (0) 2022.12.03
개발자들의 용어 정리 1 [디버깅, 빌드]  (0) 2022.12.02

배포

빌드를 마친 실행 파일을 사용자가 접근할 수 있는 환경에 뿌리는 것이다.

 

웹사이트는 코드를 서버에 업로드, 웹브라우저를 통해 컴퓨터나 모바일 장치에서 볼 수 있도록 하며,

 

모바일 앱은 사용자가 다운로드할 수 있는 형태(Ex> Android의 경우 *.apk 파일 형식)로 플레이스토어 혹은 앱스토어 같은 마켓에 업로드하여 배포한다.

 

PC용 응용프로그램은 Setup.exe 파일을 다운로드할 수 있도록 웹사이트에 올려둔다.

 

 

유지보수

출시를 하여도 사용자들의 다양한 사용방법은 예기치 못한 오류가 발생하게 만들게끔 한다.

 

또한 편의를 추구하는 유저들의 사용성 개선과 새로운 기능들을 요구하곤 한다.

ㄴ 구글이나 애플의 정책에 의해 보안 기능 강화, 트래픽 증가에 따른 설계와 코드 수정 등

 

IT관련 지식이 부족한 회사의 대표들은 유지보수를 고려치 않은 프로그램을 밀어 붙이는 경우도 있다.

 

유지보수는 실질적으로 프로그래밍을 하는 것보다 앞에 단계인 기획 단계부터 철저히 준비해야 한다.

 

이를 위해선 설계가 변경되도 최소한의 코드로 수정 가능해야 하며, 오류 발생시 원인을 쉽게 파악하고 대응할 수 있게끔 

 

일목요연하게 코딩해야 한다.

 

 

 

리팩토링

결과는 바꾸지 않고 해당 언어의 강점을 살린 코딩으로 기능에 중점적으로 포커스온하여 재 코딩하는 것.

 

예로는 데이터나 기능의 변수명을 누구나 알 수 있게끔 만든다거나 기본적인 문제 발생시 혹은

 

간결한 코드로 성능상 좋을 수 있는 코드로 개선하게끔 만드는 행위를 리팩토링이라 부른다.

 

납기 일정에 맞춰서 제품을 만든 뒤에 안정적인 소프트웨어 관리를 위해서 반드시 필요하다.

 

유지보수의 한 과정이라고 생각하면 이해가 빠를 것이다.

 

'개발자와 커뮤니케이션' 카테고리의 다른 글

개발자들의 용어 정리 5 [서버, 데이터 센터, AWS]  (0) 2022.12.04
개발자들의 용어 정리 4 [코드리뷰, 문서화]  (0) 2022.12.04
개발자들의 용어 정리 2 [빌드 번호, 버전 번호]  (0) 2022.12.03
개발자들의 용어 정리 1 [디버깅, 빌드]  (0) 2022.12.02
프로그래밍 언어란? 2 [고수준 프로그래밍 언어, IDE]  (1) 2022.12.01

빌드 번호와 버전 번호

개발자는 개발을 하고 배포 전에 빌드를 하여 프로그램에 오류가 없는 지 확인을 한다.

 

때문에 각 프로그램들은 빌드와 버전 정보를 따로 기입하게 되어있다.

 

 

우리가 테스트 해보는 버전은 빌드(개발자)로, 최종적으로 올리는 프로덕트의 개념은 버전정보(고객층) 로 나눌 수 있다.

 

 

빌드번호

출시 되기 전 프로그램 버전을 뜻한다.

 

제품 출시 전에 여러 단계의 테스트에서 수정 및 업데이트되는 내용들이 있는데 이 때 이를 구분 짓기 위해 빌드 번호로 구분을 하곤 한다.

 

빌드 과정은 제품의 신뢰도를 위해 개발 단계 중 아주 중요한 부분에 속한다.

 

디버그용 빌드, 릴리스용 빌드 이렇게 2가지로 나뉜다.

 

디버그용 빌드 : 개발자가 개발하는 동안 오류나 기능을 테스트 하기 위해 빌드하는 것.

ㄴ 개발자가 코드를 돌릴 때 사용하는 설정 파일 다 같이 돌리기 때문에 다소 무겁고 느린게 특징.

ㄴ 반면 출시된 버전은 기능에 따른 동작만 하기 때문에 훨씬 가볍고 빠르다.

 

 

릴리스용 빌드 : 제품의 모든 개발이 끝나고 배포 직전에 점검하는 베타 버전을 의미함.

ㄴ 여기서 큰 문제가 될만한 버그만 나타나지 않으면 출시할 준비가 되었음을 의미한다.

 

 

 

버전 번호

기업에 제품 출시시 매기는 번호로 버전번호라고 부릅니다.

쉽게 말해 윈도우 10, 윈도우 11 같은 제품 이름과도 같은 번호입니다.

 

'개발자와 커뮤니케이션' 카테고리의 다른 글

개발자들의 용어 정리 4 [코드리뷰, 문서화]  (0) 2022.12.04
개발자들의 용어 정리 3 [배포, 유지보수, 리팩토링]  (0) 2022.12.04
개발자들의 용어 정리 1 [디버깅, 빌드]  (0) 2022.12.02
프로그래밍 언어란? 2 [고수준 프로그래밍 언어, IDE]  (1) 2022.12.01
프로그래밍 언어란? 1 [프로그래밍 언어, 순위]  (0) 2022.12.01

디버깅

개발하는데는 큰 시간이 안든다. 실제론 디버깅 시간이 50퍼센트 이상을 차지하는게 부지기수다.

 

Debug란

벌레를 뜻하는 Bug와 제거한다는 접두사 de- 가 합쳐진 단어다.

 

즉, 벌레를 제거하는 행위다.

 

역사적으로 이 언어의 유래는 다음과 같다.

 

컴퓨터가 오작동을 일으켜서 개발자들이 프로그램의 설계나 코드를 아무리 찾아보아도 나오지 않던 문제가

 

실제 컴퓨터실의 케이블에 나방이 끼어서 죽어서 났던 문제로 이 후부터 

 

벌레를 제거하여 오류를 수정한다는 의미로 Debug 라는 용어가 쓰였다고 한다.

[출처 : 혼자 공부하는 얄팍한 코딩지식]

 

따라서 디버그란 용어는 프로그램의 오류를 수정하는 작업을 의미하며 오류를 찾아 제거하는 행위를 디버깅(Debugging) 이라고 한다.

 

실제로 현업에선 프로그램을 올리기 전에 미리 빌드해본 후 Run으로 실행하여 코드가 실제로 잘 작동하는 지 테스트하는데 이런 행위를 보통 디버그 한다고 말하기도 한다.

 

개발자들은 작성한 코드를 계속해서 실행하여 테스트하면서

 

프로그램이 잘 작동 하는지?

 

기존 기능에 영향을 주진 않는지?

 

규모가 큰 종류의 소프트웨어일수록 디버깅에 할애하는 시간은 늘어난다고 보면 된다.

 

 

빌드

코딩한 소스코드를 포함한 모든 프로그램 구성 요소를 실행해볼 수 있는 파일을 만드는 과정이다.

 

확장자명 Exe 파일들이 보통 이 경우에 해당된다.

 

*.exe란?

execute(처형, 실행하다)란 단어의 줄임말로 실제 프로그램을 실행해볼 수 있는 프로그램을 지칭하는 컴퓨터 프로그램 확장자명

 

모바일의 경우 앱스토어나 플레이스토어에 올릴 수 있는 *.apk 파일로 바꿔주는 과정이 필요하다.

 

'개발자와 커뮤니케이션' 카테고리의 다른 글

개발자들의 용어 정리 3 [배포, 유지보수, 리팩토링]  (0) 2022.12.04
개발자들의 용어 정리 2 [빌드 번호, 버전 번호]  (0) 2022.12.03
프로그래밍 언어란? 2 [고수준 프로그래밍 언어, IDE]  (1) 2022.12.01
프로그래밍 언어란? 1 [프로그래밍 언어, 순위]  (0) 2022.12.01
간단한 요즘 컴퓨터 개발에 대한 용어 설명2 [개발의 단계, 소프트웨어, 애플리케이션]  (0) 2022.11.30

+ Recent posts

티스토리툴바