북극곰은 펩시를 마시지

길고도 짧았던 2025년이 벌써 12월 중순이다. 며칠 후엔 또 새해라는 것이 싫기도 하고(나이 먹기 싫어..) 또 새로운 시작이라 느껴지기도 한다(매번 똑같은 새해 목표). 최근 이직한 회사에서 종무식과 시무식이란 것을 한다고 하는데 한해의 마무리와 시작이 명확해지는 것 같아 개인적인 회고록도 한해의 마무리 느낌으로 써보려고 한다. 2024년2025년 회고에 2024의 등장이라..올해의 시작을 돌이켜보면 2024년이 떠오를 수 밖에 없다. 전 직장에서 권고사직을 당한 해이기 때문이다. 2024년 7월에 권고사직을 당한 직후에는 휴식을 취하며 커리어에 대한 고민을 하고 개인 역량 향상을 할 수 있는 좋은 기회라고 생각했다. 권고사직 후 몇달동안은 정말 쉬기만 했다. 고등학교 2학년 여름방학이 마지막 긴 ..

이번에 이직하게 되면서 온보딩 과제로 E2E 테스트 코드 작성 과제를 받게 되었습니다.그 과정에서 고민했던 부분들을 정리해보았습니다.문제 및 현황기존에는 제품 배포 시 기획자분들이 수동으로 일일이 테스트를 하고 있던 상황이었습니다. 제품의 크기가 작은편이 아니어서 어떨때는 하루종일 테스트만 하게되는 상황도 있다고 합니다. 이를 해결하기 위해 E2E 테스트 코드를 작성하여 테스트를 자동화하기로 하였습니다.테스트 도구는 이미 playwright가 도입되어 있었고 인증 관련 부분의 테스트코드가 이미 작성되어 있어 그대로 Playwright를 사용하기로 하였습니다.비용 최소화를 위한 고민먼저 최소한의 공수로 최대한의 효과를 내기 위해 고민하였습니다. 테스트코드에서 관리시 가장 비용이 많이 드는 부분은 '테스트코..

서론 어느날 일하던 도중 친구에게 연락이 왔다. 연락의 내용은 자기네 회사에서 1월 22일에 스프린트 서울이라는 오픈소스 행사에 참여하는데 와서 해보지 않겠냐고 했다. 나는 재밌어 보이기도 하고 친구가 영업아닌 영업을 해서 참여하게 되었다. 참가 기다리던 토요일이 되었고 10시 시작이라 10시에 디스코드에 들어갔다. 사람들이 인사를 나누고 있었는데 수줍음을 많이타는 나는 쭈뼛거리면서 내가 참여할 채팅방에서만 인사를 했다. (왜그랬지....) 시간이 좀 지나자 공지가 올라왔고 공지의 내용은 따로 프로젝트에 대한 소개없이 바로 참여를 원하는 프로젝트 채널에 들어가서 진행하면 된다고 했다. 나는 이미 하고싶은 프로젝트를 정해논 터라 이점은 좋았다. 나는 9c-launcher라는 오픈소스 게임 클라이언트 프로젝..

최근 사내 라이브러리중 하나에 linter가 적용되어 있지 않아 새로 적용하려고 eslinter와 prettier를 설정해 주었다. 그런데 eslint와 prettier가 먹히지 않았다.. 그래서 preference의 setting으로 들어가보니 prettier 설정파일의 이름이 prettierrc.json으로 설정되어 있었다. 하지만 내가 만든 설정파일은 .prettierrc.json 이었고 그래서 다음과 같이 변경해 주었다. 그래도 적용이 안되길래 혹시나 하는 마음에 VSCODE를 재시작하니 동작하기 시작했다!! { ... "eslint.workingDirectories": ["./"], "prettier.configPath": "./prettierrc.json", ... }

서론 지금 다니는 회사에서는 위성영상을 인공지능으로 분석해 사용자들에게 정보를 제공해주는 제품을 만드는 일을 한다. 그 중 최근 위성영상을 세그멘테이션하는 툴을 만들게 되었다. 위성영상을 확대/축소하고 이동을 하는 기능이 어려울거라 생각했지만 기존에 한번 비슷한 툴을 만들었기에 코드를 어느정도 가져오면 되겠지 싶었다. 하지만 마음대로 되지 않았고 공식(?)을 정리하고 기록해야 할 필요성을 느껴 작성하게 되었다. 요구사항 먼저 요구사항중에 줌과 이동 기능이 있었다. 다만 줌을 할때에는 마우스 포인터를 기준으로 잡고 줌인 / 아웃을 해야했다.(GIF 참조) 그리고 이동은 여느 프로그램처럼 드래그로 이동을 하면 되었다. ZOOM 먼저 어려울것 같은 줌부터 해결해보았다. 이걸 어떻게 구현해야하나 고민하고 있을 ..

실행 컨텍스트가 뭐야?? 자바스크립트에서 실행 컨텍스트란 실행 가능한 코드를 형상화 하고 구분하는 추상적인 개념이라고 한다. 처음 이 말을 들어보면 좀 복잡할 것이다. 나도 그랬고 나는 내 나름대로 코드블럭이 실행되는 환경이라고 해석했다. 일반적으로는 함수와 전역 코드라고 생각하면 될 것 같다. 실행 컨텍스트를 공부하기 위해선 호출스택을 알아야 한다. 호출스택은 자바스크립트와 비동기 처리에 정리해 놓았다. 전역 실행 컨텍스트, 함수 실행 컨텍스트 컨텍스트에는 두가지 종류가 있다. 전역코드가 실행될때 만들어지는 컨텍스트가 전역 실행 컨텍스트이고 함수가 실행될 때 만들어지는 함수 실행 컨텍스트가 있다. 전역실행 컨텍스트와 함수 실행 컨텍스트가 다른 점은 전역 실행 컨텍스트가 가장 먼저 실행되고 가장 늦게 종..

자바스크립트는 단일 스레드기반으로 동작한다. 이 뜻은 한번에 한가지 작업밖에 처리하지 못한다는 뜻이다. 하지만 우리는 서버에 AJAX로 데이터를 불러오면서 이벤트를 처리하기도 한다. 이는 이벤트 루프와 태스트큐가 있기 때문에 가능한 일이다. 이벤트 루프와 태스트큐가 동작하는 과정을 알기 위해선 자바스크립트 엔진에 대한 이해가 필요하다. 자바스크립트 엔진은 크게 힙영역, 호출스택, 이벤트 루프, 태스트큐로 이루어져 있다. 힙 영역은 동적으로 생성된 객체를 저장하는 공간이고 호출 스택은 메소드가 실행되었을 때 스택 프레임이 생성되는 공간이다. function first(){ console.log('first'); second(); } function second(){ console.log('second');..

CORS란? cors란 cross origin resouce sharing의 줄임말로 다른 도메인에 요청을 보낼수 있게 하는 표준 규약이다. 좀 더 간단하게 설명하자면 내 도메인이 foo.com일 때 bar.com에게 요청을 보낼 수 있게 하는 것이다. cors의 기본적인 형태는 다음과 같다. Request GET /resources/access-control-with-get/ HTTP/1.1 Host: aruner.net User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,app..