글

라벨이 web_frontend인 게시물 표시

Vue 첫 걸음

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' 라는 파일명에 정의한다. 이 파일...
댓글 쓰기
Read more »

Javascript의 Defer vs async

스크립트는 다운로드 된 후에야 실행될 수 있다. 너무나 당연한 얘기다. 그렇기 때문에 때로는 원하는 순서대로 브라우저가 동작하지 않고 사용자 경험을 떨어뜨릴 수 있는 요인이 되기도 한다. 파싱 도중 script를 만날 때 <script> browser는 HTML을 읽다가  <script></script> 구간을 만나면 script를 먼저 순차적으로 실행하기 위해 파싱을 멈춘다. src 속성이 있는 외부스크립트 <script src="..."></script>를 만났을 경우도 마찬가지다. 이 경우에는 외부 스크립트를 다운받고 실행한 후에야 남은 page를 처리할 수 있다. <script async> 파싱 도중 <script async>를 만나면 문서 파싱 + 스크립트 다운로드를 같이 진행한다. 스크립트는 백그라운드에서 다운된다. 스크립트 다운이 완료되면 파싱을 멈추고 다운받은 스크립트를 실행한다. async의 의미답게 마치 비동기 이벤트처럼 동작한다. 다운받은 스크립트 실행이 끝나면 남은 문서를 마저 파싱한다. 돔이 100% 형성되지 않아서 dom 객체 존재하지 않는 context에서 html 객체를 참조하려고하면 오류를 raise한다. 방문자 수 카운터, 광고 블록과 같은 독립적인 script처럼 실행 순서가 중요하지 않은 경우에 적용한다. <script defer> defer 스크립트 또한 백그라운드에서 스크립트 다운로드를 진행하기 때문에 파싱 작업을 막지 않는다. defer로 받은 script의 실행시점은,  </html>을 만났을 때, 즉, 문서의 끝에 도달했을 때 실행된다. </html> - (실행 시점)  - DOMContentLoaded script를 실행할 때 html 요소들이 반드시 선행적으로 필요한 경우 defer를 사용한다. defer 속성은 기본적으로 true이다. script에 src속성이 없다면 d...
댓글 쓰기
Read more »

Before coding in vue.js

UI 개발을 위한 Progressive Framework, vue.js "Progressive" of vue.js Web, 네이티브 앱(ios, android)의 이점을 모두 수용하여 표준적인 패턴으로 개발함. 제공하는 웹 사이트의 특징에 따라 개발 방식도 달라져야하기 때문. 데이터 지향 화면을 렌더링하는 구조 자체는 dom이 아니라 javascript다. 데이터가 먼저 존재하고 데이터를 기반으로 적절한 dom을 구축한다. Two way 데이터 바인딩 데이터와 렌더링을 동기화하는 구조를 가진다. UI 패턴이 많아지면 dom을 변경하는 코드가 많아진다. vue에서는 dom 변경 작업을 vue 프레임워크에 맡긴다. html dom과 데이터가 서로 양방향으로 연결되어 있어서 어느 한쪽에 변경이 일어나면, 다른 쪽에 자동으로 반영된다. 이를 통해 휴먼 에러와 코딩양 자체를 줄일 수 있다. v-directive 속성 가상 dom을 만들기 위한 템플릿 기법. Dom에 반영하기 전에 vue.js 프레임워크에 의해 컴파일 되고 내부적으로만 사용한다. ex) v-if, v-bind, key 데이터 바인딩과 관련된 처리를 실시한다. html속성과 다르게 v-디렉티브는 애플리케이션에 등록되어 있는 데이터 전용 객체의 속성을 나타낸다. Mount 배치할 요소와 애플리케이션을 연결하는 것. 컴포넌트 기능별로 html/js/css 세트로 구성할 수 있다. 컴포넌트를 조합하면 페이지를 구조화하여 만들 수 있다. vue.js를 통해 부품을 만들고 vuex를 통해 부품들로 구성된 페이지를 만들고 vue router를 통해 여러 개의 페이지를 관리한다. 가상dom 작은 변화가 발생 해도 DOM 트리 구조 모두 갱신하기보다, 추상화된 dom문서로부터 가상의 DOM에서 메모리에서 처리 후 실제 DOM과 동기화.(실제 DOM갱신) 1. 데이터 변경과 실제 dom변경 처리는 비동기적으로 이뤄진다.     dom조작을 최소한으로 유지하므로 렌더링 성능이 높다. 2. 그러나 dom 재...
댓글 쓰기
Read more »

