BeomBeomJoJo

전체 글 (1478)

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..

[gRPC] C# gRPC Server/Client 생성하기

gRPC 범범조조 2023. 3. 21. 00:59

목적 C# 으로 gRPC 통신을 구현합니다. Server/Client 두 서비스 모두 C# 으로 작성합니다. 그럼 C# 으로 간단한 gRPC 서비스를 만들어 보도록 하겠습니다. 개발 환경 개발 환경은 다음과 같습니다. OS : Windows 11 .NET Version : .NET 6 IDE : Visual Studio 2022 gRPC Server 구현 그럼 먼저 gRPC C# Server 를 구현하는 방법에 대해서 알려 드리도록 하겠습니다. Visual Studio 2022 를 실행한 후, ASP.NET Core gRPC 서비스 프로젝트를 생성합니다. gRPC 서비스를 생성하게 되면, 기본으로 Protos 폴더가 생깁니다. Default 로 greet.proto 라고 해서 프로토콜 버퍼가 생깁니다. ..

[PostgreSQL] PostgreSQL 에서 JSONB 사용한 CRUD

Database(데이터베이스) 범범조조 2023. 3. 20. 00:56

참조 참고 사이트 소개 요즘 데이터를 전송하는 가장 일반적인 방법은 JSON(JavaScript Object Notation) 을 사용하는 것입니다. Postgres 9.5 이상 부터는 JSON을 저장 및 가져올 수 있을 뿐만 아니라 JSON 구조를 기반으로 작업을 수행할 수 있도록 새로운 JSONB 유형의 Column이 새롭게 도입되었습니다. Use case 다음 User를 등록하는 간단한 애플리케이션이 있습니다. 응용프로그램을 개선하고 사용자 인터페이스(테마, 아이콘, 텍스트 크기)를 구성하는 기능을 추가한다고 가정합니다. 각 사용자는 여러 개의 구성을 가질 수 있으며 이러한 구성을 전환할 수도 있습니다. 위 내용을 토대로 작업할 JSON은 다음과 같습니다. { "userid":"artur@gmail..

[C#] EF Core - Fluent API 1:N 관계

C# 범범조조 2023. 3. 19. 00:54

참조 참고 사이트 소개 일반적으로 EF Core 에는 자동으로 구성할 수 있는 충분한 규칙이 포함되어 있으므로 1:N 관계를 구성할 필요가 없습니다. 그러나 쉬운 유지 관리를 위해 Fluent API 에 모든 EF 구성을 포함하기로 결정한 경우 Fluent API를 사용하여 1:N 관계를 구성할 수 있습니다. 예제 EF Core를 사용하면 Fluent API를 사용하여 관계를 쉽게 구성할 수 있습니다. Grade Entity가 많은 Student Entity를 포함하는 다음 Student 및 Grade 클래스를 보시면 됩니다. public class Student { public int Id { get; set; } public string Name { get; set; } public int Curre..

[C#] EF Core - Fluent API 1:1 관계

C# 범범조조 2023. 3. 18. 00:52

참조 참고 사이트 소개 일반적으로 EF Core에는 1:1 관계에 대한 규칙이 포함되어 있으므로 1:1 관계를 수동으로 구성할 필요가 없습니다. 그러나 키 또는 외래 키 속성이 규칙을 따르지 않는 경우 데이터 주석 속성 또는 Fluent API를 사용하여 두 Entity 간의 1:1 관계를 구성할 수 있습니다. 예제 외래 키 규칙을 따르지 않는 다음 Student 및 StudentAddress Entity 간의 1:1 관계를 구성해 보도록 하겠습니다. public class Student { public int Id { get; set; } public string Name { get; set; } public StudentAddress Address { get; set; } } public class ..

[C#] EF Core - Fluent API N:N 관계

C#/C# 문법 범범조조 2023. 3. 17. 00:51

참조 참고 사이트 목적 EF Core 에서 Entity 간의 N:N 관계 표현은 어떻게 표현하는지 알아보도록 합니다. 예제 다음 Student 및 Course Entity 간에 N:N 관계를 구현해 보도록 하겠습니다. 여기에서 한 학생이 여러 Course에 등록할 수 있고 같은 방식으로 한 Course 에 많은 학생이 참여할 수 있다고 합니다. public class Student { public int StudentId { get; set; } public string Name { get; set; } } public class Course { public int CourseId { get; set; } public string CourseName { get; set; } public string De..

1
2
3
4
···
124

Sidebar

Copyright © BeomBeomJoJo All Rights Reserved

Designed by JB FACTORY

티스토리툴바