익스랩 - experience laboratory

IT 언어 연구소/코드 리뷰 모음집

TypeError: Cannot read property '속성이름' of undefined 원인, 예제, 해결방법

안녕하세요. 오늘은 자바스크립트 개발 중 흔히 만날 수 있는 'TypeError: Cannot read property '속성이름' of undefined' 오류에 대해 다뤄보겠습니다. 이 오류는 객체의 속성에 접근하려 할 때 해당 객체가 'undefined'인 경우 발생하며, 여러분이 이 글을 통해 이 오류를 완벽히 이해하고 대처하는 방법을 배울 수 있기를 바랍니다!!!! 원인 분석 해당 오류는 객체가 정의되지 않았는데 그 속성에 접근하려 할 때 발생합니다. 예를 들어 다음과 같이 웹 애플리케이션에서 사용자 정보를 가져와서 프로필 페이지를 구성하는 경우를 생각해보겠습니다. function getUserProfile(userId) { fetch(`/api/users/${userId}`) .then(res..

IT 언어 연구소/코드 리뷰 모음집

[vite:build-html] Unable to parse HTML; parse5 error code invalid-first-character-of-tag-name 오류 해결하기

안녕하세요. 오늘은 Vite를 사용할 때 자주 마주칠 수 있는 '[vite:build-html] Unable to parse HTML; parse5 error code invalid-first-character-of-tag-name' 오류에 대해 다루려고 합니다. 이 오류는 HTML 파일을 파싱하는 과정에서 발생하며, 오늘 이 포스트를 통해 그 해결 방법을 함께 알아보도록 하겠습니다. 문제 발생 예시 코드 오류가 발생하는 상황은 아래와 같습니다. 위와 같이 컴포넌트의 태그 이름이 숫자로 시작할 경우, Vite 빌드 과정에서 위의 오류 메시지를 볼 수 있습니다. 원인 HTML5에서는 태그 이름이 ASCII 알파벳 문자로 시작해야 합니다. 숫자로 시작하는 태그 이름은 HTML5 규격에서 허용되지 않으므로, ..

IT 언어 연구소/코드 리뷰 모음집

Vue3로 마스터하는 동적 라우트 전환 효과 router transition

라우트 전환의 이해 Vue.js는 싱글 페이지 애플리케이션을 구축하는 데 사용되는 프레임워크입니다. 이러한 애플리케이션은 페이지 전체를 새로고침하지 않고도 새로운 콘텐츠를 로드하고 표시할 수 있습니다. 이것은 라우트 전환을 통해 가능하며, 이는 사용자가 애플리케이션의 한 부분에서 다른 부분으로 이동할 때 발생합니다. Vue.js의 컴포넌트 Vue.js는 이러한 전환을 처리하기 위한 `` 컴포넌트를 내장하고 있습니다. 이 컴포넌트는 CSS 전환과 애니메이션을 적용하는 데 사용되며, 전환 이름, 타입, 지속 시간 등을 쉽게 정의할 수 있게 해줍니다. Vue Router와의 통합 Vue Router는 Vue.js의 공식 라우팅 라이브러리입니다. Vue Router는 각 라우트 전환 시 해당 컴포넌트를 적절하게..

IT 언어 연구소/코드 리뷰 모음집

클로저와 스코프 깊이 이해 - 이벤트 리스너와 함께 사용할 때의 주의 점 및 코드 리뷰

안녕하세요. 오늘 진행할 리뷰는 JavaScript의 클로저와 스코프에 관한 것입니다. 문제 제시 function setupButtons() { for (var i = 0; i < 5; i++) { var button = document.createElement('button'); button.textContent = 'Button ' + i; button.addEventListener('click', function() { console.log(i); }); document.body.appendChild(button); } } setupButtons(); 위 코드는 5개의 버튼을 생성하고, 각 버튼이 클릭될 때 해당 버튼의 번호를 출력하는 이벤트 리스너를 추가합니다. 그러나 이 코드는 예상과 다르게 모..

IT 언어 연구소/코드 리뷰 모음집

JavaScript - Promise 잘못 사용 시 주의점 및 코드 리뷰

안녕하세요. 오늘은 JavaScript의 비동기 처리에 관해 다루려고합니다. Promise를 잘못 하용하여 발생할 수 있는 문제와 그 해결 방은을 코드 리뷰를 통해서 알아보겠습니다. 문제의 발견 async function getData(id) { // This is a function that gets data from server } let ids = [1, 2, 3, 4, 5]; ids.forEach(async id => { const data = await getData(id); console.log(data); }); 위 코드는 주어진 id 배열에 대해 각각 서버에서 데이터를 가져와 출력하는 작업을 수행합니다. 그러나 forEach 내부에서 await를 사용하면, 비동기 작업이 동기적으로 동작하는..

IT 언어 연구소/코드 리뷰 모음집

JavaScript - 고차 함수 사용 시 주의점 및 코드 리뷰

안녕하세요 오늘은 JavaScript의 고차 함수를 사용하면서 주의해야하는 성능 문제에 대해 이야기하려고 합니다. 이번에 문의 받은 코드 리뷰 중 이문제를 잘 보여주는 코드가 있어서 들고왔습니다. 문제의 발견 function expensiveOperation(element) { // This is a time-consuming operation } let arr = Array.from({length: 10000}, (_, index) => index); arr.forEach(expensiveOperation); 위 코드는 배열의 각 요소에 대해 시간이 많이 소요되는 연산을 수행하는 'expensiveOperation' 함수를 호출합니다. 그런데 이 경우, 'forEach'는 해당 함수의 배열의 모든 요소..