티스토리

끄적끄적 개발기록

검색하기

블로그 홈

끄적끄적 개발기록

developerhia.tistory.com/m

*히아* 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

while(true)와 재귀함수 보통 무한 루프 코드를 작성할 때 'try-catch' 블록을 사용하는 것은 에러 핸들링을 위해 좋은 방법 중 하나.하지만 무한 루프가 끝나지 않는 문제를 해결하는 가장 중요한 방법은 루프를 적절하게 종료할 수 있는 조건을 만드는 것! 1. 루프 조건 명확히 하기: 루프가 종료될 수 있는 명확한 조건을 설정2. 타임아웃 설정: 특정 시간이 지나면 루프를 종료하도록 타임아웃을 설정3. 에러 핸들링: 'try-catch' 블록을 사용하여 에러 발생 시 루프를 종료하거나 재시도 로직을 작성4. 외부 신호: 외부 신호나 상태 변수를 사용하여 루프를 제어할 수 있도록 함. let running = true; const timeout = setTimeout(() => { running = false; on.. 공감수 0 댓글수 0 2024. 6. 20.
디바운스(Debounce) 실무를 하다가 건물을 클릭했을 때 webGL에서 카메라가 해당 건물로 줌인되는데 줌인이 끝나면 그 건물에 대한 정보가 담긴 모달창이 뜬다. 카메라가 움직이는 몇 초 사이에 건물을 여러번 클릭하면 해당 함수가 중복적으로 일어나 모달창이 꺼졌다 켜졌다하는 문제가 발생했다. 여기서 디바운스 라는 기술을 적용해 보기로 했다. debounce의 일반적인 뜻은 전자 회로 스위치의 신호 이상 상태에서 왔다. 전자 회로 스위치를 눌렀다가 떼는 과정에서 전압이 불규칙적으로 들어거 전류의 흐름이 비정상적으로 일어나는 현상을 바운싱이라고 한다. 이런 비정상적인 흐름을 정상적으로 해주는 작업이 "디바운싱"이다. 해당 개념을 웹으로 가져와 예를 들어보면 우리는 어떠한 input창을 칠 때 혹은 버튼을 누를 때 의도치 않게 서버.. 공감수 0 댓글수 0 2023. 8. 29.
if(a) 과 if(a !== null)이 동일하게 작동하지 않는 이유 개인 프로젝트를 하는데 state인 editingIndex의 초기값을 null로 두고 useEffect(() => { if (editingIndex && inputRef.current) { inputRef.current.focus(); } }, [editingIndex]); 이렇게 useEffect로 변경될 때 input창에 바로 포커싱을 주어 UX를 향상시키기 위한 코드를 짰다. 근데 editingIndex가 1번 째 일 때는 focus가 잘 되는데 유독 0번 째 일 때만 focus가 되지 않는 것이다. 그래서 useEffect(() => { if (editingIndex !== null && inputRef.current) { inputRef.current.focus(); } }, [editingIn.. 공감수 0 댓글수 0 2023. 7. 27.
onAnimationEnd란 { skip(true); }} > ... 코드 중 이런 코드를 발견하게 되는데 여기서 onAnimationEnd는 무엇일까?? onAnimationEnd 이벤트 핸들러는 애니메이션이 끝났을 때 실행되는 콜백 함수이다. 해당 코드에서는 onAnimationEnd 이벤트가 발생하면 콜백 함수가 호출된다. 여기서 의문은 이 div 태그에 어떤 애니메이션이 있는가이다. 답은 바로 className 코드에서 태그는 loading 클래스가 있는 요소이다. 해당 요소에는 CSS에서 정의된 애니메이션 클래스(fadeOut)가 추가되거나 제거되는데 이게 바로 애니메이션! 애니메이션 클래스가 추가되면 loading 요소는 해당 애니메이션을 수행하고, 애니메이션이 끝나면 onAnimationEnd 이벤트 핸들러를 통해 sk.. 공감수 0 댓글수 0 2023. 7. 17.
[Javascript] Javascript가 동적 언어인 이유는 무엇일까?? 언어는 정적언어와 동적언어 두 타입으로 나누어진다! 정적언어는 컴파일 시간에 변수의 타입이 결정되는 언어이고 대표적인 예시로 C, C++, Java 등이 있다. 동적언어는 런타임에 타입이 결정되는 언어로, 프로그램이 빌드될 때 타입을 결정하는 것이 아닌 실행될 때 상황에 맞게 타입이 결정된다. 자바스크립트가 동적언어인 이유는 느슨한 타입의 데이터 구조를 사용하기 때문이다. 다른 언어와 달리 타입 지정 없이 var, let, const 키워드로만 변수를 선언해주기 때문이다. 코드 상 따로 타입 지정이 없기 때문에 실제로 코드가 사용되어지는 런타임 때 상황에 맞게 결정된다. 따라서 아래와 같이 number타입을 할당했어도 string으로 update가 가능하다!! let example = 1; console.. 공감수 0 댓글수 0 2023. 3. 15.
[Javascript] 이벤트루프와 자바스크립트의 비동기 처리 과정 이벤트루프를 설명하기 앞서 자바스크립트를 조금 설명하자면! 자바스크립트는 싱글 스레드 기반의 언어이므로 원래는 한번에 여러가지 일을 처리하지 못하는 아이이다! 타 언어와 달리 왜 자바스크립트가 싱글 스레드 기반의 언어라고 묻는다면 자바스크립트는 브렌던 아이크라는 개발자가 10일만에 만든 언어이다. 멀티쓰레드 언어는 많은 개발 시간이 필요한 반면 상대적으로 싱글 스레드 언어는 적은 시간으로 만들 수 있기 때문에 창시자는 싱글 스레드를 선택하여 자바스크립트를 만들었다! 하지만 우리는 자바스크립트 안에서 setTimeout 등과 같이 비동기적으로 실행하는 것을 봤을 것이다. 이는 바로 자바스크립트의 런타임(언어가 실행되는 환경)인 브라우저에서는 자바스크립트 엔진과 함께 Web API, 콜백큐, 이벤트루프가 함.. 공감수 0 댓글수 1 2023. 3. 15.
[Javascript]ES6 ✔️ ES6란? ECMAScript 버전 6 이후를 통틀어 일반적으로 ES6라고 부른다 ✔️ ECMAScript란? Javascript의 표준문법 2015년, 버전 6 이후로 많은 문법이 추가되면서 계쏙해서 발전하고 있다. ❓ 왜 우리는 ES6를 사용해야할까? 현대적인 문법은 생산성 향상에 도움을 주기때문!! Node.js는 빠르게 최신 ECMAScript를 지원 중에 있다. 자주 사용되는 문법 1. 잘 알고 있는 let, const 2. Template String - 백틱 기호로 문자 사이에 간단하게 변수 사용 가능 3. arrow function 4. class - 그 전에는 class가 없기 때문에 객체지향을 구현하기 위해 function과 prototype을 사용했음 5. descturcting.. 공감수 0 댓글수 0 2022. 10. 10.
[Javascript]Axios란? ✏️ Axios에 대해 알아보자 Axios는 웹 브라우저와 Node.js 통신을 위한 Promise 기반의 HTTP 요청 처리를 위한 라이브러리이다. 비동기 통신으로 인해 프론트엔드와 백엔드 간 통신을 쉽게 할 수 있다!! like Ajax 자바스크립트에서 동기가 아닌 비동기 처리를 위해 Axios나 Ajax를 사용해주는 것이다 ****Promise란? Promise는 자바스크립트 ES6에서 비동기 처리를 위해 주로 사용되는 객체 ****Ajax란? 비동기 자바스크립트란 의미로 Asynchronous JavaScript and XML의 약자이다. Ajax는 브라우저에 있는 XMLHttpRequest 객체를 이용하여 화면 전체를 새로 고침 하지 않고 변경된 일부 데이터만 로드하는 비동기 처리가 가능!!! .. 공감수 4 댓글수 0 2022. 10. 9.
[Javascript] flatmap() 자바스크립트 코테를 풀다가 flatmap이라는 함수를 알게 되었다! flatmap이란? map()함수에 flat()함수를 적용한 값과 동일한 값을 한다! flatMap() 메서드는 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 평탄화하는것! 말 그대로 각각의 배열을 납작하게 눌러주어 하나의 배열로 만들어주는것! 코드를 보면 더 이해하기가 쉽다! let arr1 = [1, 2, 3, 4]; arr1.map(x => [x * 2]); // [[2], [4], [6], [8]] arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8] // 한 레벨만 평탄화됨 arr1.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]].. 공감수 0 댓글수 0 2022. 4. 20.
[자바스크립트] sort 함수 JS 코딩테스트 풀다가 sort 함수를 잘 모르겠어서 강의 보면서 정리해보았다 arr.sort() 배열 재정렬 배열 자체가 변경되니 주의하기! let arr = [27, 8, 5, 13]; //a와 b 두 요소를 전달받아 양수인지, 0인지, 음수인지 return //a와 b를 비교해서 a가 작으면 a를 앞으로 보낸다 arr.sort((a,b) => { return a -b; }) 내부 로직을 콘솔로 찍었을 때 확인해보자!! (console창) 처음에 8과 27을 비교 => 8이 더 작으니 앞으로 이동 => 8, 27, 5, 13 (console창) 5와 8을 비교 => 5가 더 작으니 앞으로 이동 => 5, 8, 27, 13 (console창) 13과 5를 비교 => 5가 더 작으니 변동 없음 => 5,.. 공감수 0 댓글수 0 2022. 3. 31.
[자바스크립트] 구조 분해 할당 ❓ 구조 분해 할당이란 ❓ 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식을 의미 let [x,y] = [1,2]; console.log(x); //1 console.log(y); //2 예시로 더 알아보자! let users = ['Mike', 'Tom', 'Jane']; let [user1, user2, user3] = users; //위 코드는 아래 세 코드와 동일!! //let user1 = users[0]; //let user2 = users[1]; //let user3 = users[2]; console.log(user1); //'Mike' console.log(user2); //'Tom' console.log(user3); //'Jane' s.. 공감수 0 댓글수 0 2022. 3. 29.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.