SW

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[]) {..

0. Table View 정갈하게 보여주기 위해 Table View가 필요하다. 요소를 살펴보면 다음과 같다. '데이터가 무엇인지', '데이터가 몇개인지', '(옵션) 데이터를 누르면 어떤 동작을 할 것인지' 테이블뷰를 만들어 보겠다. 테이블 뷰를 드래그해서 storyboard에 올려놓는다. 크기 조절을 하고 제약 조건을 설정해준다. table view 의 속성 지정을 위해 UITableViewDataSource와 UITableViewDelegate를 상속받는다. 오류가 뜨지만 Fix를 클릭하면 해결된다. storyboard의 View Controller와 ViewController.swift의 viewcontroller가 잘 연결되었는지 확인해본다. 테이블 뷰만드는 방법은 두가지인데 하나는 임의의 셀을..

0. API Application Programming Interface 이전까지 만들었던 것은 Node.js가 가지고있는 기능들을 호출함으로써 동작하게 된다. 예를 들어, fs.readFile을 보자. 이 함수는 node.js를 만든 개발자들이 만든 것이다. 우리는 이 함수가 어떤 원리로 동작하는지 모른다. node.js를 만든 개발자들은 node.js를 이용하는 개발자들에게 사용설명서를 이용해 사용하라고 한다. 두 개발자 사이의 약속이 interface이다. 이렇게 application을 만들기 위해 제공되는 interface를 Application Programming Interface 즉, api 라고 한다. 1. CreateServer API : http.createServer([requestL..

0. 입력정보에 대한 보안 만약 id, password를 이용해서 접속을 하려고 한다. 그럴때 id, password가 페이지 소스에서 보여지면 안된다. 그것을 막기 위해 다음과 같이 처리한다. 1. 출력에 대한 보안 만일 alert나 와 같은 것을 description에 넣으면 경고창이 뜨거나 튕긴다. 그것을 보안하기 위해서 이런식으로 수동으로 바꿔 줄 수 있다. 그러나 수동으로만 해결할 수는 없는 일이다. 그래서 다음 명령어로 sanitize-html을 설치한다. 와 같은 것을 걸러준다. 또한 허용되는 태그를 가지고 싶다면 allowedTags 옵션을 주어서 제외시키면 된다. 다음과 같이 사용한다.

0. 객체의 형식 배열과 객체 모두 정리정돈 하는 도구이다. 배열은 각각의 원소들은 순서가 있고 키값이 숫자이다. 객체는 각각의 원소들이 순서가 없고 키값이 숫자가 아니어도 된다. 1. Refactoring 앞에서 짠 코드를 객체를 이용해서 Refactoring해보면 다음과 같다. 다른 부분의 코드도 이 객체에 따라 수정해야한다. 2. Module 객체가 많아지면 모듈로 정리한다. exports와 require를 이용한다. 3. 모듈 활용 모듈을 활용하여 코드를 고치면 다음과 같다. 또한 template.js 에서 보듯 변수를 사용하지 않고 module.exports를 바로 이용할 수 있다.