본문 바로가기

Road to Web Developer/알.쓸.개.잡

웹 개발자가 알아두면 좋은 SPA, MPA 당신이 웹 퍼블리셔, 프론트엔드 개발자가 아니더라도 웹 개발 분야에 있다면 SPA (Single Page Application) 혹은 MPA (Multi Page Application)에 대해서 들어본 적이 있을 거다. 처음 들어본다고? 괜찮다. SPA, MPA가 무엇인지 소개할 예정이다. 들어가기 전에 앞서 선행학습으로, 지겨운 방법론 두 가지를 짚고 넘어가고자 한다. 2계층 구조 (2 Tier Architecture Structure) 과거 대부분의 웹사이트는 2계층 구조로 개발되어있다. 2계층 구조란, 화면이 보여지는 클라이언트(Client)와 데이터베이스(DB)가 물리적으로 분리되어 있는 것을 뜻하며, 클라이언트에는 UI (User Interface)와 비즈니스 로직Business Logic이 함..
티스토리 블로그, 네이버 검색에 나타나게 적용하기 당신은 티스토리 블로그를 운영하기 위해 개설했다. 그 목적이 광고를 통한 수익을 얻는 것이든, 취미로 글을 쓰는 것이든 당신의 블로그에 많은 유저들이 들어오길 바랄 거다. 적지 않는 시간과 노력을 투자해 쓴 글이 조회 수가 별로 높지 않다면 글을 쓰는 게 재미가 없어질 수도 있다. 그렇다면 당신의 블로그는 어디에 노출되는 게 가장 이상적일까? 우리나라의 검색엔진 시장은 네이버가 장악하고 있다고 해도 과언이 아니다. 다만 해를 거듭할 수록 구글이 네이버를 따라잡고 있는 추세이긴 하다. 하지만 여전히 60%에 육박하는 점유율을 가지고 있는 만큼, 네이버에 노출되는 것은 블로그나 홈페이지를 운영하는 사람들에게 매우 중요하다. 물론 2위로 치고 올라온 구글Google에 노출되는 것도 중요하니, 이 부분도 신경 ..
웹 퍼블리셔로 입문하기 위해 도움이 되는 사이트 3선 1. W3Schools : https://www.w3schools.com/ 2015년 10월, [NCS 기반]디지털(UI/UX를 활용한 모바일 웹) 디자인 실무과정 이라는 교육 프로그램을 이수하면서 가장 처음 들었던 사이트다. 오래 전부터 존재했던 사이트고 웹 퍼블리싱을 하는 사람들이라면 모르는 사람이 없을 정도로 유명한 사이트다. 영어로 되어 있어 보기가 어렵다는 단점이 있지만 영어와 함께 공부를 할 수 있으니 일석이조다. 사이트 자체에 내장된 에디터로 예제를 실행할 수 있어 내 마음대로 코드 내용을 바꿔볼 수 있다. 2. PoiemaWeb : https://poiemaweb.com/ 웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb...
동기와 비동기의 개념 1. 동기 방식(Synchronous)요청이 들어온 순서에 맞게 하나씩 처리하는 방식이다. 순서에 맞춰 진행되는 장점이 있지만, 여러 가지 요청을 동시에 처리할 수 없다. 위 그림의 (a)처럼 커피 주문을 받고 나올 때까지 기다리는 것이 동기 방식의 예시라고 할 수 있다. 2. 비동기 방식 (Asynchronous)하나의 요청에 따른 응답을 즉시 처리하지 않아도, 그 대기 시간동안 또 다른 요청에 대해 처리 가능한 방식이다. 여러 개의 요청을 동시에 처리할 수 있는 장점이 있지만 동기 방식보다 속도가 떨어질 수도 있다. 위 그림의 (b)처럼 점원 한명이 커피 주문을 받고 다른 점원이 커피를 건네주는 것이 비동기 방식의 예시다. 동기와 비동기의 차이는 어떤 요청이나 혹은 그와 관련된 작업을 처리하고자 하는..
SOLID 원칙 객체지향 디자인 원리들을 사용하면 좀 더 유지보수하기 쉽고, 유연하고, 확장이 쉬운 소프트웨어를 만들 수 있다. 이 원리들은 그 크기를 대비해 보면 패턴보다 훨씬 작지만, 표준화 작업에서부터 아키텍처 설계에 이르기까지 다양하게 적용되는 원칙이다. ① Single Responsibility Principle : 단일 책임의 원칙(SRP) 한 클래스에 하나의 책임만 가진다. 여기서 책임이란 '기능' 정도로 생각하면 된다. 설계를 잘한 프로그램은 기본적으로 새로운 요구사항과 프로그램 변경에 영향을 적게 받는다. 즉, 응집도는 높지만 결합도는 낮은 프로그램이다. 만약 한 클래스가 갖는 책임이 많아지면 클래스 내부의 함수끼리 결합도가 높아져서 유지보수가 어려워질 수 있다. 그래서 책임을 분산시킬 필요가 있다. ②..
OOP(Object-Oriented Programming)이란? 1. OOP?객체지향 프로그래밍(Object-Oriented Programming)의 줄임말로, 프로그램을 어떻게 설계해야 하는지에 대한 일종의 개념이자 방법론이다. 프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라 수많은 '객체'라는 기본 단위로 나누고 이 객체들의 상호작용으로 서술하는 방식이다. 2. OOP의 특성① 추상화(Abstraction)공통의 속성이나 기능을 묶어 이름을 붙이는 것으로, 사물들의 공통된 특징을 파악해 인식의 대상으로 삼는 행위를 말한다. 각 개체의 구체적인 개념보다 추상적인 개념에 의존해야 설계를 유연하게 변경할 수 있다. 강아지, 고양이의 공통된 특징은 '동물'이라는 집합으로 다룬다. '강아지나 고양이 고유의 울음소리(구체적인 개념)'이 아니라 '울음소리(추상적인..
Cookie vs Session vs Local Storage 간략 비교 1. Cookie후속 요청으로 서버로 다시 보내야하는 데이터를 저장한다. 만료는 유형에 따라 다르며 만료 기간은 서버 측 또는 클라이언트 측 (일반적으로 서버 측)에서 설정할 수 있다.쿠키는 주로 서버 측에서 읽기(클라이언트 측에서 읽을 수도 있음) 위한 것이며, Local Storage 및 Session Storage는 클라이언트 측에서만 읽을 수 있다.크기는 4KB보다 작아야 한다.해당 쿠키에 대해 httpOnly 플래그를 true로 설정하여 쿠키를 안전하게 만들 수 있다. 이렇게하면 쿠키에 대한 클라이언트 측 액세스가 차단된다. 2. Local Storage만료일이 없는 데이터를 저장하고 JavaScript를 통해서만 지워진다.저장 용량 한도는 3가지 중에서 가장 높다. 3. Session Stor..