1. 서버 프로젝트 생성

 

 

 

3. 빌드 종속성 설정을 한다

4. Program.cs를 다음과 같이 바꾼다

[변경 전] [변경 후]
using Data.Models;
using HotChocolate.Types.Pagination;
using Microsoft.EntityFrameworkCore;

string ConnectionString = "Server=localhost:15432;Database=postgres;User ID=postgres;Password=";
var builder = WebApplication.CreateBuilder(args);

builder.Services.AddDbContext<postgresContext>(options =>
    options.UseNpgsql(builder.Configuration.GetConnectionString(ConnectionString)));

builder.Services
    .AddGraphQLServer()
    .RegisterDbContext<postgresContext>(DbContextKind.Synchronized)
    .AddFiltering()
    .AddProjections()
    .AddQueryType<Query>()
    .SetPagingOptions(new PagingOptions
    {
        MaxPageSize = int.MaxValue - 1,
        DefaultPageSize = int.MaxValue - 1,
        IncludeTotalCount = true,
    });

var app = builder.Build();

app.UseRouting();
app.UseEndpoints(endpoints =>
{
   endpoints.MapGraphQL();
});

app.MapGet("/", () => "Hello World!");
app.Run();

 

5. 아래와 같이 Schema 폴더생성 후 Query.cs 파일을 생성한다

6. Query.cs는 다음과 같이 작업한다

namespace Data.Models
{
    public partial class Query
    {
        [UsePaging]
        [UseProjection]
        [UseFiltering]
        public IQueryable<SeoulPopulation> GetSeoulPopulation(postgresContext dbContext)
        {
            return dbContext.SeoulPopulation;
        }
    }
}

 

7. 프로그램을 실행하면 다음과 같이 나타난다(포트번호는 바뀔수 있음)

 

8. https://localhost:7145/graphql/ 로 url을 바꾸면 아래와 같이 나타난다

 

9.CreateDocument버튼을 선택한 다음, 다음과 같이 나타낼수 있다 

 

1. Database 데이터 작성

data.sql
0.00MB

 

2. 빈 프로젝트 생성

3. 데이터 프로젝트

 

 

 

 

살다보니 이런것도 해봐야 하는구나..

 

1. 일단 WPF 프로젝트 생성 (.NET 7.0으로 생성)

 

2. Nuget Package 아래 2개를 설치한다.(버전이 안 맞네???-_-;)

 

3. App.xmal.cs 파일에 다음과 같이 작업한다

private IHost webHost;

protected override void OnStartup(StartupEventArgs e)
{
	base.OnStartup(e);

	webHost = Host.CreateDefaultBuilder()
		.ConfigureWebHostDefaults(webBuilder =>
		{
			webBuilder.UseStartup<Startup>();
			webBuilder.UseUrls("http://*:5000;http://localhost:5001;https://hostname:5002");
		})
		.Build();

	webHost.Start();
}

protected override void OnExit(ExitEventArgs e)
{
	webHost?.Dispose();
	base.OnExit(e);
}

 

다음의 파일도 포함되어 있지않다면 포함시켜준다

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

 

 

4. 프로젝트에 Startup.cs파일을 추가해준다.

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Agent
{
	public class Startup
	{
		public void ConfigureServices(IServiceCollection services)
		{
			services.AddControllers();
			services.AddSignalR();
		}

		public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
		{
			if (env.IsDevelopment())
			{
				app.UseDeveloperExceptionPage();
			}

			app.UseHttpsRedirection();

			app.UseRouting();
			app.UseEndpoints(endpoints =>
			{
				endpoints.MapControllers();
				endpoints.MapDefaultControllerRoute();

				endpoints.MapHub<CommandHub>("/chathub");
			});

		}
	}
}

 

3. CommandHub 클래스도 추가해준다.

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Agent.Hubs
{
    public class CommandHub : Hub
    {
		public override async Task OnConnectedAsync()
		{

			await base.OnConnectedAsync();
		}
	}
}

 

