brobro332.dev

가비아로 OCI 인스턴스에 도메인 설정하기

OCI 서비스 내 Zone 메뉴에서 도메인 등록 및 관리 기능을 제공하지만, 프리티어 계정을 사용 중이라면 계정을 업그레이드해야 한다.업그레이드할 경우 사용한 만큼 결제하게끔 계정이 바뀌는데, 아직은 프로젝트 규모가 작아서 다른 방법을 찾아보기로 하였다. 도메인 구매 웹을 넘어 클라우드로. 가비아그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브www.gabia.com도메인 등록 서비스는 가비아 외에도 많지만 사용해 본 적이 있어서 시간을 아끼고자 재방문하였다. 구매 후 프로세스✅ DNS 관리툴 클릭 ✅ 도메인 행의 [설정] 버튼 클릭 ✅ [레코드 수정] 버튼 클릭 ✅ 레코드 추가 및 작성타입은 일반적인 경우 A로 지정하면 된다.A 타입은 서브 도메인을 지정할 수 있다.호스트는 서브 도메인을 지정하기 위..

본 포스팅에서는 멋쟁이사자처럼 백엔드 부트캠프 플러스 4기 10일 차에 배운 내용들을 정리하고자 한다. 학습 목표도메인 위임을 통한 스프링 의존성 제거Docker, Nginx, Docker-Compose, K8s 등 인프라 학습 과정10일 차├── 도메인 위임│ ├── 도메인 위임 시 이점이 무엇인지 학습│ └── 실습(Domain 위임, Port/Adaper 위임)├── Docker│ ├── 효용성, 이미지 / 컨테이너 개념, 구성 요소, 흐름 등 개념 학습│ ├── Dockerfile 작성법│ ├── 명령어 정리(상태 체크, 빌드, 실행, 삭제)│ ├── Docker Resource(Network, Volume)│ └── 실습(Dockerfile 실행, 도커 컨테이너에서 호스..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. CSS 문법을 그대로 사용하면서 결과물을 스타일링 된 컴포넌트 형태로 만들어 주는 오픈소스 라이브러리다.컴포넌트 개념을 사용하므로 리액트와 궁합이 잘 맞다. 다음 명령어를 통해 설치한다.npm install --save styled-components 기본적인 사용법Styled-Components는 태그드 템플릿 리터럴을 사용하여 구성 요소의 스타일을 지정한다.여기서 템플릿 리터럴은 자바스크립트에서 제공하는 문법 중 하나이고, 리터럴은 소스 코드의 고정된 값을 의미한다.템플릿 리터럴은 백틱을 사용하여 문자열을 작성하고 그 안에 대체 가능한 expression을 넣는 방법이다. 다음은 태그드 템플릿 리터럴을 사용한 예제이다.const name = ..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 컨텍스트컨텍스트는 기존의 props를 통해 리액트 컴포넌트들 사이에서 데이터를 전달하는 방식 대신 컴포넌트 트리를 통해 곧바로 컴포넌트에 전달하는 새로운 방식을 제공한다.기존 방식의 경우 하위 컴포넌트로 데이터를 전달하려면 트리를 타고 몇 번이든 내려가며 전달을 해야하지만, 컨텍스트를 사용한다면 데이터를 필요로 하는 컴포넌트에 곧바로 데이터를 전달할 수 있다.컨텍스트는 언제 사용해야 할까? 여러 컴포넌트에서 자주 필요로 하는 데이터의 경우 사용자의 로그인 여부, 로그인 정보, UI 테마, 현재 선택된 언어 등이 있다.다음은 props를 이용하여 기존 방식으로 데이터를 전송하는 예제이다.function App(props) { return ;}fun..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 합성여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것을 말한다.가령 컴포넌트 A와 컴포넌트 B를 사용해 하나의 페이지를 만들었다고 하면 합성을 사용했다고 볼 수 있다.아무렇게나 조합하는 것이 아니라 여러 개의 컴포넌트를 어떻게 조합할 것인가에 대한 합성 사용 기법이 존재한다. Containment하위 컴포넌트를 포함하는 형태의 합성 방법이다.사이드바나 다이얼로그와 같은 박스 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다.예를 들어 두 쇼핑몰 사이트에서 같은 사이드바 컴포넌트를 사용한다고 가정해 보자.당연히 각 쇼핑몰의 사이드바에 들어갈 메뉴의 개수가 상이할 수 있으므로 하위 컴포넌트를 미리 예측할 수 없다.이런 경우에는 pro..

서버 원격 접속우선 라즈베리파이 서버에 접속한다.IP를 모를 경우 공유기 사이트에 접속하여 확인하면 된다. JDK 설치# 패키지 갱신sudo apt updatesudo apt install -y wget gnupg software-properties-common# 최신 OpenJDK 버전 갱신sudo add-apt-repository ppa:openjdk-r/ppasudo apt update# JDK 설치sudo apt install -y openjdk-21-jdk# 버전 확인java -version참고로 라즈베리파이는 디스크로 SD 카드를 사용하는데, 읽기 / 쓰기 작업이 많아지면 SD카드의 수명이 줄어든다고 한다.외장하드가 읽기 / 쓰기 작업에 더 강하기 때문에 외장하드를 연결해서 쓰는게 더 좋다고 ..

레디스는 값을 처리하는 두 가지 방식이 있다✅ 문자열 방식"user:test@example.com" => "{\"email\":\"test@example.com\", \"name\":\"홍길동\", \"service\":\"helpdesk\"}"값을 하나의 문자열(JSON 또는 직렬화된 객체)로 처리한다.단순하고 빠르다.한 번에 저장하고 조회를 하는 것이 가능하다.하지만 내부 필드별 접근을 하려면 파싱 처리를 추가적으로 해야 함정렬, 조건별 필터링 어려움 ✅ 해시 방식HMSET user:test@example.com   email       test@example.com   name        홍길동   service     helpdesk필드 단위로 접근이 가능하다.그렇기 때문에 특정 필드 기준으로 ..

웹소켓 연결 및 메시지를 전송해서 MongoDB에 데이터를 등록해보려고 한다.클라이언트 앱이 아직 준비가 안 돼서 다른 방법으로 테스트해볼 것이다.  WebSocket Debug Tool jiangxy.github.io포스트맨에서는 STOMP 서브 프로토콜을 지원하지 않는다.위의 페이지에 접속하여 테스트해보자.  설정 파일/** * 엔드포인트 설정 * @param registry */@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {    registry.addEndpoint("/ws")            .setAllowedOriginPatterns("*");            .withSockJS();} 컨트롤..

💡 문제 상황서로 다른 두 서비스 A, B의 데이터베이스에는 유사한 메타를 가진 테이블이 있음.사용자에게 통합검색 서비스를 제공하는 목적으로 두 테이블의 데이터를 합쳐 보여 달라는 요구사항이 발생함. ✅ 조건데이터량이 방대하여 페이징이 필요함. 또한 사용자가 검색 조건을 입력하거나, 정렬 기준을 선택할 수 있음.사용자의 화면에서 특정 버튼을 누르면 A 테이블엔 B 테이블의 ID, DB 구분(A/B)을 포함한 행 데이터가 추가됨.단 ID 외의 다른 정보는 B 테이블에만 존재함  시도 - 애플리케이션 차원 데이터 병합서버단에서 A 테이블의 ID, DB 구분을 전체 조회DB 구분별로 ID를 나눠 구분별 리스트 변수에 저장구분별 리스트 변수를 인자로 하여 각 DB에 IN 조회 수행 및 조회 조건 포함조회된 데..

서버 쪽 핸들러에 문제가 있는 건가 했는데, 결론적으로는 클라이언트에서 웹소켓 연결 요청할 때 전달되는 쿼리스트링에 인코딩 되지 않은 특수문자가 포함되어 있던 것이 원인이었다. Websocket-STOMP & SockJS 코드 일부분✅ 클라이언트 코드const socket = new SockJS('http://localhost:8083/ws?token=' + username); ✅ 서버 코드@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {    registry.addEndpoint("/ws")            .setAllowedOriginPatterns("*")            .setHandshakeHan..