본문 바로가기

Dev Note23

Protocol Buffers 로 Java - NodeJs 통신시키기 왜 REST Api 에 Protocol Buffer 를 적용했는가? 얼마전 신규 오픈한 기능의 실시간 통신을 위해 구축해놓은 서버가 정상수치가 아니라는 인프라팀의 제보가 왔다. 정확히는 nginx 에서 무리가 왔기 때문에 소켓 서버를 타겟으로 들어오는 부분에서 문제가 있다는 추측이다. PM2 로그를 통해 본 서버로그에 아래와 같은 문구가 엄청나게 많이 찍히고 있고 파일이나 크기가 큰 리스트를 주고받는 경우도 많았기 때문에 실시간 서버에 들어오는 데이터의 크기를 의심하고 리퀘스트 파라미터를 처리하는 개선 작업을 진행해보려고 가닥을 잡았다. 어떻게 request entity 를 줄일 수 있나? 처음에는 빨리 해결하는 방법과 제대로 해결하는 방법 2가지의 안을 가지고 있었다. 회사의 상황상 기능 개발이 아닌 .. 2024. 2. 4.
효과적인 코드 리뷰를 향한 여정 (ft. aws codecommit, space) 현재 제가 몸담고있는 개발팀에서는 space라는 리뷰툴을 활용해 코드리뷰 진행 검토를 진행중입니다. space 라는 툴이 선택되기까지 정말 많은 과정이 있었고, 그럼에도 불구하고 아직 개선하고 정해야할 프로세스도 많습니다. 제가 저희 조직에 도입하기 위해 거쳐온 이 경험들이 얕은 경험에 불과할 수도 있겠지만, 아직 코드 리뷰를 정착하지 않은 팀이나 조직이 있다면 중간 공유가 인사이트가 될 수도 있을 것 같아 사용 후기를 공유합니다. 왜 space 를 쓰게 되었나 처음엔 flow task로 pull request 시작. 작년 이맘때쯤까지 저희 팀에서는 플로우 협업툴 업무 게시글을 활용한 pull request 를 진행했었습니다. 하지만 당시에는 아래와 같은 문제로 인해 자~연 스럽게 역사속으로 사라졌습니다.. 2023. 12. 24.
PostgreSQL 에서 Vacuum 이 필요한 이유 (MVCC, XID) 🧹 PostgreSQL을 사용한다면 Vacuum에 대해 반드시 잘 이해하고 적절하게 관리해야 합니다. 얼마전 운영하고있던 서비스에 Vacuum 을 통한 관리가 제대로 되지 않았던 이유로 DB부하가 심하게 와서 장애가 발생한 적이 있습니다. 이번 포스팅에서는 신경쓰지 않으면 서비스에 치명적일 수 있는 Vacuum 의 역할에 대해 자세히 알아보려고 합니다. Vacuum 의 첫 번째 역할, 공간확보! Vacuum의 사전적 의미는 "진공청소기를 이용한 청소" 입니다. UPDATE 와 DELETE 를 통해 변경 또는 삭제된 자료들이 차지 하고 있는 디스크 공간을 다시 사용하기 위해 불필요한 쓰레기 데이터들을 정리하고, 디스크 공간의 효율성을 높입니다. 왜 불필요한 쓰레기 데이터가 공간을 차지하는걸까요? 다중 버전.. 2023. 6. 4.
Intersection Observer 로 화면에 보이는 부분만 로딩하기 (feat. Lazy loading) 🖥️ 최근 회사에서 개발하던 기능 중 요소의 가시성에 따라 API 를 호출해야하는 작업이 있었습니다. 기존에는 페이지에 진입하는 순간 관련 API를 모두 호출하여 화면에 그려주는 방식으로 구현이 되어있었는데요, 해상도나 유저의 세팅 상태에 따라 보이지 않는 기능의 API까지 전부 호출하던 부분이 비효율적이라고 판단되어, 일반적으로는 이미지를 Lazy loading 하는데에 주로 쓰이는 Intersection Observer API 를 활용하여 서버로 호출하는 API 자체도 Lazy loading 을 시도해보았고, 관련 내용을 공유해보려고 합니다. Lazy loading 이란? Lazy loading 은 '지연 로딩', 즉 리소스를 식별하여 필요할 때만 로드하는 전략입니다. 웹이 발전함에 따라 사용자에게 .. 2023. 5. 21.
크롬 개발자도구 뜯어보기 Why? ✏️ 개발자 도구는 평소에 습관처럼 디버깅하는데에 쓰고 있지만, 이번에 회사에서 '프론트엔드 성능 최적화 가이드'라는 책으로 스터디를 진행하면서 생각보다 놓치고 있는 부분도 많고 더 좋은 기능도 많이 제공하고 있다는 것을 알게되어 포스팅을 해본다. 크롬 개발자 도구 크롬 브라우저에서 제공하는 웹 개발에 도움되는 다양한 툴입니다. 여는 방법 f12 ctrl + shift + i (command + option + i) 요소 검사 (하이라이트) Network 패널 현재 웹 페이지에서 발생하는 모든 네트워크 트래픽을 상세하게 알려줍니다. 어떤 리소스가 어느 시점에 로드되는지, 해당 리소스의 크기 등을 확인할 수 있습니다. Perfomance 패널 웹 페이지가 로드될 때, 실행되는 모든 작업을 보여줍니.. 2023. 4. 23.
JavaScript 에서는 함수형프로그래밍이 대세다? (함수형 vs 객체지향) Why? 💬 요즘엔 주로 javascript 를 활용하여 개발을 하고 공부를 하고 협업을 하다보니 같은 언어인데도 사람마다 정말 다양한 코드 스타일로 작업을 한다고 느낀다. 보통은 주로 활용하는 라이브러리나 프레임워크가 코드스타일에 영향을 많이 주는 것 같은데, 나의 회사의 경우 프레임워크 없이 프론트엔드 개발을 하고 있어 더욱 멤버들의 자유도가 높다. 그래서 문득 '어떤 이유와 의도로 지금의 방식으로 프로그래밍을 하고있는 것일까?' 라는 생각, '과연 그 방법은 내가 개발하고자 하는 서비스에 최적화되어있을까?' 라는 생각이 들어 함수형과 객체지향에 대해서 간단히 정리를 해 보았다. 그리고 동료들도 다들 어떤 이유로 본인의 스타일을 만들었고 유지하게 되었는지가 궁금해서 이야기를 나눠보았다. 1. 객체지향.. 2023. 4. 9.
2. 일렉트론의 프로세스 구조와 통신에 대해 알아보자. 이전 포스팅에서 일렉트론이 무엇인지에 대해 간략하게 알아보았습니다. 1. 데스크탑 애플리케이션 프레임워크, 일렉트론에 대해 알아보자. 시작하며 지금까지 일렉트론을 통해 pc앱 개발/빌드/유지보수를 해오면서 개인적으로 공부도 하고 정리도 하고 회사 내에서 간간이 세미나도 진행해 왔다. 하지만 돌아보면 A to Z의 글로 흐름 있 todayscoding.tistory.com 이번에는 일렉트론의 프로세스 구조가 어떻게 되어있는지, 프로세스 간 통신을 어떻게 하는지에 대해 좀 더 자세히 알아보겠습니다. 일렉트론에서 가장 중요한 개념은 ‘격리’ 와 ‘통신’이다. 프로세스 구조를 모른 채로 Electron을 활용해서 개발을 하다 보면같은 js로 짜인 코드 간의 호출인데도 '왜 될 거 같은데 안되지?', '값을 넘겼.. 2023. 3. 12.
1. 데스크탑 애플리케이션 프레임워크, 일렉트론에 대해 알아보자. 시작하며 지금까지 일렉트론을 통해 pc앱 개발/빌드/유지보수를 해오면서 개인적으로 공부도 하고 정리도 하고 회사 내에서 간간이 세미나도 진행해 왔다. 하지만 돌아보면 A to Z의 글로 흐름 있게 '잘' 남기지는 못한 것 같아 글로 남겨야 한다는 필요성을 느꼈고, 일렉트론에 대한 공부가 필요한 사람들이 참고하면 좋을만한 정보들이 내 개인 노션에만 잠들어있는 게 아쉬웠다. 앞으로 블로그에 쓰인 시리즈의 글을 통해 누군가가 아래의 정보들을 얻어갈 수 있도록 작성해 나가는 것이 목표다. 일렉트론이 무엇인지, 일렉트론의 프로세스 구조는 어떻게 생겼는지, 본인이 개발한 웹 서비스로 어떻게 pc 앱을 만들 수 있는지, 어떻게 인증서를 넣어 빌드를 하는지, 자동 배포 구조는 어떻게 만드는지 사실 일렉트론을 주제로 꾸.. 2023. 2. 26.
intellij 에서 git 으로 인식되지 않는 브랜치 해결 ( /.idea 폴더의 역할) intellij 사용중에 특정 레포에서만 몇몇 브랜치에서 git 으로 인식되지 않는 문제가 발생했다. 원인 자체는 간단하지만, 인텔리제이 사용자라면 협업중에 비슷한 경우가 생길 수 있는 부분이라 기록한다. 현상 일반적인 경우 git, commit ,history 등 intellij 에서 제공하는 탭들이 보여야 정상인데, 아래처럼 git 이 아닌 일반 프로젝트로 나오고 있었다. 특정 브랜치에서만 인텔리제이를 활용한 풀리퀘,커밋,깃 코드 분석과 히스토리를 전혀 볼 수가 없었지만 터미널을 통해 다른 브랜치로 체크아웃을 한 후엔 정상적으로 작동하고 있었다. 원인 원인은 인텔리제이를 사용하지 않는 다른 협업자가 불필요한 폴더를 삭제하는 과정중에 /.idea 폴더를 삭제한 뒤 push 를 한게 원인이었다. 위 문제.. 2022. 8. 8.
Oracle 과 PostgreSQL의 차이점 Oracle 과 PostgreSQL의 가장 큰 차이점은 2가지 정도로 나눌 수 있다. 1. MVCC 모델 구현 방식의 차이 MVCC란 다중 버전 동시성 제어(multiversion concurrency control, MCC, MVCC) 이다. 동시성 제어란 뭘까? 간단하게 말하면 만약 동시성 제어 없이 누군가가 데이터베이스를 읽는 동시에 다른 누군가가 기록을 하려고 한다면 사용자는 반쯤 기록되거나 일관성이 없는 데이터를 보게 될 가능성이 있다. 이렇게 동시성을 높이기 위해서는 '읽기 작업은 쓰기 작업을 블로킹 하지 않고, 쓰기 작업은 읽기 작업을 블로킹하지 않아야 한다'는 원칙을 지켜야 한다. 그 원칙을 지키기 위해 필요한게 MVCC 이다. - ORACLE : 이 MVCC를 구현하기 위해 UNDO 세그.. 2022. 1. 19.
스케줄링 알고리즘 기본 FIFO 스케줄링 말 그대로 First In First Out 배치처리 시스템과 비슷함 최단 작업 우선 (SJF) 스케줄링 Shortest Job First 가장 프로세스 실행시간이 짧은 프로세스부터 먼저 실행을 시키는 알고리즘 RealTime OS (RTOS) 응용프로그램 실시간 성능 보장을 목표로 하는 OS 저어엉확하게 프로그램 시작 / 완료 시간을 보장해야하는 공정스러운?곳에서 많이 쓰임. Hardware RTOS, Software RTOS General Purpose OS (GPOS) 프로세스 실행시간에 민감하지 않고, 일반적인 목적으로 사용되는 OS 우리가 쓰는 일반적인 운영체제가 여기에 속함. Windows, Linux 우선순위 기반 스케줄러 Priority-Based 스케줄러 정적 우선순위 .. 2021. 10. 6.
멀티 태스킹 vs 프로세싱 vs 프로그래밍 멀티 태스킹 단일 cpu 에서 여러 응용 프로그램을 동시에 실행하는 것처럼 보이게 하는 시스템 멀티 프로세싱 여러 cpu 에서 하나의 응용 프로그램을 병렬로 실행하게 해서, 실행속도를 높이는 기법 멀티 프로그래밍 최대한 cpu를 많이 활용하도록 하는 시스템이다. 즉, 시간대비 cpu 활용도를 높이기 위해 응용 프로그램을 짧은 시간 안에 실행완료가 가능하도록 하는것! 응용프로그램은 cpu를 온전히 쓰기보다는, 다른 작업을 중간에 필요로 하는 경우가 많기 때문. 2021. 10. 6.
일렉트론 커스텀 네비게이션바 [작업한 이유] 데스크탑 설치형 서비스를 일렉트론이라는 툴을 이용해서 개발하고 있다. 그리고 일렉트론은 기본적으로 제공하는 상단 바가 존재하지 않는다. 이전에 우리 서비스는 뒤로가기/앞으로가기가 따로 없이 레이어를 전환하는 방식으로 구현되어있었는데 이번 웹 리뉴얼에서 뒤로가기/앞으로가기가 생기면서 설치형에서도 해당 기능을 사용할 수 있도록 상단바의 일부 기능이 필요하게 되었다. 찾아보니 라이브러리를 이용하는 방식도 있지만 직접 아이콘으로 커스텀하여 기능을 적용하는 방식이 더 서비스에 녹아들기 좋을 것 같아 직접 기능을 넣는 방식으로 결정했다. - 뒤로가기 - 앞으로가기 - 새로고침 - 우클릭시 새로고침 / 강력새로고침 선택팝업 [작업방식] 이참에 일렉트론의 이벤트만 처리하는 파일도 분리해서 작업했고 이벤.. 2021. 8. 24.
조직도 쿼리 개선 [개선했던 이유] 데스크탑 미니모드에서만 사용하던 조직도를 웹에서도 오픈할 예정이어서 기존에 조직도 탐색 시 아래의 거슬렸던 문제들을 해결하고자 개선을 진행했었다. 1. 전문을 사용자 depth 만큼 여러 번 호출하는 점 조직도가 펼쳐진 상태에서는 나의 소속 상위부서 뿐만 아니라 소속상위부서 하위의 같은 depth 부서들도 함께 조회해야 하기 때문에 재조회가 필요하다. 이 과정을 이전의 방식은 (최상위 -> 내 소속 부서)까지 한 depth 한 depth씩 js에서 반복분으로 찾아들어가 쿼리를 호출하도록 개발되어있었다. 2. 속도가 오래 걸리는 점 그러다 보니 안 그래도 슬로 쿼리로 이뤄져 있던 api인 데다가 depth가 깊은 경우에는 상위부서 값만 다르게 넘기는 동일 api의 수많은 호출이 일어나고 .. 2021. 8. 23.
[JAVA] 변수(Variable), 타입, 형변환 1.1 변수란? 값을 저장할 수 있는 메모리상의 공간을 의미한다. 하나의 변수에는 단 하나의 값만을 저장할 수 있다. 그래서 값을 여러 번 저장하면 마지막에 저장한 값을 갖게 된다. 1.2 변수의 선언 변수가 선언되면 메모리에 변수의 타입에 맞는 크기의 저장공간이 확보되어, 값을 저장할 준비가 된다. 변수타입은 변수에 담을 값의 종류와 범위를 충분히 고려하여 결정해야 한다. 변수의 종류에 따라 변수의 초기화를 생략할 수 있는 경우도 있지만, 변수는 사용되기 전에 적절한 값으로 초기화 하는 것이 좋다. [참고] 지역변수는 사용되기 전에 초기화를 반드시 해야 하지만, 클래스변수와 인스턴스 변수는 초기화를 생략할 수 있다. 1.3 변수의 명명규칙 [필수규칙] 대소문자가 구분되며 길이제한이 없다. : True와.. 2021. 1. 3.
[JAVA] 난수생성 Math.random() vs Random 이전에 난수에 대한 개념과 Seed에 대한 내용을 알아보았다. 이번에는 실제로 JAVA에서 사용되는 대표적인 난수 생성 방법인 Random클래스와 Math 클래스의 random()메소드에 대해 알아보자. 두 가지의 차이중 종자값의 개념이 포함되므로 seed 종자값에 개념은 설명은 미리 이해하는 것이 좋다. 2020/10/22 - [🕵🏻‍♀️개발지식/이론] - 컴퓨터에서 생성하는 난수는 진짜 난수가 아니다? 컴퓨터에서 생성하는 난수는 진짜 난수가 아니다? 코드를 짜다보면 '난수'를 사용해야하는 경우가 많다. 습관적으로 Random클래스나 Math클래스의 random() 매소드를 쓰곤 했는데 정확한 차이를 모르고 썼는데, 알고리즘 공부를 하던 중 난수가 진짜 todayscoding.tistory.com 자바.. 2020. 10. 22.
컴퓨터에서 생성하는 난수는 진짜 난수가 아니다? 코드를 짜다보면 '난수'를 사용해야하는 경우가 많다. 습관적으로 Random클래스나 Math클래스의 random() 매소드를 쓰곤 했는데 정확한 차이를 모르고 썼는데, 알고리즘 공부를 하던 중 난수가 진짜 난수가 아니라는 글을 보고 이참에 컴퓨터가 난수를 생성하는 과정을 정확히 알고싶어졌다. 난수란? 난수(亂數)란 정의된 범위 내에서 무작위로 추출된 수를 일컫는다. 난수는 누구라도 그 다음에 나올 값을 확신할 수 없어야 한다. 하지만 컴퓨터 과학 분야에서 말하는 난수는 보통 결정론적인 방법으로 생성된 난수이다. 특정 입력이나 조건에 따라 무작위로 선택된 것처럼 보이는 난수 또는 난수열이 생성되며 그 생성 조건이나 입력이 같다면 그 결과값은 항상 같다. 진정한 의미에서의 난수는 아니지만 그 결과값이 충분히.. 2020. 10. 22.
정적 바인딩(Static binding) vs 동적 바인딩(Dynamic binding) 바인딩(binding)이란? 네이버 지식백과에서 찾아보면 바인딩은 '컴퓨터 프로그래밍에서 각종 값들이 확정되어 더 이상 변경할 수 없는 구속(bind) 상태가 되는 것' 으로 설명되어있다. 즉, 프로그래머가 ​코딩을 해서 컴파일을 하게 되면 각각의 코드가 메모리 어딘가에 저장되고, 함수를 호출하는 부분에는 그 함수가 저장된 메모리의 주소값이 저장되며 프로그래머가 값을 변경할 수 없는 상태가 된다. 여기서 함수를 호출하는 부분(호출부)에 함수가 위치한 메모리 번지(정의부)로 연결시킨 것을 바인딩이라고 한다! 정적바인딩(Static binding)이란? 실행 이전에 값이 확정되면 정적 바인딩이라고 한다. 컴파일 타임에 호출될 함수가 결정되는 것으로, 함수는 기본적으로 정적 바인딩된다. 컴파일러는 선언되어있는.. 2020. 10. 7.
객체 지향 프로그래밍을 파해쳐보자! 처음 객체에 대해 배웠을 때 '객체'에 대해 설명하기 위해 노력하는 글들을 수도없이 읽었고, 나도 그 글을 이해하고 내 입으로 설명해보기 위해 몇일간 끙끙 앓았던 기억이 있다...🤣 수도없이 '객체'를 쓰고 있지만 아직도 그게 뭐야? 라고 물어보면 선뜻 대답하기가 쉽지 않다. 뭔지도 모르고 쓰지도 못했던 그때와는 달리 다행(?)히도 지금은 뭔진 정확히 몰라도 아주 유용히 쓰고 있으나 머리속에는 난해한 무언가만 남아있는 찝찝함😂😥 객체 지향 프로그래밍이 뭔지 간단명료하게 정리해보자!🕵🏻‍♀️ 객체지향프로그래밍(OOP : Object Oriented Programming) 이전에는? 객체 지향 프로그래밍 이전의 프로그래밍 패러다임을 살펴보면, 중심이 컴퓨터에 있었다. 프로그램이 어떤 일을 하고나서, 그 다음.. 2020. 10. 5.
[JAVA] replace()와 replaceAll()의 차이_정규표현식 vs 문자열 본 포스팅 내용은 제가 이해한 방식으로 구현 및 작성하였습니다. 더 좋은 방식이 있다면 피드백 주시면 정말 감사하겠습니다!🙏🏻 데이터베이스에 /r/n로 표현되어있는 엔터를 로 바꿔 표현하던 중 문제가 생겼다.. 컨트롤러에 작성한 java코드는 아래와 같다. 1. replaceAll("\\r\\n", " ") 사용 -> 오류 survey.setSurveyIntro(survey.getSurveyIntro().replaceAll("\\r\\n", " ")); replaceAll을 사용하여 다시 setter로 넣어줬는데도 바뀌지 않는 것이다. replaceAll함수 사용이나 set과 get사용에 문제가 있나? 2. replaceAll("수고", "소이") 사용 -> 정상작동 survey.setSurveyIntr.. 2020. 9. 10.
input 태그속성 중 disabled와 readonly의 차이 input태그에 넣어있는 value를 servlet에서 가져오려고 아무리 시도해봐도 null만 들어가는 상황에 봉착했다.. 답답한 상황에서 알게 된 사실! disabled와 readonly의 차이가 value값의 사용가능여부에 있다는 것!!! disabled 와 readonly 모두 input 태그를 비활성화시켜서 사용자가 직접 값을 입력하지 못한다는 점에서는 동일하다. 하지만 disabled로 설정했을 경우에는 value 값을 가져오지 못하고, readonly 는 값을 가져올 수가 있다. 이 간단한 걸 몰라서 1시간 가까이 시간을 버렸지만.......😂 그 끝에는 결국 알게되었음에 감사하며 공부를 계속한다🕵🏻‍♀️ 2020. 7. 19.
[HTML기초] 1.텍스트관련태그 ⚾ 글자 관련 태그 : h1~h6 까지 표현 할 수 있으며 h1이 가장 크고 h6이 가장 작다. h1 태그입니다. h2 태그입니다. h3 태그입니다. h4 태그입니다. h5 태그입니다. h6 태그입니다. ⚾ 줄바꿈 태그 ⚾ 수평선+줄바꿈 태그 ⚾ 문단 구분 태그 문단영역을 나누는 태그로는 p태그와 pre태그가 있다. p태그는 문단영역을 나누는 태그이지만 한 개의 공백만 표시하여 줄 바꿈입력을 별도의 태그로 지정해주어야한다. pre 태그는 여러칸 띄우기 혹은 줄 바꿈등을 포함하여 입력한 내용 그대로를 표현하는 태그이다. 문단영역을 나누는 태그로는 p태그와 pre태그가 있다. p태그는 문단영역을 나누는 태그이지만 한 개의 공백만 표시하여 줄 바꿈입력을 별도의 태그로 지정해주어야한다. pre 태그는 여러칸 띄.. 2020. 5. 20.
[JAVA기초] 변수(Variable)의 개념과 명명규칙 🎃 변수란? 값을 저장할 수 있는 메모리상(RAM)의 공간을 의미한다. 하나의 변수에는 단 하나의 값만을 저장할 수 있다. 여러 개의 값을 저장할 수는 없기 때문에, 값을 여러 번 저장하면 마지막에 저장한 값만을 갖게 된다. 🎃 변수의 선언 메모리 공간에 데이터를 저장할 수 있는 공간을 할당하는 것을 말한다. 더 자세히는, stack에 공간을 만들어 놓는 것이다. 변수가 선언되면 메모리에 변수의 타입에 맞는 크기의 저장공간이 확보되어, 값을 저장할 준비가 된다. 변수 타입(자료형)은 변수에 담을 값의 종류와 범위를 충분히 고려하여 결정해야 한다. 변수의 종류에 따라 변수의 초기화를 생략할 수 있는 경우도 있지만, 변수는 사용되기 전에 적절한 값으로 초기화 하는 것이 좋다. 지역변수는 사용되기 전에 초기화.. 2020. 5. 19.
반응형

티스토리툴바