쿠키

쿠키는 크롬, 사파리 같은 브라우저에 저장되는 작은 텍스트 조각이다.

 

브라우저 S/w에 개인적으로 저장되는 정보파일이라고 보면 된다.

 

사용자는 브라우저의 설정화면, 개발자 도구에서 쿠키를 확인하고 수정, 삭제 할 수 있다.

 

 

쿠키는 본인을 포함 제 3자도 조회가 가능하기 때문에 보안상 이유로 민감 정보를 담는데는 적합치 않다.

 

 

 

세션

사이트에 로그인 시 세션이 없으면 페이지를 누를 때마다 매번 ID와 Password가 필요하게 된다.

 

이러한 번거로움을 덜기 위해

 

서버로부터 인증 받았음을 증명해주는 세션이라는 증서를 활용한다.

 

서버는 아이디와 비번으로 유저가 로그인시 "세션 아이디"라는 데이터를 만든다.

Ex> 2Gsd98dfwze2 이런 식으로 알파벳 + 숫자가 혼합된 형식을 쓴다.

 

세션 아이디를 사용자에게 전달하고, 메모리에 아이디 사본을 어떤 사용자의 것인지 적어서 보관한다.

 

 

사용자는 서버로부터 받은 세션 아이디를 쿠키로 저장하고 앞으로 모든 요청에

 

선행하여 이를 보내주어 자신이 로그인한 인증자라는 것을 증명한다.

 

 

쉽게 말해 세션이란 것은 일종에 Identifier로서 열쇠라고 보면 된다.

 

쿠키의 세션 아이디를 서버가 동일한 세션 아이디로 매칭되는 정보를 서로 상호 점검하여

 

데이터의 무결성을 검증하는 작업이라고 보면 될 것이다.

 

★세션은 빠르다!

그러나 그 빠른 부분을 담당하는 영역이 CPU의 캐시 영역이므로 용량이 소용량인 측면이 있다.

그러므로 리소스가 다분히 한정적인 자원을 활용한다고 보면 된다.

 

★서버 뻗을 위험 있음!

 

 

자바스크립트

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

 

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

 

 

웹 표준

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

 

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

 

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

 

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

 

 

반응형 Vs 적응형

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

 

들이다.

 

 

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

 

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

 

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

 

 

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

 

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

 

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

 

 

 

논리회로의 기초

디지털 시스템의 정의

ㄴ 디지털화 된 정보를 가공->처리하여 디지털화 된 정보를 출력하는 것이 목적인 장치

ㄴ 이산적인 정보를 받아 가공->처리 후 이산적 출력으로 내보내는 장치

 

아날로그 시스템 : 연속 입력 -> 연속 입력

 

디지털 시스템 : 이산 입력 -> 이산 출력

 

 

통상 디지털 시스템은 

 

Analog to Digital 로 변환이 이뤄진다.

 

 

전기적인 5V 신호를 디지털화 하여 이산출력 0과 1로 보내는 것이 일반적인 예이다.

ㄴ ADC(Analog to Digital Converter)

 

디지털 정보의 표현

ㄴ 디지털 정보는 0과 1로 이뤄져 있으며 이러한 상태(Status) 값을 신호(Signal)이라 하며

두 종류의 디지트(Digit, Bit적 개념)로 표현하곤 한다.

 

 

정 범위 : 4~5v = 1로 인식

부 범위 : 0v 또는 0.8~9v = 0으로 인식

 

센서에서 중간 값을 갖는 Voltage가 존재하는데 보통 이 경우는 무시되며 정확한 적용을 위해선 해당 장치의 Datasheet 분석이 필요하다.

 

 

웹 사이트

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

 

모바일 애플리케이션(일명 앱)이라고 알고 있는 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는 디자인 속성을 지정해주는 역할만 담당하므로 프로그래밍 언어는 아닌 스타일 언어로 불린다.

 

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

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

 

IaaS

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

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

 

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

 

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

 

AWS의 EC2 가 대표적인 서비스

 

 

 

PaaS

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

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

 

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

 

 

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

 

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

 

 

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

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

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

 

 

 

SaaS

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

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

 

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

 

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

 

 

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

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

재설계는 필수적이다.)

 

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

 

 

서버

서버는 역할의 개념이다.

 

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

 

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

(개인용 컴퓨터로 외부서 접속할 수 있게끔 온라인 서비스를 할 수 있으나 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 등 과 같은 ★컴퓨팅 서비스를 제공하는 방식입니다.

 

 

원리는 다음과 같습니다.

 

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

 

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

 

 

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

 

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

 

 

 

 

 

코드리뷰

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

 

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

 

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

 

이를 코드 리뷰라고 한다.

 

 

장점은 다음과 같다.

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

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

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

 

 

문서화

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

 

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

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

 

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

 

배포

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

 

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

 

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

 

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

 

 

유지보수

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

 

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

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

 

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

 

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

 

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

 

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

 

 

 

리팩토링

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

 

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

 

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

 

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

 

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

 

+ Recent posts