Computation suite

sticky-header, centered-top-container sticky animating 삽질1 google blogger의 템플릿 테마중 하나인 Contempo에서는  스크롤을 어느 정도 내린 상태에서 다시 올리면 상단의 검색창이 내려와서 스크롤을 다시 내릴 때까지 유지된다. (이 "어느 정도"에 해당하는 값은  기본 테마의 javascript에 코딩 되어있을 것으로 추측한다.) css 수정 후 이 부분에 문제가 생겨서 내릴때에도 올릴 때에도 계속 검색창이 내려오고 사라졌다를 반복한다. < 페이지 최하단 모습 > 데이터를 색인하여 찾을 때는 유용한 기능이라고 생각하지만 검색 기능은 이미 블로그 최상단에 존재한다. 따라서 해당 기능을 제거하기로 했다. scroll event를 감지하고 그에 따라 html이나 css문서를 수정하는 작업은  javascript가하는 일이다. html 편집기를 통해 코드를 살펴본 결과 이 javascript 코드는 외부 cdn 서버에서 가져오는 것 같다.  javascript 코드를 직접 건드려야되나 싶어서 구글링 해 본 결과 간단하게 css 코드를 수정해서 없앨 수 있었다. sol) sticky-header 제거 https://joshua-dev-story.blogspot.com/2020/04/blogger-remove-sticky-header.html FE, Publishing 에서는 '고정 헤더'라고 부르고 있는 이 태그의 css를 수정하면 된다. display 옵션을 none으로 바꿔서 기존 요소의 block을 전부 없애고 기능까지 해제해버리는 것. 이 sticky header를 보이지 않게하는 방법은 opacity를 0으로 만들거나 visibility를 hidden으로 할 수도 있지만 display : none 옵션이 가장 확실해보인다. 수정 후 여전히 scroll 이벤트에 따라 DOM의 변경이 일어나는 것 같지만 sticky header는 더이상 보이지 않는다. 삽질2...

Vue 하나도 모르는 상태에서 vue를 시작하면 최근 Vue 프로젝트와 API 서버 프로젝트를 번갈아가며  기능 수정/개선 작업을 수행했다. 간단한 API 호출 코드 수정과 vue 라이브러리, 내장 v-디렉티브를 활용하여 조건과 데이터에 따라 일부 UI를 변경하는 정도까지는 할 수 있었지만  FE 프로젝트 자체를 0부터 쌓아올린 것은 아니기에 집에서 사이드 프로젝트를 진행하며 정리하려고한다. 요즘 프로젝트 구성 global 환경 node.js - npm (or yarn)은 vue 프로젝트 환경을 구축하기 전에 설치해야 할 소프트웨어이다. node.js는 브라우저에서만 작동할 수 있었던 JS를 자바스크립트 서버 환경에서 돌아갈 수 있게 한다.(로컬, 리모트) 크롬의 V8 자바스크립트 런타임 엔진을 기반으로 구축되었다. vite.js 웹팩과 같이 js파일을  덩어리를 묶는 대신 네이티비ㅡ ES 모듈 임포트 기능으로 모듈을 불러오는 JS 개발 서버이다. 이전 기본 툴에는 vue cli가 있으며 웹팩을 사용한다. vue 커뮤니티는 vue 프로젝트를 생성하고 관리하는 기본 툴로써 vue cli에서 Vite로 대체했다. ts 문제 최신 프론트엔드 프레임워크의 프로젝트에서는 주로 Typescript와 의존성, 배포 설정 파일들이 함께 사용된다. 타이핑을 통해 체계적이고 가독성 높은 코드를 작성할 수 있는 장점이 있다. 당장 ts를 사용할 수는 없었다. 당장 npm init vue@{vue 버전}을 통해 프로젝트를 초기화해도 Cannot find module './App.vue' or its corresponding type declarations 라는 에러를 마주할 수 있는데 Typescript와 vue를 혼용해서 사용할 때 당장 처음에는 TS가 App.vue의 타입을 인식하지 못하기 때문에 발생한다. .vue 모듈을 TS가 인식할 수 있는 타입으로 정의해 주어야 하는데 관례적으로 'shims-vue.d.ts' 라는 파일명에 정의한다. 이 파일...

소프트웨어 디자인 패턴의 프록시 패턴 Proxy pattern은 디자인 패턴 중 Structural 패턴 중 하나이다. 가장 기본적인 골자는 "대신 요청을 처리해주는" 패턴 이라는 것이다. 누구 대신 요청을 처리하냐면, 실제 객체 대신 요청을 처리한다. (요청의 주체는 누구든 될 수 있지만  일반적으로 프로그램 런타임에서 메모리에 생성되는 객체이다.  네트워크 관련 객체가 될 수도 있고, 상주하는 객체가 될 수도 있음.) a라는 기능을 본래는 A객체에서 처리하는 것이 맞지만 a라는 기능으로 인해 다른 객체에 의도하지 않은 접근을 허용할 수 있다. (A class 내에서 구현한 기능이든, 함수든) 따라서, 다른 객체에 대해 접근을 제어 하기 위해 본 객체와 다른 대리인 역할을 하는 객체 를 제공한다. 본 객체 = Real subject 대리인 = Proxy 는 공통 Interface를 구현함으로서 접근 제어를 구현한다. 본 객체는 비즈니스 로직을 수행한다. 대리인 객체는 요청이 본 객체에 도달하기 전에 구현된 작업을 수행해서 직접 도달하지 않게 접근을 제어하거나 기타 로직들을 수행한다. (접근 제어, 지연 로딩, 로깅, 캐싱, 원격 프록시 등) ( **원격 프록시 = 다른 네트워크의 머신에서 돌아가고있는 객체를 대표한다. ) 요청을 보내는 클라이언트 입장에서는 실제 객체 대신 대리인 객체와 소통하고 있는 것이다. Vue의 프록시 패턴 vue.js에서는 JS의 내장 Proxy객체를 활용하여 데이터를 관찰하고 데이터가 변하면 이를 변경사항에 적용한다. => 반응성, Reactive vue3에서는 객체를 반응성 상태로 만들 때 reactive() 함수를 사용하는데 이렇게 만들어진 프록시 객체는 실제 객체에 대한 모든 접근을 가로챈다. (속성 값 변경, 생성, 삭제 등) Vue에서는 JS의 Proxy 객체를 이용하여 본 객체에 요청이 도달하기 전에 요청을 가로채서 반응성을 위한 로직을 수행한다. (본 객체에 의존하는 다른 객체에 대한 의존성 추적...