Next.js를 이용해 정적 페이지를 개발하고 깃허브 페이지에 호스팅하는 방법을 소개한 글입니다. out 디렉터리에 빌드된 페이지를 생성하기 위해 next build와 next export 명령어를 사용하며, 호스팅을 위해 git subtree push와 같은 일련의 작업을 수행해야 합니다. 이 작업을 자동화하기 위해 GitHub Action을 이용할 수 있으며, 해당 방법을 소개하고 있습니다.
⭐ 추가된 항목 💬 댓글 댓글 추천 기능 추가 💬 포스트 새탭에서 링크를 여세요 기능 추가 일부 링크가 많은 페이지와 이미지 레이지 로딩으로 이전 위치가 망가지는 포스트를 위해 추가하였음. 추후 쿠키를 통해 설정을 유지할 수 있도록 개선할 예정 💬 서식 서식 기능 추가 자신이 주로 사용하는 고정적인 멘트, 정기적으로 작성하는 …
Lightsail을 이용하여 2GB Ram, 1vCPU, 60GB Storage로 마인크래프트 서버를 구축해보았다. 서버의 성능은 그럭저럭 괜찮았지만, 24시간 구동은 불가능한 것으로 판단되었다. 따라서 Discord 봇을 이용하여 서버를 켜고 끄는 방식을 사용하였고, 이를 통해 누구에게나 다운타임 없이 게임을 즐길 수 있도록 제공할 수 있었다.
사이트에 접속한 순간, 우리는 개인정보를 흘린다. 아이피 운영체제 휴대전화 기기명 사용중인 브라우저 브라우저 안에 삽입된 쿠키 그리고 페이지 내에 존재하는 또 다른 리소스와 스크립트를 통해 우리의 개인정보는 재귀함수처럼 끝없이 퍼져나간다. 우리가 오랫동안 사용해왔던 이메일은 안전한가? 이메일 내부에 삽입된 트레커는 우리가 메일을 언제, 어디서, 무엇으로, 몇 번 열었는지 감시한다. 언제가부터 난 …
한동안 인생을 어영부영 살았다. 퇴근하면 친구들과 게임을 했고, 마냥 그 시간이 재밌다고 느껴졌고 그냥 이 정도의 삶이면 충분할 것 같다는 생각이 들었다. 그러다 문득 2년전에 작성했던 블로그에 쓴 일기를 발견했는데 왜 이때 가지고 있었던 의지와 투지를 상실하게 된건지 모르겠다. 작성한 일기의 대략적인 내용은 지방대에 다니는 내가 서울대에 방문해서 상당한 심리적 …
버블 정렬(Bubble Sort) 인접한 원소를 비교하여 자리를 교환하는 방식이다. 처음부터 마지막까지 원소를 비교하여 마지막에는 가장 큰 또는 작은 원소가 배치된다. 이를 정렬이 끝날때까지 수행하며 시간 복잡도는 O(n^2)이며 구현이 압도적으로 간단하다. def bubble_sort(items: list): for i in range(len(items) - 1): for j in range((len(items) - 1) - i): if items[j] < …
April 2021. 04. 08. 포스트 모바일에서 포스트 목차 네비게이션을 추가했습니다. 2021. 04. 04. 설정 카테고리 네비게이션의 안정성을 향상하였습니다. 2021. 04. 02. 설정 포스트를 카테고리 별로 살펴볼 수 있도록 카테고리 네비게이션이 추가했습니다. March 2021. 03. 30. 포스트 인기 포스트 및 최신 포스트의 카드 하단에 설명이 추가했습니다. 시리즈 시리즈를 최근/과거 순으로 정렬할 …
간만에 C++ Qt를 다시 잡았다. 학부생때 대강(당시엔 열심히 했다고 느꼈지만) 만들었던 프로그램에 누군가가 스타를 눌러주었는데, 코드가 매우 부끄러운 수준이었고 이를 개선함과 동시에 몇가지 기능을 추가하고 싶었기 때문이다. 추가하는 기능에 네트워크를 사용할 필요가 있었다. Qt5에서는 QFtp 등등이 사라지고 QNetworkAccessManager로 모든 네트워크 통신을 사용하도록 변경되었다. 학부생인 당시 FTP를 이용하기 위해서 슬쩍 다뤄본 …
나의 아저씨라는 드라마를 좋아한다. 아이유가 나와서 그렇기도 하지만 인물들이 주고받는 대화들을 듣다보면 정말 많은 생각을 하게 해준다. 여기 나열된 대사들은 나에게 많은 생각을 하게 만들었던 대사들이다. 현실이 지옥이야 이선균 "나쁜 놈 잡아 족치면 속 시원할 것 같지? 살아봐라 그런가. 어쩔 수 없이 나도 그 오물 뒤집어 써 그놈만 뒤집어 쓰지 …
BLOG 테스트 주도 개발(TDD)란? # TDD에 대해서 잘 몰랐는데 이 글이 뭔가 TDD의 핵심을 잘 알려주는 것 같다. TDD란 무엇이며, 어떻게 하는 것이며, 언제 쓰면 좋은지, 안쓰면 좋은지, 왜 필요한지 잘 알려준다. 나의 경우엔 TDD를 해보고 싶었고 어떻게 하는지 대략적으로 알고 있었는데 정말 필요한건지 약간의 의구심이 있었다. 그런 나에게 아래 …
나중에 DB 전환할때 해메지 않으려고 기록... Install Postgres in Docker docker-compose에 아래와 같이 postgresql 도커를 선언하자. db: image: postgres restart: always volumes: - ./db/data:/var/lib/postgresql/data ports: - 5432:5432 environment: POSTGRES_USER: "username" POSTGRES_PASSWORD: "password" POSTGRES_DB: "dbname" TZ: "Asia/Seoul" Django Settings django의 settings.py에서 DATABASES 부분 찾기 DATABASES={ 'default': { 'ENGINE': 'django.db.backends.sqlite3', …
SPA내가 처음 SPA (Single Page Application)라는 것을 알게된게 작년 9월 쯤이었던 것 같다. 당시에는 자바스크립트에 대해 정말 무지해서 React, Vue 같은 프레임워크들이 어렵게 느껴져 익히는 걸 미뤘었다. 그 핑계는 내 프로젝트엔 SSR이 매우 중요하다는 것이었다. 언젠가는 이 프로젝트를 React로 바꿔보고자 하였지만 그것은 기약없는 약속이었다 최근이라 말하기엔 좀 그렇지만 1-2개월 전쯤 …
이 글은 파이썬과 자바스크립트에서의 비동기 처리와 sleep 함수의 효율성에 대한 내용을 다룬다. 자바스크립트에서는 이벤트 루프와 테스크 큐를 활용하여 비동기 처리를 지원하고, 파이썬에서는 asyncio 라이브러리를 통해 비동기 프로그래밍을 지원한다. 비동기 처리를 활용하여 동시성을 높이는 방법에 대해서도 다룬다.
노션 도우미에서 익명 댓글 시스템을 구현하기 위해 구글 스프레드시트 API를 활용해 데이터를 안전하고 간편하게 보관하는 방법을 모색하고, gspread 라이브러리를 사용하여 원하는 키가 있는 행의 데이터를 가져오고, 새로운 행을 만드는 방법을 설명한다.
리눅스 중에서도 가장 아름다운 배포판을 찾아보았다. Elementary OS와 Deepin 중에서 선택할 수 있는데, Deepin은 아름다운 UI와 블러처리 된 레이아웃이 특징이다. 하지만 중국에서 만들어졌다는 점과 패키지 다운로드 속도가 느리다는 단점이 있다. Elementry OS는 Mac과 유사한 디자인이나 설정이 까다롭고 최신 버전에서는 감동이 없다는 평가를 받고 있다. 두 가지를 섞어서 사용할 수 있으며, Deepin을 위에 설치하면서 Elementry OS의 문제들을 완전히 해결할 수 있다.
Nginx는 유연하게 웹서버를 다룰 수 있는 C언어와 유사한 문법을 제공합니다. 이에 대해 몇 가지 자주 사용하는 기능에 대해 정리된 글입니다. 예를 들어, 도메인 리디렉션, 특정 URL 리디렉션, HTTPS 리디렉션, 커스텀 에러 페이지, 스태틱 파일 캐시, 핫링크 차단, CORS, 프록시 패스, 프록시 캐시 등이 소개되어 있습니다.
이 글은 블로그를 만들기 위해 필요한 프론트엔드와 백엔드 기술에 대해 설명하고 있다. HTML, CSS, JavaScript는 프론트엔드에서 사용되는 기술이며, LAMP 스택이나 리눅스, Nginx, PostgreSQL 등은 백엔드에서 사용되는 기술이다. 이외에도 서버 사이드 언어 등 다양한 기술을 사용할 수 있으며, 언어 및 프레임워크 선택은 개발자나 서비스의 목적에 따라 다를 수 있다.
얼마전 장고에서 typescript를 사용하기 시작했는데 상당히 맘에드는 친구라서 본격적으로 typescript를 활용하고 싶어졌다. 일단 가장 만만한 express의 개발 환경을 ts로 구축해보면 다른 것도 대강은 구축이 수월할 것이라 생각된다. 패키지 설치 npm install -g typescript npm init -y npm install --save express npm install --save-dev @types/node @types/express @types가 붙은 패키지는 /뒤에 나열된 …
프론트엔드 개발에서 ES6 문법과 TypeScript, SCSS를 도입하면서 코드의 가독성과 유지보수성이 높아졌다. 이를 위해 Node.js를 사용하여 자동으로 트랜스파일링하는 코드를 작성하였다. Python으로도 시도하였지만 Node.js가 더 효율적이었다.
우선 윈도우에서 터미널을 활용하여 컴파일을 진행하기 위해선 Visual Studio의 설치가 선행되어야 한다. 이 글은 Visual Studio 2019를 기준으로 작성된다. 우선 Visual Studio를 설치하면 VS 명령 프롬프트가 함께 설치되는데 해당 프롬프트가 존재함에도 굳이 파워쉘을 사용하려는 이유는 VS 명령 프롬프트의 실행 속도(동작 가능한 상태가 되기까지의 시간)가 매우 느리기 때문이었다. 또한 Powershell을 주로 …
BLOG 디시인사이드의 문제점 # 요즘 밸로그에 인기있는 블로거다. 작성한 대부분의 글들이 밸로그 트랜드에 줄서있다. 욕설이 다수 포함되어 있지만 솔직하고 공감이 느껴지는 매력적인 글을 쓰시는 것 같다. 여하지간 그런 분께서 한국의 대형 커뮤니티 사이트인 디시인사이드의 문제점이라는 주제로 글을 쓰셨는데 대부분은 이미지와 관련된 문제점이다. 지적한 문제점은 다음과 같다. 🤭 실제로는 서버에서 삭제 …
윈도우에서 리눅스 명령어를 사용하는 방법에 대해 설명하고, 레지스트리를 이용하여 CMD에서도 리눅스 명령어를 사용할 수 있도록 하는 방법을 제시하고 있다. 필자는 PowerShell이나 GitBash를 사용하는 것보다 CMD에서도 리눅스 명령어를 사용할 수 있도록 설정하는 것이 더 효율적이라고 말하고 있다.
IDE Visual Studio Code deb 패키지 C++ build-essentialsudo apt-get install -y gcc libc6-dev build-essential libglu1-mesa-dev Qt Creator QtCreator 다운로드 ./qt...online.run C# .Net Core https://docs.microsoft.com/ko-kr/dotnet/core/linux-prerequisites?tabs=netcore2x Unity 3D deb 패키지 Mono Kit Python pyenvsudo apt-get install -y build-essential libssl-dev zlib1g-dev libbz2-dev libreadline-dev libsqlite3-dev wget curl llvm libncurses5-dev libncursesw5-dev xz-utils tk-dev libffi-dev liblzma-dev …
React Native에선 Flexbox라는 형식으로 레이아웃 개발을 진행한다. 최신 웹 브라우저에서도 이 레이아웃이 작동하여 CSS 최신 방법론으로 알려져 있다. Flexbox는 다양한 화면 크기에서 일관된 레이아웃을 적용할 수 있다. 아래 내용은 대부분 공식문서인 "Layout with Flexbox #"을 인용하였다. Flex flex will define how your items are going to “fill” over the available …
