보노보노의 개발 일기 보노보노의 개발 일기

SPA(Single Page Application) 앱에 필요한 모든 정적 리소스를 최초 한번만 받아 오고 이후에는 동적으로 DOM을 구성하여 렌더링 되는 화면만 바꾼다. 페이지가 한번 로딩된 이후 데이터를 수정하거나 조회할 때, 페이지가 새로 고침되거나 다른 페이지로 넘어가지 않는다. 클라이언트 렌더링 방식을 채택 장점 전체적인 트래픽을 감소시킨다. 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공한다. -> 모바일 퍼스트 전략에 적합 단점 모든 정적 리소스를 최초에 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다. -> 최초 첫 페이지(어느 정도 그려진)를 서버로부터 받는 SSR을 진행하여 속도를 개선할 수 있다. SEO(검색엔진 최적화) 문제 -> SPA 프레임워크(앵귤..

CORS SOP(Same-Origin Policy) 동일 출처 정책으로 한 출처(Origin)에서 로드된 문서나 스크립트가 다른 출처의 자원과 상호 작용을 못하도록 제한하는 것을 말한다. 이 정책으로 의해 XMLHttpRequest 객체로 특정 웹 페이지 접근할 때, 해당 페이지와 동일한 출처의 페이지에만 접근이 가능한 것이다. 동일 출처(Origin)란? Protocol, Host, Port 가 모두 같을 때 동일 출처다. CORS(Cross-Origin Resource Sharing) 다른 출처의 자원과의 상호 작용을 위해 SOP 예외 조건으로 CORS 정책이 생겼다. CORS 정책을 위반하지 않는 다면 다른 출처의 리소스를 공유할 수 있다. 어떻게 CORS 정책을 위반했는 지 판단할까? 출처를 비교..

부트스트랩의 sr-only 클래스가 하는 일 이 글은 그저 기억하기 위한 용도로 작성했으니 참고바랍니다. 부트스트랩은 sr-only 클래스를 사용하여 원하는 요소를 화면상에서는 사라지게 하는 동시에 웹 접근성을 높인다. 장애를 가진 사람은 스크린 리더기나 점자 타자기와 같은 보조 기구를 통해 웹을 인식하기 때문에 웹 접근성은 신경써야 할 요소 중 하나다. 간단하게 태그의 alt 요소에 이미지를 파악할 수 있는 텍스트를 작성하는 것만으로도 웹 접근성을 높일 수 있다. 나는 체크박스(

가깝고도 먼 HTML 1탄 WHY? HTML, 잘 알고 있다고 생각했으나 지식이 구멍이 뻥뻥 뚫려있었다. 그래서 시작한 가깝고도 먼 HTML! 오늘부터 GO GO! 을 왜 선언할까? HTML 문서를 작성할 때 항상 DOCTYPE을 문서의 맨 위에 선언한다. ... 왜 선언할까? 태그 전에 선언되야하며 을 통해 브라우저가 해당 웹 문서가 어떤 타입(HTML5, HTML, XHTML)의 문서인지 파악할 수 있다. 웹 브라우저에게 HTML 버전을 알려주는 역할을 한다. HTML2 ~ HTML4는 SGML(Standard Generalized Markup Language, HTML 할아버지)에 기반을 두어 만들어져서 을 통한 DTD 참조가 필요하다. 반면에 HTML5는 SGML에 기반을 두..

Why? TIL 레파지토리의 문서들을 얻기 위해 Github Content API를 이용했다. 루트 폴더들, 각 폴더의 문서들, 문서의 내용 등을 REST API를 사용하여 얻었는 데 아무래도 엔드 포인트가 많다 보니 코드가 복잡해졌다. 또 내가 원하는 데이터만 받고 싶은 데 응답 구조가 정해져있다보니 응답 데이터를 직접 가공하는 수 밖에 없었다. 휴 불편하네~ 😥 불편하다. 생각하던 중 Github이 GraphQL API를 제공한다는 것을 발견했다. 예전에 잠깐 공부했을 때는 REST API보다 왜 편한지 이해를 못했는 데 역시 사람은 몸소 겪어봐야 아나보다. 직접 사용해보니 너무 너무 편했다. 그래서 오늘의 TIL은 GraphQL에 대해 정리해보려한다. ✨ GraphQL 이란? GraphQL(gql)..

Pull을 시도 했을 때, 아래와 같은 충돌을 알리는 메시지가 나타났습니다.이 게시글은 이를 병합처리하는 과정입니다. git.exe pull --progress -v --no-rebase "origin" POST git-upload-pack (287 bytes)remote: Enumerating objects: 5, done.remote: Counting objects: 100% (5/5), done.remote: Compressing objects: 100% (2/2), done.remote: Total 3 (delta 0), reused 3 (delta 0), pack-reused 0From https://github.com/devgaram/gitTest3814fd7..8052ed6 master ->..

2018년 7월 17일 역삼역 마루180의 이벤트 홀에서 [데이터 시대 인덱스를 바라보는 새로운 눈]을 주제로 한 이병국 DBA님의 발표가 있었습니다. 주로, 데이터베이스의 인덱스 생성도에 대한 이야기를 나눈다는 것이 흥미를 자극해 신청했습니다. 사실 인덱스를 자세히 공부해본 적은 없습니다.조인을 이용해 쿼리를 짤 때, 그 결과가 조회되는 속도를 인덱스를 통해서 빨라질 수 있다.PK는 인덱스다..정도의 개념만 알고 있고 속도가 빨라졌으면 해서 가끔 FK 칼럼에 인덱스를 생성해본 경험만 있었습니다.이것도 사실.. 구글링을 하다가 인덱스를 생성하면 속도가 빨라진다해서 추가한거지만요..이렇게 개요만 알고 있었습니다. 제 이전글, [수요인문학콘서트] 4차 산업혁명과 창조적 혁신, 미래 무엇이 차이를 만드는가? ..

문제)- Express.js와 Socket.IO의 기본적인 동작 테스트를 하던 중, 크롬 개발자도구 창에서 다음과 같은 에러가 확인되었다.GET http://localhost/socket.io/?EIO=3&transport=polling&t=MIEj9iB 0 ()( 서버 에러는 안나지만, socket.IOconnect 이벤트에 대한 반응이 없었다. ) /views/index.pug extends layout block content h1= title p Welcome to span.received-message #{title} input(type='text', class='message', placeholder='what is on your mind?', onkeyup='javascript:send(th..