분류 전체보기 (370) 썸네일형 리스트형 하버사인 공식 정의에 따르면 하버사인 공식(Haversine, Half Versed sine, 삼각함수의 일종)은 지구와 같은 구체 위에서 두 지점의 위도와 경도를 이용해 가장 짧은 거리(대원 거리)를 정확하게 계산하는 공식이다. 구면 코사인 법칙을 활용할 수도 있는데 이 공식에서는 두 점의 거리가 매우 가까울 때 정밀도가 떨어지는 단점 때문에 하버사인 공식으로 변형해서 사용한다고 한다. 앞으로 이어질 설명은 수학적 증명이나 유도와 거리가 멀다. 공식을 추상적으로 이해한 뒤 코드 변환에 중점을 둔다. 개념적인 부분을 중점적으로 짚어보자. 그 전에 확실하게 해야 할 기본 개념으로 라디안(호도법)이 있다. 일상 생활에서 쓰이는 각도법은 직관적으로 계산하기 편하지만, 그 자체로 호의 길이와 대응되지 않는다. 호도법에서, 반.. [Canvas] willReadFrequently getImageData()가 빈번하게 호출되는 로직이 있었다. throttle을 적용해서 500ms마다 호출되는데도 다음과 같은 경고가 브라우저 콘솔에 뜬다.Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently canvas 객체에서 getContext()를 호출할 때 넣을 수 있는 옵션이다. 용도가 분명한 직관적인 이름의 옵션. 다음은 리액트 환경에서 작업하면서 일단은 useEffec.. [Canvas] 점도 있는 물방울이 뚝뚝 아이디어가 정말 신기하다. 영어로 blobbing shape 라고도 표현하는데, canvas에 그리는 원이 점도 있는 액체처럼 보이는 효과를 위해 사용된다. 기본 개념은 간단한다. 다음의 두 원을 보자.이 둘에 블러 효과를 주면 다음처럼 된다.filter: blur(15px); 여기에 constrast라는 값을 준다. 말 그대로 대비를 강하게 주는 건데 블러가 적용된 채로 constart를 주면?filter: contrast(20);붙는다! 간단한 원리를 짚고 넘어가자. 블러 효과에 대비 강하게 줄수록, 블러 처리가 강하게 들어간 곳은 안 보이게 되고(투명도0) 블러 처리가 된 채로 겹치게 된 부분은 불투명도가 높아지는 대비 효과를 통해서 두 엔티티가 끈적하게 붙는다. css로 간단하게 구현했지만 js의.. 2026 스타트업 채용 박람회 후기(feat.그룹바이) 내가 기록하고 싶은 건 그 날의 공기다. 구직자의 열정 같은 건 꽤나 뻔한 거라서 약간 다른 이야기를 하고 싶다. 입장했을 때 처음 몇 십 분 동안 멍했다. 전역 직전에 전역(예정) 장교 채용 박람회를 가보긴 했는데 그 때는 아무 생각도 없었고 14년 전 일이다. 명확한 목적이 있어서 방문한 채용 박람회는 처음이었던 것. 대체 부스에서 어떤 이야기를 나눠야 하지. 면접인가? 구직 관련해서는 스몰 토킹이 쉽지만은 않을 것 같았다. 여러 부스를 둘러보니 이미 면접처럼 진지하게 대화를 하기도 하고 커피챗처럼 캐주얼한 분위기도 발견할 수 있었다. 나는 어떤 부스에 들어가야 할까. 어떤 표정을 지어야 할까. 너무 절실해보이긴 싫은데, 같은 생각으로 머릿속이 어지러워졌다. '이곳은 스스로를 영업해야 곳'이라는 걸 .. [Typeorm] insert와 update의 구분 지금 진행하고 있는 프로젝트가 여행 계획을 만드는 간단한 웹 사이트인데, 서버 구축 과정에서 샘플 데이터를 넣어야 하는 상황이다. 클라이언트가 도시 정보를 저장할 때 국가 코드를 같이 보낸다. 서버는 해당 국가 코드로 국가 엔티티를 가져와서 도시 엔티티와 연관관계를 설정한다. 이렇게 새로 만든 도시 데이터를 리포지토리를 통해 저장하면 된다. 이 과정에서 UpdateQuery 에러가 발생했는데 이 흐름을 간단하게 살펴보자.cityRouter.post("/", async (req, res) => { const { countryCode, ...city } = req.body as CityDto; const findCountry = await CounrtyRepository.findOneBy({ cod.. 웹 소켓 서버의 인증 세션 관리 흐름 파악하기(feat.Spring Security) 거의 쓰이지 않게 된 form 인증 방식지금처럼 웹 프레임워크 혹은 라이브러리가 없던 시절에는 서버 프로젝트에서 렌더링 엔진을 통해 웹 페이지를 만드는 게 일반적이었다. JSP가 오랫동안 사용됐고 지금 스프링에서는 지금처럼 프론트엔드 프레임워크 혹은 라이브러리가 없던 시절에는 서버 프로젝트에서 렌더링 엔진을 통해 웹 페이지를 만드는 게 일반적이었다.스프링 프레임워크에서 JSP를 오랫동안 지원하다가 현재는 공식 지원이 끊겨 있다. 타임리프가 JSP와 많이 비슷하고 스프링 프레임워크의 공식 지원받고 있어서 사용처가 많이 보인다. JSP나 타임리프처럼 백엔드에 뷰를 포함할 때의 로그인은 form 방식이 주로 사용됐다. 태그를 통해서 요청을 하면 스프링에서는 UsernamePasswordAuthenticati.. [Docker] 메모리 부족 문제 (feat. Win11) 윈도우11에서 도커를 돌리기 위해서는 WSL이 설치되어 있어야 한다. 최근에는 WSL2이 기본이니까 WSL이라고 쓰고 WSL2로 이해하면 된다. 도커는 기본적으로 리눅스 커널에서 돌아가기 때문에 윈도우에서는 WSL을 사용하고 macOS에서는 Docker Desktop 엔진이 내부적으로 리눅스킷 기반의 가상머신을 띄워서 도커 엔진을 돌린다.오늘 이전엔 메모리 부족 오류가 뜬 적이 없는데 갑자기 뜬다. mongodb 서버만 올라가지 않는다. 어쨌든 WSL에 할당하는 메모리 한도를 늘리고 나니까 해결됐다.윈도우11 기준 사용자 폴더(C:\Users\\)에 .wslconfig 파일을 생성하고 다음을 기입하면 된다.[wsl2]memory=16GB # WSL2 VM이 사용할 수 있는 최대 메모리. 호스트 램의 .. [Elastic Beanstalk] 열받는(?) 배포(feat. Github Action) 기술 스택- aws rds- aws elasticbeanstalk- github action- nestjs- typeorm만났던 문제들1. Database error - synchronize: true였다가 false로 바꿨던 상황을 조금 뒤늦게 인지- 로컬에서 pgAdmin으로 aws rds에 붙어서 확인해보니까 테이블 생성이 안 된 걸 확인- 아 엔티티 스키마가 아예 반영이 안 됐구나- 마이그레이션 해보자 2. .ebextensions/01_migration.config에 마이그레이션 명령어 추가commands: 01_run_migration: command: | #!/bin/bash cd /var/app/current export DB_TYPE=$DB_TYPE .. 이전 1 2 3 4 ··· 47 다음