binary

Node.js 설치 및 React 프로젝트 생성

Next.js로 프론트를 진행하려고하는데, 아래 프로젝트 생성부터 간단히 정리해보겠습니다.​​1. 준비물: Node.js 설치​https://nodejs.org/ko/download Node.js — Node.js® 다운로드Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org 윈도우에서 작업하고 있는데 msi 다운받음.​​msi 더블 클릭 후 설치 진행​​​ ​​​​설치 후 cmd에서 "node -v" 명령어로 설치 확인​​프로젝트 폴더를 생성할 폴더로 이동한..

React와 Next.js, JSP·Thymeleaf와 뭐가 다를까?

React와 Next.js, JSP·Thymeleaf와 뭐가 다를까? 음.. 이번에 새롭게 프로젝트를 시작할까 하는데, React를 사용해보려고 합니다. 정확하게 아는것이 없어서 조금 정리를 해보면서 시작할까 하네요. 일단 jsp와 thymeleaf를 주로 사용해왔기에 비교하면서 정리해보겠습니다.​1. JSP와 Thymeleaf (서버 중심 렌더링, SSR)JSP, Thymeleaf는 서버에서 완성된 HTML을 만들어 클라이언트(브라우저)로 내려주는 방식입니다.즉, 사용자가 페이지를 요청하면 서버(Spring)가 DB에서 데이터를 가져와 HTML에 꽂아 넣고, 완성된 페이지를 돌려줍니다.​서버가 주도적으로 화면을 그림SEO(검색엔진 최적화)에 강함 (HTML이 완성된 상태라서 검색엔진이 읽기 쉬움)하지..

[네트워크] 공유기 포트포워딩 완전 정복: 80/443로 웹서버 열기 안녕하세요. AWS 프리티어에서 탈출하고, 집에서 미니PC로 서버 돌리려고 이전하고있습니다. AWS에서는 보안그룹을 설정하고 방화벽 열고 했었는데 이제는 공유기에 그 작업을 해야한다고 하네요. ​아래에 공유기에 포트포워딩 하는법을 정리해 보았습니다.​​공유기 설정 접속cmd 열기​​ipconfig 입력 후 Enter ​ipconfig 입력 후 Enter아래 공유기 이미지 클릭​​공유기에 붙어있는 패스워드 입력​​아래와 같은 화면이 나옵니다. ​네트워크 설정 - NAT 설정 메뉴로 이동​​웹서버 접속할 수 있게 하는 작업이라 저는 80포트와 443포트 추가했습니다.​

ip -4 addr show # 유선 인터페이스명 확인 (예: enp2s0)ip link show enp2s0 | grep link/ether # ← 이 값이 유선 MAC (예: a4:bf:01:23:45:67)공유기에서 고정 IP 설정 (DHCP 예약) 이번에 서버로 사용하기로 한 미니 PC를 설정하다가 문제가 발생했습니다.작업하는 PC에서 서버용 미니 PC로 ssh로 접속하고 있었는데 갑자기 접속이 안되더라구요.알고 보니 서버용 미니 PC의 IP가 바뀐 것이 원인이었습니다.​그럼 왜 바뀌었을까?인터넷이 들어오는 공유기의 전원을 껐다 킨 적이 있었는데, 공유기가 껐다 켜지면서 IP가 바뀐다고 하더라구요. ​바뀌는 이유는?DHCP(공유기)가 기기들에게 사설 IP를 임대하는데, 공유기가 재부팅되면 임대 목..

Linux - Ubuntu Server용 설치 방법 안녕하세요. 저는 아래 웹사이트를 AWS 프리티어로 서버로 돌리고 있었는데요. 이번에 그냥 큰 마음 먹고 집에서 서버 돌리려고 미니 PC 하나 장만했습니다. 서버용으로만 사용하려고 해서 윈도우 보다는 리눅스를 선택했는데요. aws에서 Amazon Linux 2023을 쓰고있어서 그대로 사용하려고했는데, Amazon Linux는 aws용으로 최적화된 거라고 하네요. 그래서 그냥 Ubuntu로 OS를 설치하고 서버로 사용하려고합니다. ​하면서 또 아래에 설치방법을 정리해보았습니다.아래는 제 웹 사이트입니다. ㅎㅎ https://binaryworld.kr/ 진수의 잡동사니 | BinaryWorld총알피하기, 핀볼랜덤뽑기, 김치랜덤디펜스, AI 외모 평가, ..