4. 초기 구동 시 다음과 같은 창이 나타났을 때, 허용을 선택한다.

 

 

회사에서 라벨 프린터를 프로그램 해야 할 일이 있어 기록으로 남김(안친절함, 나만 알아보게끔 씀)

 

중고를 파는 곳이 있어서 구매하고, 라벨프린터 용지도 구매,(5"x7")

 

1. 아래의 사이트를 가니, 유틸리티 소프트웨어를 다운받으라고 한다

https://www.zebra.com/us/en/support-downloads/eula/unrestricted-eula.7b8a235653193b4c72c440110c25661656f56f5180957c98e7c0bc2144149cd156a1bc6e684725abae8eaa3b64ee1090eb44d0c7df0abb7f8ed97b5b3f7c9a5376e9eb05b8b828d41d895371710557b9df8c658334af4c49d754cef7dadf3fd445653285136f43b7.html#

 

2. 실행하고 다음다음 눌러서 설치함 (모델은 GK420d 선택했던걸로 기억)

 

3. 

 

1. Visual Studio 2019에서 콘솔 프로젝트 생성 후 Nuget 설치( Microsoft.EntityFrameworkCore.Tools )를 해보려 했으나 설치 실패

 

찾아보니 다음과 같이 .NET 6/.NET 7/.NET 8중에 하나를 선택해야 한다는데

https://dotnet.microsoft.com/ko-kr/platform/support/policy/dotnet-core

 

https://learn.microsoft.com/ko-kr/dotnet/core/tools/sdk-errors/netsdk1182

 

Visual Studio 2019에서는 .NET 6.0을 생성할 수가 없다.

2. 그래서 귀찮지만 Visual Studio 2022를 설치한 뒤 아까 생성했던 프로젝트를 열어서 다음과 같이 .NET을 추가 설치하기로 함 

 

3. 프로젝트를 .NET 8.0으로 다시 만듦

4. 이제는 nuget 추가가 잘 됨

 

5. DB 공급자가 아래와 같이 제공한다고 하는데, MSSQL이 EF Core 6,7용이 있다는데, 내가 실행할려고 하는 놈은 .NET 8인데 하위호환 되길 바란다. neget 설치 : Microsoft.EntityFrameworkCore.SqlServer

 

6. 그런데, 막상 실행시키니 8.0버전이 있네

 

 

https://www.youtube.com/watch?v=ZyEYL-tKqyU

* Entity Framework

  - ORM(Object Relational Mapping) Framework 중 하나

  - Object : OOP의 Object(클래스의 인스턴스)

  - Relation : 관계형 데이터베이스

  - C# 클래스 - SQL Server 매핑 관계를 만들어서 서로 주고받게 하겠다 => ORM Tool

  - ORM Tool 중의 하나가 Entity Framework

  - .Net Core 에서 쓰는 Entity Framework Core라고 함

  - 다른 ORM Tool 도 많다

 

8. Nuget에서 Microsoft.EntityFrameworkCore.Design 도 설치해줌

 

9. 테이블의 구조를 클래스로 만들어준다

    [Table("Emp")] //테이블명이 클래스 이름과 다를 경우 지정해준다
    public class Employee
    {
        [Key] //primary key - 꼭 지정해야 하는 것은 아니다
        public int Id { get; set; } 
        public string Name { get; set; }
        public DateTime DOB { get; set; }
        public decimal Salary { get; set; }
    }

 

10. 데이터베이스의 구조를 클래스로 만들어준다

    //1. DB 골격을 만들어주는 Base Class : DBContext
    public class MyDbContext : DbContext
    {
        //2. Database가 Employee 테이블을 가지고 있다
        public DbSet<Employee> Employees { get; set; }

        //3. 이 Databse가 어떤 서버를 가르키고 있는지 표시
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            optionsBuilder.UseSqlServer("data source=(local);Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=MyDB");
            base.OnConfiguring(optionsBuilder);
        }
    }

 

 

