담백한 웹 개발 이야기

navigator.share를 사용해서 URL, 텍스트, 파일을 공유할 때 커스텀해서 공유할 수 있다. 브라우저 지원 범위 Firefox / WebView Android 에서 미지원하고, 대부분 지원한다. Browser compatibility 코드 예제 6장 코드 스니펫 > Boilerplate 코드를 기반으로 데모가 제작되었습니다. 데모보기 공식 블로그 링크 자바스크립트로 공유 기능 커스텀하기 navigator.share를 사용해서 URL, 텍스트, 파일을 공유할 때 커스텀해서 공유할 수 있다. 브라우저 지원... blog.naver.com

글의 목적프로라면 어떤도구를 사용하든 기능 요구사항은 당연히 구현가능해야 된다고 생각한다. 문서로는 소프트웨어를 완변하게 설계했지만, 소프트웨어가 의도한 데로 동작하지 않다면 문서를 작성한 노력과 소프트웨어 개발한 노력은 인정받기 힘들다. 소프트웨어의 품질을 높이기 위해서는 비기능 요구사항이 충족해야 한다. 비기능 요구사항은 개발이나 유지보수, 운영, 컴퓨터 리소스의 효율적 활용에 커다란 영향을 미친다. 배포 후 운영 시 발생하는 장애의 대부분 비기능적인 특성에 기인한다. 그만큼 중요한 사항임에도 비기능은 기능에 비해 경시되고 있으며 이를 별도로 주목하지 않고 뒤로 미루려는 경향이 있다. 비기능 요구사항의 관점들이 무엇이 있는 지 정리하기 위해 작성된 포스트다. 비기능 요구사항비기능 요구사항이란 기능 외..

웹 접근성 월드 와이드 웹을 창시한 팀 버너스리는 웹이란 장애에 구애 없이 모든 사람이 손쉽게 정보를 공유할 수 있는 공간이라고 정의하였으며, 웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 이는 모든 사용자가 신체적, 환경적 조건과 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것을 뜻한다. 여기서 신체적 조건이란 일반 사용자는 물론, 장애를 가진 사람, 고령자 등을 의미하고 환경적 조건이란 다양한 기기, OS, 웹 브라우저를 의미한다. 접근성이란 보다 많은 사람이 이용할 수 있는 보편적 접근의 정도를 의미하며 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있게 하는 것을 의미한다. 장애인 차별 금지법(이하 장차법) 20..

이 포스트는 컴파일러 개념과 문법이 어떻게 만들어지는 학습하고자 정리한 자료다. ​ 우선 컴파일러는 밑바닥부터 구현하는 경우는 드물다. 보통 토큰화 모듈이나 문법 분석기를 만들 때, Flex(어휘분석기)와 bison(파서 생성기)같은 컴파일러 생성기 도구들을 이용해서 만든다. 이 도구들은 문맥 자유 문법를 입력하면, 그 문법으로 작성된 프로그램을 토큰화하고 분석하는 문법 분석 코드를 출력한다. 그리고 컴파일 조건에 맞춰 생성 코드를 수정할 수 있다. ​ 컴파일러 개념​​ 컴파일러는 원본 언어에서 대상 언어로 번역하는 프로그램이다. 컴파일러는 번역 과정을 개념적으로 문법 분석과 코드 생성이라는 두 단계로 나뉜다. ​ 문법 분석(Syntax Analysis) 원본 언어의 문법을 이해하고, 원본 언어를 추상 ..

navigator.connection.effectiveType을 실행하면 인터넷 속도를 조회할 수 있다. 브라우저에서 사이트 접속 후 인터넷 속도를 측정하며 결과값은 slow-2g, 2g, 3g, 4g 중에 하나를 알려준다.​ ​ 브라우저 지원 범위 Firefox / Safari 에서 미지원하고, 대부분 지원한다. Browser compatibility ​​ ​항목별 상세 스펙 용어정의 ​ RTT Round Trip Time의 약자로 왕복 시간이라 한다. 네트워크 시작 지점에서 패킷이 타겟으로 전송되는 데 걸리는 시간과 해당 패킷의 승인이 네트워크 시작 지점에 다시 전송되는 시간을 의미한다. ​ Downlink 기지국에서 단말기 방향의 링크다. ​ ​ slow-2g ​ 최소 RTT: 2000ms 최대 D..

