June Dev Blog June's Dev World

분류 전체보기

• [React] - 16) package.json을 이용하여 패키지 정보 옮기기

  Coding/React.js 2020. 1. 19. 21:26

  안녕하세요, 리액트 포스팅이 많이 늦었습니다 ㅠ ㅠ 그동안 토익공부니 스터디니 이것저것 일이 많이 겹치는 동안에 리액트에 시간을 쓸 겨를이 없었습니다..(네다핑) 이제 리액트에서 매우매우 기초라고 될 부분은 라우팅 이전까지 모두 끝냈으니, props와 state 관리를 통하여 아주 간단한 웹 페이지 하나쯤 만드는 것은 가능할 것입니다. 물론 거기에 reactstrap 같은 라이브러리를 사용해준다면 금상첨화겠죠 ! 그런 뜻에서 이번 포스팅에서는 프로젝트의 패키지 정보를 다른 패키지로 옮기는 방법에 대해 알아보겠습니다 ! create-react-app으로 리액트를 설치하면 자동으로 경로에 package.json이 생성됩니다. 이 파일에 프로젝트의 패키지 정보가 저장됩니다. 이건 이전 포스팅에 사용했던 rea..

• [JavaScript] console 객체

  Coding/JavaScript 2020. 1. 19. 20:53

  console 객체는 전역 객체라고 불리며 코드의 어느 부분에서나 이용할 수 있습니다. 특히 전역 객체들이 그렇듯 프로그램을 만들면서 필요할 때마다 사용할 수 있으며, 당연히 프로그램을 만드는데 도움을 주는 기능을 합니다. console에서 사용하는 기능들은 다음과 같습니다. console 객체 console.log 로그 찍기 console.log('안녕하세요'); console.log('%s', __filename); console.log('%s', __dirname); __filename : 파일의 경로 __dirname : 상위 폴더의 경로 console.time 시간 기록 var result = 0; console.time('duration_sum'); for (var i = 1; i

• [java] BFS(너비 우선 탐색) 구현

  Coding/Algorithm 2020. 1. 14. 14:10

  import java.util.*; public class BFS { private int V; // 전 노드의 개수 private LinkedList adj[]; // 인접 리스트 /** 생성자 */ BFS(int v) { V = v; adj = new LinkedList[v]; // 그래프 생성을 위해 인접 리스트를 만들기 위하여 LinkedList 추 for (int i=0; i

• [Java] 퀵 정렬 구현

  Coding/Algorithm 2020. 1. 8. 13:54

  퀵 정렬을 자바로 구현하는 두 가지 방법 pivot을 중간에 놓았을 때 import java.util.Arrays; // 피봇을 중간에 놓고하는 코드 public class QuickSort { public void sort(int[] data, int l, int r) { int left = l; int right = r; int pivot = data[(l + r) / 2]; do { while (data[left] pivot) right--; if (left

• [Java] Stream을 이용한 재귀함수 구현

  Coding/Algorithm 2020. 1. 7. 14:53

  RecursiveFunction 1부터 n까지의 합을 구하는 함수 Stream을 이용하여 재귀함수를 보다 간단하게 표현 long RecursiveFunc(int num) { long result = LongStream.rangeClosed(1,5).reduce((long x, long y) -> x + y).getAsLong(); return result; }

• [Java] 선택 정렬 구현

  Coding/Algorithm 2020. 1. 2. 13:10

  package ch0; public class BinarySearch { public static void main(String[] args) { // 이진탐색을 수행할 배열 int[] arr = { 3, 19, 34, 50, 87 }; // 찾으려는 값 int target = 19; binarySearch(arr, target); } private static void binarySearch(int[] arr, int target) { int left = 0; int right = arr.length - 1; int mid; while (left

• [React] - 15) 리액트에서 배열을 처리하는 방법

  Coding/React.js 2019. 12. 26. 13:51

  안녕하세요 이번 포스팅에서는 리액트에서 배열을 처리하는 가장 기본적인 방법에 대해 알아보겠습니다. 리액트의 불변성을 유지해주어야 한다, 라는 특성 상 리액트에서 배열을 처리하는 방법은 다소 다릅니다. 함수형 컴포넌트로 만들었다고 할 때, 각 배열을 처리하는 법을 알아보았습니다. 새로운 데이터를 추가해 줄 때 기존 배열을 복사한 후 추가할 내용을 덧붙인다. setArrayData({ ...Arraydata, array: data.array.concat(info) }); ...ArrayData로 배열을 얕은 복사하여(자바스크립트의 전개 연산자 문법), Concat 메소드를 이용하여 배열에 데이터를 추가해 줍니다. 이 때에, 배열을 직접적으로 건드리는 것이 아닌(리액트의 불변성에 어긋) 복사하여 간접적으로 건..

• [React] - 14) reactstrap으로 프로젝트를 꾸며보기

  Coding/React.js 2019. 12. 24. 15:12

  웹 페이지를 꾸밀 때 대표적으로 부트스트랩을 많이 사용합니다. 리액트에서 부트스트랩을 적용시킬 때는 부트스트랩의 리액트 버전인 reactstrap을 사용합니다. 저 같은 경우 yarn의 create react-app으로 프로젝트를 생성하였다면, 다음과 같은 명령어로 reactstrap을 추가해 줍시다. $ yarn add bootstrap reactstrap reactstrap은 기본적으로 부트스트랩의 css파일을 가져다 사용하기 때문에 부트스트랩도 같이 설치해줍시다. 이제 src/index.js에 다음과 같은 코드를 추가해 주세요. import 'bootstrap/dist/css/bootstrap.css' 이제 App.js에서 reactstrap을 적용해 봅시다. reactstrap에서 사용할 수 있는..