Home

2021
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;}

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 - 시작하기 반환 타입List<Member> findListByUsername(String username); // 반환 타입 : 컬랙션Member findMemberByUsername(String username); // 반환 타입 : 단건Optional<Member> findOptionalByUsername(String useranme); // 반환 티입 : 단건 Optional public interface MemberRepository extends JpaRepository<Member, Long> { List<Member> findByUsernameAndAgeGreaterThan(String username, int age); @Query("select m from Member m where m.username = :username and m.age = :age") List<Member> findUser(@Param("username") String username, @Param("age") int age); // 값으로 조회하기 @Query("select m.username from Member m") List<String> findUsernameList(); // DTO로 조회하기 @Query("select new com.example.datajpa.dto.MemberDto( m.id, m.username, t.name)from Member m join m.team t") List<MemberDto> findMemberByDto(); @Query("select m from Member m where m.username in :names") List<Member> findByNames(@Param("names") Collection<String> names); List<Member> findListByUsername(String username); // 반환 타입 : 컬랙션 Member findMemberByUsername(String username); // 반환 타입 : 단건 Optional<Member> findOptionalByUsername(String useranme); // 반환 티입 : 단건 Optional} @Testpublic void returnType(){ Member member1 = new Member("AAA", 10); Member member2 = new Member("BBB", 20); memberRepository.save(member1); memberRepository.save(member2); List<Member> members = memberRepository.findListByUsername("AAA"); Member member = memberRepository.findMemberByUsername("AAA"); Optional<Member> optional = memberRepository.findOptionalByUsername("AAA"); assertThat(members).isInstanceOf(List.class); assertThat(member).isInstanceOf(Member.class); assertThat(optional).isInstanceOf(Optional.class);}

0
Develop프로그래머스

프로그래머스 - 순위 검색 (JAVA)

https://programmers.co.kr/learn/courses/30/lessons/72412 문제 풀이이 문제는 그냥 문자열대 문자열로 부딪히게 되면 시간 초과가 날 수 밖에 없는 문제다. 선형적으로 풀면 info 배열의 최대 크기는 5만, query 배열의 최대 크기는 10만 이므로 최대 50억 연산을 하게 되므로 효율성 측면에서 문제가 생긴다.결국 이 문제는 어떤 방법을 이용해 검색할 것인가가 가장 큰 관건이 된다. 선형적인 탐색을 하는 방법이 아닌 O(logn)의 시간 복잡도를 갖는 자료구조 혹은 탐색 기법을 이용하는 방법으로 문제를 접근해야 한다. 동시에 만들 수 있는 문장의 경우의 수를 고려해줘야 한다. 복합적인 문제라 쉽지 않다. 처음에 각 문자열내 문자들을 파싱해서 map에다가 저장을 해야 하나?…. 그러면 탐색을 어떻게 해야하지?… 하면서 문제 접근을 못하다가 다른 분 풀이를 살짝 참고 했는데 문자열 자체를 map의 key값으로 넣는 것을 보고 힌트를 얻어 문제를 접근할 수 있었다. info 내 문자열을 정재해 띄어쓰기는 문장을 만들어준다. key로 정재된 문장을 value로는 같은 key를 갖는 문장에 대한 값들을 보관하기 위해 List형태로 넣어준다. info 내 문장들이 map으로 다 들어갔으면 Binary Search를 사용하기 위해 오름 차순으로 정렬 해준다. query 내 문자열을 정재해 준다. info에서 구분자는 띄어쓰기 였지만 query에서 구분자는 and와 띄어쓰기다. ‘-‘를 만나게 되면 만들 수 있는 문장의 모든 경우의 수를 만들어준다. 정재된 문자를 갖고 info에 값이 있는지 확인한다. 값이 있으면 List에서 query에서 요구하는 값 이상이 되는 사람 수를 찾는다.(Lower Bound) 쿼리가 여러개인 경우는 각각의 경우들을 모두 찾아서 더해준다. 찾은 결과를 answer에 넣어 반환한다. info 내 문자열을 정재하기public void infoToMap(String[] info) { for (int i = 0; i < info.length; i++) { String[] words = info[i].split(" "); StringBuilder sb = new StringBuilder(); int score = Integer.parseInt(words[words.length - 1]); for (int j = 0; j < words.length - 1; j++) { sb.append(words[j]); } String key = sb.toString(); infos.computeIfAbsent(key, k -> new ArrayList<>()).add(score); }} map 내 List값들을 오름차순으로 정렬하기infos.forEach((key, value) -> { value.sort(null);});