본문 바로가기
반응형

전체 글

 (522)
동기 / 비동기 방식 동기 (synchronous)방식과 비동기 (asynchronous)방식은 프로그래밍의 주요 모델 중 하나입니다. 먼저, 동기방식은 single-thread, blocking architecture라고도 불리며 주어진 작업에 순서가 있기때문에 하나의 작업이 완료되어야만 다음 작업이 진행됩니다. 반면, 비동기방식은 multi-thread, non-blocking architecture라고 불리며 작업이 독립적으로 이루어지기 때문에 동시에 여러 작업이 가능합니다. 비동기 방식이 여러작업을 동시에 처리할 수있다고 해서 무조건 이로운건 아닌데요 그 이유는 하나의 작업이 다른 작업의 결과값에 의존하는 경우 비동기 방식을 사용할 경우 에러가 발생하기때문입니다. 동기 (synchronous)방식 요청된 작업이 순차적..
데이터 요청 데이터를 요청하는 방법에 대해 알아보겠습니다. 먼저, XML을 객체를 통해 전송하는 방법을 보겠습니다. XML은 화면을 구현하는 HTML을 보완하여 데이터의 저장과 전송을 전담합니다. 일반 문자의 형식으로 데이터를 전송하게 때문에 데이터를 받는 거의 모든 대상이 이를 이해할 수 있어 데이터의 유실 위험이 적은 장점으로 많이 사용되었던 방식입니다. XML 이전에는 애플리케이션에 불러오는 데이터의 변동이 있을 때마다 화면을 다시 로딩해야 했는데요. XML의 사용으로 데이터 관리와 화면 구현의 분리로 데이터가 변동되더라도 화면의 재 로딩이 필요가 없어졌습니다. 또 비동기 방식을 제공하기 때문에 데이터 요청 후 요청이 완료되기를 기다릴 필요 없이 다른 작업을 병행 가능합니다. XMLHttpRequest 작동은 ..
자바스크립트로 주간 / 야간 모드 바꾸기 요즘 많은 웹 애플리케이션 야간, 주간 모드로 바꿀 수 있는 기능을 제공하는데요. HTML, CSS, JS를 사용하여 구현해 보겠습니다. 보편적인 기능이라 따로 도입하는 이유에 대한 별다른 설명은 생략하고 바로 코드를 보도록 하겠습니다 (해당 코드에 집중하기 위해 이해를 위해 필요한 코드만 작성) 구현하기 HTML Custom welcome CSS /* 전역변수 지정 */ :root { --bg-light-alt: rgba(0, 0, 0, 0.4); --font-primary: aliceblue; --font-alt: #000; --bg-primary: transparent; --btn-primary: rgb(255, 92, 92); --btn-secondary: #03dac5; } /* data-the..
앵귤러 모달 웹프로그로밍에서 모달은 팝업이나 dialog를 의미합니다. Vanilla JavaScript (framework 사용 없이 HTML, CSS, JS만으로 만들어진 어플케이션)를 사용하여 모달을 만드는 것도 가능하지만 앵귤러에서 제공하는 기능들을 활용하면 모달의 재사용성을 높이고 정보를 공유를 보다 손쉽게 할 수 있습니다. 앵귤러를 사용하여 모달을 구현하는 방법을 살펴보겠습니다. 먼저 모달 구현을 위해 사용할 기능들을 살펴볼까요? 1. 모달 Component (모달 닫기 등 공통된 기능과 layout 제공) 2. 모달 Service (모달의 상태를 관리하고 공유하는 기능 제공) 3. 개별 모달 Component (로그인 등 특정된 내용을 제공하고 기능 수행) 구현된 코드는 아래와 같습니다 공통 모달 Com..
[구글 태그] 쇼피파이 구글 태그 삽입 구글애즈, 애널리틱스 등 구글제품에서 사이트의 정보를 받아보기 위해서는 사이트와 해당 제품을 연결고리가 필요한데요. 구글태그가 이러한 역할을 수행하며 사이트로부터 데이터를 받기 위해서는 구글태그삽입이 필요한데요. 오늘은 소피파이에 구글태그를 삽입하는 방법을 보겠습니다. 설치하기 좌측 메뉴에서 온라인 스토어 (Online Store) 하단에 '테마 (Theme)' 선택 사용 중인 테마 박스 우측에 '...' 버튼 클릭 '코드 수정 (Edit code)' 선택 '레이아웃 (Layout)' 아래 'theme.liquid' 선택 태그 안에 태그 삽입 후 저장 (아래 'here'라고 표시된 곳) 삽입가능한 구글태그들 태그관리자 태그 구글 태그관리자 태그 삽입 태그관리자가 작동하기 위해서는 사이트와 태그관리자를 연..
[구글 태그] 고도몰 구글 태그 삽입 구글애즈, 애널리틱스 등 구글제품에서 사이트의 정보를 받아보기 위해서는 사이트와 해당 제품을 연결고리가 필요한데요. 구글태그가 이러한 역할을 수행하며 사이트로부터 데이터를 받기 위해서는 구글태그삽입이 필요한데요. 오늘은 고도몰에 구글태그를 삽입하는 방법을 보겠습니다. 설치하기 관리자 접속 후 상단메뉴에 '기본설정' -> 좌측에 열린 메뉴에서 '외부서비스 설정' 선택 '+ 외부 스크립트 등록' 선택 '서비스명' 입력 -> '사용설정' (해당 스크립트 사용여부) -> '스크립트 삽입위치 선택' (상단 공통영역 권장) -> 'PC 쇼핑몰' '모바일 쇼핑몰'에 해당 태그 삽입 삽입가능한 구글태그들 태그관리자 태그 구글 태그관리자 태그 삽입 태그관리자가 작동하기 위해서는 사이트와 태그관리자를 연결하는 작업이 필요..
[구글 태그] 윅스 구글 태그 삽입 구글애즈, 애널리틱스 등 구글제품에서 사이트의 정보를 받아보기 위해서는 사이트와 해당 제품을 연결고리가 필요한데요. 구글태그가 이러한 역할을 수행하며 사이트로부터 데이터를 받기 위해서는 구글태그삽입이 필요한데요. 오늘은 윅스에 구글태그를 삽입하는 방법을 보겠습니다. 구현하기 윅스는 외부 스크립트를 삽입하는 기능인 사용자 지정코드 추가와 마케팅 제품연결 도구인 마케팅 통합도구를 제공합니다. 사용자 지정코드 추가 관리자 로그인 후 좌측 메뉴에 'Settings' 선택 보시는 것처럼 커스텀 코드 삽입은 업그레이드 버전을 사용하는 유저만 가능한데요. 업그레이드 버전을 사용하는 경우 여기서 코드 삽입이 가능합니다. 업그레이드 버전인 경우 아래와 같은 화면이 뜨는데요. '사용자 지정 코드 추가' 버튼을 선택하거나 ..
[구글 태그] 아임웹 구글 태그 삽입 구글애즈, 애널리틱스 등 구글제품에서 사이트의 정보를 받아보기 위해서는 사이트와 해당 제품을 연결고리가 필요한데요. 구글태그가 이러한 역할을 수행하며 사이트로부터 데이터를 받기 위해서는 구글태그삽입이 필요한데요. 오늘은 아임웹에 구글태그를 삽입하는 방법을 보겠습니다. 전제조건 아임웹은 프리버전에서는 스크립트 삽입기능을 제공하지 않기 때문에 프리버전인 경우는 스크립트 삽입은 불가합니다. 설치하기 관리자 로그인 후 좌측 메뉴에 '환경설정' -> 'SEO, 헤더 설정' 선택 열린 페이지에서 'Header Code' 란에 태그 삽입 (주의사항: free 버전에서는 외부 스크립트가 반영되지 않습니다.) 삽입가능한 구글태그들 태그관리자 태그 구글 태그관리자 태그 삽입 태그관리자가 작동하기 위해서는 사이트와 태그관리..
728x90

티스토리툴바