전체 아티클73 HTML에 meta 속성 중 http-equiv은 무엇을 의미할까요? 최근 Remix를 학습하면서, 그리고 레이어 서비스에서 동적 오픈그래프 태그를 대응하면서, HTML의 메타 태그에 대해 조금씩 알아보는 시간을 가졌다. 보통 많이 사용하는 title, viewport 등 많이 사용하는 요소들만 확인을 하다보니 익숙치 않는 몇몇 이름들이 보였는데, 그 중 http-equiv의 refresh 속성에 대해 알아보면서 http-equiv 속성에는 무엇들이 있는지 다루어보려고 합니다. http-equiv 란?먼저, HTML의 meta 태그는 문서의 부가적인 정보를 제공하는 태그입니다.meta 태그의 http-equiv 속성은 HTTP 헤더에 정보 또는 값을 제공하는 content 속성입니다.주로 사용하는 용도는 HTML 문서에서 사용할 문서의 종류나 페이지 이동(새로 고침) 등에.. 2024. 10. 19. 브라우저 렌더링 파이프라인 브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정을 브라우저 렌더링 파이프라인이라고 합니다.이 과정은 크게 5가지로 분류가 됩니다.1. DOM 트리 생성브라우저가 HTML 파일을 받으면, 이 파일을 바이트 단위로 읽기 시작합니다.브라우저의 HTML 파서는 이 바이트들을 문자로 변환하고, 이 문자들을 다시 HTML 토큰으로 변환합니다.이 HTML 토큰들은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미합니다. HTML 토큰이 생성되면 브라우저는 이를 기반으로 DOM 트리를 생성합니다 2. CSSOM 트리동시에 브라우저는 CSS 파일도 파싱을 진행합니다. CSS 파일 역시 바이트로 전송되므로, 브라우저는 이를 문자로 변환한 뒤 CSS 규칙으로 나눕니다. 각 CSS 규칙은 선택자인 셀렉터와, 선.. 2024. 10. 4. CKEditor에서 커스텀 버튼 및 기능 추가하는 방법 목적· 배경· 커스텀 버튼 및 기능 추가하기배경본래 에디터 프로덕트를 개발을 했던 적은 있지만, 파일 업로드를 초기부터 개발을 한 적은 없기 때문에 기록을 위해 포스팅을 진행합니다. 백오피스 개발을 진행하던 도중 CKEditor에서 본문 파일 업로드 기능을 만들어야했습니다. CKEditor에서는 쉽게 파일 업로드 기능을 구현하기 위해서는 프리미엄 플랜을 사용해야하는데, 굳이 프리미엄을 사용하지 않고 그 외에 기능들은 자체 기능으로 구현이 되어있었기 때문에 파일 업로드 기능 또한 직접 구현을 해야했습니다. 이때 프리미엄 플랜을 사용하지 않고 구현을 할 수도 있는데, 이를 위해 커스텀 플러그인과 버튼을 구성하여 에디터에 추가하는 과정을 진행해야합니다. CKEditor에서 제시하는 업로드에 대한 방식은 아래와.. 2024. 9. 23. git stash 했던 내용이 사라졌을 때 당황하지 마세요 잠깐 정리를 먼저 해보겠습니다 🫨· 작업한 내용이 사라졌다면 git stash list를 통해 데이터를 확인하고 복구해보세요 작업을 하다가, git stash로 잠깐 저장해두었던 내용이 사라졌던 적 있으신가요? 코드 리뷰를 해야하는 상황이 왔는데 잠깐 작업 내용을 git stash를 통해 저장하고 여러 브랜치들을 옮겨다니던 중 관련 작업 내용들이 사라져버려서 기억하고자 포스팅을 진행합니다..git stash를 수행하고, 가장 최근 저장된 stash 내용을 적용하려면 git stash apply 명령어를 사용합니다. 하지만, git stash를 한번 더 입력을 한 경우 최근 stash의 내용이 덮어쓰여져버리는데, 이 경우에는 어떻게 할 수 있을까요?git stashgit stash apply보통의 경우,.. 2024. 7. 9. Reduce로 코드 클린하게 만들기 잠깐 정리를 먼저 해보겠습니다 🫨· reduce 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고 하나의 결과 값을 반환합니다. 코드리뷰를 받으면서 생각보다 고려해서 작성했던 코드가 reduce를 만나 엄청 간결해지는 과정을 보고, 평소에는 reduce를 사용하는 빈도가 많이 없어서 이번 기회에 한번 복습하고자 이렇게 포스팅을 하게 되었습니다. 이번 포스팅에서는 reduce에 대해 가볍게 알아보고, 어떤 방식으로 코드가 간결해졌는데 리뷰를 해보려고 합니다.arr.reduce(callback [, initialValue]);reduce는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음과 같은 인수를 받습니다. · accumulato.. 2024. 7. 2. 분리된 파일의 tanstack mutate 메소드를 컴포넌트 안에서 사용하기 잠깐 정리를 먼저 해보겠습니다 🫨· tanstack-query를 별도 파일로 설정하여 패칭 결과에 따라 로직을 만들 수 있지만, 복잡한 상태 관리를 처리할 때는 컴포넌트 내부에서도 처리를 할 수 있어요 개발을 진행하면서 서버와 통신에 대한 데이터 패칭 파일은 컴포넌트와 분리하여 진행하고 있습니다. 데이터 패칭 성공 및 실패 후에 대한 링크 이동 · 토큰 저장 등 간단한 로직의 경우는 데이터 패칭 파일에서 onSuccess · onError 으로 처리를 할 수 있는데, 컴포넌트에서 반응형 을 관장하는 값을 직접 건드려야할 경우에는 컴포넌트 단에서 패칭 결과에 따른 로직을 작성해야합니다. 분리되어 관리되고 있는 데이터 패칭 코드는 아래와 같습니다. 코드의 가독성을 위해 임포트와 타입 정의에 대한 부분은 제.. 2024. 6. 28. 이전 1 2 3 4 ··· 13 다음
