해당 글에서는 OG 태그(Open Graph Tags)를 적용하고 이해하는 방법에 대해서 알아봅니다1) OG 태그(Open Graph Tags) 💡 OG 태그(Open Graph Tags)- Facebook이 2010년에 만든 프로토콜로, 웹페이지가 소셜 미디어에 공유될 때 어떻게 표시될지를 제어하는 메타 태그입니다. - 현재는 Facebook, Twitter/X, KakaoTalk, LinkedIn, Slack 등 대부분의 플랫폼에서 표준처럼 사용됩니다.- 2. 선택적 태그💡 선택적 태그- 필수는 아니지만 선택적으로 추가가 가능한 태그입니다.속성(Propety)설명사용예시og:site_name사이트 이름EcodeLabog:locale언어/지역ko_KR / en_US 3. 이미지 상세 태그💡 ..

해당 글에서는 스키마 마크업에 대해 이해하고 이를 적용하는 방법에 대해 알아봅니다1) 스키마 마크업(Schema Markup)💡 스키마 마크업(Schema Markup)- Schema.org에서 정의한 표준 코드를 HTML내에 추가하여 검색 엔진이 웹페이지 콘텐츠의 의미(레시피, 제품, 이벤트 등)를 정확히 이해하도록 돕는 구조화된 데이터입니다.- 예를 들어서, 검색 결과로 나타낼 때, 단순히 "이 페이지에 텍스트가 있다"라고 보여주는 것이 아니라, "이 부분은 메인 메뉴이고, 이 부분은 하위 카테고리다"라고 구조를 선언하는 행위입니다.- JSON-LD 형식을 가장 많이 사용하며, 이를 통해 검색 결과에 풍부한 정보(리치 스니펫)를 표시해 클릭률(CTR)과 SEO 성과를 높입니다. 1. 리치 결과(R..

해당 글에서는 PWA에 대해 이해하고 활용하는 기본 방법에 대해 알아봅니다.1) PWA(Progressive Web App)💡 PWA(Progressive Web App)- 웹 기술로 구축되지만 네이티브 앱처럼 작동하는 애플리케이션입니다. 전통적인 웹사이트와 네이티브 앱의 장점을 결합한 형태라고 할 수 있습니다 앱처럼 아이콘을 추가하고, 푸시 알림을 보내며, 오프라인에서도 작동하게 만드는 기술입니다.- 구글의 엔지니어 알렉스 러셀(Alex Russell)이 처음 제안한 개념으로, 별도의 스토어 설치 과정 없이 웹 브라우저를 통해 앱과 같은 사용자 경험(UX)을 제공합니다.구분일반 웹 사이트PWA네이티브 앱 (AOS/iOS)설치 방식URL 접속브라우저 내 추가앱스토어 다운로드오프라인 사용불가가능 (제한적..

해당 글에서는 Javascript 환경에서 클라이언트에서 API로 통신하는 다양한 방법에 대해 알아봅니다. 1) 동기 통신 💡 동기(Synchronous) 처리 방식이란? - 데이터 통신을 위해 ‘요청'을 하였을 때, 어떠한 요청에 대한 ‘응답'을 받을 때까지 기다리다가 완료된 뒤 다음 코드가 수행되는 처리방식을 의미합니다. [ 더 알아보기 ] 💡 브라우저에서는 동기 통신을 하면 안 되는 것일까? - 브라우저에서 동기 통신을 하는 것은 권장되지 않습니다. 동기 통신은 브라우저의 실행을 일시 중지시키고 사용자 인터페이스를 블로킹하는 문제를 야기할 수 있습니다. 따라서, 비동기적인 방법을 사용하여 서버와 통신하는 것이 좋습니다. 2) 비동기 통신 💡 비동기(Asynchrous) 처리 방식이란? - 데이터 통..

해당 글에서는 Thymeleaf 내에서 JQuery DatePicker 라이브러리를 사용하는 방법에 대해서 공유합니다. 1) 라이브러리 선언하기 💡 jQuery 3.6.1과 jQuery-ui.css를 CDN 방식이 아닌 직접 다운로드 받는 방식으로 구성하였습니다. 해당 라이브러리 내의 Datepicker가 포함되어 있습니다. Datepicker | jQuery UI Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar i..

