단의 개발 블로그

동시편집 구현 방법OTOperational TransformationGoogle Docs, Wave, Ms office 입력한 순서에 따라 서버가 적절히 변형하여 전달하는 방식으로, 시간 순서를 고려하여 우선순위를 부여해서 앞에서 적용한 것과 다음 순위 변경사항을 보정함 동작모든 변경사항을 서버가 기록서버에 전부 전송변경사항을 순차적으로 병합사용자 화면에 출력 문제점서버 과부하 OT 구현 오픈소스SharedDBRustpadJot CRDTConflict-Free-Replicated Data TypesFigma, Redis, Riak, Workie, Apple Notes 현재 각광 받는 기술로, 문서를 편집하는 유저끼리 데이터를 교환하는 방식으로 사용함, 스트림 상의 각 문자에 고유한 ID를 부여하고, ..

웹 브라우저의 화면은 DOM이다. 브라우저의 엔진은 HTML를 해석하여 DOM 트리를 구성한다. HTML 구문은 웹 서버나 브라우저가 생성한다. 이때 웹 서버가 생성하는 것을 SSR, 브라우저가 생성하는 것을 CSR라고 부른다. SSRServer Side Rendering의 약자로, 서버에서 정적 파일을 렌더링 하는 것을 의미한다. SSG라는 개념이 종종 사용되기도 하는데 Static Site Generation으로 정적 화면만 제공할 때 사용하는 렌더링 방식을 의미한다. 장점초기 페이지 로딩 시간이 빠르다.검색엔진 최적화가 된다.보안이 좋다.실시간 데이터를 보여줄 수 있다단점서버 자원을 많이 사용한다.페이지 깜빡임이 발생한다CSRClient Side Rendering의 약자로, 클라이언트(브라우저)에..

💡 문제게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다."죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다.게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데, 이때..

💡 문제정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요.💡 제한 조건numbers의 길이는 2 이상 100 이하입니다.numbers의 모든 수는 0 이상 100 이하입니다.입출력 예입출력 예 #12 = 1 + 1 입니다. (1이 numbers에 두 개 있습니다.)3 = 2 + 1 입니다.4 = 1 + 3 입니다.5 = 1 + 4 = 2 + 3 입니다.6 = 2 + 4 입니다.7 = 3 + 4 입니다.따라서 [2,3,4,5,6,7] 을 return 해야 합니다.입출력 예 #22 = 0 + 2 입니다.5 = 5 + 0 입니다.7 = 0 + ..

JWTJSON Web Token의 약자로 인증을 위한 데이터 형식이다. JSON 형식으로 암호화된 문자열로 구성하여 데이터를 전송한다. 이 문자열은 서버와 클라이언트 간의 인증과 정보 전달에 사용된다. 즉, 클라이언트 - 서버 간 안전한 정보 전달을 위한 인증 권한 부여 메커니즘으로, 토큰 기반 인증 (Token-Based Authentication) 방식에 사용된다. 형식은 헤더, 페이로드, 서명으로 구성된다.JWT 구조빨간색이 헤더, 보라색이 페이로드, 하늘색이 서명이다. HeaderJWT 토큰의 정보를 담고 있는 메타데이터다.사용되는 알고리즘과 토큰의 타입을 정의한다.위 예시에서는 HS256 알고리즘과 JWT 타입으로 지정되어 있다.PayloadJWT 토큰에 실제 정보가 담긴 부분이다.사용자 정보를..

면접 볼 때 당황스러웠던 질문이 있었다. 면접관님이 사용자가 www.naver.com 입력했을 때 어떤 과정을 거치는지 말씀해주세요 라고 하셨다. 당연히 어버버 했고, 그냥 뭐라고 했는지도 잘 기억이 나지 않는다. 해당 질문은 SW 엔지니어 인터뷰에서 나오는 단골 질문이라고 한다. 이번 기회에 정리를 해야겠다.  사용자가 웹 브라우저에서(크롬, 엣지 등) https://www.naver.com을 요청한다.요청 주소 시작 점 부터 :// 이전까지를 프로토콜이라고 부른다. (프로토콜: 통신 규약)https는 HyperText Tranfer Protocol Secure의 약자로 보안을 사용하여 서버와 통신할 수 있는 프로토콜이다.전송 계층에서 (TLS)으로 보안된다. 이외에도 ftp://, mailto://,..

