들어가며 html 문서를 작성하다보면, 또 우리가 이용하는 웹 사이트들을 개발자 도구를 통하여 확인해보면 이 문서 최상단에 작성되어 있는 것을 볼 수 있습니다. 저는 해당 의 존재를 학부생 1학년 시절, VSCode의 html 문서 자동완성 기능을 통하여 처음 접하게 되었던 기억이 있습니다. 그때에도 크게 이 정확히 무엇인지 짚고 넘어가지 않았던 것으로 기억합니다. HTML Doctype이란? Doctype은 선언문 이름 그대로 문서(document)가 어떤 버전을 기반으로 작성(type) 되었는지를 알려주는 역할을 수행합니다. 은 문서의 최상단에 위치하여 브라우저가 HTML 문서를 해석하고 렌더링하는 방식을 결정하게 됩니다. 대소문자를 구별하지 않지만 관습상, 강조를 위하여 전체를 대문자로 표기하는 ..
들어가며 HTML의 스크립트 요소 는 JavaScript 코드를 포함하거나 외부 스크립트 파일을 불러오는 역할을 수행합니다. 우리는 이러한 요소를 통하여 웹 페이지에 동적 기능과 인터랙티브한 요소들을 추가할 수 있습니다. 이러한 script 요소에는 많은 속성이 존재하는데 본 포스팅에서는 그 중에서 async와 defer에 대하여 알아보고자 합니다. async와 defer 속성을 사용하는 이유는 무엇일까?https://what-time.tistory.com/50 [SEO] script 태그는 html에서 어디에 넣는 것이 가장 좋을까?시작하며 현재 진행 중인 프로젝트의 성능 개선을 위하여 가장 많은 사용자가 진입하고, 많은 로직을 처리하는 홈 부분부터 차근차근 개선을 시작하기로 하였습니다. Reques..
에러 로그 로컬 개발 환경에서는 발생하지 않았지만 production 환경에서 위와 같은 에러 로그를 볼 수 있었습니다. Minified React error #418 - Hydration failed because the server rendered HTML didn't match the client.Minified React error #423 - There was an error while hydrating but React was able to recover by instead client rendering the entire root.Minified React error #425 - Text content does not match server-rendered HTML. 3가지 에러 모두 공통적..
들어가며 지난 공모전 출품작 워크인코리아(Work in Korea)는 Vercel을 통하여 배포를 시도하려고 하였습니다. 하지만 Work in Korea는 Organization 저장소에 있어 이를 배포하려면 Vercel 프로 계정이 필요한 상황이었습니다. Vercel Pro는 2주간 무료이지만 그 이후부터는 요금을 지불해야 했기 때문에 좋은 해결 방법은 아니었습니다. 그러던 도중 개인 public 레포지토리를 이용하면 무료로 배포할 수 있다는 사실이 기억났고 fork한 레포지토리를 vercel과 연동시키면 되는 것이었다. 무료로 하는 것은 성공..! 하지만.. 가장 큰 문제점은 master 브랜치에 push를 하면 자동으로 배포가 되면 좋겠지만.. 원본 레포지토리가 변경될 때마다 forked 레포지..
들어가며 Early Return 패턴에 대하여 들어본 적이 있나요? Early Return 패턴은 프로그래밍에서 조건문을 사용하여 함수나 메소드의 실행 흐름을 일찍 종료시키는 기법을 말합니다. 오늘은 이 패턴에 대하여 다뤄보고자 합니다. Early Return 패턴과 중첩 if문 개선하기 (JavaScript 예제) Early Return 패턴은 함수 내에서 조건에 맞지 않거나 더 이상 처리할 필요가 없을 경우 바로 반환하는 기법입니다. 중첩된 if 문을 간소화하고 가독성을 높이기 위해 이 패턴을 사용할 수 있습니다. 중첩 if 문을 Early Return으로 개선하는 예제를 보여드리겠습니다. function validateUser(user) { if (user) { if (user...
들어가며 평소에 하나의 소셜 계정으로 모든 서비스를 가입하면 헷갈릴 일이 없지만 각 서비스마다 제공하는 소셜 로그인이 다르기 때문에 자연스레 여러 소셜 계정을 사용하게 됩니다. 또한, 나름대로의 규칙에 따라 서비스 성격에 맞추어 소셜 로그인을 정하기도 합니다. 이유가 어떻든, 사용자는 자주 이 서비스에 어떤 소셜 로그인을 이용했는지 까먹는다는 문제를 겪게 됩니다. 단번에 올바른 계정을 고른 경우에는 괜찮으나 그렇지 않은 경우, 의도치 않게 새로 회원가입이 되는 경우도 있습니다. 위와 같은 상황을 방지하기 위해서 여러 서비스에서는 각 사용자가 가장 마지막으로 로그인한 소셜 계정 정보를 제공합니다. 특히 게임 같은 경우는 각 소셜 계정을 통합하여 관리하는 것이 아닌 서로 다른 계정으로 인식되어야 하는 ..
들어가며 최근 모바일 애플리케이션에서는 앱 내부에서 웹페이지를 띄우는 웹뷰(WebView) 기능을 많이 활용하고 있습니다. 이때, 웹뷰 안에서 foreground와 background 전환을 감지해야 하는 경우가 종종 발생합니다. 예를 들어, 사용자가 잠시 다른 앱을 사용하다가 다시 우리 서비스로 돌아오는 경우, 그 전환을 정확히 감지해야 할 수 있습니다. 본 포스팅에서는 이러한 요구사항을 해결하기 위한 시도와 해결 방안에 대하여 알아보고자 합니다. 첫 번째 접근: window.onFocus 처음에는 window.onFocus 이벤트를 활용하여 foreground와 background 전환을 감지하려고 했습니다. 일반적으로 onFocus는 윈도우나 탭이 focus를 받을 때 호출됩니다. 하지만, 모바일..
들어가며 많은 사용자들이 페이지의 로딩 속도가 느린 경우에 높은 이탈율을 보이곤 합니다. 특히 많은 이미지가 포함된 웹 사이트에서 로딩 속도가 느린 것을 볼 수 있습니다. 이렇듯 이미지 최적화는 초기 사용자 이탈율을 줄일 수 있는, 웹 개발에서 빼놓을 수 없는 중요한 작업입니다. 사용자 환경에 따라 적합한 포맷과 크기의 이미지를 제공하면 웹사이트의 성능, SEO, 그리고 사용자 경험이 모두 향상됩니다. 이번 포스팅에서는 특히 포맷 최적화를 위한 태그의 강점을 알아보고자 합니다. 이미지 포맷 최적화의 중요성이미지 포맷 최적화의 중요성은 아래와 같습니다. 파일 크기 감소 이미지 포맷은 같은 품질의 이미지를 얼마나 압축할 수 있는지를 결정합니다.WebP는 JPG 대비 최대 30% 더 작은 파일 크기를 제공..