Before handling networking methods in JS

이미지
비동기 통신을 위한 환경, JS Engine 브라우저가 JS를 해석하여 사용하거나 애플리케이션 서버에서 Node.js를 통해 사용할 때 Asynchronous request 처리는 JS 자체가 아닌 JS를 실행하는 환경에서 담당한다. <JS Engine> - Call stack - Microtask queue <Environment support> - Event Loop - Web API - Macrotask queue 즉, JS Engine이 가진 공간인 Heap, Callstack만으로는 비동기 요청을 해결하지 않는다. 예를 들어, 구글 크롬의 V8 JS Engine에서는 함수가 호출될 때, 하나의 Call stack에 순차적으로 보관하고 Last In First Out 순서로 처리하는데 return 될 때, 스택으로부터 pop up할 뿐이다. 스택에 쌓여있는 함수가 실행되는 동안에는 다른 작업이 이를 방해할 수 없는데, 예를 들어,  Bottom |   a   |   b   |   c   | Top 1. C->B 순서로 함수 처리가 완료되었다. 2. A를 실행하려는 찰나, D라는 함수가 호출되어 Call stack에 쌓인다. Bottom |   a   |   d    | Top 3. D->A 순으로 실행한다. 위 예시에서,  D가 실행되는 와중, A의 코드를 실행하다가 다시 D의 Context로 돌아와서 마저 실행하는 작업을 JS 환경에서는 하지 않는다. 즉, 한 함수가 끝날 때까지 다른 작업의 방해를 받지 않는다. 그리고 작업 종류와 스케줄링 방식에 따라 이는 병목이 될 수도 있다. JS Engine은 스케줄링을 위해 다음 환경 2개를 필요로 한다. 비동기 통신을 위한 환경, 이벤트 루프(MacroTask, MicroTask) ...
댓글 쓰기
Read more »

웹 접근성 WAI-ARIA

웹 접근성 웹 페이지의 html에서는 시각장애인들을 위해  Tab의 조작으로 태그를 이동한 뒤 음성 안내 매세지를 들을 수 있는 기능을 제공한다. 이와 같은 기능들을 웹 접근성이라고 함. WAI-ARIA HTML 태그에 추가적으로  W3C에서는 WAI-ARIA라는 기술로 웹 접근성을 지원한다. https://www.w3.org/WAI/ARIA/apg/patterns/ 디자인 패턴 가이드라인이 있다. 1. html 태그 속성으로 role을 정의하여 html 요소의 역할을 표현한다. 2. aria- 접두사가 붙은 속성으로 스크린리더가 어떤 작용을 할지 표현할 수 있음. aria-live 속성으로 페이지를 새로고침하지 않고 바뀌는  동적 변경 사항에 대해서 알려줄 수 있다.
댓글 쓰기
Read more »

신속하게 Vanilla JS, React JS, React Native 학습하기(feat.노마드코더)

이미지
< 빠른 학습엔 3분할 뷰 >   JS와 JS 프레임워크를 독파하고있다. 새로운 언어나 프레임워크를 학습하는 데 있어서 탐구자형 ~ 실속형의 스펙트럼이 있다면 이번 러닝 사이클은 전부 실속형에 치중했다. Vanilla JS https://cpusuite.blogspot.com/2025/02/djnago-fullstack-html-css-vanillajs-js.html Django fullstack 사이드 프로젝트를 하면서 기초적인 html + css + js를 학습했는데 웹 브라우저의 기초인 만큼 vanilla js를 좀 더 체계적으로 기억하기 위해 노마드 코더의 vanilla JS 2주 챌린지를 신청했다. Python 기반으로 개발을 했었기 때문에 js의 동적 타이핑 문법이 이질적이지 않았고 맨 땅에 헤딩식으로 진행한 사이드 프로젝트의 html + css + js 경험 덕에 이틀 안에 50% 이상의 강의를 수강했다. 3일째 되는 날, 수강을 전부 끝내고 남은 React JS, React Native를 실습 할 예정이다. JS Framework로 작성한 소스 코드는 곧 JS로 변환되어 실행되기 때문에 프레임워크 학습 이전에 선행하는 것이 좋다. React JS Frontend Framework html로 작성한 class, id 명을 js에서 검색하여 따르기보다 js로 직접 동적으로 문서 객체를 생성한다. 참조하기도 간편하고 관리하기도 쉬우며 raw value를 하드코딩하는 것을 줄여 개발자의 실수를 줄인다.  react   React element의 interaction. element 생성, event listener 등록 등 react-dom React element를 html에 두는 역할. React Native 메타(구 facebook)에서 만들고 관리하는 오픈소스 모바일 애플리케이션 프레임워크. Typescript(JS확장)으로 개발할 수 있고 Flutter처럼 iOS Android 2가지 플랫폼을 동시에...
댓글 쓰기
Read more »