해당 글에서는 Spring Boot의 타임리프(Thymeleaf)를 기반으로 CDN을 통하여 오픈소스 ‘Toast UI Grid’를 이용한 설정 및 활용방안에 대해서 공유합니다. 1) 개발 환경 💡 해당 환경에서는 ‘Package Manager’를 이용한 방식이 아닌 ‘CDN’을 통한 방식을 사용하여 구성하였습니다. 개발환경 버전 java 1.8 Spring Boot 2.7.4 빌드관리도구 Gradle 7.5 개발 툴 IntelliJ IDEA 2022.3 spring-boot-starter-thymeleaf 2.7.4 thymeleaf-layout-dialect 3.1.0 Lombok jquery 3.6.1 [더 알아보기] 💡 CDN(Content Delivery Network / Content Dist..

해당 글에서는 Front-end에서 용어들에 대해서 정확하게 알고 개념을 이해하기 위한 목적으로 작성한 글입니다. 1️⃣ 저장소 1. 쿠키(Cookie) 💡 웹 브라우저 상에 작은 ‘텍스트 파일’로 저장이 되는 만료 기간이 존재하는 저장소를 의미합니다. [사용 예시] 로그인 화면에서 ‘아이디 자동완성’ 기능에 사용 팝업 화면에서 ‘오늘 하루 보지 않기' 기능에 사용 미 로그인 상태에서 ‘장바구니 담기’ 기능에 사용 2. 로컬 스토리지(Local Storage) 💡 만료기간이 존재하지 않고 페이지를 변경하거나 브라우저를 닫아도 반영구적으로 유지되는 저장소를 의미합니다. 사용 예시 로그인 화면에서 ‘자동 로그인' 기능에 사용 3. 세션 스토리지(Session Storage) 💡 브라우저의 탭 안에서만 유효한..

해당 글에서는 Front에서 용어들에 대해서 정확하게 알고 개념을 이해하기 위한 목적으로 작성한 글입니다. 1️⃣ 구조 1. 컴파일러(Complier) 💡 ‘프로그래밍 언어(고급 언어)’를 컴퓨터가 이해할 수 있는 ‘기계어’로 변환하는 컴파일을 수행하는 것을 의미합니다. [예시] typescript → Javascript로 컴파일을 수행합니다. [예시] Java(.java) → Java(.class)로 컴파일을 수행합니다. [참고] Typescript의 경우 컴파일 단계에서 사전에 오류가 될 사항에 대해 오류를 찾아서 런타임 되기 이전에 확인할 수 있습니다. 2. 트랜스 파일러(Transplier) 💡 트랜스 파일링(Transpling)을 통하여 '특정 언어'를 '다른 언어'로 바꿔 주는 것을 의미합니다..

해당 글에서는 Module 번들과 Webpack에 대해 이해하고 webpack에 주요 옵션에 대해서 이해를 목적으로 작성한 글입니다. 1) 취지 💡 이전 React 프로젝트를 초기에 구성하고자 할 때 CRA(Create-React-App)를 통하여 프로젝트를 구성하였습니다. 해당 구성을 사용하게 된다면 초기의 webpack이나 babel에 대한 설정이 사전에 구현되어 신경을 쓸 일이 없었습니다. 💡 그런데 직접적으로 webpack을 설정할 필요가 생김에 따라서 이해하고 적용 방안에 대해 알아봅니다. 💡 참고로 CRA 환경에서 webpack과 babel을 구성하는 방법 또한 존재하여 아래에 [참고]로 공유를 합니다 1. [참고] CRA(Creat-React-App)으로 webpack / bable을 구성하..

해당 글의 목적은 문자열을 조작하는 함수로 문자열 조작에 사용되는 메서드에 대해서 공식 문서를 읽어보고 예재를 통해서 이해를 돕기 위해 작성한 글입니다. 해당 글에서는 모든 메서드에 대해서는 포함되어 있지 않고 자주 사용되는 메서드 위주로 작성하였습니다. (상시 업데이트 예정입니다) 0. 요약 번호 입력 타입 주요 기능 메서드 명 반환 타입 1 Array / string 문자열 조작 split() / Array.from() / Spread Operator string 2 string 문자열 조작 split() Array 3 string 문자열 조작 charCodeAt() / fromCharCode() number 4 string 문자열 조작 substring() string 5 string 문자열 조작 ..