brobro332.dev

본 포스팅에서는 멋쟁이사자처럼 백엔드 부트캠프 플러스 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..

문제주어진 수 N개 중에서 소수가 몇 개인지 찾아서 출력하는 프로그램을 작성하시오.예제 입력 141 3 5 7예제 출력 13제약조건✅ 첫 줄에 수의 개수 N이 주어진다. N은 100이하이다. 다음으로 N개의 수가 주어지는데 수는 1,000 이하의 자연수이다.✅ 주어진 수들 중 소수의 개수를 출력한다. 문제풀이public class Main { public static void main(String[] args) throws IOException { // 1. 변수 선언 및 초기화 int maxValue = 1_000; int[] primeArr = new int[maxValue + 1]; BufferedReader br = new BufferedRe..