백엔드 개발자가 Djnago fullstack 사이드 프로젝트를하며 ( html, css, vanillaJS 그리고 JS프레임워크 )

서론 웹 개발 환경에서 FE 개발자와 BE 개발자는 상대의 업무를 서로 이해하게된다면  좀 더 총괄적인 서비스의 흐름과 병목지점을 파악할 수 있다. 때문에 이 둘의 협업 과정은 자연스럽게 Full-stack을 지향하고 있는 과정이라고 생각한다. 24년 12월부터 Django fullstack 사이드 프로젝트를 시작했다. 본론 시행착오 python django 코드 뿐 아니라 html + css + js도 함께 커버하기에 작업에 상당한 context switch가 있었다. 머릿속에 그린 것을 도식화나 문서화하지 않고 무작정 뛰어들었기 때문에  디자인 중인 화면을 확인할 곳이 없었다는 흠이 있었다. 특히 wireframe, 화면설계서가 없으니까  백엔드 작업시 하나의 기능을 완성하기 전까지 제대로 빌드가 되지 않기 때문에  dribble이라는 디자인 사이트를 많이 참고했다. 중복 작업과 반복 작업 중복, 반복 작업 django template language에서 상속을 지원하기 때문에 베이스 템플릿을 상속받아서 페이지를 제작할 수 있다. 템플릿에서 내부에서 여러번 쓰이는 컴포넌트가 불편하다면 공통 컴포넌트를 만들어주면된다. 그러나 컴포넌트를 FE 프레임워크 레벨 정도로 관리하기는 쉽지 않다. 공통 컴포넌트를 관리하려면 프레임워크의 틀을 따라가야하는데 이 시점이 프론트엔드 프레임워크 선정을 할 타이밍이라고 생각한다. JS로 모든 것을 control한다는 것의 간결함 FE UI 프레임워크에서는 html로 작성한 class, id 명을 js에서 검색하여 따르기보다 js로 직접 동적으로 문서 객체를 생성한다. 참조하기도 간편하고 관리하기도 쉽다. js는 bom(부분적으로)과 dom을 컨트롤 할 수 있다. 결론 결국 아주 간결한 landing page 외에는 JS 기반 프레임워크를 사용해야한다. 나는 왜 바로 FE 프레임워크로 뛰어들지 않았나? 더 깊고 가파른 학습을 위해 컴퓨터공학이나 소프트웨어학과의 교육 커리큘럼도 그렇고 프레임워크 이...
댓글 쓰기
Read more »

Mobile-first 디자인이란

