Home

2021
0
Frontend블로그

리엑트 블로그 만들기 4 - Navbar 작성하기

리엑트 블로그 만들기 15 - Post Card List 만들기 2 리엑트 블로그 만들기 14 - Post Card List 만들기 리엑트 블로그 만들기 13 - 라우트 리엑트 블로그 만들기 12 - Loading 만들기 리엑트 블로그 만들기 11 - 회원가입 리덕스 작업 리엑트 블로그 만들기 10 - 회원가입 2 리엑트 블로그 만들기 9 - 회원가입 리엑트 블로그 만들기 8 - 로그인 & 로그아웃 리엑트 블로그 만들기 7 - Login Modal 만들기 2 리엑트 블로그 만들기 6 - Login Modal 만들기 1 리엑트 블로그 만들기 5 - 리덕스 세팅하기 리엑트 블로그 만들기 4 - Navbar 작성하기 리엑트 블로그 만들기 3 - Header 작성하기 리엑트 블로그 만들기 2 - Footer 작성하기 리엑트 블로그 만들기 1 - 초기 setting 하기 리엑트 블로그 만들기 4 - Navbar 작성하기import React from "react";import { Link } from "react-router-dom";import { Collapse, Container, Nav, Navbar, NavbarToggler } from "reactstrap";const AppNavbar = () => { return ( <div> <Navbar color="dark" dark expand="lg" className="sticky-top"> <Container> <Link to="/" className="text-white text-decoration-none"> Victor의 블로그 </Link> <NavbarToggler /> <Collapse isOpen={true} navbar> <Nav className="ml-auto d-flex justify-content-around" navbar> {true ? ( <h1 className="text-white">authLink</h1> ) : ( <h1 className="text-white">gestLink</h1> )} </Nav> </Collapse> </Container> </Navbar> </div> );};export default AppNavbar; import React, { Fragment } from "react";import Header from "../components/Header";import Footer from "../components/Footer";import AppNavbar from "../components/AppNavbar";const MyRouter = () => ( <Fragment> <AppNavbar /> <Header> <h1>Hello Body</h1> </Header> <Footer></Footer> </Fragment>);export default MyRouter;

0
Frontend블로그

리엑트 블로그 만들기 3 - Header 작성하기

리엑트 블로그 만들기 15 - Post Card List 만들기 2 리엑트 블로그 만들기 14 - Post Card List 만들기 리엑트 블로그 만들기 13 - 라우트 리엑트 블로그 만들기 12 - Loading 만들기 리엑트 블로그 만들기 11 - 회원가입 리덕스 작업 리엑트 블로그 만들기 10 - 회원가입 2 리엑트 블로그 만들기 9 - 회원가입 리엑트 블로그 만들기 8 - 로그인 & 로그아웃 리엑트 블로그 만들기 7 - Login Modal 만들기 2 리엑트 블로그 만들기 6 - Login Modal 만들기 1 리엑트 블로그 만들기 5 - 리덕스 세팅하기 리엑트 블로그 만들기 4 - Navbar 작성하기 리엑트 블로그 만들기 3 - Header 작성하기 리엑트 블로그 만들기 2 - Footer 작성하기 리엑트 블로그 만들기 1 - 초기 setting 하기 리엑트 블로그 만들기 3 - Header 작성하기import React from "react";import { Row, Col } from "reactstrap";const Header = () => { return ( <div id="page-header"> <Row> <Col md="6" sm="auto" className="text-center m-auto"> <h1>Read Our Blog</h1> <p>Victor의 사이드 블로그 입니다.</p> </Col> </Row> </div> );};export default Header; #main-footer{ background: #343a40; color:#fff;}#page-header{ height:200px; background: url(./img/free-image.jpeg); background-position: 54% 94%; background-attachment: fixed; color: #fff; border-bottom: 1px #eee solid; padding-top: 60px;}

0
Frontend블로그

