크로스 브라우징의 중요성

크로스 브라우징(cross browsing)이란 무엇일까?이전 직장에서 크로스 브라우징 관련 이슈가 생겨 크로스 브라우징에 대한 내용을 처음으로 찾아보게 되었는데 내용을 더 자세하게 정리하려고 한다.. (수정하고 나니 IE에선 작동을 하지 않는?!)크로스 브라우징(Cross Browsing)은 웹 페이지나 웹 어플리케이션이 다양한 웹 브라우저에서 일관되게 작동하고 동일하게 보이도록 하는 것을 뜻한다. 각 브라우저는 웹 표준을 해석하고 렌더링하는 방식에 약간의 차이가 있을 수 있기에 크로스 브라우징은 웹 개발 과정에서 꼭 고려해야할 사항이다. 그럼 어떠한 이유들로 인해서 크로스 브라우징이 중요한지 알아보자.특히 IE와 같은 구형 브라우저와 최신 브라우저 간에는 큰 차이가 있어 구형 브라우저에서도 호환성을 ..

• format_list_bulleted Frontend
• · 2024. 8. 20.
• textsms

JS 엔진의 구조와 작동원리 (JS 런타임 환경까지)

⚙️자바스크립트 엔진이란?JavaScript 엔진은 JavaScript 코드를 실행하는 소프트웨어 컴포넌트이다. 대표적인 예로 구글 크롬의 V8 엔진, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore (Nitro) 등이 있다. JS 엔진은 웹 브라우저나 Node.js와 같은 런타임 환경에서 사용된다.좀 더 자세하게 알기 위해 위키피디아의 글을 인용하였다.자바스크립트 엔진 (JavaScript engine)은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다. 자바스크립트 엔진은 전통적인 인터프리터일 수도 있고, 특정한 방식으로 바이트코드로 JIT 컴파일 을 할 수 있다. 여러 목적으로 자바스크립트 엔진을 사용하지만, 대체적으로 웹 브라우저에서 사용된다.JS 엔진이 코드를 ..

• format_list_bulleted Frontend/JavaScript
• · 2024. 8. 16.
• textsms

API, 라이브러리, 프레임워크 개념

API (Application Programming Interface)API는 소프트웨어나 애플리케이션 간의 상호작용을 가능하게 하는 일련의 규칙과 명세이다.쉽게 말해, API는 한 소프트웨어가 다른 소프트웨어에게 자신의 기능을 어떻게 사용할 수 있는지 정의해 놓은 것이다.API를 이용하면 개발자가 기능을 구현하지 않고도 원하는 기능을 제공하는 서비스를 이용할 수 있다. API 장점API를 이용하여 이미 구현된 기능을 쉽게 재사용할 수 있어 시간이 절약된다.표준화된 서비스를 제공하기 때문에 호환성을 높여준다.API 사용예시구글이나 깃허브 같은 서비스의 API를 사용하여 웹서비스에 소셜 로그인 기능을 통합구글 맵스 API를 이용해 웹서비스에 지도 서비스 제공카카오페이, 네이버페이 등의 API를 통해 온라인..

• format_list_bulleted .ect
• · 2024. 8. 16.
• textsms

JS 동기/비동기 처리 - 콜백부터 async/await

비동기 처리란 무엇인가?동기 vs 비동기동기 처리: 요청과 결과가 동시에 일어난다. 즉 특정 작업이 완료될 때까지 다음 작업은 대기해야 한다.비동기 처리: 요청 후 결과를 기다리지 않고 다음 작업을 먼저 실행한다. 결과는 나중에 준비되면 처리한다.자바스크립트와 비동기자바스크립트는 싱글 스레드 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있다.하지만 setTimeout, AJAX 요청, DOM 이벤트 등 많은 작업들이 시간이 걸린다. 이러한 작업들을 동기적으로 처리하면 사용자 경험이 굉장히 나빠진다 (브라우저 멈춤 현상)따라서 자바스크립트는 비동기 처리를 통해 이러한 문제를 해결한다.비동기 처리 방식의 종류 콜백 함수가장 기본적인 비동기 처리 방식이다.비동기 작업이 완료되면 호출될 함수를 미리 등록..

• format_list_bulleted Frontend/JavaScript
• · 2024. 8. 14.
• textsms

가비아에서 도메인 구매하기 + Vercel 프로젝트

최근에 사이드 프로젝트로 계산기 기능을 제공하는 프로젝트를 제작하여 배포까지 완료하였습니다.Next.js 14 버전으로 개발과 Vercel로 배포까지 무난하게 진행되었지만 뭔가 아쉬움이 남았습니다.제 프로젝트도 멋진 도메인을 가지길 원해서 바로 가비아로 달려가 보았습니다. 제가 가비아에서 어떻게 도메인을 구매하고 프로젝트에 연결하였는지 이번 포스팅에서 설명드리겠습니다.이번 포스팅은 Vercel 배포, 가비아 회원 가입 등 부수적인 내용은 완료된 상태에서 진행되어 도메인을 구매하고 등록하는 것 외 내용은 생략 되어있습니다. 1. 가비아 접속 및 도메인 검색가비아에 접속하여 WWW. 뒤에 원하는 도메인을 입력하여 검색을 합니다.검색 시에는 최상위 도메인은 포함하지 않고 도메인 네임만 포함하여도 검색 가능합니..

• format_list_bulleted .ect
• · 2024. 8. 13.
• textsms

Next.js의 빌드를 알아보자

Next.js는 React 기반 웹 애플리케이션 개발을 위한 강력한 프레임워크이다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 이미지 최적화, 라우팅 등 다양한 기능을 제공하여 개발 생산성과 사용자 경험을 향상시킨다.이번 포스팅에서는 Next.js 프로젝트를 빌드하는 방법과 빌드 과정 그리고 빌드 결과물에 대해 알아보겠습니다.Next.js란?Next.js는 React를 기반으로 하는 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 코드 스플리팅, 이미지 최적화, 라우팅 등 다양한 기능을 제공합니다.서버 사이드 렌더링(SSR): 페이지 로딩 속도를 개선하고 SEO(검색 엔진 최적화)를 향상시킵니다.정적 사이트 생성(SSG): 빌드 시점에 HTML 파일을 생성하여..

• format_list_bulleted Frontend
• · 2024. 8. 13.
• textsms