글에 맞는 카테고리는 UX, Design 이 쪽이 될 텐데 당장 카테고리를 확장할 수 없어서 web_frontend 태그에 이 글을 지정함. 해당 글은 https://outwitly.com/blog/ux-design-when-not-to-go-mobile-first/ 을 번역한 글입니다. mobile-first design 최초로 UX Sketch를 할 때, 데스크탑이나 태블릿 보다 모바일 환경 인터페이스를 염두에 둔 디자인이다. mobile-first design의 일반적인 법칙은 ' 만약 사이트가 모바일 장치에 맞게 디자인되어있으면 다른 디바이스에서도 강력하게 적용될 것 '이다. mobile-first 대 desktop-first mobile first 해상도 이행 스마트폰 -> 태블릿 -> 데스크탑 저해상도->고해상도로 화면이 커짐. Progressive enhancement 텍스트 양 상대적으로 적음 폰트 사이즈 큼 하드웨어 액세스 카메라, 마이크, 플래시 등 다른 외장 디바이스에 액세스하기에 상대적으로 쉬움 모바일 폰에 최적 desktop first 해상도 이행 데스크탑-> 태블릿 -> 스마트폰 고해상도->저해상도로 화면이 작아진다. Graceful degradation 텍스트 양 상대적으로 많음 폰트 사이즈 작음 하드웨어 액세스 다른 외장 디바이스에 액세스하기에 상대적으로 어려움 데스크톱에 최적   클릭 유도 문구, 다운로드 속도에 대한 비교는 잘 이해가되지 않아서 제외했습니다. 고려사항 - 어떤 제품을 만드는 지 - 고객들이 어떤 작업들을 주로 수행하는지 1. 큰 디스플레이가 필요한 작업 ( graphic design과 같은 작업 ) 2. 장시간 디스플레이를 봐야하는 작업( 1번과 동일) 3. 고객들이 어떤 장치 위에서 주로 쓸 지 4. 기능이 많고 복잡한 지 위 case의 경우에는 desktop-first가 유리할 수 있음. 예를 들어, canva의 경우 desktop ux를 먼저 출시하고 모바일 u...
댓글 쓰기
Read more »

Form 통신을 위한 프론트엔드 (1) : 이미지 슬라이드 기능의 viewport

사이드 프로젝트로 django form와 templates 사용하여 서비스의 포털 홈페이지를 제작하고있다. 정말 기초적인 html css 지식으로  간단한 페이지 라우팅까지 제작하다가 포털 홈페이지인만큼 회사 소개 및 서비스 소개를 위해 보편적으로 쓰이고 있는 디자인인 이미지 슬라이드를 구현하기로 했다. 튜토리얼이 예제가 아닌 실제 회사들은 어떻게 쓰이고 있나 궁금해서 찾아봤더니 item 컨텐츠 이외에 viewport class를 만들어 사용하고 있었고 이는 내가 알지 못했던 개념이라 정리함. viewport 개념 현재 보고있는 웹 브라우저의 화면 영역. 크롬의 경우, 브라우저 탭, 주소 표시줄, 북마크바 아래의 문서 내용에 해당하는 영역을 의미한다. 기기 > 브라우저 창 > 뷰 포트 웹 viewport의 종류 크기(layout viewport) >= 크기(visual viewport) visual viewport는 layout viewport에서  Visual viewport는 Layout viewport에서 현재 보이는 부분임. 환경에 따라 visual viewport의 크기가 동적으로 변화할 수 있다. 당장 웹 브라우저에서 개발자 도구를 키면 동적으로 뷰포트가 재구성된다. 뷰포트가 적용되지 않은 화면에서 개발자 도구를 키면 개발자도구 창 아래에 컨텐츠 영역이 묻히게 된다. 데스크탑 환경에서 대부분의 경우, viewport = 브라우저의 viewport 사용자가 브라우저의 크기를 조절하며 viewport의 크기도 조절 가능. 보편적인 스마트폰 모바일 환경의 경우,  문자 입력시 키보드가 올라오기 때문에 visual viewport는 유지되고 layout viewport는 변경되지 않는다.  상하좌우, 더블탭, 줌인-줌아웃 상호작용을 통해 viewport의 배율을 변경할 수 있음. 이미지 슬라이딩 기능에서 viewport의 역할 viewport를 사용함으로서 원 이미지의 필요한 부분만 렌더링한다. viewpo...
댓글 쓰기
Read more »

Blogger 커스터마이징 : CSS 수정 (sticky-header)

이미지
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...
댓글 쓰기
Read more »

이 블로그의 인기 게시물

실무진 면접 경험으로 정리하는 백엔드 (1) : 에듀 테크 기업 면접