리엑트 블로그 만들기 2 - Footer 작성하기

리엑트 블로그 만들기 15 - Post Card List 만들기 2 리엑트 블로그 만들기 14 - Post Card List 만들기 리엑트 블로그 만들기 13 - 라우트 리엑트 블로그 만들기 12 - Loading 만들기 리엑트 블로그 만들기 11 - 회원가입 리덕스 작업 리엑트 블로그 만들기 10 - 회원가입 2 리엑트 블로그 만들기 9 - 회원가입 리엑트 블로그 만들기 8 - 로그인 & 로그아웃 리엑트 블로그 만들기 7 - Login Modal 만들기 2 리엑트 블로그 만들기 6 - Login Modal 만들기 1 리엑트 블로그 만들기 5 - 리덕스 세팅하기 리엑트 블로그 만들기 4 - Navbar 작성하기 리엑트 블로그 만들기 3 - Header 작성하기 리엑트 블로그 만들기 2 - Footer 작성하기 리엑트 블로그 만들기 1 - 초기 setting 하기 리엑트 블로그 만들기 2 - Footer 작성하기import React from "react";import { Row, Col } from "reactstrap";const Footer = () => { const thisYear = () => { const year = new Date().getFullYear(); return year; }; return ( <div id="main-footer" className="text-center m-center p-2"> <Row> <Col> <p> Copyright Copy <span>{thisYear()}</span> </p> </Col> </Row> </div> );};export default Footer; 패키지 설치 npm install node-sass sass-loaderyarn add node-sass sass-loader #main-footer{ background: #343a40; color:#fff;} import React from "react"import { Provider } from 'react-redux'import { ConnectedRouter } from 'connected-react-router'import store, { history } from "./store"import MyRouter from './routes/Router'import "bootstrap/dist/css/bootstrap.min.css";import "./assets/custom.scss"const App = () => { return ( <Provider store={store}> <ConnectedRouter history={history}> <MyRouter /> </ConnectedRouter> </Provider> );}export default App;

0
Frontend블로그

리엑트 블로그 만들기 1 - 초기 setting 하기

리엑트 블로그 만들기 15 - Post Card List 만들기 2 리엑트 블로그 만들기 14 - Post Card List 만들기 리엑트 블로그 만들기 13 - 라우트 리엑트 블로그 만들기 12 - Loading 만들기 리엑트 블로그 만들기 11 - 회원가입 리덕스 작업 리엑트 블로그 만들기 10 - 회원가입 2 리엑트 블로그 만들기 9 - 회원가입 리엑트 블로그 만들기 8 - 로그인 & 로그아웃 리엑트 블로그 만들기 7 - Login Modal 만들기 2 리엑트 블로그 만들기 6 - Login Modal 만들기 1 리엑트 블로그 만들기 5 - 리덕스 세팅하기 리엑트 블로그 만들기 4 - Navbar 작성하기 리엑트 블로그 만들기 3 - Header 작성하기 리엑트 블로그 만들기 2 - Footer 작성하기 리엑트 블로그 만들기 1 - 초기 setting 하기 리엑트 블로그 만들기 1 - 초기 setting 하기yarn add axios redux react-redux redux-saga react-router-dom connected-react-router dotenv bootstrap reactstrap Root Reducer 생성/src/redux/reducers/index.js import { connectRouter } from 'connected-react-router';import { combineReducers } from "redux";// Root Reducer를 생성한다.const createRootReducer = (history) => combineReducers({ router: connectRouter(history),});export default createRootReducer; Root Saga 생성/src/redux/sagas/index.js import { all } from 'redux-saga/effects';// Root Saga를 생성한다.export default function* rootSaga() { yield all([]);}

0
Develop프로그래머스

프로그래머스 - 카드 짝 맞추기 (Cpp)

