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

최근 typescript로 개발된 라이브러리를 배포했습니다. 번들러는 tsup을 이용했습니다. rollup과 고민하다가 tsup을 선택했는데 나중에 이 부분도 정리해서 올리도록 하겠습니다. (다짐) 오늘 다룰 부분은 배포한 라이브러리를 서비스에서 사용할 때 겪은 이슈입니다. 오류에 대해 자세히 말씀드리면, Nextjs로 만들어진 서비스에서 B 라이브러리를 Install하고 페이지 코드에서 `import B from '@library/b/subpath-a' 를 했습니다. 그 외 한 게 없습니다. 근데, Cannot find module @library/b/subpath-a' or its corresponding type declarations 에러가 떴습니다. 타입 에러가 났지만 사용하는데 문제는 없었습니..

페이스북은 Flux 패턴을 왜 만들었을까? 페이스북은 기존의 MVC 패턴이 프로젝트 규모가 커질수록 빠른 속도로 복잡해진다고 결론 내렸다. 프로젝트의 구조가 복잡하면 코드 예측이 어려워지고, 새로운 개발자가 적응하는 데 많은 시간이 필요해지고, 테스트가 어려워진다. MVC 패턴은 아래 그림처럼 모델-뷰가 양방향 통신이 가능하다. 이는 두 개 이상의 모델을 순차적으로 업데이트 하는 기능을 구현할 때 모델 간의 의존성을 높이는 문제를 만들고 종종 데이터 흐름을 꼬이게 한다. 예시) 유저가 뷰에서 액션(키보드, 마우스 등)을 하여 컨트롤러에게 명령이 전달되면 컨트롤러는 A모델을 업데이트 하고 B모델도 업데이트 한다. B 모델의 업데이트가 또 다른 C뷰에 영향을 끼치고 C뷰는 컨트롤러를 거쳐 D모델의 상태를 변..

단말기의 유형(출력물 vs 화면)과 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용하다. 기본 구문 // @media media-type and (media-feature-rule) { /* CSS rules go here */ } media-type 선택사항으로 기본값은 all all print 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서 screen 화면 speech 음성 장치 논리 연산자 and not 쿼리가 거짓일때만 참을 반환 only 전체 쿼리가 일치할 때만 스타일 적용 ,(쉼표) or 연산자처럼 동작 하나만 true면 true 예제 고밀도 디스플레이를 위한 이미지 다루는 방법 고밀도 디스플레이 기기가 늘어나면서 웹에서도 고 해상도..

DOM(Document Object Model) 문서 객체 모델은 HTML 또는 XML과 상호작용을 위한 일종의 API 브라우저에 로드 되며 DOM tree 형태로 문서를 만듬 (노드로 트리를 구성, element, text string, coment) 스크립트 또는 프로그래밍 언어를 웹 페이지에서 사용할 수 있게 연결 시킴 자바 스크립트를 이용해 DOM을 수정할 수 있음 웹 페이지를 객체 지향적으로 표현한 것 Dom Tree: 트리 구조 형태의 노드들이 문서를 만듬 예시) HTMLElement ← HTMLMediaElement ← HMLTAudioElement ← HTMLElement ← HTMLMediaElement ← HMLTVideoElement ← DOM API Web API DOM의 각 노드와..

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에 기반을 두..