목록분류 전체보기 (259)
차근차근
0. 서버 개발환경 구축하기 React부분을 Client폴더를 만들어 그곳으로 옮긴다. package.json 과 server.js를 작성한다. package.json server.js npm run dev 명령어를 통해서 실행시킨다. localhost:3000 으로 들어가면 다음과 같은 화면이 뜬다. localhost:5000/api/hello 으로 들어가면 다음과 같은 화면이 뜬다. 정상적으로 작동이 됨을 알 수 있다. 1. REST API 구축하기 위와 같이 서버 개발환경을 구축했으면 이제 REST API를 구축해보겠다. REST API는 최근 상당수 웹서버 프레임워크에서 기본적으로 지원하는 기능으로써 서버와 클라이언트가 웹 프로토콜을 기반으로 하여 데이터를 효과적으로 주고 받을 수 있게 해준다. ..
0. 제목 백준 4195 친구 네트워크 BOJ 4195 친구 네트워크 C++ 4195 친구 네트워크 1. 문제 https://www.acmicpc.net/problem/4195 2. 풀이 서로소 집합(Disjoint Set)으로 해결할 수 있다. Union-find 방식을 사용한다. 기존 union방식과는 다르게 각 집합에 포함에 있는 원소 개수를 구하고 반환해준다. key값과 value값을 쌍으로 사용하는 map 을 사용한다. num을 통해 노드번호를 부여한다. 처음에는 시간초과가 떴지만 ios_base~cin 이 부분으로 속도를 향상시켜주어서 정답처리가 되었다. 3. 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ..
0. 제목 백준 1010 다리 놓기 BOJ 1010 다리 놓기 C++ 1010 다리 놓기 1. 문제 https://www.acmicpc.net/problem/1010 2. 풀이 mCn을 묻는 문제이다. dp방식을 이용하여 값을 저장해놓는다. dp[i][j]의 값은 왼쪽에 i개, 오른쪽에 j개가 있을 때 연결 방법의 개수이다. 왼쪽에 3개, 오른쪽에 5개가 있다고 가정해보자. 왼쪽의 가장 위에 것이 오른쪽 가장 위로 가면 나올 수 있는 방법 수는 dp[i-1][j-1] 이 된다. 왼쪽의 가장 위에 것이 오른쪽 두번 째로 가면 나올 수 있는 방법 수는 dp[i-1][j-2] 이 된다. 이렇게 쭉 반복하면 2차원 인덱스의 값은 j-1, j-2, ..., i-1 가 가능하다. 점화식을 써보면 다음과 같다. dp..
0. React 리액트(React)는 UI를 효과적으로 구축하기 위해 사용하는 자바스크립트(JavaScript) 기반의 라이브러리이다. 리액트는 대화형 UI를 작성하기에 유리하다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 한다. 캡슐화된 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성할 수 있다. 기존의 소스코드를 불필요하게 다시 작성하지 않고 새로운 기능을 개발할 수 있다. 클라이언트 렌더링(그때그때 데이터를 받아오는 방식) 뿐만 아니라 서버 사이드 렌더링(서버에서 미리 만들어서 클라이언트로 보내주는 방식)도 지원한다. 그래서 Ajax등과 같은 비동기 방식과 비교했을 때 검색 엔진 최적화(SEO) 등에 있어서 유리한 형태로 소스코드를 작성할 수 있다. 이러한 검색엔진 최적화 문제는..
0. 제목 백준 1197 최소 스패닝 트리 BOJ 1197 최소 스패닝 트리 C++ 1197 최소 스패닝 트리 1. 문제 https://www.acmicpc.net/problem/1197 2. 풀이 최소 스패닝 트리 = MST(Minimum Spanning Tree) MST를 구하는 방법은 Kruskal Algorithm과 Prim Algorithm이 있다. 이번 문제는 Kruskal Algorithm을 이용해서 풀어보겠다. Kruskal 알고리즘은 가중치가 가장 작은 간선부터 하나씩 이어나가며 모든 정점을 방문하는 방법이다. 이때 주의할 점은 사이클이 발생하면 안된다는 점이다. 사이클 발생 유무를 체크하기 위해서 Kuruskal 알고리즘은 Union-Find 구조를 사용한다. 사이클이 생기지 않는 조건..
0. body-parser Express는 자신의 주요 기능을 두가지로 얘기하곤 하는데 그 두가지는 라우트, 미들웨어이다. 다른 사람이 만든 소프트웨어를 미들웨어라고 생각할 수 있다. 미들웨어 중 body-parser라는 미들웨어를 사용해보겠다. post방식으로 데이터를 받는 경우 body-parser를 이용해 간단하게 구현할 수 있다. 1. compression 만약 내용이 매우 많아진다면 다음과 같이 용량이 커진다. 많은 사람들이 접속하면 과부화가 일어날 수 있다. 압축을 통해 해결해본다. Size가 많이 줄어든것을 볼 수 있다. 2. 미들웨어 만들기 미들웨어를 직접 만들어서 사용하는 방법도 있다. 여기서는 다음과 같이 만들 수 있다. '*'은 모든 경우에 적용을 한다는 의미이고 next는 다음으로 ..
0. Express 사용 /page/:pageId 를 사용하여 query string을 사용하지 않아도 되도록 구현하였다. 링크 부분의 url을 query string을 시용하지 않도록 바꿔주었다. end 대신 send 사용이 가능하다. 1. CREATE express에서는 post방식으로 데이터를 받을 때 app.post와 같은 방식을 사용한다. response.end 대신 response.send 를 사용할 수 있다. redirect도 아래 방식과 같이 바꿔 쓸 수 있다. 2. UPDATE app.get에서 url형식을 /:pageId 로 바꿔서 사용하였다. request.param.pageId 로 url의 일부를 가져올 수 있다. end 대신 send 사용이 가능하다. post형식으로 받기때문에 a..
0. Express란? http모듈만 사용해서 웹 서버를 구성할 때는 많은 것들을 직접 만들어야 한다. 하지만 직접 만들어야 하는 코드가 많다면 시간과 노력도 많이 든다는 문제가 생긴다. 이 문제를 해결하기 위해 만들어진 것이 익스프레스(Express)이다. express 모듈을 사용하면 간단한 코드로 웹 서버의 기능을 구현할 수 있다. 특히 익스프레스에서 제공하는 미들웨어와 라우터를 사용하면 만들어야 하는 각각의 기능을 훨씬 편리하게 구성할 수 있다. 1. Express 웹 서버 만들기 https://expressjs.com/ko/ Express - Node.js 웹 애플리케이션 프레임워크 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 $ npm install express --save e..
0. 제목 백준 1476 날짜 계산 BOJ 1476 날짜 계산 C++ 1476 날짜 계산 1. 문제 https://www.acmicpc.net/problem/1476 2. 풀이 모든 경우의 수를 탐색한다. 완전 탐색(Brute-force)이라고도 한다. 각각 년도가 15, 28, 19를 초과 할 수 없다. 초과하면 다시 1로 갱신이 된다. 나눗셈의 나머지를 이용해서 문제를 풀 수 있다. 현재 년도에서 각각의 수를 뺀 후 나머지가 모두 0일때 반복문을 탈출한다. 3. 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #include using namespace std; int E, S, M, year; int main(int argc, const char * argv[]) {..