에듀 테크 기술 면접 시간 내어 이력서를 꼼꼼하게 봐주시고 서류상으로는 회사에서 원하는 background라고 생각해주셔서 느낌이 좋았다. 최근 본 면접들 중 가장 깊이있는 질문을 해주셨고 오답과 대안에 대한 설명도 해주셔서 배워갈 수 있었다. 아쉽게도 합격하지 못했지만 좋은 면접 경험이었기 때문에 다음 면접에서 더 견고한 답변을 위해 정리해보았다. 질문&답변&더 나은 답변 일반 질문 이직 사유? 경영상의 이유로 인한 권고사직, 프로덕트 개발과 프로덕트 피벗 과정의 공백기 회사의 이 직군에 지원하면서 뭘 기대하는지? 거의 혼자서 개발을 해왔는데 다른 관점의 의견을 들을 기회가 없었다. 여러 개발자의 의견을 듣고 내 의견에 태클을 걸며 같이 발전하면 좋겠다. 공백기에 뭐하고 있는지 ?  1. django template과 admin, 그리고 오픈소스 wysiwyg를 사용하여 블로깅 서비스 사이드 프로젝트하면서 풀스택 공부중이다. 2. 현업에서 줄곧 이미 구축된 ci/cd를 사용해오고있었는데 직접 구현을 학습하기 위해 github action workflow를 공부하고 있음.  기술&개발 관련 관리형 서비스를 쓰지 않고 aws ec2를 쓴 이유 ? - 비용문제 vpc 어떻게 설정했나? - production region은 모든 ip에 대해서 열고   development region은 사무실 개발 pc와 사무실 기기들의 ip만 접근가능하도록 함 nginx ssl 적용했다고 하는데, 인증서 뭐 사용했나? - 'let's encrypt'사용했는데 생각이 안나서 대답못함. socketio에는 wsgi or asgi? - wsgi vs asgi 차이점에 대해서 답변함. django vs fast api ? - 동기, 비동기 서버 기반과 기타 feature에 대해서 답변함. - django에서 기본 제공되는 템플릿, admin,ORM과 미들웨어들 - fastapi는 기타 기능들을 따로 붙여서 써야한다고 답변, django도 ...
Read more »

노마드코더 개발자북클럽 Clean code 완주, 독후감

이미지
짧은 기간 동안 Java로 쓰여진 클린 코드 책을 읽으며 코드를 짤 때 더 정성을 들여 쓰는 습관을 들였다. 당장 작동하는 코드보다는 유지 보수가 편한, 수정보다는 확장을 할 수 있는, 잘 읽히는, 정직하고, 하나의 일에 몰두하는 그런 코드를 짜려고 했다. 퇴근을 하고 책상 앞에 앉으면 오늘 작성했던 class가 아른거리고 과연 이게 최선이었을까 생각하게 되었다. ========================================================== 책을 읽으면서 대부분 공감하고 고개를 끄덕일 수 있었지만 좋은 코드를 쓰는 법을 아는 것과 좋은 코드를 쓰는 것에는 큰 차이가 있다. 좋은 코드를 쓰는 법을 알기만 해서는 그저 말로만 잘난 체 할 수 밖에 없을 것이다. 좋은 코드를 쓰는 사람은 코드 리뷰를 하며 시스템 변경에 유연한 구조인지 고민한다. 확실히 후자가 더 고된 작업이지만 견고한 프로덕트를 만드는, 실체가 있는 실력이 는다고 생각한다. ========================================================== Java기 반의 코드를 이해하기는 쉽지 않았지만 확실히, Java가 객체 지향적인 장치가 많다고 느꼈다. Python 웹 개발자라면 당장 객체지향 원칙이나 디자인 패턴을 익히기 보다는 웹 애플리케이션 프레임워크를 익히기를 추천한다. 그 중에서도, FastAPI를 추천하는데 Layer와 Depends를 사용한 설계 장치를 사용하며 실전 감각을 기르면서 객체지향적인 사고를 할 수 있다. 혼자 상향식으로 배우기 버겁다면 Framework의 규칙을 따르며 배워나가는 것이 효율적이라고 생각한다. 그리고 이렇게 해야 실전 감각을 느낄 수 있다. ========================================================== 클린 코드 북클럽 챌린지 덕분에 오늘도 나는 하나의 괴이한 모듈을 처리했다. util 패키지의 fileutil이라는 모듈인데 온갖 잡다한 파일 처리를 다 도맡아 하...
Read more »

Blogger 커스터마이징 : CSS 수정 (sticky-header)

이미지
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...
Read more »