본문 바로가기

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

 (9)
링크 미리보기 꾸미는 방법, Open Graph 카카오톡으로 링크를 보내면 이상하게 나오는데, 이거 어떻게 변경할 수 있나요? 웹사이트 개발을 완료하고 나면, 종종 고객으로부터 받는 질문이다. 재밌는 글이나 유용한 자료가 있다면 본인의 메신저 혹은 지인에게 공유한 경험은 한 번씩은 있을 것이다. 단순히 URL만 나오던 예전과 달리, 많은 앱과 서비스에서 해당 링크에 대한 미리보기를 제공하고 있다. 이런 미리보기 기능을 제공하는 것이 OpenGraph Protocol인데, 줄여서 오픈 그래프(Open Graph)라고 부른다. 위는 네이버 링크를 메신저로 보냈을 때 나타나는 미리보기 화면이다. URL을 받았을 때 텍스트로는 현재 웹페이지가 어떤 역할을 하는지 파악하기 어렵기 때문에, 이미지, 제목, 설명으로 간단한 정보를 제공한다. 내용 자체는 쉽지만, ..
아토믹 디자인Atomic Design 개요 우리는 페이지를 디자인하는 것이 아니라, 구성 요소 시스템을 디자인한다. 웹 생태계가 점점 커져감에 따라, 웹사이트는 단순한 온라인 문서가 아닌 하나의 거대한 서비스로 거듭나고 있다. 이제 단순한 웹 페이지 모음을 만드는 수준이 아니라서 현업 종사자들은 효율적인 업무를 위한 디자인 시스템 개발 필요성을 인식하고 있는 단계다. 특히 대형 프로젝트에서의 디자인 시스템 필요성은 더욱 부각되고 있는데, 많은 논의가 오가고 있는 주제다. 그중 많은 부분에서 색상Color, 글꼴Typography, 격자Grid 등 기초를 설정하는 데 중점을 두고 있다. 이런 논의는 확실히 중요하지만 디자인은 주관적인 영역이 커서 상대적으로 관심을 덜 받고 있다. 하지만 디자이너-퍼블리셔-프런트 개발자 간에 효율적인 소통과 원활한 ..
웹 개발자가 알아두면 좋은 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)공통의 속성이나 기능을 묶어 이름을 붙이는 것으로, 사물들의 공통된 특징을 파악해 인식의 대상으로 삼는 행위를 말한다. 각 개체의 구체적인 개념보다 추상적인 개념에 의존해야 설계를 유연하게 변경할 수 있다. 강아지, 고양이의 공통된 특징은 '동물'이라는 집합으로 다룬다. '강아지나 고양이 고유의 울음소리(구체적인 개념)'이 아니라 '울음소리(추상적인..

티스토리툴바