10. 서버를 연결 (보기 -> SQL Server 개체 탐색기)

      - 처음에는 이 메뉴가 안 나오는데,

       - 보기 > 서버탐색기 > 데이터 연결 > 우클릭 후 "연결 추가" > 아래의 창에서 계속 누르면 뭔가 설치하라고 나오는데, 설치하고 나면 

메뉴가 나타난다.

 

 

다음과 같이 추가 된다

11. 도구 > Nuget 패키지 관리자 > 패키지 관리자 콘솔

 

 

* Add-Migration mig1 명령을 실행한다(mig1은 Migration 이름이다)

추가에 성공하면 우측의 폴더와 cs 파일이 생긴다

  - cs 파일은 데이터베이스를 만들고, 테이블을 만들고, 테이블을 수정하는 마이그레이션 과정들을 수행하기 위한, C# 파일을 자동으로 Entity Framework 이 생성하게 된다

 

12. 실제로 실행하기 해서 데이터베이스를 만들고, 테이블을 만들기 위해서는 새로운 명령을 내린다 (Update-Database)

* 명령 실행시 아래와 같은 에러가 나온다면 

* Connection String에 다음을 추가한다

 

* 그 후에 Update-Database 명령을 수행한 다음 새로고침을 하면 테이블이 생성되었음을 확인할 수 있다

 

** Entity Framework을 사용해서 insert, select해본다

13. Insert : 다음을 실행한다

MyDbContext db = new MyDbContext();
//Id는 자동생성이므로 입력하지 않는다
Employee emp = new Employee()
{
    Name = "Tom",
    DOB = new DateTime(1999, 5, 10),
    Salary = 50000
};
db.Employees.Add(emp);

Employee emp2 = new Employee()
{
    Name = "Jack",
    DOB = new DateTime(1999, 5, 10),
    Salary = 50000
};
db.Employees.Add(emp2);
//<--여기까지는 메모리에 저장
//-->다음은 DB에 반영
db.SaveChanges();

 

2개의 데이터가 저장되었다

 

14. Select : 다음을 실행한다

MyDbContext db = new MyDbContext();
var emps = db.Employees.Where(x => x.Id > 1);
foreach(var emp in emps)
{
    Console.WriteLine(emp.Id + "," + emp.Name);
}

 

1. Potato 컴포넌트 만들기(별도로 또는 App.js안에)

1) src 폴더 밑에 Potato.js파일 만들기

2) Potato.js파일을 다음과 같이 작성

//jsx(HTML + javascript)를 이해하기 위한 import
import React from 'react'

//컴포넌트는 대문자로 작성해야 함
function Potato(){
    //이것은 html이 아니고 jsx이다
    return <h3>I love potato</h3>;
}

//이놈을 추가해야 함
export default Potato;

 

3) 생성한 컴포넌트는 App 컴포넌트 안에 넣어야 한다

변경전 변경후
import React from "react";

function App() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

export default App;
import React from "react";
import Potato from "./Potato";

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Potato/>
    </div>
  );
}

export default App;

 

4) 별도의 파일을 만들지 않고 App.js 파일 안에 바로 만들 수 있다

import React from "react";

function Potato(){
  return <h1>I like potato</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Potato/>
    </div>
  );
}

export default App;

 

 

2. props 개념 : 컴포넌트에서 컴포넌트로 전달하는 데이터

import React from "react";

//fav항목을 출력함
function Food(props)
{
  //console.log(props);
  return <h1>I like {props.fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <!-- fav, something, papapapa 를 넘겨줌 -->
      <Food fav="kimchi" something={true} papapapa={['hello',1,2,3,4,true]} />
    </div>
  );
}

export default App;

 

* 다음처럼 사용도 가능하다.

import React from "react";