https://programmers.co.kr/learn/courses/30/lessons/72415 문제 풀이좌표를 이동할 때 고려해야 하는 상황이 2가지가 있다 첫 번째 상, 하, 좌, 우 한칸씩 이동하는 경우와 한번에 카드가 있는 곳이나 벽쪽으로 바로 이동하는 경우다.카드를 찾는 경우의 수를 만드는데 있어 고려해야 하는 사항이 2가지가 있다. 첫번째는 서로 다른 카드를 찾아가는 경우의 수와 같은 숫자를 찾는 순서를 정하는 경우의 수다.예를 들어 1 -> 2 -> 3 의 순서로 카드를 찾아간다고 하면 (1 -> 1 짝 찾는 순서) -> (2 -> 2 짝 찾는 순서) -> (3 -> 3 짝 찾는 순서) 를 고려해야 한다는 의미다. 경우의 수가 만들어지면 각 순서에 맞게 BFS를 이용해 최단거리를 구해주면 된다. 다만, 카드는 짝을 만다면 사라지므로 최단 거리를 찾을 때 board 에서 카드가 사라졌는지에 대한 여부도 고려하면서 이동해줘야 한다. 고려 사항 enter를 누르는 것도 count 1을 갖는다. 카드 뒤집는 모든 경우의 수를 계산해야 한다. 1, 2, 3 서로 다른 카드를 찾아가는 경우의 수를 찾는다. 각각의 순서를 고려 하므로 순열의 경우의 수를 갖는다. 1 -> 1, 2 -> 2, 3 -> 3 각각 짝을 만드는 방향이 단방향으로 정해진 것이 아니기 때문에 반대 방향에 대해서도 고려애 줘야 한다. 즉, 최대 경우의 수는 6! * 2 ^ 6 이된다. 이동할 때 카드가 사라졌는지 확인해야 한다. board 에서 각 카드의 위치 찾기int findCards(vector<vector<int>>& board) { int count = 0; for (int i = 0; i < 4; i++) { for (int j = 0; j < 4; j++) { int value = board[i][j]; if (value > 0) { cards[value].push_back({i, j}); count++; } } } return (count / 2);} 카드를 뒤집는 모든 경우의 수 찾기

0
SpringSpring Data JPA

Spring Data JPA - Auditing

목차 Spring Data JPA - 벌크성 수정 쿼리 Spring Data JPA - Convertor Spring Data JPA - Auditing Spring Data JPA - Paging Request Paramater Spring Data JPA - 페이징과 정렬 Post not found: spring/spring-data-jpa/07-spring-data-jpa Spring Data JPA - 반환 타입 Spring Data JPA - Query 파라미터 바인딩 Spring Data JPA - Query 를 이용한 조회 결과를 특정 값으로 반환하기 Spring Data JPA - JPQL (Java Persistence Query Lange) 사용하기 Spring Data JPA - 메소드 이름으로 쿼리 생성하기 Spring Data JPA - 시작하기 참고https://docs.spring.io/spring-data/jpa/docs/1.7.0.DATAJPA-580-SNAPSHOT/reference/html/auditing.html Spring Data JPA - Auditing(감사) 데이터가 언제 누구에 의해서 생성, 수정 됐는지 추적할 필요가 있는데Spring Data JPA 에서는 쉽게 Audit 를 할 수 있는 기능들을 제공한다. Spring Data JPA Auditing 사용하기EnableJpaAuditing 어노테이션을 이용해 프로젝트에 Auditing 기능을 사용할 수 있도록 설정한다. @SpringBootApplication@EnableJpaAuditingpublic class DataJpaApplication { public static void main(String[] args) { SpringApplication.run(DataJpaApplication.class, args); } // 데이터가 생성 및 수정될 때 생성한 사람과 수정한 사람 정보를 넣기 위한 Bean 을 만들어준다. @Bean public AuditorAware<String> auditorProvider(){ return () -> Optional.of(UUID.randomUUID().toString()); }}

0
SpringSpring Data JPA

Spring Data JPA - Paging Request Paramater

