개발/정리

[정리] 브라우저의 작동 방식

브라우저의 구조는 다음과 같다. 1. 사용자 인터페이스 여기에는 주소 표시줄, 뒤로/앞으로 버튼, 북마크 메뉴 등이 포함된다. 요청한 페이지가 표시되는 창을 제외한 브라우저 디스플레이의 모든 부분이다. 2. 브라우저 엔진 UI와 렌더링 엔진간의 작업을 마셜링한다. 마셜링이란 한 객체의 메모리에서 표현방식을 저장 또는 전송에 적합한 다른 데이터 형식으로 변환하는 과정이다. 3. 렌더링 엔진 요청된 콘텐츠 표시를 담당한다. 예를 들어 요청한 콘텐츠가 HTML인 경우 렌더링 엔진은 HTML과 CSS를 구문 분석하고 콘텐츠를 화면에 표시한다. 4. 네트워킹 HTTP 요청과 같은 네트워크 호출을 위해 사용한다. 플랫폼의 독립적인 인터페이스이며 각 플랫폼의 하부에서 실행된다. 5. UI 백엔드 콤보 상자 및 창과 ..

[정리] 개발 방법론 (Water Fall vs Agile)

프로젝트마다 프로젝트의 성격, 규모, 일정, 비용등에 따라 개발 방법론을 선택해야한다. 그 중에서도 대표적인 개발방법론인 폭포수(Water Fall) 방법론과 애자일(scrum) 방법론을 설명하려고 한다. 1. 폭포수 방법론 (water fall) 폭포수 방법론은 기획, 분석, 설계, 구현, 테스트, 유지보수 단계로 이루어진 선형적인 개발 방법론이다. 각 단계는 이전 단계의 결과물을 바탕으로 진행되며, 다음 단계로 넘어가기 전에 이전 단계의 결과물이 검증되어야 한다. 이 방법론은 전체 프로젝트를 미리 계획하고 모든 기능을 상세하게 정의해 놓아야 하기 때문에 초기 비용이 많이 들어가고 변경사항이 생긴다면 수정하기 어렵다. 하지만 일관된 품질을 유지할 수 있고 프로젝트 일정을 예측하기 쉬워서 대규모 프로젝트..

[정리] PWA란 무엇인가? ( + serviceWorker)

1. PWA란? PWA란 Progressive Web Application의 약자로 웹 기술의 유연성과 접근성을 활용하면서 모바일 앱과 유사한 사용자 경험을 제공하는 웹 어플리케이션 유형이다. PWA는 최신 웹 브라우저가 있는 모든 장치에서 작동하도록 설계되어 플랫폼 간 호환성을 제공하고 플랫폼별 개발의 필요성을 줄인다. 2. PWA의 특징 (1) 반응형 디자인 PWA는 기본적으로 반응형 디자인을 염두하여 개발해야 한다. 반응형 디자인은 다양한 화면 크기와 방향에 맞게 레이아웃과 콘텐츠를 자동으로 조정한다. 이를 통해 스마트폰, 태블릿 및 데스크탑과 같은 다양한 장치에서 일관된 사용자 경험을 보장한다. (2) 연결 독립성 PWA는 기본 브라우저 스레드와 별도로 백그라운드에서 실행되는 서비스워커를 사용한다..

[정리] MSA란 무엇일까? (Node.js 예시)

MSA란? MSA는 "Micro Services Architecture"의 약자로 애플리케이션을 작고 독립적인 서비스 단위로 분할하고, 이러한 서비스들을 조합하여 하나의 애플리케이션을 구축하는 아키텍처 스타일이다. MSA 활용 MSA는 대규모 애플리케이션 개발에 적합하다. 예를 들면, 인터넷 서비스, 전자상거래, 은행, 보험 등과 같은 대규모 시스템에서 많이 사용된다. MSA는 각각의 서비스를 독립적으로 배포하고 확잘할 수 있도록 한다. 따라서 서비스 간의 의존성을 최소화하고, 각각의 서비스를 독립적으로 개발하고 배포할 수 있다. MSA 예시 코드 (Node.js) [server1.js] const express = require('express'); const app = express(); app.ge..

[패턴] 자주 사용되는 아키텍처패턴 4가지

1. 레이어 패턴(Layer Pattern) 가장 흔히 사용되는 패턴으로 시스템을 계층화하고 하위 레이어가 제공하는 기능을 상위 레이어가 이용함으로써 각 레이어의 구조를 단순화한다는 발상에서 시작된다. 각 레이어는 해당 레이어가 의존하는 직접적인 하위 레이어만 알면 된다. - 장점 하나의 모듈을 업데이트 할때 다른 모듈이 받는 영향을 최소화 각 레이어의 책임을 명확히 할 수 있음 - 레이어 구조 - 3계층 프리젠테이션 레이어 응용프로그램에서 사용자와 상호작용하는 인터페이스(UI)로 데이터를 표시하고 서버와의 통신을 처리하는 계층 어플리케이션 레이어 사용자와 상호작용하면서 수집된 데이터를 처리하고 API를 통해 데이터레이어와 통신하는 계층 데이터 레이어 어플리케이션 레이어에서 처리된 데이터를 저장하고 관리..

[정리] 해싱과 암호화

1. 해싱과 암호화 (1) 해싱 [자료구조] 해시테이블 1. 해시테이블이란 js의 객체와 같다고 생각하면된다. 해시테이블은 객체와 마찬가지로 키-값 쌍을 저장하는데 사용한다. 배열과는 다르게 해시테이블은 순서를 가지지 않는다. 값을 찾거나, 새 diary-blockchain.tistory.com 해싱이란 원본 문자열을 다른 값으로 변환시키는 것이다. 즉, 원본 문자열을 내가 미리 짜놓은 해시 알고리즘을 거쳐 다른 값으로 나오게 하는 것이다. 해시 알고리즘을 통해 길이가 매우 긴 문자열도 내가 정해놓은 틀에 맞춰 변형시킬수 있다. 동일한 문자열은 동일한 해시 알고리즘을 사용하면 동일한 해시값을 생성해야한다. 서로 다른 문자열은 동일한 해시 알고리즘을 사용하면 서로 다른 해시값을 생성해야 한다. 해싱이 완료..