본문 바로가기
안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요.

전체 아티클153

Remix의 v1, v2 각각 다른 Nested Route 비교하기 SPA로 구성된 프로젝트를 SSR 프레임워크 중 하나인 Remix 공부를 진행하다가 Nested Route 방식을 통해 중첩된 구조의 페이지를 구현을 하려고 했습니다. 폴더를 만들고 Nested 한 구조를 만들고자 관련 폴더들을 생성하고 파일을 생성하여 개발을 진행하고 있는데, 원하는 방식대로 Nested 한 구조의 라우트로 연결되는 것이 아닌 404 페이지로 이동이 되는 문제를 확인하였습니다. 이때 시도하고 있는 방식이 Remix의 V1 라우팅 방식이라는 것을 공식 문서를 통해 확인을 하게 되었고, V2와 어떤 라우팅 방식의 차이를 가지고 있는지 비교하는 포스팅을 하려고 합니다.Remix의 Future 플래그Remix에서는 초기 V1을 만들때 V2를 2023년에 개발을 진행하고 릴리즈를 진행했던 적이 .. 2024. 10. 20.
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.
오래된 브라우저에서 자바스크립트가 지원을 안해요, 폴리필(Polyfill) 예전 에디터 개발을 진행하면서 오래된 구형 브라우저를 지원해야했던 적이 있었습니다. 최신 자바스크립트 문법은 모던 브라우저에서는 정상적으로 동작을 하지만, 동일한 코드로 동일한 동작을 구현함에 있어서 오래된 버전의 브라우저에서는 현재 자바스크립트가 사용하고 있는 객체가 undefined으로 나오기도 합니다. 예를 들어 아래와 같은 코드는 최신 브라우저에서 잘 동작하지만 오래된 브라우저에서는 실패합니다. 그 이유는 객체나 메서드에 대한 구현이 없기 때문입니다.[1, 2, 3].at(-1);Promise.resolve(1);new Set (1, 2, 3); 이러한 문제를 해결하기 위해서는 오래된 브라우저에서 존재하지 않는 기능에 대해 개발자가 관여를 해야하는데, 이때 이를 해결하기 위해 사용할 수 있는 스크.. 2024. 10. 11.
브라우저 렌더링 파이프라인 브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정을 브라우저 렌더링 파이프라인이라고 합니다.이 과정은 크게 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.
레이어 서비스의 SPA에서 동적 오픈그래프 대응해보기 목차· 배경· SPA에서 어떻게 동적 오픈 그래프 태그를 적용해요?· SPA의 동작원리· Vercel 배포 환경에서 동적 오픈그래프 태그 적용해보기배경처음 레이어 서비스를 구상했을 때, 아이디어에 발맞춰 개발자들끼리 개발에 대한 설계를 진행하던 중이었어요. 레이어 서비스는 사용자들이 자유롭게 만들어가는 회고 서비스로 초기 기술 스택 선정과 설계에 대한 아래와 같은 고민들을 했어요.  · 과연 레이어 서비스에서 SSR이 필요한가?· 서비스를 개발할 때 알고 있는 기술 스택을 기반으로 빠른 개발을 진행해야하는가?· 비록 러닝 커브가 있더라도 신기술에 대한 도전을 해야하는가? 결과적으로 팀 레이어의 프론트엔드 개발자들은 문제를 해결하기 위한 기술에 초점을 맞추었고, 서비스가 필요로하지 않는 오버 엔지니어링을 .. 2024. 9. 13.

티스토리툴바