본문 바로가기

👨‍💻 프로그래밍 137

특정 거리 범위 내 위도/경도 계산하기 (의외로 어려움) 특정 거리 범위 내 위도/경도 계산하기 (의외로 어려움) 해야 하는 것현재 위치를 기준으로 특정 거리 내의 위도/경도 범위를 계산 Java의 Method Signature로 따지면 아래와 같습니다.public double[] getLatitudeRange(double latitude, int radiusInMeters) {}public double[] getLongitudeRange(double latitude, double longitude, int radiusInMeters) {}우선 위도 / 경도에 대해 알아보자우선, 위도 / 경도는 단순히 지구의 x / y 좌표가 아닙니다. 위도 / 경도는 각도입니다. 지구를 선으로 나누고, 그 선을 기준으로 몇 도 떨어져 있는지를 측정합니다.  위도는 적도에서 몇 도 떨어져 있느냐를 측정합니다.  적도는 지구의 자전축.. 2023. 5. 27.
CSS를 조금 더 우아하게 쓰기 위한 최소한의 SASS CSS를 조금 더 우아하게 쓰기 위한 최소한의 SASS SasS, 그게 우리 프로젝트에 도움이 됩니까? 사실, 간단한 프로젝트는 굳이 SaaS를 쓸 필요는 없다고 생각합니다. Bootstrap, Tailwind 같은 CSS Library를 쓰는게 오히려 디자인적으로도 개발적으로도 편리한거 같아요. 하지만! 조금만 디자인을 신경쓰기 시작해도 필연적으로 CSS를 사용해야 하고 CSS를 사용하는건 (개인적으로 느끼기에) 상당히 불편하고 암걸리는 경험입니다. 이런 CSS를 개선시켜 주는게 SasS입니다. 도움이 되는 유용한 Sass 기능 변수 Nesting Mixins 상속 (Inheritance) Partials Operators if-else Sass를 React에서 사용하기 위해서는? Sass는 브라우저가 이해할 수 없는 파일이기 때문에 보통의 CSS로 변환시.. 2023. 5. 26.
Spring Security에서 SecurityContext에 내가 원하는 정보 추가하기 Spring Security에서 SecurityContext에 내가 원하는 정보 추가하기 문제 상황일반적으로 Spring Security를 사용하면 현재 요청 유저의 로그인 정보를 SecurityContext에 추가합니다. 그리고 유저 정보가 필요할 때마다 SecurityContext에 접근해서 유저 정보를 가져옵니다.유저 정보는 Authentication이라는 interface를 구현한 객체를 저장해 놓을 수 있습니다.public interface Authentication extends Principal, Serializable { Collection getAuthorities(); Object getCredentials(); Object getDetails(); Object getPrincipal(); boolean isAuthenticated(); vo.. 2023. 5. 23.
같은 색인데 왜 다르게 보일까? 컴퓨터가 색을 나타내는 방법 같은 색인데 왜 다르게 보일까? 컴퓨터가 색을 나타내는 방법 색깔이 다르게 보인다...모니터에 따라, 어떤 OS를 쓰고 있느냐에 따라 같은 색이 조금 다르게 보인다고 느끼지 않으세요? 저는 어릴 때 유독 네이버의 로고가 어떤 컴퓨터를 쓰느냐에 따라 다르게 보인 기억이 있습니다. 왜 같은 색인데 컴퓨터마다 색깔이 다르게 보일까요? 색 공간 (Color Space)모니터는 결국 사람의 눈이 볼 수 있는 색깔을 재현합니다. 하지만 문제는 현실 세상은 연속적인데, 컴퓨터는 이산적이라는 겁니다. 쉽게 말하면 우리 눈이 볼 수 있는 색 범위는 무한에 가까운데, 컴퓨터는 결국 한정된 색상을 선택해야 한다는 겁니다. 여기서 컴퓨터가 선택한 색 범위를 색 공간 (Color Space)라고 합니다.아래 그림이 색 공간을 나타내는 유명한 그림입니다. 형형 색색 있는 배경이 인간이 볼.. 2023. 5. 21.
🔥 Hot Ranking 알고리즘, Spring Batch로 구현하기 (feat. Strategy 패턴) 🔥 Hot Ranking 알고리즘, Spring Batch로 구현하기 (feat. Strategy 패턴) Hot Ranking 알고리즘이란?인기있는 것 (Hot한 것)에 순위(Ranking)을 매기는 알고리즘 실시간 검색어, 커뮤니티의 인기 게시글, 화제가 되고 있는 뉴스 등 무언가에 특정한 기준으로 순위를 매기고 싶을 때 쓰는 알고리즘을 Hot Ranking 알고리즘이라고 부릅니다. 보통은 공개되어 있지 않고, 다양한 데이터를 바탕으로 계속 개선합니다.책잇아웃(포트폴리오)을 만드는 도중, 커뮤니티 기능을 만들게 됐는데 게시글을 인기순으로 보여 주고 싶어 Hot Ranking 알고리즘을 고안해 봤습니다.나만의 Hot Ranking 알고리즘우선, 커뮤니티 부분의 DB 구조만 잠깐 보여 드리자면 아래같이 되어 있습니다.즉, 게시글을 평가할 때 게시글 자체, 게시글의 좋아요/싫어요, 댓글, 댓글의 좋아요 싫어요 .. 2023. 5. 18.
깃허브 코파일럿 (Github Copilot) 1달 사용 후기 깃허브 코파일럿 (Github Copilot) 1달 사용 후기 소개최근 끝없이 화제가 되고 있는 ChatGPT 보다 전에, Github Copilot이라는 IDE에서 코딩을 도와주는 프로그램이 있습니다. GitHub Copilot · Your AI pair programmerGitHub Copilot works alongside you directly in your editor, suggesting whole lines or entire functions for you.github.com ChatGPT는 직접 내가 물어봐야 하지만, Github Copilot은 프로젝트 내에서 내 코드를 학습하고 코드를 칠 때 아래와 같이 자동으로 제안해 줍니다. 여기서 Tab 한 번만 누르면 바로 제안된 코드를 사용할 수 있습니다.최대한 객관적으로, 현재 상황 기준프로그래머로써 이.. 2023. 5. 17.
AntMatcher 문법 알아보기 (Ant Path Pattern) AntMatcher 문법 알아보기 (Ant Path Pattern) Ant Path Pattern이 뭐야?Ant Path Pattern, AntMatcher은 URL 패턴을 묘사하는 간단한 언어입니다. Apache Ant라는 Gradle, Maven 같은 Build Tool에서 유래됐습니다.우리가 웹사이트는 접속할 때의 주소를 보면 https://example.com/test와 같은 형식으로 돼 있습니다. 이때 특정 비즈니스 로직을 /test로 시작하는 모든 곳에 적용하고 싶다면 어떨까요?/test/5/test/ant/test/123등등... 이를 위해서는 /test로 시작하는 URL을 묘사할 방법이 필요합니다. 그 방법 중 1개가 바로 Ant Path Pattern입니다.쓰이는 곳🐜 Spring Web안티 패턴이긴 하지만, Spring Web에서도 AntMatcher.. 2023. 5. 16.
S3, AWS SDK 사용해서 Spring Boot로 이미지 업로드 기능 구현하기 S3, AWS SDK 사용해서 Spring Boot로 이미지 업로드 기능 구현하기 SDK란?SDK는 특정 용도의 소프트웨어를 개발하기 위해 유용한 것들을 (도구, 라이브러리, 문서, 예시 코드, API) 모아 놓은 것입니다.예를 들어 Android SDK는 안드로이드 앱을 만드는데 필요한 각종 라이브러리나 도구들을 모아 놨고, iOS SDK는 마찬가지로 iOS 앱을 개발하는데 필요한 각종 라이브러리와 도구들을 모아 놨습니다. 여기서 AWS SDK는 AWS와 상호작용 하기 위한 API를 제공해서 함수 호출하듯이 사용할 수 있게 해 줍니다.꼭 AWS SDK를 써서 구현해야 할까?사실 굳이 SDK를 꼭 쓸 필요는 없습니다. 결국 AWS SDK도 내부에서는 HTTP API를 호출하고 비즈니스 로직을 실행하는 거뿐이니, 대부분의 경우 SDK를 사용하지 않고 직접 구현하는 게 더 이해하기 쉽고 .. 2023. 5. 11.
JPA 아키텍처(Architecture) 간단하게 이해하기 JPA 아키텍처(Architecture) 간단하게 이해하기 JPA와 실제 구현체의 차이JPA는 Java 진영에서 ORM을 지원하기 위한 스펙입니다. 즉, 실제 구현체는 따로 있고 JPA는 interface와 그 interface를 사용하는 방법을 제공할 뿐입니다. 그래서 실제로 ORM이 어떻게 이루어지는지 보려면 Hibernate 같은 구현체를 봐야 합니다.여기서 JPA 아키텍처는, 이 JPA의 여러 구성 요소들과 이 구성 요소들이 어떻게 상호작용 하는지에 관한 내용입니다.JPA Architecture의 큰 그림우선 우리가 @Entity를 붙여서 JPA로 관리할 객체를 만들면 이 객체는 이제 JPA가 관리합니다. 정확히 어떻게 관리할까요?EntityManager라는 객체를 보면 답이 나옵니다. 이 객체를 보면 JPA Entity의 생명 주기를 바꿀 수 있는 me.. 2023. 5. 10.
React-chart-js에서 처음 로딩할 때 Tooltip 보이게 하기 React-chart-js에서 처음 로딩할 때 Tooltip 보이게 하기 해야 하는 것Chart.js라는 자바스크립트로 여러 그래프를 만들 때 자주 쓰는 라이브러리가 있습니다. Chart.jsSimple yet flexible JavaScript charting library for the modern webwww.chartjs.org 이걸 React에서 쉽게 사용할 수 있게 만든 게 바로 React Chart JS입니다. 아무튼, 이 Chat.js에는 다양한 그래프들이 있는데요. 그중에 Line Graph는 마우스를 Hover 하면 현재 값을 작게 보여주는 기능이 있습니다. 이걸 Tooltip이라고 합니다.Chart.js를 써서 개발하던 도중 처음 페이지를 진입했을 때 가장 높은 값에 Tooltip이 보인 상태로 로딩되면 좋을 거 같아 해당 기능이 있는지 찾아봤는데, 아쉽게.. 2023. 5. 5.
안 하느니 못 한 "확장성을 고려한 설계" 안 하느니 못 한 "확장성을 고려한 설계" 확정성을 고려한 설계, 왜 중요할까?이력서의 단골 멘트기도 하고, 기술과 관련된 대화를 할 때 단골처럼 나오는 말이 확장성을 고려한 설계입니다. 이렇게 자주 나오니 당연히 중요한 역량입니다. 확장성을 고려한 설계가 대체 무엇일까요?사실 굉장히 있어 보이는 말이긴 하지만 간단합니다. 새로운 기능이 추가돼야 할 때 빨리 추가될 수 있게 코드를 짜라는 말입니다. 소프트웨어는 정말 빨리 바뀝니다. 당장 지금 쓰고 있는 많은 기술들이 10년 전에는 없었습니다. 유튜브나 넷플릭스로 동영상을 스트리밍 하는 건 상상도 못 했고, 세세한 기술 스택으로만 봐도 당장 React가 2013년에 나왔으니 이제 겨우 10년이 됐습니다.이런 새로운 기능들과 요구사항이 미친듯이 쏟아지는 상황에서 작은 기능 추가에 몇 년이 걸린다면 .. 2023. 5. 4.
Spring Cloud Sleuth와 Zipkin으로 로그 수집하고 Latency 분석하기 Spring Cloud Sleuth와 Zipkin으로 로그 수집하고 Latency 분석하기 🚨 주의 사항: Deprecation 🚨Spring Cloud Sleuth는 Spring Cloud 2022 버전부터 Deprecated 됐습니다. 이제 Spring Cloud Sleuth의 역할은 Micrometer가 하도록 통합 됐습니다.MSA 환경에서 logging의 어려움MSA 환경에서는 1개의 요청이 여러 서버를 거쳐서 일어납니다. 당연히 문제가 생기면 여러 서버를 봐야 할 수 있습니다. 이런 상황에서 이 모든 요청을 묶을 수 있는 값이 없으면 Log를 열심히 남기더라도 추적하기가 굉장히 어려워집니다. 그래서 이 요청들을 1개로 묶어 Log를 남기고, 남겨진 Log를 예쁘게 보여줄 수 있으면 굉장히 유용합니다.Spring Cloud Sleuth와 Zipkin의 역할Spring Cloud Sl.. 2023. 5. 3.
Spring Cloud Config로 Config 서버 구성하기 Spring Cloud Config로 Config 서버 구성하기 Spring Cloud Cloud란?Spring에서는 흔히 설정과 관련된 정보를 application.properties나 application.yml에서 관리합니다.설정에는 API Secret이나 암호키 같은 민감한 정보가 있을 수 있기 때문에 보통 환경변수나 jar 실행 시의 argument로 이런 값을 받게 해서 유출을 방지합니다.하지만 이런 방식은 같은 instance 여러개가 다른 시간에 배포되는 MSA 같은 환경에서는 관리가 너무 어려워 비현실적입니다. 이를 해결하기 위한게 Spring Cloud Config입니다.Spring Cloud Config를 쓰면...Backend(Git, Vault 등)에서 설정 파일들을 버전 관리 가능instance의 재시작 없이 주기적으로 새로운 설정으로 업데이.. 2023. 5. 2.
Kotlin의 꼬리재귀(tailrec) 알아보기 Kotlin의 꼬리재귀(tailrec) 알아보기 꼬리 재귀 함수란? (Tail Recursive Function)재귀 함수인데 마지막 동작이 재귀 호출인 재귀 함수 재귀 함수는 자기 자신을 호출하는 함수를 말합니다. 가장 유명한 예로 피보나치 수열을 만든 재귀 함수가 있습니다.fun fibonacci(n: Int): Long { return if (n 잘 보시면 이 함수 안에서 또 다시 함수를 호출합니다. (fibonaccci(n - 1))꼬리 재귀 함수는 재귀 함수의 일종입니다. 재귀 함수를 호출하는 모든 곳에서 재귀 함수 호출 외에 아무런 동작도 안 하면 꼬리 재귀 함수입니다.예를 들어 팩토리얼 (!)을 계산하는 재귀 함수를 보겠습니다.tailrec fun factorial(n: Int, acc: Long = 1): Long { retu.. 2023. 5. 1.
느린 검색 속도 최적화하기 (공공 API, 웹 크롤링의 병목 현상) 느린 검색 속도 최적화하기 (공공 API, 웹 크롤링의 병목 현상) 열심히 만들고 있는 책과 관련된 사이트에 책을 검색할 수 있는 기능을 넣었습니다. (booksitout.com에서 사용해 볼 수 있습니다)평소 책을 많이 읽는 편이라 도서관, 구독 서비스, 중고책 등을 한 번에 검색하면 편리하겠다 해서 넣었고, 좋은 아이디어라 생각했습니다.하지만 문제가 있었습니다. 느려도 너무 느리다는 것입니다. 아래는 Zipkin을 사용해서 검색 속도를 측정한 것인데, 최고 9초가 걸립니다.  검색 속도를 최적화 하기 위해 제가 헤매고 실수하며 내린 결정들과 그 근거들을 소개해 보겠습니다.Spring Webflux, Kotlin Coroutine으로 Refactoring가장 먼저 비동기적으로 요청하도록 개선했습니다.사용자가 거의 없으니 영향이 크지는 않겠지만, 전체를 받아오는데는 오래.. 2023. 4. 30.
통계를 처리하기 위한 Table을 만드는 설계는 바람직할까? 통계를 처리하기 위한 Table을 만드는 설계는 바람직할까? 통계용 Table을 만든 이유제가 만들고 있는 사이트 책잇아웃에는 1년간의 독서내역 통계를 보여주는 기능이 있습니다.통계는 사이트를 들어갈 때 마다 보이는데, 들어갈 때 마다 1년간의 모든 독서 활동을 SELECT 해서 계산해서 보여주면 너무 비효율적이라 생각해 보여주는 통계를 독서활동을 INSERT 할 때 마다 갱신해서 그 통계만 보여주면 좋을거라 생각해 통계용 Table을 만들었습니다.통계용 Talbe이 재앙이 된 이유우선, SELECT가 INSERT/UPDATE 보다 많은것 자체는 사실입니다. 하지만 INSERT/UPDATE가 일어 날 때 마다 코드 레벨에서 Transaction으로 통계 Table을 갱신해 줘야 하는건 상당한 부담입니다.1. 코드가 쓸데없이 복잡해집니다. 통계용 Table의 역할은.. 2023. 4. 28.
MSA (마이크로서비스)에서 환경에서 JWT 기반 보안 구축하기 MSA (마이크로서비스)에서 환경에서 JWT 기반 보안 구축하기 JWT는 가장 많이 사용되는 보안 방식 중에 하나입니다. 요청을 할 때 (보통 HTTP Authorization Header에) JWT Token을 보내면, 서버가 JWT Token을 파싱하고, 암호 키로 유효한 JWT Token인지 확인합니다. 서버가 1개일 때는 이 과정이 비교적 간단합니다. JWT Token을 검증하는 방법은 복잡한 수학적 알고리즘이 사용되지만 어차피 개발자는 라이브러리를 사용하니 이 과정에 거의 신경 쓰지 않습니다.하지만 만약 서버가 여러대인 마이크로서비스 환경이라면 어떨까요?MSA에서는 기능이 여러 서버로 나눠져 있어서 Client 입장에서는 요청 1개더라도 굉장히 많은 서버를 거칠 수 있습니다. 이 경우 JWT Token은 어떻게 처리해야 할까요? 2가지 접근 방식접근 방식은 .. 2023. 4. 22.
스프링 서큐리티(Spring Security) 구조 이해하기 스프링 서큐리티(Spring Security) 구조 이해하기 스프링 서큐리티 (Spring Security)? 그거 어떻게 하는 건데?Spring Security는 말 그대로 Spring 기반 애플리케이션에 보안을 제공하는 프레임워크입니다. 제공하는 기능은 아래와 같습니다. 인증 / 인가 (아래서 설명)일반적인 보안 위협 방어 (CSRF, XSS, SQL Injection)세션(Session) 관리다른 Spring의 프로젝트들과 연동 보안에 관한 기본적인 용어를 알아보자리소스Resource보호하고자 하는 대상접근 주체Principal접근하는 사람 (일반적으로 아이디)자격 증명Credential접근하는 사람이 본인이라는 걸 증명할 수 있는 정보 (일반적으로 비밀번호)역할RolesPrincipal이 가지고 있는 권한인증Authentication정말 그 사람이 맞는지 .. 2023. 4. 11.
여러가지 프로그래밍 패러다임 알아보기 (명령형, 함수형, 논리형 등) 여러가지 프로그래밍 패러다임 알아보기 (명령형, 함수형, 논리형 등) 세상에는 정말 다양한 프로그래밍 언어가 있습니다. 웹 개발자가 필수적으로 배워야 한다고 여겨지는 프로그래밍 언어만 나열해도 5개는 무조건 넘을 거 같습니다.  하지만 프로그래밍 언어가 다 같은 프로그래밍 언어가 아니라는거 알고 계셨나요? 프로그래밍 언어의 짧은 역사1. 처음 프로그래밍 언어는 기계어와 1:1 매칭되는 어쎔블리(Assembly)에서 시작했습니다.2. 구조적 프로그래밍 : 더 복잡한 구조를 쉽게 표현하기 위해 if, else, while, for 등을 도입3. 절차적 프로그래밍 : 함수를 도입해 코드의 반복, 복잡도를 줄임4. 객체지향 프로그래밍 : 프로그램을 객체들의 협력으로 봄5. 함수형 프로그래밍 : 구체적인 방법을 묘사하지 않고, 원하는 것을 함수들을 사용해 선언프로그래밍 언어의 궁극.. 2023. 4. 8.
쿠버네티스가 뭘까? 작동원리, 아키텍처 정리! 쿠버네티스가 뭘까? 작동원리, 아키텍처 정리! 쿠버네티스 (Kubernetes, K8S)가 뭘까? 컨테이너(Container)를 관리해 주는 소프트웨어 IT 업계가 하나의 큰 서버를 여러개의 마이크로서비스로 나누면서, 각각의 마이크로서비스가 독립적으로 작동할 필요가 생겨, VM보다 가벼운 컨테이너를 사용하게 됐습니다. 처음에는 수동으로 관리하거나, Docker Compose 같이 간단하게 관리하는 것으로 충분했지만, 점점 컨테이너들의 복잡도가 증가하면서 쿠버네티스를 사용해 컨테이너를 관리하게 됐습니다. 컨테이너는 보통 Docker를 떠올리지만, 쿠버네티스는 Docker를 포함해서 Containerd, CRI-O, rkt도 지원합니다. 쿠버네티스에 관한 흥미로운 사실들 구글에서 처음 개발했습니다. Golang이라는 프로그래밍 언어로 개발 됐습니다. 전.. 2023. 4. 2.
로드 밸런서(Load Balancer)에 쓰이는 알고리즘 로드 밸런서(Load Balancer)에 쓰이는 알고리즘 Load Balancer란?서버의 트래픽(요청)을 분산시키는 장치우리가 컴퓨터에 너무 많은 프로그램을 켜 놓으면 느려지고, 최악의 경우 블루스크린이 뜨며 작동을 중지하듯, 서버 또한 너무 많은 요청을 받으면 부담이 됩니다. Load Balancer는 부하(Load)를 밸런싱(Balance)해 주는 장치를 말합니다. 네이버 홈페이지를 생각해 보면, 하루에 네이버를 찾는 사람이 1000만명은 될 겁니다. 이 모든 요청은 1개의 서버가 받는다면 네이버 홈페이지는 터지는게 일상일테지만, 로드 밸런서가 한 요청은 춘전의 데이터센터에 보내고, 한 요청을 서울로 보내는 식으로 분산시킨다면 터지지 않을 것입니다. 그렇다면 로드 밸런서는 어떤 식으로 트래픽을 분산시킬까요?흔히 쓰이는 알고리즘Round Robin라운드 로.. 2023. 4. 1.

티스토리툴바