function Food({fav})
{
  //console.log(props);
  return <h1>I like {fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food fav="kimchi" />
      <Food fav="ramen" />
      <Food fav="samgiopsal" />
      <Food fav="chukumi" />
    </div>
  );
}

export default App;

2. map함수를 이용하여 배열의 반복처리하기

import React from "react";

function Food({name})
{
  //console.log(props);
  return <h1>I like {name}</h1>;
}

const foodILike = [
  {
    name : 'Kimchi',
    image : 'https://www.aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg'
  },
  {
    name : 'Samgyeopsal',
    image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.joongang.co.kr%2Farticle%2F21312352&psig=AOvVaw3Bz7tRPTThOyPi56cIMpua&ust=1683356757357000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCOjUzN_O3f4CFQAAAAAdAAAAABAE'
  },
  {
    name : 'Bibimbap',
    image : 'https://t3.ftcdn.net/jpg/01/36/53/36/360_F_136533641_FDSXM9W8HovI4OWy8w1h28qEnyloF4LL.jpg'
  },
  {
    name : 'Doncasu',
    image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fent.sbs.co.kr%2Fnews%2Farticle.do%3Farticle_id%3DE10004919274&psig=AOvVaw08cML932GYRJeeAFA4EQxD&ust=1683356874016000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCPC2uJfP3f4CFQAAAAAdAAAAABAE'
  },
  {
    name : 'Kimbap',
    image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fstock.adobe.com%2Fkr%2Fsearch%3Fk%3D%25EA%25B9%2580%25EB%25B0%25A5&psig=AOvVaw2eH7dvRcJuRRRf4bQSS9Aa&ust=1683356891119000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCIjet6DP3f4CFQAAAAAdAAAAABAE'
  }
];

function App() {
  return (
    <div>
      {foodILike.map(dish => (<Food name={dish.name} />))}
    </div>
  );
}

export default App;

* 이미지까지 나오게 하려면

 

import React from "react";

function Food({name, picture})
{
  //console.log(props);
  return (
    <div>
      <h2>I like {name}</h2>
      <img src={picture} />
    </div>
  );
}

const foodILike = [
  {
    name : 'Kimchi',
    image : 'https://www.aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg'
  },
  {
    name : 'Samgyeopsal',
    image : 'https://mblogthumb-phinf.pstatic.net/MjAxODAxMTFfMjQz/MDAxNTE1NjY0NTUwMTQ2.WIRsiJ0-fogoxvHZpgnnR3jWZqnTO9BfgnjIkd5iAPIg.toj9m8hOTjZfenFhxc0KlgQyzbcTOhccR3y5ft9YwVUg.PNG.sungjin972/1.png?type=w800'
  },
  {
    name : 'Bibimbap',
    image : 'https://t3.ftcdn.net/jpg/01/36/53/36/360_F_136533641_FDSXM9W8HovI4OWy8w1h28qEnyloF4LL.jpg'
  },
  {
    name : 'Doncasu',
    image : 'https://media.istockphoto.com/id/1134158942/ko/%EC%82%AC%EC%A7%84/%EB%8F%BC%EC%A7%80%EA%B3%A0%EA%B8%B0-%EB%8F%88%EA%B0%80%EC%8A%A4.jpg?s=612x612&w=is&k=20&c=67QpYveG7XxF3qhduJbp7pJA96fCK8d217xBeTXz5V4='
  },
  {
    name : 'Kimbap',
    image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fstock.adobe.com%2Fkr%2Fsearch%3Fk%3D%25EA%25B9%2580%25EB%25B0%25A5&psig=AOvVaw2eH7dvRcJuRRRf4bQSS9Aa&ust=1683356891119000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCIjet6DP3f4CFQAAAAAdAAAAABAE'
  }
];

function App() {
  return (
    <div>
      {foodILike.map(dish => (<Food name={dish.name} picture={dish.image} />))}
    </div>
  );
}

export default App;

 

 

 

 

 

* map안의 임시 함수를 따로 뺄수도 있다