GoF 디자인 패턴은 객체지향 관련 패턴을 정의해서 객체 정리 포스트를 참고하시면 이해에 도움이 됩니다. 출처: 에릭 감마 , 리처드 헬름 , 랄프 존슨 , 존 블리시디스. 『Gof의 디자인 패턴』. 김정아(역). 프로텍미디어, 2015. GoF(Gang of Four)는 Design Patterns: Elements of Reusable Object-Oriented Software를 집필한 저자 4명을 말한다. 에릭 감마(Erich Gamma), 리차드 헬름(Richard Helm), 랄프 존슨(Ralph Johnson), 존 블리시데스(John Vlissides)가 이 책의 저자들이다. Design Patterns은 세 가지 카테고리로 분류되어 23개 패턴이 있다. 대부분 예제는 C++로 작성되었고,..

MVCMVC는 역사상으로 두가지가 있다. 첫번째는 초기에 XEROX PARC에서 발표된 것으로 사용자가 도메인 정보를 직접 보고 조작하는 것을 목표로 하는 MVC였다. View가 Model에 직접 데이터를 요청했으며 Controller는 사용자 상호작용을 담당했다. 두번째는 현대의 MVC이다. 현대의 MVC는 View는 Model과 간접적인 관계이다. View는 Controller를 통해 Model의 데이터를 전달 받게 된다. 그리고 Controller는 사용자 상호작용을 View에게 위임받는다. 초기의 MVC MVC의 기본 목적은 사용자의 멘탈모델과 컴퓨터에 존재하는 디지털 모델 간의 차이를 연결하는 것이다. 이상적인 MVC 솔루션은 사용자가 도메인 정보를 직접 보고 조작하는 착각을 지원한다. Mode..

MVVM MVVM에서 Model과 View는 MVC에서 정의된 역할과 동일하다. Model은 상태저장, 비즈니스 로직, 순수한 데이터이고, View는 시각적인 요소를 담당한다. ViewModel는 View가 데이터 바인딩에 사용할 수 있는 Model을 전문화한다. 1) Model Type을 View Type으로 변환하는 데이터 변환기 역할 2) View가 Model과 상호작용 할 수 있게 하는 역할 3) UI의 재사용 가능한 부분에 대한 추상적 표현 4) Selection과 Commands를 포함한다. MVC에서 파생되는 패턴들은 모델과 뷰 사이에 무언가를 넣는 것이다. 뷰를 가상화하는 프록시를 가짐으로서 뷰와 모델간의 관계를 끊는다. 모델의 데이터 형태가 뷰에게 의존하기 때문에 모델의 변경이 필요할때 ..

이 보일러플레이트를 사용하면 react, tailwindcss의 npm 환경설정 없이 브라우저에서 바로 코드를 테스트 할 수 있다!

class LinkedListNode { constructor(data) { this.data = data; this.next = null; } } class LinkedList { constructor() { this.head = null; this.size = 0; } isEmpty() { return this.size === 0; } insert(data) { const newNode = new LinkedListNode(data); if (this.head !== null) { newNode.next = this.head; } this.head = newNode; this.size++; } remove(data) { if (this.head.data === data) { this.head = th..

class Queue { constructor() { this.arr = [] } getBuffer() { return this.arr.slice(); } isEmpty() { return this.arr.length === 0; } enqueue(item) { this.arr.push(item); } dequeue() { return this.arr.shift(); } peek() { return this.arr[0]; } }

class Stack { #arr = [] constructor() { this.#arr = [] } getBuffer() { return this.#arr.slice(); } isEmpty() { return this.#arr.length === 0; } push(item) { this.#arr.push(item); } pop() { return this.#arr.pop(); } peek() { return this.#arr[this.#arr.length - 1]; } }