데굴데굴

프론트엔드 개발 환경 세팅 중 환경변수에 대해 궁금했던 점들을 정리해본 글입니다.정의프로그램을 실행할 때 외부에서 주입할 수 있는 key-value 형태의 변수os 레벨에서 process에 전달된다. 같은 코드라도 환경에 따라 다르게 동작하게 하도록 만드는 것이 목적이다. 사용터미널에서 `printenv` 커맨드로 현재 프로세스에 할당된 환경변수를 확인할 수 있다.`export ENV_NAME=value`로 현재 쉘 세션에서만 유효한 환경변수를 임시로 설정할 수 있고, `ENV_NAME=value node server.js` 와 같이 커맨드 앞에 key=value쌍을 붙여 해당 명령 실행 시에만 환경변수를 적용할 수 있다. `package.json`에서 흔히 볼 수 있는 패턴이다. .env와 환경변수 ..

올해 초 회사에서 신규 프로젝트를 맡게 되어 SRE팀과 인프라 구축에 대한 논의 또한 주도하게 되었다.사내 대부분의 프론트엔드 프로젝트들은 정적 자원을 별도 도메인으로 서빙하고 있는데, 사실 난 저걸 왜 해야 하는지 제대로 이해를 못했던 상태였다. 그래도 분리를 해야 할 것 같아서(?) 인프라 구축 시 이야기를 꺼내보았는데 SRE팀에서 '일단 분리하지 않고 배포해보고 문제가 생기면 그 때 분리를 해보자'고 제안해주셨다. 그 때 나는 반박을 할 수가 없었다. 왜 분리하는지를 몰랐으니까!배포 모니터링을 해보니 정적 자원 유실 현상이 발생했고, 이 때가 되어서야 왜 정적 자원을 분리하는지를 몸소 이해하게 됐다. 미리 알았더라면 돌아가지 않고 설득을 해볼 수 있었을 텐데하는 아쉬움이 남아 글을 써보았다. AWS..

연말회고 겸 오랜만에 글을 남겨본다. 2023년 12월에 취업해서 벌써 프론트엔드 개발자로 일한지 2년이 되었다. 올해는 총 6개의 프로젝트를 경험해보았다. 프로젝트 규모도 다양했고, 기술 스택도 달라서 매일이 새로웠다. 중간에 승진도 했고, 다양한 분들과 일해보면서 커뮤니케이션을 어떻게 이어나가는 게 효율적일지 고민도 많이 해볼 수 있었다. 연말이 다가오니 아무것도 하지 않고 신년을 맞이하는 것 같다. 하지만 올해를 월별로 되돌아보니 꽤나 많은 일들이 있었다. 그저 기억을 못 할 뿐작년 말에 세웠던 2025년의 테마는 'Comfort zone 벗어나기'였다.되돌아봤을 때 이 테마는 어느 정도 잘 지킨 것 같다.잘한 점작년에 비해 행동에 망설임이 줄어들었다.예전에는 모호한 부분이 있을 때 바로바로 못 물..

사내 프로젝트 node 버전을 16에서 20으로 올려야 하는 상황이 생겼는데 이 작업을 직접 해보게 되었다.실무에서 인프라 관련 이야기가 나올 때마다 하나도 못 알아들어서 혼자 찾아서 정리도 해봤었는데 크게 와닿지가 않아서 머리에 남은 게 하나도 없는 상태였다.뒤돌아설 때마다 리셋되는 나의 뇌..그래서 전체적인 흐름에 집중해서 다시 정리해보았다. EC2와 빈스톡EC2는 쉽게 말하면 aws에서 빌려주는 컴퓨터다.이 서버의 제어 권한을 개발자가 직접 다 관리할 수 있는데 유연하지만 관리에 그만큼 시간이 소요된다는 한계가 있다.개발자는 개발에만 집중하고, 인프라 관리는 내가 다 알아서 해줄게라는 취지로 나온 게 빈스톡이다.빈스톡은 서버가 아니고 서버 등의 인프라 자원을 활용한 어플리케이션의 배포, 관리를 자동..

식별자가 유효한 범위 / 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 Quiz. 아래 코드에 존재하는 두 개의 console.log(x)의 결과는 각각 어떻게 될까? var x = 'global'; function foo() { var x = 'local'; console.log(x); } foo(); console.log(x); Answer. 'local' / 'global' 구분 설명 전역 스코프 코드의 가장 바깥 영역 지역 스코프 함수 몸체 내부 전역 변수는 어디서든지 참조가 가능하다. 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 참조할 수 있다. 지역 변수를 전역 변수에서 참조하려고 하면 ReferenceError가 발생한다. 스코프 체인 스코프가 계층적으로 연결된 것 스코프는..

이전 글과 이어지는 내용입니다. [Next.js] Next.js 13 vercel 배포 시 이미지 로딩 실패 문제 (ENOENT: no such file or directory) 서론 Next.js 13 프로젝트를 vercel로 배포하고 나니 이미지 로딩에 실패하는 문제가 발생했다. 이 문제를 해결하느라 몇날 며칠을 골머리를 앓아 블로그에 기록을 남겨두려고 한다. 글은 총 두 편으 haruisshort.tistory.com 문제 상황 vercel 배포 시 이미지 경로를 읽지 못하는 문제가 생겼다. 환경 변수로 작업 환경에 따라 이미지를 다른 방식으로 불러오도록 하여 오류가 해결된 줄 알았지만 또 다른 문제가 생겼다. 배포 환경에서는 이미지 주소를 이용해 fetch()로 불러왔는데 이 때문인지 이미지가 포..

서론 Next.js 13 프로젝트를 vercel로 배포하고 나니 이미지 로딩에 실패하는 문제가 발생했다. 이 문제를 해결하느라 몇날 며칠을 골머리를 앓아 블로그에 기록을 남겨두려고 한다. 글은 총 두 편으로 올릴 예정인데, 이 글에 나온 방법은 성능 측면에서 좋은 방법이 아니기에 실제로 이 방식을 쓰기보다는 그냥 나의 삽질 여정으로 봐주면 좋을 것 같다. 문제 상황 프로젝트를 vercel로 배포한 후 이미지가 포함된 글에 들어가게 되면 오류가 뜨며 페이지가 로딩되지 않았다. [Error: ENOENT: no such file or directory, open 'public/media/247845.jpeg'] { errno: -2, code: 'ENOENT', syscall: 'open', path: 'p..

Next.js 13으로 프로젝트를 하던 중 이미지가 로딩될 때 layout shift가 생기는 걸 발견했다. layout shift의 원인 Next.js에서 제공하는 컴포넌트를 사용하려면 무조건 너비와 높이를 지정해서 넘겨줘야 한다. 현재 내 프로젝트에서는 이미지를 동적으로 불러오고 있어 그 크기를 미리 알 수 없었기 때문에 아래처럼 써놓은 상태였다. 코드 참고 How to set the next/image component to 100% height I have a Next.js app, and I need an image that fills the full height of its container while automatically deciding its width based on its aspec..