import React from "react";

function Food({name, picture})
{
  //console.log(props);
  return (
    <div>
      <h2>I like {name}</h2>
      <img src={picture} />
    </div>
  );
}

const foodILike = [
  {
    name : 'Kimchi',
    image : 'https://www.aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg'
  },
  {
    name : 'Samgyeopsal',
    image : 'https://mblogthumb-phinf.pstatic.net/MjAxODAxMTFfMjQz/MDAxNTE1NjY0NTUwMTQ2.WIRsiJ0-fogoxvHZpgnnR3jWZqnTO9BfgnjIkd5iAPIg.toj9m8hOTjZfenFhxc0KlgQyzbcTOhccR3y5ft9YwVUg.PNG.sungjin972/1.png?type=w800'
  },
  {
    name : 'Bibimbap',
    image : 'https://t3.ftcdn.net/jpg/01/36/53/36/360_F_136533641_FDSXM9W8HovI4OWy8w1h28qEnyloF4LL.jpg'
  },
  {
    name : 'Doncasu',
    image : 'https://media.istockphoto.com/id/1134158942/ko/%EC%82%AC%EC%A7%84/%EB%8F%BC%EC%A7%80%EA%B3%A0%EA%B8%B0-%EB%8F%88%EA%B0%80%EC%8A%A4.jpg?s=612x612&w=is&k=20&c=67QpYveG7XxF3qhduJbp7pJA96fCK8d217xBeTXz5V4='
  },
  {
    name : 'Kimbap',
    image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fstock.adobe.com%2Fkr%2Fsearch%3Fk%3D%25EA%25B9%2580%25EB%25B0%25A5&psig=AOvVaw2eH7dvRcJuRRRf4bQSS9Aa&ust=1683356891119000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCIjet6DP3f4CFQAAAAAdAAAAABAE'
  }
];

function renderFood(dish){
  return <Food name={dish.name} picture={dish.image}/>;
}

function App() {
  return (
    <div>
      {foodILike.map(renderFood)}
    </div>
  );
}

export default App;

 

* 그런데, 데이터에는 key값이 있어야 하고, img 태그에 alt 속성을 넣어서 경고를 없애자

import React from "react";

function Food({name, picture})
{
  //console.log(props);
  return (
    <div>
      <h2>I like {name}</h2>
      <img src={picture} alt={name} />
    </div>
  );
}

const foodILike = [
  {
    id : 1,
    name : 'Kimchi',
    image : 'https://www.aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg'
  },
  {
    id : 2,
    name : 'Samgyeopsal',
    image : 'https://mblogthumb-phinf.pstatic.net/MjAxODAxMTFfMjQz/MDAxNTE1NjY0NTUwMTQ2.WIRsiJ0-fogoxvHZpgnnR3jWZqnTO9BfgnjIkd5iAPIg.toj9m8hOTjZfenFhxc0KlgQyzbcTOhccR3y5ft9YwVUg.PNG.sungjin972/1.png?type=w800'
  },
  {
    id : 3,
    name : 'Bibimbap',
    image : 'https://t3.ftcdn.net/jpg/01/36/53/36/360_F_136533641_FDSXM9W8HovI4OWy8w1h28qEnyloF4LL.jpg'
  },
  {
    id : 4,
    name : 'Doncasu',
    image : 'https://media.istockphoto.com/id/1134158942/ko/%EC%82%AC%EC%A7%84/%EB%8F%BC%EC%A7%80%EA%B3%A0%EA%B8%B0-%EB%8F%88%EA%B0%80%EC%8A%A4.jpg?s=612x612&w=is&k=20&c=67QpYveG7XxF3qhduJbp7pJA96fCK8d217xBeTXz5V4='
  },
  {
    id : 5,
    name : 'Kimbap',
    image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fstock.adobe.com%2Fkr%2Fsearch%3Fk%3D%25EA%25B9%2580%25EB%25B0%25A5&psig=AOvVaw2eH7dvRcJuRRRf4bQSS9Aa&ust=1683356891119000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCIjet6DP3f4CFQAAAAAdAAAAABAE'
  }
];

