전체 글 (464) 썸네일형 리스트형 자바스크립트 컴포넌트 - 사이드 메뉴 구현 먼저 HTML에 메뉴버튼과 메뉴를 생성합니다. Menu 1 Menu 2 Menu 3 CSS를 활용하여 기본 스타일을 적용하고 메뉴버튼과 메뉴의 위치를 조정합니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: black; font-family: 'Poppins'; overflow-x: hidden; } .menu-box { height: 200px; width: 200px; position: fixed; top: -100px; left: -100px; background-color: aquamarine; border-radius: 50%; transition: .4s ease; z.. 노드제이에스? 노드제이에스는 자바스크립트를 기반으로 한 백엔드 언어로 빠른 속도를 자랑합니다. 설치하기 아래 링크를 통해 노드제이에스 홈페이지로 이동합니다. Node.js (nodejs.org) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 1. Window LTS 버전을 선택 (current 버전이 최신버전이긴 하지만 베타버전이라 안정성이 떨어짐) 다운로드가 완료되면 인스톨러를 실행합니다. 동의 후 'next' 추가도구는 설치는 선택사항이므로 원하는 경우 선택합니다. 아래 명령어를 통해 버전확인이 되면 정상적으로 설치가 완료 node -v 사용하기 먼저, 프로젝트 폴더를 생성 후 편집기를 열고 .js.. 노드제이에스 서버 만들기 (익스프레스) 웹 서버는 웹애플리케이션에 사용자가 접근 가능하도록 사이트의 모든 정보 (파일들)를 담고 있습니다. 해당 정보요청과 요청에 대한 응답은 HTTP(S)로 많이 이루어지는데요. 오늘은 웹 애플리케이션 프레임워크인 NPM express를 사용하여 Node.js 웹 서버를 만들어보겠습니다. 익스프레스? 익스프레스 (express)는 웹 애플리케이션 제작에 필요한 서버 측의 다양한 기능들을 미리 구현해 놓은 프레임워크로 웹 애플리케이션 제작에 필수기능들을 직접 코드작성 없이 사용하게 해 줍니다. 프로젝트 생성 먼저 npm 패키지를 실행하기 위해 아래 명령어를 실행합니다. npm init 설정할 때 아래 그림처럼 물어보는 게 많은데 아래와 같이 옵션을 추가하면 자동으로 모든 설정이 완료됩니다 (이후 package... 비주얼 스튜디오 코드 - [익스텐션] Sqlite 'SQLite'는 비주얼 스튜디오 코드 편집기에서 데이터베이스의 정보를 보거나 조작을 가능하게 해주는 익스텐션입니다. 설치하기 익스텐션 검색창에 'sqlite'를 검색하고 설치를 누릅니다. Sqlite 사용하기 1. Window 'ctrl' + 'shift' + 'p'를 눌러 전역 검색창을 열고 'SQLite: Open Database'을 선택 후 해당 데이터베이스를 선택하면 아래처럼 Sqlite 익스플로러가 열립니다. ▶ 데이터 보기 테이블 우측에 '재생' 버튼을 누릅니다. ▶ 데이터 추가하기 테이블 우클릭 후 'new query [insert]'를 선택 열린 파일에 아래와 같이 값을 추가합니다. VALUES (1, 'brush', 1), (2, 'soap', 1); 파일을 우클릭하여 'run quer.. 자동 데이터베이스 생성 및 데이터 넣기 완성된 애플리케이션을 다운로드하여 실행할 때 데이터베이스 생성 없이는 프로그램이 작동하지 않을 수 있습니다. 엔티티프레임 워크에서 제공하는 데이터베이스를 자동 생성하는 기능을 보겠습니다. 애플리케이션 생성 먼저 .NET 애플리케이션을 생성합니다. 생성하기 .NET web-API 생성하기 개발도구 설치하기 .NET을 이용하여 웹애플리케이션을 만들기 위해서는 .NET에서 제공하는 개발도구가 필요합니다. 개발도구 다운로드는 아래 링크에서 가능합니다. .NET | Free. Cross-platform. Open Sour jin-co.tistory.com 마이그레이션 준비 1. 패키지 설치 데이터베이스와 연결을 위한 설정을 해 줄 패키지가 필요한데요. 검색창에 누겟갤러리를 검색하여 엽니다. NuGet: Open .. Google Tags Set Up - Godomall To get data from your Google products such as Google Ads and Google Analytics, we need something to link the site and your Google product. Google tags fills the gap and allows us not only to get data but alose to send events and conversions. The way to insert the tags differ from one site to another and in this writing, we will see how we can set up the Google tags in Godomall (one of the most p.. [태그관리자] 트리거 - 클릭 사이트에서 원하는 요소 선택값 가져오기 원하는 요소를 우 클릭하고 '검사' 선택 열린 개발자 도구 창에 음영으로 표시된 요소를 다시 우클릭 'Copy' -> 'Copy selector' 선택으로 복사 태그관리자 트리거 설정 새로 만들기 관리자 로그인 '트리거' -> '새로 만들기' 구성박스를 누르고 열린 창에서 '모든 요소' 선택 '일부 클릭' 선택 후 '기본 제공 변수 선택' 선택 'Click Element' 선택 'CSS 선택 도구와 일치' 선택 세 번째 칸에 사이트에서 복사한 요소 선택값을 붙여 넣고 '저장' 만들어진 전환 복사하기 [태그관리자] - 태그, 트리거 복사하기 동일한 애즈계정에 여러 전환을 설치하는 경우 설치된 전환을 복사하여 전환아이디 등 동일한 값을 중복으로 설정하는 수고를 덜 수 .. [구글 태그] 구글애즈 전환 태그 삽입 먼저, 광고 중인 계정에서 상단 메뉴 '도구 및 설정' -> 측정항목에서 '전환'을 선택합니다. 생성된 전환 액션 선택 (파란색 제목) 선택 후 중간에 '태그설정'을 클릭합니다. 역시 두 가지 방법으로 설치가 가능한데요: 직접 설치 태그관리자 사용 직접설치 '태그 직접 설치' 선택 Ads 계정 구성 태그를 포함한 글로벌 태그 존재 확인과 생성된 전환 태그 삽입이 필요한데요. 글로벌 태그: - global tag가 없는 경우: 첫 번째 옵션 선택 후 박스 안에 코드 복사 후에 해당 코드를 메인 html 파일 안에 삽입 - global 태그는 존재하나 해당 Ads 계정의 구성 태그가 없는 경우: global 태그에 해당 Ads 구성 태그[gtag('config', 'AW-00000000') ] 추가 - 해당.. 이전 1 ··· 35 36 37 38 39 40 41 ··· 58 다음
