공부하는 블로그

React - Node.js 리액트를 클라이언트 사이드로, Node.js를 서버 사이드로 연동하는 방법에 대해 알아보자. 연동하는 방법은 여러가지가 존재하지만 이 포스팅에서는 'http-proxy-middleware'라는 미들 웨어를 이용하여 간편하게 프록시(Proxy)를 설정하는 방법을 이용한다. * Proxy : 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것. 클라이언트가 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해준다. 리액트 애플리케이션(localhost:3000)에서 프록시를 통해 구축된 Node.js 서버 사이드(localhost:3001/api)로 요청을 보내 데이터를 받아오는 방식이다. 따라서 두 개의 포트를 각각 클라이언트 사이드로, 서버 사이드로 할당하여 동시에..

11729번: 하노이 탑 이동 순서 세 개의 장대가 있고 첫 번째 장대에는 반경이 서로 다른 n개의 원판이 쌓여 있다. 각 원판은 반경이 큰 순서대로 쌓여있다. 이제 수도승들이 다음 규칙에 따라 첫 번째 장대에서 세 번째 장대로 옮기려 한다. 한 번에 한 개의 원판만을 다른 탑으로 옮길 수 있다. 쌓아 놓은 원판은 항상 위의 것이 아래의 것보다 작아야 한다. 이 작업을 수행하는데 필요한 이동 순서를 출력하는 프로그램을 작성하라. 단, 이동 횟수는 최소가 되어야 한다. 아래 그림은 원판이 5 www.acmicpc.net 세 개의 장대의 첫 번재 장대에는 반경이 서로 다른 n개의 원판이 쌓여있고 각 원판은 반경이 큰 순서대로 쌓여있다. 한번에 한 개의 원판만을 옮기며 어느 장대든 반경이 큰 순서대로 쌓여있어..

10870번: 피보나치 수 5 피보나치 수는 0과 1로 시작한다. 0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1이다. 그 다음 2번째 부터는 바로 앞 두 피보나치 수의 합이 된다. 이를 식으로 써보면 Fn = Fn-1 + Fn-2 (n>=2)가 된다. n=17일때 까지 피보나치 수를 써보면 다음과 같다. 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597 n이 주어졌을 때, n번째 피보나치 수를 구하는 www.acmicpc.net 재귀함수를 이용하여 n번째 피보나치 수를 구하는 문제이다. import java.util.Scanner; public class Main { public static void main(Strin..

Props & State Props와 State는 리액트의 컴포넌트에서 다루는 데이터로 둘의 차이는 다음과 같다. props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값으로 자식 컴포넌트에서는 props를 받아오기만 하고 받아온 props를 직접 수정할 수는 없다. 그러면 컴포넌트 내부에서 데이터값을 변경해야하면 어떻게 해야할까? 그때 사용되는 것이 state로 state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있는 값이다. Props 컴포넌트에서 변하지 않는 데이터가 필요할 때 사용되며 부모 컴포넌트에서 값을 전달할 때에는 자식 컴포넌트 사용 시 안에 = 'value'를 넣어 값을 설정한다. 전달된 값을 자식 컴포넌트에서 사용할 때에는 render() 메소드 내부에서 { this...

Component 컴포넌트(Component)는 데이터를 입력받아 DOM Node를 출력하는 함수라 할 수 있다. 이 때, 입력받는 데이터로는 Props나 State가 있다. 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 따라서 앱을 리액트로 만든다는 것은 작고 단단한 컴포넌트들을 만들고 이 컴포넌트들을 유기적으로 연결한다는 것을 뜻한다. Lifecycle Event 리액트의 컴포넌트는 생성(Mounting) → 업데이트(Updating) → 제거(Unmounting)의 라이프사이클(Lifecycle)을 가진다. 이러한 생명주기 안에서는 특정 시점에 자동으로 호출되는 메소드들이 있는데 이를 라이프사이클 이벤트라고 한다. ·constructor..

React React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org React는 페이스북에서 개발한 UI(User Interface)를 위한 자바스크립트 라이브러리로 자바스크립트의 확장 문법인 JSX를 사용한다. React의 가장 큰 장점은 DOM을 복사해서 Virtual DOM을 만들어 변화가 있을 경우 페이지 전체를 렌더링 하지 않고 변화한 부분만 실제 DOM에 적용하는 방식을 사용하여 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해준다. 따라서 싱글페이지나 모바일 애플리게이션의 개발 토대로 많이 사용된다. * DOM(Document O..

1929번: 소수 구하기 첫째 줄에 자연수 M과 N이 빈 칸을 사이에 두고 주어진다. (1 ≤ M ≤ N ≤ 1,000,000) www.acmicpc.net 에라토스테네스의 체의 원리를 이용하여 소수를 구하는 문제이다. 이전에 풀었던 방식으로 풀면 시간초과가 난다.. import java.util.ArrayList; import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner sc = new Scanner(System.in); int m = sc.nextInt(); int n = sc.nextInt(); ArrayList primeList = new ArrayList(); primeList.add..

1978번: 소수 찾기 첫 줄에 수의 개수 N이 주어진다. N은 100이하이다. 다음으로 N개의 수가 주어지는데 수는 1,000 이하의 자연수이다. www.acmicpc.net 입력 받은 수가 소수인지 아닌지 판별하는 문제이다. 소수란 1보다 큰 정수 중 1과 자기자신으로만 나누어 떨어지는 수이다. (1은 소수가 아님) import java.util.Scanner; public class Main { static boolean isPrime(int num) { if(num == 1) return false; int w = 2; while(w < num) { if(num % w == 0) { return false; } w++; } return true; } public static void main(St..