서버를 빌러 쓰는것을 의미한다. 웹 페이지를 만들었다면 웹페이지가 제공하는 html, js, css, 동영상 등등 정적 파일을 제공하는 공간(=서버)가 필요하다. 개인이 서버를 마련하고 24시간 동작하기에는 무리가 있다. 이런 공간을 빌려쓰는 것을 호스팅이라고 한다. 호스팅의 종류는 다음과 같다.웹 호스팅(공유 호스팅): 하나의 서버를 여러 사용자가 함께 사용하는 서비스로, 가장 보편적으로 사용하는 방법서버 호스팅: 서버 자체를 전체로 임대하여 단독으로 사용하는 서비스로, 대규모 트래픽이 있는 사이트나 비즈니스가 큰 경우 사용하는 방법클라우드: 가상의 서버를 임대하는 서비스로, 확장성과 유연성이 높다, 다양한 서비스가 존재하여 운영이 자유롭다.

FrontEnd(Nextjs)프론트는 작업중이다....BackEnd (SpringBoot)서버구조도메인 별로 패키지를 나눠서 그 안에서 controller, service, dto, entity를 나눌까 생각 했는데, 간단하게 만들 프로젝트고 실제 운영까지는 하지 않을 생각이기 때문에 기능별로만 나눴다. 여기선 패키지로 설명한다.aop : 유저가 백엔드로 요청한 정보를 서버로그에 기록한다. 나중에 어떤 장애가 발생할 경우 어떤 유저가 어떤 데이터로 요청했는지 추적하기 위해서 사용했다. 또 만약 나중에 부하가 많이 생기는 비즈니스 로직단에서 문제가 발생하면 실행 시간도 추가할 예정이다.config : 서버에 관한 전반적인 자바 빈으로 설정한 파일이 모아져 있는 곳이다. 시큐리티, 스웨거 등을 여기서 설정..

Modak (=Zoom or Discord)브라우저 기반 사용자 음성채팅 & 화상채팅 + 커뮤니티 서비스 기능리스트업user로그인(소셜로그인 - 구글, 카카오, 네이버, [애플], 자사 로그인)로그아웃로그인 유지개인정보 수정회원탈퇴main방 생성 (화상채팅 + 채팅)방 나가기방 참여자 강퇴하기방 초대 코드 보내기 (텍스트)참여자 목록 [온라인, 오프라인][글 확인 여부 - 카카오톡 1]유저가 참여중인 방 목록유저 친구 목록친구 추가친구 삭제sub게시판 기능 추가댓글 + 대댓글 파일첨부admin모든 기능 crud관리자 권한별 제한관리자 행동 로그 (관리자명, 아이피, 행동, 실행쿼리, 비고)개인정보 처리 방침, 이용약관 DB 저장 (변경 이력 고지의무)  TechReact - NextJSJava - Spr..

실제 서비스 되는 애플리케이션은 빌드 작업을 거쳐 배포된다. 불필요한 주석, 경고메세지, 주석을 제거해서 파일 크기를 최소화 하고, jsx문법이나 다른 최신 자바스크립트 문법이 원활하게 실행되도록 코드 트랜스 파일 작업도 가능하다. 이런 작업은 웹팩이라는 도구가 담당하는데, 별도의 설정을 하지 않을 경우 프로젝트에서 사용 중인 모든 자바스크립트 파일과 css 파일이 합쳐진다. CRA로 빌드할 경우 최소 두 개 이상의 자바스크립트 파일이 생성되는데, CRA의 기본 웹팩 설정에는 splitChunks라는 기능이 적용되어 modules에서 불러온 파일, 일정크기 이상의 파일, 여러 파일 간 공유된 파일을 자동으로 분리시켜 캐싱 효과를 누릴 수 있게 해준다. 빌드하기yarn build 명령어를 실행하면 다음과 ..