function renderFood(dish){
  return <Food key={dish.id} name={dish.name} picture={dish.image}/>;
}

function App() {
  return (
    <div>
      {foodILike.map(renderFood)}
    </div>
  );
}

export default App;

 

 

 

 

 

 

 

1. 리액트 앱 만들기

> npx create-react-app movie_app_2023

* 생성이 안되고 에러가 나서. 시키는대로 해봤다

* 그리고는 다시 생성하니 생성이 되는듯

2. VS Code로 방금생성한 파일 열기(D:\Study\React\movie_app_2023)

1) README.md 파일을 다음과 같이 수정

#Movie App 2023

React JS Fundamentals Course 2023

2) package.json파일 수정

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

  [변경전]
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },

     [변경후]

3. 실행

1) 콘솔을 생성된 폴더로 이동해서 npm start 명령을 실행한다

2) 3000번 포트를 쓰고 있다고 다른 포트로 실행하겠냐고 물어본다

실행이 성공했다고 표시되고, 아래의 창이 나타난다

4. git 저장소 초기화

5. github 사이트의 저장소 만들기

 

 

생성하고 나면 소스 업로드는 설명을 따르면 된다

echo "# movie_app_2023" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/hdongle/movie_app_2023.git
git push -u origin main

* github에 올라감

6. 파일 삭제(선택된 파일 삭제)

7. index.js 파일 수정

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);


[변경전] [변경후]

 

8. App.js 파일 수정

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
import React from "react";

function App() {
  return (
    <div className="App"/>
  );
}

export default App;

 

9. npm start로 시작하면 아무것도 없는 브라우저가 뜬다

 

10. App.js를 다음과 같이 수정하면 Hello!!! 문구가 나타난다.

[변경전] [변경후]
import React from "react";

function App() {
  return (
    <div className="App"/>
  );
}

export default App;
import React from "react";

function App() {
  return <div>Hello!!!!</div>;
}

export default App;

 

1. Node.js 설치

  1) 이미 설치되어 있으므로 생략

)* 참고)Node.js설치하면 노드패키지매니저(npm)도 같이 설치된다고 함.

 

2) npx는 1회성으로 최신버전의 노드 패키지를 내려받아 설치시켜주는 노드 패키지라고 함

그런데 나는 이미 있다고 하는듯

 

2. VSCode 설치 : 이미 설치되어 있으므로 생략

3. git 설치하기 : 이미 설치되어 있으므로 생략

 

4. 구글 크롬의 웹스토어에 React Developer Tools를 설치

설치하고 나서 사이트 접속시 React를 사용한 사이트이면 아이콘이 활성화됨

 

5. 무엇을 만들것인가?

* nomadcoders.github.io/movie_app_2019 사이트와 같이 만들어본다고 함

  처음 페이지 로딩시 로딩 메세지만 나오기도 함

Home화면
About 화면
로딩 화면
이미지 / 제목 / 내용 / 그림자 테두리 등

 

1. 2개 이상의 검색 : and / or

 

2. 사이트나 특정 소셜미디어에서 검색 : '@'기호

더보기
딥러닝을 facebook에서 검색

3. 가격 검색 : $ + 숫자

4. 해시태그 검석 : # + 단어

5. 단어제외 검색 : 단어 + [공백]-제외단어

6. 정확히 일치 : 쌍따옴표안에 단어("단어")

7. 숫자범위 내에서 검색 : 숫자..숫자 

8. 특정사이트에서 검색 : 단어 [공백] site:사이트

9. 파일종류 검색 : 검색어 filetype:파일종류

10. 페이지 제목에서 검색 : intitle:단어

11. 본문에서 특정한 키워드 검색 : intext:단어

 

 

+ Recent posts