전체 글 (522) 썸네일형 리스트형 자바스크립트 컴포넌트 - 확장 검색 창 구현 먼저 HTML에 검색창과 버튼을 생성합니다. CSS를 활용하여 기본 스타일을 적용합니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: lightcoral; } .input-box { position: relative; } input { height: 50px; width: 50px; border-radius: 15px; transition: 0.4s ease; font-size: 1.7rem; border: none; } input:focus {.. 서버 아키텍처 - 프로젝트 분산하기 서버 구조 인터페이스는 서버에 대한 요청과 응답처리하며 데이터베이스에 전송할 쿼리를 작성하고 데이터를 받는 역할을 수행하는 인프라스트럭처 프로젝트에 의존합니다. 인프라스트럭처 프로젝트는 다른 프로젝트에 의존 없이 개체 등 비즈니스 로직을 담당하는 애플리케이션 코어 프로젝트에 의존합니다. 구현하기 1. 프로젝트 생성 먼저 solution을 생성합니다. dotnet new sln ▶ 인터페이스 엔트리 포인트를 담당할 웹 에이피아이를 생성하고 solution에 추가하고 dotnet new webapi -o API dotnet sln add API ▶ 인프라스트럭처 데이터베이스에 정보를 저장하고 불러올 데이터 프로젝트 생성 및 solution에 추가 후 dotnet new classlib -n Infrastru.. 자바스크립트 컴포넌트 - 사이드 메뉴 구현 먼저 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.. 이전 1 ··· 42 43 44 45 46 47 48 ··· 66 다음
