'웹 프로그래밍' 카테고리의 글 목록

웹 프로그래밍 (143)

VS Code 에서 JavaScript 실행하기

웹 프로그래밍/JavaScript 범범조조 2023. 5. 19. 21:05

개요 VS Code 를 이용하여 JavaScript 실행하는 방법에 대해서 알아봅니다. 여러가지 방법이 있지만, 매우 간편한 방법중 하나인 Code Runner 를 이용하여 사용하는 방법에 대해서 정리 진행합니다. 1. Code Runner Extension 설치 VS Code 에서 아주 쉽게 JavaScript 를 실행하려면, Code Runner Extenstion 설치를 진행하면 됩니다. 2. 테스트 진행할 JavaScript 파일 생성 설치를 완료 하였다면, 테스트 진행할 자바스크립트 파일 하나를 생성합니다. 그리고 아래와 같이 테스트 진행할 자바스크립트 코드를 입력합니다. 저 같은 경우에는 hello.js 프로젝트 파일 생성 후 아래의 코드를 작성하였습니다. 그리고, Ctrl + Alt + N ..

[react] react 에서 배열 데이터 삭제하기

웹 프로그래밍/React 범범조조 2023. 4. 20. 20:28

참고 https://dev.to/collegewap/how-to-delete-an-item-from-the-state-array-in-react-kl 개요 react 에서 Button 컴포넌트 하나를 추가 후, 해당 버튼을 클릭하면 데이터가 하나씩 삭제되어 화면에 출력되는 코드를 작성해 봅니다. 리액트 프로젝트 생성 먼저 리팩트 프로젝트를 생성합니다. npx create-react-app myapp 위 명령어를 통해 프로젝트 생성을 할 수 있습니다. App.js 코드 작성 위에서 CRA 로 리액트 프로젝트가 성공적으로 생성되었다면, 기본으로 App.js 파일이 생성됩니다. 해당 코드를 아래와 같이 작성해 줍니다. import { useState } from "react"; function App() { ..

[react] Button 클릭 시, 데이터 추가하기

웹 프로그래밍/React 범범조조 2023. 4. 20. 20:27

