본문 바로가기

All

(56)
[Next.js] next-themes로 Nextjs에서 간단히 다크모드 구현하기 (feat. tailwind) 1. next-themesnext-themes는 next.js에서 쉽게 다크 모드 및 기타 테마를 구현할 수 있도록 도와주는 라이브러리이다.해당 라이브러리를 사용하면 정말 간단하게 다크 모드를 구현할 수 있다.  아래 사용방법은 nextjs + tailwind에서 다크모드를 구현하는 방법이다.  2. 사용방법1) 설치npm install next-themesyarn add next-themes npm을 통해 next-themes를 설치해 준다.   2) tailwind css와 연동// tailwind.config.jsmodule.exports = { darkMode: 'class', // 다크 모드를 클래스 기반으로 설정 content: [ './app/**/*.{js,ts,jsx,tsx}',..
[GitHub] GitHub Actions을 사용하여 push 할 때 자동으로 build 되도록 만드는 방법 최근 회사에서 배포하는 작업이 많아지다 보니 점점 귀찮아졌다build 하고 배포하고 하는 과정이 귀찮아서 자동으로 할 수 있는 방법을 찾아보다 GitHub Action에 대해 알게 되었다. 1. GitHub Action이란?GitHub Actions은 GitHub에서 제공하는 자동화 도구로, 코드의 빌드, 테스트, 배포 등의 작업을 자동화할 수 있도록 도와준다. GitHub 저장소에 특정 이벤트가 발생할 때마다 워크플로우를 실행하여 원하는 작업을 수행할 수 있다.  YAML 파일을 사용해 쉽게 워크플로우를 정의하고 구성할 수 있다. 또한, Linux, macOS, window 등 다양한 운영체제 환경에서도 실행이 가능하다.   2. 사용방법GitHub Actions는 GitHub에 내장되어 있기 때문에 ..
[Git] 삭제된 브랜치 복구하기 Git을 사용하다보면 실수로 브랜치를 삭제하는 경우가 발생하기도 한다. 바로 오늘의 나처럼.. 일하다가 실수로 머지도 안한 브랜치를 삭제해버렸다. 진짜 순간 너무 놀라서 멍때리다가 복구해야겠다는 생각에 폭풍구글검색하고 겨우 복구했다. 이 기억을 잊지 않기 위해 블로그에 남긴다. 나의 경우 로컬에서 브랜치를 삭제했기 때문에 Remote에 해당 기록이 남아있어 복구가 가능했다. 1. 삭제된 브랜치의 마지막 commit 찾기 git reflog 우선 로컬에서 삭제된 브런치의 마지막 커밋을 찾아야 한다. git은 reflog라는 기능을 제공하는데, 이는 Git에서 수행한 최근 활동의 로그를 보여준다. 해당 명령어를 사용하면 이런 로그가 뜰 것이다. 여기서 삭제된 브런치의 마지막 커밋을 찾아 해당 커밋 ID를 기..
윈도우, 리눅스에서 서버 재부팅시 프로그램 자동실행 설정하기 (feat. next.js) 이번에 윈도우, 리눅스 등 모든 서버에서 재부팅 시 프로그램이 자동으로 실행되도록 설정했다.기존에는 pm2로 관리를 했었는데, 서버가 꺼질 때마다 수동으로 프로그램을 시작해줘야 했다.  서버가 꺼질때마다 다시 시작하는 것도 귀찮았는데, 꺼졌다는 걸 인지하지 못했을 때 오는 민원 전화가 더 무서웠다🥲그래서 이러한 상황을 방지하기 위해 자동실행 설정을 시작했다. 그 과정을 고생한거 정리할 겸 기록 겸으로 블로그에 작성한다. 우선은 윈도우부터!윈도우는 nssm을 이용해 배치파일을 서비스에 등록하는 방법을 사용했다.  바쁜 분들은 성공과정으로 고고 > 정리 부분 보면 됨    1. Window1) 실패 과정 이전 프로젝트 했을 당시, window 서버에서 nssm을 통해 자동 실행을 등록했었다.그래서 이번에도..
[2주만에 통과하는 알고리즘] 파이썬 입력과 출력 / 반복문과 조건문 1. 입력과 출력 #입력 #input() = 사용자한테 입력 받은것을 출력함 #case1 : 단순 정수 number = int(input()) #case2 : 단순 문자 #input default type = 문자열 타입 string = input() #출력 print(number + number) #24 print(string + string) #1212 파이썬에서 input은 기본적으로 string으로 받아오기 때문에 input()만 사용하면 string type이 된다. 만일 정수를 받아오고 싶다면 input을 int로 감싸줘야 한다. > int(input()) 숫자와 숫자를 더하면 두 값을 합한 값이 출력되지만, 문자열을 더하면 두 값을 나열한 형태로 출력된다. 1) map, split #map ..
[코딩테스트] 수열 추측하기, 순열 & 이항계수 응용 1. 문제 가장 윗줄에 1부터 N까지의 숫자가 한 개씩 적혀 있다. 그리고 둘째 줄부터 차례대로 파스칼의 삼각형처럼 위의 두개를 더한 값이 저장되게 된다. 예를 들어 N이 4 이고 가장 윗 줄에 3 1 2 4 가 있다고 했을 때, 다음과 같은 삼각형이 그려진다. 3 1 2 4 4 3 6 7 9 16 N과 가장 밑에 있는 숫자가 주어져 있을 때 가장 윗줄에 있는 숫자를 구하는 프로그램을 작성하 시오. 단, 답이 여러가지가 나오는 경우에는 사전순으로 가장 앞에 오는 것을 출력하여야 한다. - 첫째 줄에 두개의 정수 N(1≤N≤10)과 F가 주어진다. N은 가장 윗줄에 있는 숫자의 개수를 의미하며 F는 가장 밑에 줄에 있는 수로 1,000,000 이하이다. - 첫째 줄에 삼각형에서 가장 위에 들어갈 N개의 숫..
[코딩테스트] 조합의 경우의 수(메모이제이션) 1. 문제. 우선 nCr = n-1Cr-1 + n-1Cr 공식이 어떻게 성립하는지부터 알아보자. n개의 서로 다른 원소 중 r개를 선택하는 경우의 수를 찾을 땐, 두 가지 경우가 발생한다. 하나는 선택된 원소를 포함하는 경우이고, 하나는 포함하지 않는 경우이다. 특정 원소를 이미 선택했다고 가정하면, 남은 n-1개의 원소 중, r-1개를 더 선택해야 하므로 경우의 수는 n-1Cr-1이 된다. 반대로 선택하지 않은 경우라면, n-1개의 원소 중, r개를 선택해야 하므로 경우의 수는 n-1Cr이 된다. 따라서 n개의 원소 중 r개를 선택하는 경우의 수는, 두 경우의 수를 합한 n-1Cr-1 + n-1Cr가 된다. 2. 문제 풀이 function solution(n, r){ let answer; let dy=..
[Error] Next.js unable to verify the first certificate error unable to verify the first certificate Next.js에서 fetch를 통해 api를 불러오는데 위와 같은 에러가 발생했다. gpt에 물어보니까 SSL 인증서 검증에 문제가 있음을 나타내는 에러라고 했다. 혹시나 서버에서 일어난 문제일까 생각해봤는데, Postman에서 호출해보니까 에러 없이 정상적으로 출력됐다. process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'; 스택오버플로에서 보니까 위 코드처럼 env 설정을 하면 된다길래 utile에 따로 정리해놨던 환경변수 파일에 넣었다. 바로 정상적으로 작동했다. 기본적으로 Node.js에서 HTTPS를 요청하면, 서버의 SSL/TSL 인증서가 유효한지 확인한다. 인증서가 유효애햐 안전한 연결이 보..