목차 Spring Data JPA - 벌크성 수정 쿼리 Spring Data JPA - Convertor Spring Data JPA - Auditing Spring Data JPA - Paging Request Paramater Spring Data JPA - 페이징과 정렬 Post not found: spring/spring-data-jpa/07-spring-data-jpa Spring Data JPA - 반환 타입 Spring Data JPA - Query 파라미터 바인딩 Spring Data JPA - Query 를 이용한 조회 결과를 특정 값으로 반환하기 Spring Data JPA - JPQL (Java Persistence Query Lange) 사용하기 Spring Data JPA - 메소드 이름으로 쿼리 생성하기 Spring Data JPA - 시작하기 참고https://docs.spring.io/spring-data/jpa/docs/1.7.0.DATAJPA-580-SNAPSHOT/reference/html/auditing.html Paging Request Paramater Page 와 Size 를 사용해 Paging 과 관련한 Request Parameter 요청을 보낼 수 있다. Page Paging 된 데이터의 Page 번호 Size Paging 할 데이터 크기 Default Size = 20 이다. @GetMapping("/members")public Page<Member> list(Pageable pageable) { Page<Member> page = memberRepository.findAll(pageable); return page;} Paramater 를 이용해 요청 보내기

0
SpringSpring Data JPA

Spring Data JPA - 페이징과 정렬

목차 Spring Data JPA - 벌크성 수정 쿼리 Spring Data JPA - Convertor Spring Data JPA - Auditing Spring Data JPA - Paging Request Paramater Spring Data JPA - 페이징과 정렬 Post not found: spring/spring-data-jpa/07-spring-data-jpa Spring Data JPA - 반환 타입 Spring Data JPA - Query 파라미터 바인딩 Spring Data JPA - Query 를 이용한 조회 결과를 특정 값으로 반환하기 Spring Data JPA - JPQL (Java Persistence Query Lange) 사용하기 Spring Data JPA - 메소드 이름으로 쿼리 생성하기 Spring Data JPA - 시작하기 Spring Data JPA - 페이징과 정렬 조회 쿼리에 Pageable 객체를 넣어 줌으로써 JPA 에서 제공하는 Paging 기능을 사용할 수 있다. 스프링에서는 Page 을 손쉽게 사용할 수 있도록 Pageable 인터페이스를 제공합니다. 페이징시 offset (시작지점) 부터 시작해 limit 만큼씩 잘라 Page Number 를 붙입니다. // Page 객체를 반환Page<Member> findPageByAge(int age, Pageable pageable);// Slice 객체를 반환Slice<Member> findSliceByAge(int age, Pageable pageable);// List 객체를 반환List<Member> findListByAge(int age, Pageable pageable); Paging 반환 값Paging 반환되는 객체로 Page, Slice, List 세가지 종류의 객체가 있습니다. 종류 설명 Page Count 쿼리 를 포함하는 페이징 Slice 내부적으로 Limit + 1 조회 List 별도의 작업 없이 결과만 반환

0
SpringSpring Data JPA

Spring Data JPA - JPQL 페이징과 정렬

