본문 바로가기

분류 전체보기

 (894)
인프런 - MERN 스택으로 만드는 지도 서비스 (+TypeScript) (2) 6. Frontend - 윈포윈도우 생성하기 - 현재 위치를 받고 이를 지도 위에 마커를 통해 표시하는 방법 ㅎㅎ 또날라감 - 인포윈도우 생성 InfoWindow | 네이버 지도 API v3 (navermaps.github.io) NAVER Maps API v3 NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다. navermaps.github.io InfoWindow/ index.tsx import { useEffect, useState } from "react"; import { Info } from "../../../types/info"; import "./infoWindow.css"; interface InfoWindowProps { ..
인프런 - MERN 스택으로 만드는 지도 서비스 (+TypeScript) (1) 1. 프로젝트 소개 - 네이버 맵 API를 통해 지도를 띄우는 기능 - 몽고 db에 저장된 위치 데이터로 마커와 인포 윈도우로 해당 데이터를 표시하는 기능 - 카카오 맵 API를 통해서 키워드 검색 결과를 조회하는 기능 - 저장을 누르면 해당 위치 데이터를 몽고 db에 저장하는 기능 - 중복된 데이터를 처리하는 방법 2. react - router 설정 AppRouter.tsx import { BrowserRouter,Routes, Route } from 'react-router-dom'; import Upload from './pages/Upload'; import Home from './pages/Home'; const AppRouter = () => { return ( ); }; export def..
[리액트를 다루는 기술] 10장 일정 관리 웹 애플리케이션 만들기 1. UI 구성하기 TodoTemplate -화면을 가운데에 정렬시켜 주며, 엡 타이틀(일정 관리)을 보여줌 - children으로 내부 JSX를 props로 받아와서 렌더링해 줌 TodoInsert - 새로운 항목을 입력하고 추가할 수 있는 컴포넌트 - state를 통해 인풋의 상태를 관리 TodoListItem - 각 할일 항목에 대한 정보를 보여 주는 컴포넌트 - todo 객체를 props로 받아와서 상태에 따라 다른 스타일의 UI를 보여줌 TodoList - todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러개의 TodoListItem 컴포넌트로 변환하여 보여 줌 2.1 TodoTemplate 만들기 TodoTemplate.js import React from..
[알고리즘] ch 7. 그래프(4) - 최소 신장 트리( 크루스칼 알고리즘) 7.5.2 크루스칼 알고리즘 크루스칼 알고리즘(Kruskal's Algorithm) - 그래프 내 모든 간선의 가중치 정보를 사전에 파악하고 이 정보를 토대로 최소 신장 트리를 구축 - 과정 1) 그래프 내의 모든 간선을 가중치의 오름차순으로 정렬하여 목록을 만듬 2) 단계 1에서 만든 간선의 목록을 차례대로 순회하면서 간선을 최소 신장 트리에 추가. 단, 이때 추가된 간선으로 인해 최소 신장 트리 내에 사이클이 형성되면 안됨 - 사이클 탐지 방법으로 분리 집합 이용 - 각 정점별로 각각의 분리 집합을 만들고, 간선으로 연결된 정점들에 대해서는 합집합을 수행 - 이때 간선으로 연결할 두 정점이 같은 집합에 속해 있다면 이 연결은 사이클을 이루게 됨 ex) - 정점 사이에 있는 모든 간선을 가중치 오름차순..
[알고리즘] ch 7. 그래프 (3) - 최소 신장 트리(프림 알고리즘) 7.5 최소 신장 트리  - 그래프는 정점의 집합과 간선의 집합으로 이루어진 자료구조 - 간선은 정점과 정점의 인접 관계를 설명하는 요소  신장 트리 (Spanning Tree) - 그래프의 모든 정점을 연결하는 트리  - 그래프의 하위 개념  최소 신장 트리 (Maximum Spanning Tree) - 최소 가중치 신장 트리 - 여러 간선 중 가중치의 합이 최소가 되는 간선만 남긴 신장 트리 - ex) 최소한의 비용으로 모든 도시를 연결하는 도로를 건설할 방법을 찾아라  7.5.1 프림 알고리즘  프림 알고리즘 (Prim's Algorithm) 과정  1) 그래프와 최소 신장 트리를 준비 2) 그래프에서 임의의 정점을 시작 정점으로 선택하여 최소 신장 트리의 ..
[리액트를 다루는 기술] 8장 Hooks 1. useState - 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌 - useState 함수의 파라미터에는 상태의 기본값을 넣어 줌 - useState는 배열을 반환하는데 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수 counter.js import { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value+1)}>+1 setValue(value-1)}>-1 ) } export default Counter; 1) useState를 여러 번 사용하기 - 컴포넌트에서 관리해야 할 상태가 여..
[리액트를 다루는 기술] 7장 컴포넌트의 라이프사이클 메서드 1. 라이프사이클 메서드의 이해 - 클래스형 컴포넌트에만 사용 가능 - Will 접두사 : 어떤 작업을 작동하기 전에 실행되는 메서드 - Did 접두사 : 어떤 작업을 작동한 후에 실행되는 메서드 - 라이프사이클은 마운트,업데이트,언마운트 카테고리로 나눔 1) 마운트 (mount) - DOM이 생성되고 웹브라우저상에 나타나는 것 - Constructor - 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 - getDerivedStateFromProps - props에 있는 값을 state에 넣을 때 사용하는 메서드 - reder - 우리가 준비한 UI를 렌더랑하는 메서드 - componentDid - 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 2) 업데이트 (update) - 업데이..
[리액트를 다루는 기술] 6장 컴포넌트 반복 1. 자바스크립트 배열의 map() 함수 - map() 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있음 - map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성 1) 문법 arr.map(callback, [thisArg]) - 파라미터 callback : 새로운 배열의 요소를 생성하는 함수 - currentValue: 현재 처리하고 있는 요소 - index: 현재 처리하고 있는 요소의 index 값 - array : 현재 처리하고 있는 원본 배열 thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 ex) - 기존 배열에 있는 값들을 제곱하여 새로운 배열 생성 const numbers = [1,..

티스토리툴바