본문 바로가기

분류 전체보기

 (153)
Next.js - 라우팅과 네비게이션 (Routing and Navigation) 네비게이션 Next.js에서 라우팅과 네비게이션을 하는 방법을 알아보자. 먼저 새로운 페이지를 만들기 위해 pages/hello.js 파일을 만들어 다음과 같이 코드를 작성해준다. const hello = () => Hello page~; export default hello; 그 후, 다시 index.js 파일로 돌아가 다음과 같은 링크를 생성해준다. import Link from "next/link"; const index = () => ( hello world Hello Page ); export default index; 이제 다시 인덱스 페이지로 돌아가면 다음과 같이 링크가 생성되어 있는 것을 볼 수 있다. 또한, a 태그를 확인해보면 아래와 같이 나온다. 즉, Link 컴포넌트를 사용한다고 하..
Next.js - 시작하기 (start Next.js) Next.js는 기본적으로 리액트를 기반으로 한 SPA (single page application) 을 빠르게 빌드할 수 있도록 도와주는 프레임워크이다. Next.js를 이용하면 빠르게 SPA를 빌드할 수 있으며, 기본적인 리액트 지식만 있다면 웹앱을 빠르게 빌드할 수 있도록 도와준다. 또한, Next.js는 매우 간단하며 커스터마이징이 매우 용이하다. Next.js의 특징과 장점 기본적으로 서버사이드 렌더링 (server-side rendering) 을 지원한다. 더욱 빠른 페이지 로드를 위한 코드 스플리팅을 자동으로 해준다. HMR을 지원하는 웹팩 기반 환경을 제공한다. Express나 Node.js와 같은 http 서버와 함께 구현이 가능하다. 시작하기 먼저 프로젝트 폴더를 생성한 후, 아래와 같..
알고리즘 - 가장 긴 증가하는 부분 수열 문제 (Longest Increasing Subsequence Problem) 가장 긴 증가하는 부분 수열 문제 (Longest Increasing Subsequence, LIS) 는 다이나믹 프로그래밍의 전형적인 문제 중 하나로써, 다이나믹 프로그래밍의 예시로 자주 나오는 문제이다. 비교적 쉬운 O(N^2) 알고리즘과 좀 더 어렵지만 효율적인 O(N log N) 알고리즘이 있다. 부분 수열 어떠한 수열에서 일부 숫자들을 지워서 만들어지는 수열을 부분 수열이라고 한다. 자기 자신도 자기 자신에 대한 부분 수열이라고 볼 수 있다. 예를 들어 [1, 2, 3, 5, 2, 8] 에 대한 부분 수열은 [1], [1, 3, 5] 등이 있다. 증가하는 부분 수열 부분 수열 중 오름차순으로 정렬되어 있는 부분 수열을 증가하는 부분 수열이라고 한다. 예를 들어 [1, 2, 3, 5, 2, 8] ..
Python - 파이썬과 PyPy 파이썬은 강력하고 유연하며, 사용하기 쉬운 언어로 유명하다. 그러나 파이썬의 가장 큰 단점은 속도이다. 파이썬은 굉장히 느리다. 이를 개선시키기 위한 여러 시도들이 있는데, 그 중 PyPy를 알아보려고 한다. 파이썬의 속도 파이썬은 인터프리터 언어이며, 인터프리터로 동작하는 스크립트 언어이다. 인터프리터 언어는 코드 한줄 한줄을 그 때 그 때 기계어로 번역하여 실행한다. 인터프리터와 컴파일러에 대해서는 아래를 참고하도록 하자. https://m.blog.naver.com/ehcibear314/221228200531 컴파일러와 인터프리터의 차이 https://blog.naver.com/ehcibear314/221228096291 우선 윗 글을 먼저 읽고 오는 것이 좋다. 컴파일러, 인... blog.nav..
알고리즘 - 유클리드 호제법을 이용한 최대공약수와 최소공배수 구하기 (Using Euclidean Algorithm to Get GCD and LCM) 유클리드 호제법 유클리드 호제법 (Euclidean Algorithm) 이란 두 수의 최대 공약수 (Greatest Common Divisor, GCD) 를 구하기 위한 알고리즘으로써, 시간 복잡도 O(log N) 의 시간 동안 두 수의 최대 공약수를 구할 수 있다. 유클리드 호제법을 이용한 최대 공약수 구하기는 다음과 같다. 두 수, a와 b중 더 큰 수를 더 작은 수로 나눈다. (a가 더 크다고 가정하자) 이후 구해진 나머지 값으로 b를 나눠준다. (즉 a / b의 나머지 값이 c라고 했을 때, b / c) 이후 구해진 나머지 값으로 c를 나눠준다. (즉 b / c의 나머지 값이 d라고 했을 때, c / d) 이 과정을 나머지 값이 0이 될 때까지 반복해준다. 나머지가 0이 되었다면, 나눠준 값이 곧..
파이썬 알고리즘 관련 시간을 줄이는 팁들 자고로 시간을 줄이는 것은 언제나 알고리즘에 있어 지향해야할 목표점이다. 아직 알고리즘 초보라 편법처럼이라도 시간을 줄이고픈 마음에 팁들이 생길 때마다 추가하려고 한다. 입력 - sys 모듈의 readline() 메서드 사용 보통 입력을 받을 때 input() 메서드를 사용하지만, sys 모듈의 readline()을 사용하면 더 빠른 시간에 입력을 받을 수 있으며, 데이터가 많아질 수록 이 차이는 더 커진다. 리스트 반복하기 - 곱셈 연산자 사용 파이썬의 기능 중 리스트를 반복할 때 곱셈을 사용할 수 있다는 장점이 있다. 똑같은 데이터를 반복적으로 리스트에 넣고 싶을 때, for 과 in range(n)을 사용할 수도 있지만, 곱셈 연산자를 사용하는 것이 더 빠르다. 예) 1억개의 0 넣기 import ..
Node.js - Socket.IO ws 패키지는 간단하게 웹 소켓을 사용하고자 할 때 좋다. 그러나 구현하려는 서비스가 좀 더 복잡해진다면 Socket.IO를 사용하는 것이 더 편하다. ws 모듈 또한 잘 구현하면 Socket.IO와 같은 기능을 하도록 만들 수 있지만, Socket.IO는 편리한 기능을 많이 지원하여 쓰기 좋다. 이전 포스트에서 연결된다. 2020/08/20 - [Node.js] - Node.js - ws로 웹 소켓 사용해보기 (Web Socket Using ws Module) npm i socket.io 이제 socket.js의 ws 패키지의 웹소켓 객체를 Socket.IO로 대체해준다. const SocketIO = require('socket.io'); module.exports = (server) => { con..
Node.js - ws로 웹 소켓 사용해보기 (Web Socket Using ws Module) 먼저 gif-chat이라는 새로운 프로젝트를 다음과 같이 만들어주고 패키지들을 설치해주자. { "name": "gif-chat", "version": "0.0.1", "description": "GIF CHATTING", "main": "app.js", "scripts": { "start": "nodemon app" }, "author": "Effort", "license": "ISC", "dependencies": { "cookie-parser": "^1.4.5", "dotenv": "^8.2.0", "express": "^4.17.1", "express-session": "^1.17.1", "morgan": "^1.10.0", "nunjucks": "^3.2.2" }, "devDependencies"..

티스토리툴바