목차 Spring Data JPA - 벌크성 수정 쿼리 Spring Data JPA - Convertor Spring Data JPA - Auditing Spring Data JPA - Paging Request Paramater Spring Data JPA - 페이징과 정렬 Spring Data JPA - JPQL 페이징과 정렬 Spring Data JPA - 반환 타입 Spring Data JPA - Query 파라미터 바인딩 Spring Data JPA - Query 를 이용한 조회 결과를 특정 값으로 반환하기 Spring Data JPA - JPQL (Java Persistence Query Lange) 사용하기 Spring Data JPA - 메소드 이름으로 쿼리 생성하기 Spring Data JPA - 시작하기 JPQL 페이징과 정렬public List<Member> findByPage(int age, int offset, int limit) { return em.createQuery("select m from Member m where m.age = :age order by m.username desc") .setParameter("age", age) .setFirstResult(offset) // Paging 시작 Index .setMaxResults(limit) .getResultList();}public long totalCount(int age){ return em.createQuery("select count(m) from Member m where m.age = :age", Long.class) .setParameter("age", age) .getSingleResult();} @Testpublic void paging(){ // given memberJpaRepository.save(new Member("member1", 10)); memberJpaRepository.save(new Member("member2", 10)); memberJpaRepository.save(new Member("member3", 10)); memberJpaRepository.save(new Member("member4", 10)); memberJpaRepository.save(new Member("member5", 10)); int age = 10; int offset = 0; int limit = 3; // when List<Member> members = memberJpaRepository.findByPage(age, offset, limit); long totalCount = memberJpaRepository.totalCount(age); // then assertThat(members.size()).isEqualTo(3); assertThat(totalCount).isEqualTo(5);}

0
Develop프로그래머스

프로그래머스 - 합승 택시 요금 (Cpp)

https://programmers.co.kr/learn/courses/30/lessons/72413 문제 풀이모든 간선의 weight가 음수가 아닌 값, 시작점 s에서 도착할 수 있는 거리의 최소 비용을 구하는 문제라 다익스트라를 이용해 문제를 해결할 수 있다. 시작점 s에서 시작해 x점까지 같이 이동하는 최소 비용 + x점에서 시작해 a점까지 이동하는 최소 비용 + x점에서 시작해 b점까지 이동하는 최소 비용 중에서 가장 값이 작은 값을 찾는 문제다.원리는 간단하지만 다익스트라에 대해 잘 알고 있어야 풀 수 있는 문제다. void dijkstra(int node) { for (int i = 1; i < 220; i++) { dist[node][i] = INF; } priority_queue<pair<int, int>> pq; pq.push(make_pair(0, node)); dist[node][node] = 0; while (!pq.empty()) { int nodeDist = -pq.top().first; int cntNode = pq.top().second; pq.pop(); if (dist[node][cntNode] != nodeDist) { continue; } for (pair<int, int> vertex : graph[cntNode]) { int nextWeight = nodeDist + vertex.second; int nextNode = vertex.first; if (nextWeight < dist[node][nextNode]) { dist[node][nextNode] = nextWeight; pq.push(make_pair(-nextWeight, nextNode)); } } }} 전체 소스 코드#include <bits/stdc++.h>using namespace std;const int INF = 987654321;long long dist[220][220];vector<vector<pair<int, int>>> graph;void dijkstra(int node) { for (int i = 1; i < 220; i++) { dist[node][i] = INF; } priority_queue<pair<int, int>> pq; pq.push(make_pair(0, node)); dist[node][node] = 0; while (!pq.empty()) { int nodeDist = -pq.top().first; int cntNode = pq.top().second; pq.pop(); if (dist[node][cntNode] != nodeDist) { continue; } for (pair<int, int> vertex : graph[cntNode]) { int nextWeight = nodeDist + vertex.second; int nextNode = vertex.first; if (nextWeight < dist[node][nextNode]) { dist[node][nextNode] = nextWeight; pq.push(make_pair(-nextWeight, nextNode)); } } }}int solution(int n, int s, int a, int b, vector<vector<int>> fares) { int answer = 0; graph = vector<vector<pair<int, int>>>(n + 1); for (vector<int> fare : fares) { int start = fare[0]; int end = fare[1]; int weight = fare[2]; graph[start].push_back(make_pair(end, weight)); graph[end].push_back(make_pair(start, weight)); } // dijkstra_start(s); for (int i = 1; i <= n; i++) { dijkstra(i); } long long minValue = INF; for (int i = 1; i <= n; i++) { if (minValue > dist[s][i] + dist[i][a] + dist[i][b]) { minValue = dist[s][i] + dist[i][a] + dist[i][b]; } } answer = minValue; return answer;}