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를 임대하는데, 공유기가 재부팅되면 임대 목..

[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라는 아파트에 여러 세대(회사나..

앱광고 넣기 (Admob) 안녕하세요. 이번에 앱 등록하면서 광고도 넣기 위해서 작업해보고 있습니다. 아직 출시를 하지는 않았지만 테스트로만 해보고 있구요. 아래에 그 방법을 정리해보겠습니다.​안드로이드 앱 하단에 배너광고 생성 완료​1. 사이트 접속https://admob.google.com/ ​2. 회원가입 및 로그인​3. 광고 단위 생성하기​플랫폼 선택현재 포스팅에서는 Android만 테스트했습니다.앱스토어에 등록되지 않은 경우에는 아니오를 선택해도 테스트가능합니다.​앱 이름 설정하고 추가 클릭​​완료 클릭​광고 단위 추가 ​​원하는 광고 형태를 선택​파트너입찰을 사용하면 수익이 증가한다고 하는데 설정할게 더 많아져서 그냥 안했습니다.​원하시는거 선택하면 되는데 기본세팅 그대로 진행했습니다.​실제 ..

플러터 앱 다국어 기능 설정하는법 안녕하세요.이번에 플러터로 앱을 개발하고 있습니다. ㅎㅎ다국어를 지원하면 좋을거 같아서 다국어 기능을 넣어봤는데요.SpringBoot에서 다국어 지원하는 것과 유사하게 동작을 하더라구요.아래에 그 내용을 정리해보겠습니다.  먼저 결과부터 보여드리겠습니다.앱화면에서 언어를 선택하는 버튼이 있고 그 버튼을 클릭하면 자동으로 번역이 됩니다. pubspec.lock 빼고 총 6개 파일만 추가하고 수정했네요 1. 플러그인 설치file - settings 클릭 Pulgins에서 Flutter intl 검색 후 Install 클릭 설치가 완료되면 Restart IDE 2. pubspec.yaml 파일 pubspec.yaml 파일에서 intl 의존성 추가좀더 아래쪽에 generate:..

앱스토어 앱 등록하는 방법1. 애플 디벨로퍼 접속https://developer.apple.com/kr/  2. 로그인우측 상단 '계정' 클릭 3. 결제하기'오늘 등록' 클릭 개인정보 입력 개인 또는 법인으로 선택하고 '계속' 클릭동의 체크하고 '계속' 클릭 Purchase 클릭 신용카드 결제와 청구 주소 입력 후 '주문 검토' 클릭 결제할 카드 등록 후 '결제' 클릭 결제 완료하면 등록한 email로 연락이 온답니다. email 확인해 보면 결제 완료 메일이 왔네요~ 다시 애플 디벨로퍼로 돌아와 계정 메뉴를 클릭앱을 등록하고 진행하면 되는데결제 이후 최대 2일 동안 기다려야 한다고 합니다 ㅠ_ㅠ  이후 절차는 다음에 또 포스팅해보겠습니다.

윈도우에 파이썬 설치하기 1. 사이트 접속https://www.python.org/downloads/ 2. 다운로드 3. 설치다운로드 한 실행파일 실행 Add python.exe to PATH는 무조건 체크하는 게 낫습니다.체크 안 하면 환경 변수 수동으로 해야 하기 때문에 귀찮습니다.Install Now 클릭 다 되면 close 클릭 설치가 완료되면 cmd 창을 킵니다. python 명령어를 입력하면 버전이 출력됩니다.설치한 버전이 잘 나오면 정상적으로 완료된 겁니다. 예시로 pinrt("hello") 해보면 hello가 정상출력됩니다. 파이썬 설치 매우 간단합니다~

Firebase 구글 로그인 연동하기 - (Flutter) 1. 사이트 접속https://firebase.google.com/ 2. 로그인 및 시작하기​3. 프로젝트 만들기프로젝트 만들기 클릭​프로젝트 이름 정하고 계속 클릭​계속 클릭​계정 선택 후 프로젝트 만들기 클릭Dault Account for Firebase​​프로젝트가 생성되면 아래처럼 화면이 나옵니다앱 등록을 해야 하는데 여기서는 안드로이드만 진행해 보겠습니다. ​​앱 정보 입력​Android 패키지 이름은 프로젝트 폴더에 android\app 폴더에 있는 build.gradle에서 확인하시면 됩니다.​디버그 서명 인증서 SHA-1은 선택사항이라서 안 했는데 뒤에서 구글 로그인 계정 연동하려면 필수로 해야 한다네요.AndroidStudio -..