데굴데굴

사내 프로젝트 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..

궁금증이 피어오르게 된 문제 -> 백준 10825 - 국영수 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./test.txt"; let input = fs.readFileSync(filePath).toString().trim().split("\n"); const N = Number(input.shift()); const scores = input.map((el) => el.split(" ").map((v, idx) => { if (idx > 0) v = Number(v); return v; }) ); let names = []; function sortAlphabetically(a, b) ..

웹을 구경하다가 자주 보게되는 이것 라이브러리를 쓸 수 있지만 동작하는 원리가 궁금해서 아래 글을 참고하며 간단하게 만들어보았다. How to Build an Animated Counter with JavaScript - Studytonight I am sure at some point in your life, while browsing the web, you have found a web page that shows an animated counter. A counter that starts from 0 and goes all the way up to some given number. Here is an example of how such a counter looks. In this artic www...

리스트의 크기가 큰 경우에는 보통 페이지네이션이나 무한스크롤로 끊어서 보여줄 수 있다. 내 프로젝트에서는 로컬에 있는 json 파일을 활용하고 있었고, 솔로로 하는 토이 프로젝트였어서 서버까지 구현하기에는 예상했던 것보다 공수가 많이 들 것 같아 어떻게 해야하나 고민이었다. Intersection Observer API를 이용한 무한스크롤 방식으로 slice해서 보여준다고 해도 결국엔 매번 json 파일 전체를 불러왔기에 최선의 방법은 아니라고 생각했다. 따라서 큰 크기의 리스트를 프론트 단에서 효율적으로 보여줄 방법이 필요했다. 리스트 가상화, windowing이란? 참조 react-window로 대형 리스트 가상화 react-window는 대형 리스트를 효율적으로 렌더링할 수 있는 라이브러리입니다. ..