자바스크립트

자바스크립트로 코드를 짜면서 내가 과연 비동기와 관련된 Promise 그리고 async/await을 이해하면서 쓰고 있는지에 대한 의문으로 시작된 글 나는 모든 프로젝트에 비동기 요청이 필요할 때마다 함수에서 async/await을 사용해왔다.Promise를 사용해서

HTMLInputElement의 selectionStart, selectionEnd, selectionDirection에 대해 알아보자현재 인풋 텍스의 커서포지션을 알아내기 위해 알게 된 selectionStart. selectionStart를 알게 된 김에 selec

다양한 프로그래밍 언어에서 사용되는 Regex(RegExp)에 대해서 알아보자코드를 짜다보면, 가끔식 볼 수 있는 Regex이다. 이게 뭔지 자세히 알아본 적은 없는데 한번은 짚어보고 넘어가도 좋을 것 같은 주제이다. 정규 표현식은 문자 패턴이다. 이 패턴은 문자열에서

현재의 프로젝트에서 1개 이상의 오픈 API를 사용하기 위해 알게 된 http-proxy-middleware오픈 API를 사용할 때, 항상 CORS 문제를 해결해줘야 한다. 단 한 가지의 오픈 API를 사용할 때는, React 환경에서 package.json 내에 pr

toLocalTimeString과 toLocaleDateString, 그리고 ISO 8601new Date으로 날짜 형식을 보면 2024-10-25T15:30:45.123Z 이런 식으로 생겼다. 나는 여기서 시간만 뽑아서 24시 단위의 시간을 12시간제로 바꾸어 사용하

네이버 블로그에 적었던 내용을 옮긴 글다이스 게임이란 걸 해본 적이 있는가(나는 어디서도 해본 적이 없었음)다양한 다이스 게임이 있겠지만, 나는 되게 간단한 다이스 게임을 보게 되었다.두 명의 플레이어가 있고, 주사위의 숫자가 1이나 2가 나오면 다음 플레이어로 순

전에 완성했던 Travelog 프로젝트의 문제점을 찾아 공부하는 글(제로초님의 로컬스토리지 세션스토리지 설명 참고)이 둘의 차이점이 뭐냐면, 데이터의 영구성이라고 한다. 로컬스토리지와 세션스토리지 둘다 key value 형태인데, 정보를 로컬스토리지에 저장하면 브라우저

전에 진행했던 프로젝트의 단점을 돌아보며 다시 공부하면서 쓰는 글쇼핑몰 클린 코딩을 할 때 검색 기능으로 궁금해진 점사용자가 입력할 때의 입력값으로 useEffect를 통해서 API 요청을 보내면, 타자를 빠르게 쳐도 그걸 하나하나 다 API 요청이 된다는 건가? =

자바스크립트에서 중요한 런타임 환경에서의 동작 원리를 제대로 알아보고 이해하기 위해 쓰는 글 자바스크립트를 사용하며 제일 중요한 런타임 환경을 이해해보자! 처음부터 천천히 살펴보겠습니다아자바스크립트는 단일 스레드 (Single Thread)이다. 이는 한 번에 한 가지

자바스크립트의 클로저라는 개념을 정확히 이해하기 위해 쓰는 글 : 함수가 자신이 선언된 환경(스코프)를 기억하고, 그 환경에 접근할 수 있는 기능을 의미흠 이렇게 봐서는 무슨 말인지 이해하기 쉽지 않다 더 알아보자 1\. 함수와 외부 환경의 결합 : 함수 내부에서 선언

이미지 최적화를 할 수 있는 방법 중 하나인 WebP와 AVIF에 대해 이해하기 위해 쓰는 글 프로젝트들을 진행하며 성능 최적화에 신경을 더 쓰게 된 요즘 페이지의 초기 로딩 속도를 줄이고 이미지를 더 빨리 보여줄 수 있는 방법에 대해 관심이 가기 시작했다!간단히 어떤

토이 프로젝트를 진행하는 중 바이너리 데이터를 변환해 사용하다가 제대로 되지 않은 적이 있어 쓰는 글 (문제 해결) 이번 프로젝트에서는 Google Places API에서 식당 사진을 받아온다. 구글에 photo reference와 함께 사진 요청을 해서 로그를 찍어보

프론트엔드 개발을 하면서 SSR 렌더링 고려는 한번씩 해봤을 것이다. 이와 관련된 하이드레이션은 중요한 개념이라고 하는데...! 하이드레이션에 대해 알아보자. : 서버에서 렌더링된 HTML에 클라이언트에서 자바스크립트를 연결해, 사용자와의 상호작용이 가능한 동적인 웹

오늘은 트리 쉐이킹에 대해 알아보자! : 번들링 과정에서 사용되지 않는 코드를 제거해 최종 번들 크기를 줄이는 최적화 기법이다. 여기서 사용되지 않는 불필요한 코드는 Dead Code라고 불리며,이 트리 쉐이킹은 불필요한 코드가 포함되지 않게 나무에서 필요없는 가지를