안녕하세요.이번에는 핀볼 방식으로 진행되는 랜덤 뽑기 서비스를 하나 만들어 보았습니다.이름하여 ‘랜덤 핀볼 랜덤 뽑기’! 🎈 무슨 서비스인가요?단순 룰렛이나 사다리 게임으로 뽑기하는 것이 지루하셨나요?핀볼 게임처럼 공을 쏘아 올려 장애물과 부딪히며 굴러 내려오게 하고, 가장 먼저 골인하는 사람이 오늘의 당첨자가 됩니다.최대 30명까지 참가 가능하며, 결과는 완전히 랜덤!누가 이길지 아무도 예측할 수 없어서 보는 재미, 참여하는 재미가 다 있습니다. 🛠️ 만든 이유최근에 핫한 룰렛뽑기를 보고 따라 만들고 싶어졌습니다.. ㅎㅎ 🕹️ 어떻게 하나요?1️⃣ 참가할 인원 수를 설정하고2️⃣ 닉네임을 입력한 뒤3️⃣ [게임 시작] 버튼을 누르면 공이 발사됩니다.공이 장애물에 맞고, 흔들리고, 속도가 줄었다가 ..

안녕하세요. ​오늘은 Codex에 대해서 알아보려 합니다. 최근에 OpenAI에서 개발했다고 하는데요. 개발자라면 알아야 할 최신 AI 기술이라고 해서 저도 한 번 써보려고 합니다. 제가 개인 프로젝트로 만들고 있는 레파지토리를 등록해 보고 Codex가 무엇인지, 어떻게 사용하는지 아래에 정리해 보겠습니다~​참고로 ChatGPT plus 사용자 이상부터 사용 가능하다고 합니다.​Codex란 무엇인가?Codex는 OpenAI에서 제공하는 개발자 전용 코드 에이전트 기능이다.Codex는 깃허브(GitHub) 저장소 전체를 분석해서 코드 변경 제안, PR(Pull Request) 생성, 코드 리팩토링까지 해준다.​간단히 말하면​"내 깃허브 프로젝트를 읽고, 내가 말한 대로 자동으로 코드 수정하거나 기능을 추가..

[AWS] VPC 피어링(VPC Peering) 설정 안녕하세요. 오랜만에 글 써보네요.​기존에 자바 프로젝트를 1개의 AWS EC2 인스턴스에서 1개의 컨테이너를 띄우고 있었는데요. 이번에 컨테이너를 6개로 분리하면서 EC2 인스턴스도 두 개(A 인스턴스, B 인스턴스)로 나누게 되었습니다.​A인스턴스와 B인스턴스를 생성하였는데, DB는 A인스턴스에서 1개를 공통으로 사용하려고 했습니다. B인스턴스에서 A인스턴스의 DB에 접속하려면 퍼블릭액세스를 허용해야하는데, 이 때 유료비용이 발생하는걸로 알고있어 다른방법을 알아보다가 VPC Peering을 접하게 되었습니다. ​VPC (Virtual Private Cloud) 는 AWS에서 제공하는 가상의 독립 네트워크예를 들어AWS라는 아파트에 여러 세대(회사나..

구글 애드센스 광고 개제 제한 음.. 구글 애드센스로 담뱃값 정도는 벌고 있었는데요. . ​오늘 애드센스 수익 확인하러 갔는데 0.00 달러가 나오길래 의아해서 뭐지? 하고 봤는데 사이트에 광고가 안 나오더라구요.​애드센스 사이트에서 확인해 보니 광고가 제한되었다고 나오네요.. ​사이트 들어가 보니 광고 나오던 자리에 하얗게 공백 화면이네요.. ㅋㅋㅋㅋ​​이메일 확인하니까 자세한 원인이 나오긴 하더라구요.무효 트래픽.. 뭔 개소린지 모르겠네 ㅠㅠ 어이가 없다..  ​구글 애드센스에서 말하는 무효 트래픽의 정의는 아래와 같습니다.어디에도 해당되진 않을 거 같은데 .. ​다른 블로그도 찾아보니 딱히 할 건 없고 기다리면 된다고 하네요.. 어쩔 수 없지만 그냥 기다려야겠네요. ​13일에 투표 사이트에 평소보다..

안녕하세요. 이번에 유튜브 쇼츠 영상 업로드하면서 수익창출 방법을 알아보다가 뮤직플렉스라는 플랫폼을 알게 되었습니다. 아래에 사용방법을 정리해 보겠습니다.​뮤직플렉스말고도 유명한 게 짤스튜디오라고 있던데 수익에 대한 약관이 자세하게 명시되어 있지 않아서 뮤직 플렉스로 일단 해보려고 합니다. ​1. 사이트 접속https://www.mewpot.com/musicflex/intro ​2. 회원가입휴대폰 인증을 해줍니다.​회원 종류를 선택해 줍니다.​본인에게 해당되는 것을 선택해 줍니다. ​회원가입 완료되면 상단에 '채널 관리 클릭'채널 등록하기 클릭​3. 채널 인증유튜브 채널 주소 URL을 복사해서 넣어줍니다.​유튜브에서 본인 채널 정보에 들어가면 채널 URL 복사해서 붙여 넣습니다.채널 본인 인증을 위해 첫..