개요 react 에서 Button 컴포넌트 하나를 추가 후, 해당 버튼을 클릭하면 데이터가 하나씩 추가되어 화면에 출력되는 코드를 작성해 봅니다. 리액트 프로젝트 생성 먼저 리팩트 프로젝트를 생성합니다. npx create-react-app myapp 위 명령어를 통해 프로젝트 생성을 할 수 있습니다. App.js 코드 작성 위에서 CRA 로 리액트 프로젝트가 성공적으로 생성되었다면, 기본으로 App.js 파일이 생성됩니다. 해당 코드를 아래와 같이 작성해 줍니다. import "./App.css"; import { useState } from "react"; function App() { const array = [ { id: 1, name: "Alice" }, { id: 2, name: "BoBo" ..

[React] react-query 정리

웹 프로그래밍/React 범범조조 2023. 4. 3. 20:40

참고 해당 내용은 (https://kyounghwan01.github.io/blog/React/react-query/basic/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5) 사이트 보고 공부한 내용을 정리한 곳입니다. 보다 자세한 내용은 https://kyounghwan01.github.io/blog/React/react-query/basic/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5 여기를 참고해 주세요~! react-query api 모음 reat-query 에서 사용하는 api 들을 하나씩 정..

[Web 팁] JSON-SERVER 사용법

웹 프로그래밍 범범조조 2023. 3. 30. 21:18

참고 https://github.com/typicode/json-server https://www.npmjs.com/package/json-server JSON-SERVER 개요 프론트엔트 개발을 할 떄 서버단의 데이터를 가져와서 테스트를 진행해야 하는 경우가 있습니다. 하지만, 백엔드쪽 개발이 미완성이라면..데이터를 가져와서 테스트를 진행할 수가 없습니다.. 하지만, JSON-SERVER 를 이용하면 실무에서 사용하는 실 데이터와 최대한 비슷한 느낌으로 가짜 API 서버를 만들어서 테스트를 진행할 수있습니다. 즉, JSON-SERVER 를 이용하여 연습용 서버를 쉽게 구성하여 백엔드쪽이 완성되지 않더라도 프론트엔드 개발에는 문제 없이 개발을 진행할 수 있습니다. 참고로, JSON-SERVER 는 프로덕..

[React] react-query 사용하기

웹 프로그래밍/React 범범조조 2023. 3. 30. 20:17

참고 https://kyounghwan01.github.io/blog/React/react-query/basic/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%B2 개요 Vite 을 통해 테스트 진행할 리액트 프로젝트 하나를 생성합니다. 생성된 프로젝트에 react-query 를 다운받고, CRUD 기능을 통해 react-query 사용 방법에 대해서 익힙니다. 사용 기술 react-query 테스트 프로젝트를 개발하기 위해, 사전에 필요한 라이브러리 정보는 다음과 같습니다. vite react-query react-query-..

[React] React Query 란?

웹 프로그래밍/React 범범조조 2023. 3. 30. 20:13

참고 https://tanstack.com/query/v3/ https://velog.io/@94applekoo/React-Query-%EC%B4%9D-%EC%A0%95%EB%A6%AC React-Query 개요 React-Query 는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리 입니다. 클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어 졌습니다. React-Query 에서는 기존 상태 관리 라이브러리인 redux, mobX 가 클라이언트 상태 작업에 적합하지만, 비동기 또는 서버 상태 작업에는 그다지 좋지는 않다고 언급 했습니다. 클라이언트 상태와 서버 상태는 완전히 다른 개념이며, 클라이언트 상태는 각각의 input..

[Blazor] Blazor MonacoEditor 사용방법

웹 프로그래밍/Blazor 범범조조 2023. 2. 6. 19:42

참고 https://github.com/serdarciplak/BlazorMonaco 개요 Blazor 에서 MonacoEditor 사용하는 방법에 대해서 정리 진행합니다. 개발환경 테스트 개발 환경은 다음과 같습니다. .NET 6 Visual Studio 2022 1. BlazorMonaco Nuget 설치 제일 먼저, Blaozr 프로젝트에 NuGet 패키지를 추가합니다. dotnet add package BlazorMonaco // or Install-Package BlazorMonaco 위 명령어를 통해서 다운로드 할 수도 있고, Visual Studio 에서 직접 NuGet 패키지 설치 진행해도 됩니다. 2. 스크립트 추가 저는 Blazor Server 프로젝트를 생성 후, 테스트 진행하였습니다..

[react] 리액트 버튼 아이콘 사용하기

웹 프로그래밍/React 범범조조 2023. 1. 13. 19:48

개요 오늘은 리액트에서 버튼에 아이콘을 입히는? 방법에 대해서 알려 드리도록 하겠습니다. 저도 현재 리액트를 배우고 있는 초보자로써, 추후에 잊어버리지 않게 하기 위해 정리 진행합니다. 1. react-icon 홈페이지 방문 react-icon 해당 홈페이지에 들어가게 되면, 아주 다양한 리액트에서 사용할 수 있는 아이콘들을 제공해 주고 있습니다. 2. 설치하기 홈페이지에 가면, home 메뉴에 react-icon을 사용하는 가이드 라인을 제공해 주고 있습니다. react-icon 을 사용하려면, 아래 명령어를 통해 설치를 진행해 주어야 합니다. npm install react-icons --save 위 명령어를 입력하여 설치 진행해 줍니다. 3. 사용하려는 react 프로젝트에 import 하기 앞서 ..

[Blazor] Grafana DashBoard iframe URL http 로 가져오는 방법

웹 프로그래밍/Blazor 범범조조 2023. 1. 6. 19:12

Blazor Http로 실행 Blazor는 기본적으로 https, http 모두 실행되게 되어 있습니다. 아래는 LaunchSetting.json 입니다. { "profiles": { "GrafanaIframeTest": { "commandName": "Project", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" }, "dotnetRunMessages": true, "applicationUrl": "https://localhost:7051;http://localhost:5207" } } 위 JSON 파일에서 applicationUrl을 보면 https와 http가 있습니다. Blazor를 ..

[Blazor] iframe 태그 이용하여 grafana DashBaord HTTPS URL 불러오기

웹 프로그래밍/Blazor 범범조조 2023. 1. 6. 01:34

개요 Blazor 에서 iframe 태그를 이용하여 grafana DashBoard 를 불러올 수 있는지 PoC 진행하였습니다. grafana DashBoard URL이 HTTPS 인 경우, 불러오는 방법에 대해서 정리 진행하였습니다. URL이 HTTP 인 경우에 불러오는 방법은, 따로 정리하여 포스팅 진행할 예정입니다. 개발환경 개발 환경은 다음과 같습니다. Visual Studio 2022 .NET 6 Blazor Server Blazor 예제 코드 Blazor Server 로 프로젝트를 생성하게 되면, 기본으로 Counter.razor 페이지가 생성됩니다. 해당 페이지의 코드를 아래와 같이 추가하였습니다. @page "/counter" Counter Counter Current count: @cur..

[JavaScript] 디데이(D-Day) 구하기

웹 프로그래밍/JavaScript 범범조조 2022. 12. 19. 18:57

개요 JavaScript 에서 D-Day 를 구현하는 방법에 대해서 공부 진행합니다. 예를들어, 현재 날짜가 2022-12-19 라고 하였을 때, 2022-12-31 을 입력하게 되었을 경우 해당 날짜까지 얼마의 시간이 남았는지 D-Day 를 구하는 예제 코드를 구현해 봅니다. HTML 에서는 간단히 Input 태그와 버튼 태그를 통해 값을 입력하여 D-Day 를 표시해 봅니다. HTML 예제로 사용하는 HTML 코드는 다음과 같습니다. 년,월,일 을 입력하는 3개의 input 태그가 있고, 입력된 값을 통해 버튼을 클릭하게 되면 D-Day 를 구해서 표시해주는 내용입니다. 버튼 위 HTML 코드를 작성 후, 브라우저에서 확인하게 되면 아래와 같이 보입니다. JavaScript 다음은 D-Day 를 구현..

1
2
3
4
···
12

Sidebar

Copyright © BeomBeomJoJo All Rights Reserved

Designed by JB FACTORY

티스토리툴바