본문 바로가기

개발(Development)/Etc(기타)21

[VS Code] 중첩된 서브 폴더가 1개인 경우, 안 펼쳐지는 현상 해결 # VS Code에서 서브 폴더 1개 일 때, 안 펼쳐지는 현상 Visual Studio Code에서 디렉터리 구조상, 부모 폴더의 자식 폴더가 단 1개만 있을 경우, 아래와 같이 서브 폴더가 펼쳐지지 않고 상위폴더/하위폴더 상태로 표시될 수 있다. 별거 아닐 수 있지만, 디렉터리 구조 파악이 한 눈에 안 들어오고, 폴더를 잘못 선택하게 될 수도 있다. # 해결 방법 1. Settings 진입 2. Compact Folders 검색 3. Compact Folders 의 체크 해제 완벽하게 해결 되었다. 이제 서브 폴더가 1개만 있어도, 모든 디렉토리가 펼쳐져서 노출되는 것이 디폴트가 된다. 2023. 5. 2.
[AWS|GCP EC2] React+Next.js HTTPS 도메인 적용 방법 (Nginx 리버스프록시 연결 + snapd SSL 인증서 자동 갱신) # AWS | GCP : EC2에서 React+Next.js 서버 https 적용방법 AWS나 EC2 인스턴스에서 Next.js 기반의 React 프로젝트를 구동하고, SSL인증서를 설치(+자동갱신)하여 HTTPS로 연결하는 방법을 정리한다. 이 글은 Nginx 리버스 프록시와 Certbot을 통한 Let's Ecrypt 인증서를 사용한다. # 작업 순서 및 내용 순서 작업 내용 1 도메인 AWS|GCP IP 연결 설정 2 Next.js 배포용 설정 추가(+GitHub 업로드) 3 EC2 접속 및 Node.js 설치 4 GitHub에서 소스코드 Clone 해오기 5 npm 패키지 설치 6 .env 설정파일 생성 7 Next.js프론트 서버 빌드 및 구동 8 Nginx 설치/설정/구동 9 certbot-a.. 2022. 9. 23.
스마트폰 - 로컬 개발 서버(localhost) 접속 방법 # 스마트폰에서 로컬호스트 접속 방법 실제 스마트폰에서 화면을 확인해야할 경우, 내 컴퓨터에서 구동 중인 로컬서버에 스마트폰으로 접속하여 테스트해볼 수 있다. 서버 컴퓨터와 스마트폰이 동일한 Wi-Fi 에 접속한 상태에서 아래의 경로로 접속하면 된다. - http://내컴퓨터ip주소:port번호 맥북을 기준으로 아래와 같이 내 컴퓨터의 ip주소를 확인할 수 있다. 1. 시스템 환경 설정 2. 네트워크 3. ip 주소 확인 만약 localhost:3000 으로 서버가 구동되었다면, 스마트폰에서 http://192.168.219.171:3000 등으로 접속해주면 된다. 끝! 2022. 9. 22.
[VS Code] Enter 개행 다음줄 들여쓰기 간격(Indent) 문제 조정 방법 Visual Studio Code 에서 Enter를 치고 다음 행으로 내려가면 앞에 특정 간격(Indent)으로 들여쓰기 된다. 이 때 간혹 아래의 2가지 문제가 발생하는 경우가 있다. # VS-Code 들여쓰기 간격 문제 ▶ 1번째 문제: Indent가 사라진다. - 엔터를 치면 간격이 생기는데, - 방향키로 커서를 위로 올리면 간격이 사라진다. ▶ 2번째 문제: indent 간격이 안 맞는다. - 엔터를 치면 간격이 생기는데, - 설정한 값과 불일치하는 다른 탭 간격이 적용된다. * 탭 간격 설정은 Preference>Setting의 Editor: Tab Size, 혹은 prettier 사용시 printWidth 등으로 할 수 있다. 이런 사소한 문제가 코딩의 생산성과 효율성에 영향을 미칠 수 있으므.. 2022. 8. 21.
[VS Code] .git 등 숨김 파일/폴더 표시 방법 # Visual Studio Code 에디터에서 .git 등 숨김 파일/폴더 표시 방법 VS-Code 에서 .git 등의 숨김 폴더/파일을 표시하는 방법을 정리한다. 1. 설정 화면 진입 - Settings 항목을 클릭한다. 2. "exclude" 검색 - Files:Exclude 항목에 **/.git 등 숨김 폴더/파일들이 설정되어 있다. 3. 표시하고 싶은 숨김항목을 Files: Exclude 에서 제거 - 마우스를 올리면 나타나는 X버튼을 클릭하여 숨김항목을 제거한다. * 연필 모양 아이콘을 클릭하며 편집 가능하다. * Add Pattern 버튼을 클릭하여 추가도 가능하다. 2022. 8. 19.
[AWS] EC2 Node.js, Mysql 설치 및 세팅 방법 # AWS EC2 에서 Node.js 와 MySQL 을 설치, 세팅하는 방법 EC2(Elastic Compute Cloud)에서 1) 인스턴스(컴퓨터 1대)를 생성하고, 2) SSH 접속하여, 3) node.js 와 MySQL을 세팅하는 방법을 정리한다. 1. EC2 생성 - 리전 : 화면 우상단에서 리전을 "서울" 등으로 선택하고 시작 - 인스턴스 시작 : EC2 서비스 화면에서 "인스턴스 시작" - 이름 입력: 원하는 이름을 입력. - OS 이미지 선택 : 원하는 OS를 골라준다. (이 글은 리눅스 우분투 기준이다) - 방화벽(보안그룹) : ssh 22포트 체크 확인. (SSH 접속 용도) - 필요에 따라 http 80포트, https 443 포트를 추가해둔다. (웹서버 접속 용도) - 키페어: SS.. 2022. 7. 4.
GCP(구글클라우드플랫폼) SSH 접속 불가 문제 해결 방법: 디스크 크기 설정 등 GCP(Google Cloud Platform) 에서 Compute Engine을 사용하던 중 SSH 접속 불가 현상이 나타났다. "연결할 수 없습니다. 다시 시도 중(2/3)" 멘트만 수십번... 팝업창에서 "시리얼 콘솔 출력"을 클릭해보니, 아래와 같은 로그를 찾을 수 있었다. ERROR Exception calling the response handler. [Errno 28] No space left on device.#012Traceback 팝업창에서 "도움말 문서" 를 클릭했더니, 아래의 도움말로 이동한다. https://cloud.google.com/compute/docs/ssh-in-browser#couldnotconnecterror # 원인 인스턴스의 부팅 디스크에 여유 공간이 부족합니다... 2022. 1. 31.
[GCP] Compute Engine 인스턴스 중지/삭제 방법 GCP(Google Clound Platform)에서 Compute Engine의 인스턴스를 중단하는 방법을 정리한다. # 인스턴스 정지, 중지, 삭제 차이 인스턴스는 정지, 중지, 삭제가 가능하다. 1. 정지는 서비스를 잠깐 멈출뿐 인스턴스 및 디스크가 모두 유지 되므로 요금이 부과 된다. 2. 중지는 CPU, GPU 등은 멈추지만, 디스크 등은 유지되므로 해당 요금이 부과되는 것 같다. 3. 삭제는 인스턴스, 디스크가 완전히 제거되어 요금이 부과 되지 않는다. # 인스턴스 중지/삭제 방법 ① 가상머신 > VM인스턴스 중지/삭제할 인스턴스 이름을 클릭한다. ② 중지 상단의 "중지"를 클릭한다. ③ 중지 팝업 팝업이 뜨면 "중지"를 클릭해준다. ④ 삭제 중지가 완료되면, 삭제를 클릭하자. ⑤ 삭제 팝업 .. 2022. 1. 29.
[GCP] Compute Engine 인스턴스 백업 방법 (스냅샷 생성 및 적용) 구글 클라우드 플랫폼 Compute Engine에서 기존 인스턴스의 스냅샷(백업)을 만들고 새 인스턴스에 적용하는 방법을 정리한다. 너무나 쉽고 빠르다. 1. 스냅샷 생성 방법 기존 인스턴스를 현재 시점 기준으로 백업한다. ① Compute Engine > 스토리지 > 스냅샷 ② 스냅샷 만들기 화면이나 UI는 변경될 수 있다. ③ 소스디스크 선택 이름과 설명 등을 입력 후, 소스 디스크 항목에서 백업하고 싶은 인스턴스를 선택한다. ④ 리전 선택 스냅샷을 저장하면 약간의 디스크 및 네트워크 비용이 발생하는듯 하다. 멀티리전이든, 리전이든, "소스 디스크와 같은 위치"로 설정해야 비용이 최소화 되는듯 하다. 리전별 스토리지 비용은 아래 링크를 참조하자! https://cloud.google.com/compu.. 2022. 1. 28.