리액트바오

setTimeout을 블로깅 하게 된 이유 setTimeout은 개발을 시작하던 초기에 접한 자바스크립트 내장 함수였다.🤓 JavaScript에서 사용되는 함수이고, 지정한 시간이 지난 후에 실행을 하는것이라는것. 그리고 비동기적으로 동작하는 함수 라는것. 이정도로 알고있었다. 좀 더 들어가면 지정한 시간이 지날때까지 다른 코드를 실행하지 않고 멈추는것이 아니라, 다른 코드는 계속해서 실행이 되다가 setTimeout함수가 실행될 시간이 오면 그때 실행된다는것. setTimeout에 대해 배우면서 음.. 알겠고 이걸 대체 어디다 써먹는담? 하면서 내린 결론은 비동기를 이해시키기위한 하나의 예시함수(?)라고 생각했다. 그러다 한참 시간이 흐른후 setTimeout을 실용적으로 쓸 수 있는 날이 온 것이다...

Javascript 2023. 9. 18. 14:05

event loop란 event loop는 Callback Queue에서 하나씩 꺼내서 동작시키는 Loop를 말한다. 이벤트 루프를 이해하기 위해서는 먼저 자바스크립트의 특징을 알아야한다. 자바스크립트는 1. 한 번에 하나의 작업만 처리 할 수 있다. (자바 스크립트는 단일 스레드 기반의 언어이다.) 2. 비동기로 동작을 하는데, 비동기로 동작하는것은 자바스크립트가 아닌 브라우저에서 하는 것이다. Memory Heap : 메모리의 힙(heap) 영역은 사용자가 직접 관리할 수 있는 '그리고 해야만 하는' 메모리 영역이다. 힙 영역은 사용자에 의해 메모리 공간이 동적으로 할당되고 해제된다. Call Stack : 실행된 코드의 환경을 저장하는 자료구조로, 함수 호출 시 이곳에 저장된다. 어떤 함수를 저장하..

Javascript 2022. 11. 9. 14:47

CORS는 무슨 뜻인가 CORS는 Cross-Origin Resource Sharing의 줄임말인데 구글 번역기로 돌려보니 '교차 출처 리소스 공유'라고 한다. 위의 빨간 에러는 CORS 정책을 위반할 때 나타나는 에러인데 왜 뜨는것이며 어떻게 해결해야할지 알아보자. CORS를 알기 위해서는 먼저, SOP에 대해서 먼저 알아야 한다. CORS가 필요하게 된 배경에는 SOP이 있었기 때문이다. SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻한다. MDN에선 다음과 같이 정의한다. 동일 출처 정책(same-origin policy)은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 한 마디로 ‘같은 출처의 ..

Javascript 2022. 11. 2. 17:31

프로토타입이 언급될때 나는 디자인에서 사용되는 것을 가리키는줄로만 알았다. 그런데 개발에서의 프로토타입이라는것이 있다는것도 알게 되었다. 개발에서의 프로토타입은 무엇일까? 또 프로토타입을 왜 사용할까? 그리고 프로토타입 체인이란 무엇인지 한번 공부해보자. 먼저 프로토타입을 왜 사용하는지 알기전 개발에서의 프로토타입이란 무엇인지 알아보자. 프로토타입이란? JavaScript는 흔히 프로토 타입 기반 언어라고 불린다. 쉽게 말하자면 자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있다는 것이다. 모든 객체는 그들의 프로토타입으로부터 속성(프로퍼티)과 메소드를 상속받는다. 이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제..

Javascript 2022. 10. 27. 19:54

콜백 함수란 콜백 함수는 일반적으로 다른 함수의 인자(argument)로 전달되는 함수를 callback 함수라고 한다. 비동기와 콜백 함수 브라우저, node.js는 비동기 작업을 처리하기 위해서 callback 함수를 자주 사용하는데, 비동기 작업을 해결하기에는 이미 충분했지만, 콜백함수에는 한계가 있었다. 무슨 한계가 있었을까? 콜백 함수의 한계 코드 가독성 측면에서 문제가 많았다. callback은 함수에 담아서 사용해야 하기 때문에, 함수가 연속적으로 반복되어 직관적이지 않은 단점이 있는데 이를 "callback hell"이라고 부른다. 또한, callback이 인자로 전달되는 특성 때문에, 이게 callback인지 아닌지 눈으로 확인하기가 쉽지 않아서 개발자가 코드를 오작성할 확률이 높았다. ..

Javascript 2022. 10. 19. 13:19

정규표현식은 어디에 쓸까? 정규표현식(Regular Expression)은 줄여서 정규식이라고 하는데 문자열에서 특정 내용을 찾거나 대체 또는 뽑아낼때 사용한다. - 많은양의 전화번호 데이터를 추출해야 할 때 - 로그인 또는 회원가입시 사용자가 입력하는 아이디, 이메일, 전화번호 등이 올바른지 검정할 때 - 코드를 짤때 특정 변수의 이름을 바꾸고 싶은데, 해당 변수의 이름을 포함하고 있는 함수는 제외하고 싶을 때 - 문자열에 포함된 공백이나 특수문자를 제거하고 싶을때 정규표현식의 단점 가독성이 좋지 않다. 주석이나 공백을 허용하지 않으며 여러가지 기호를 붙여서 사용하기 때문이다.

Javascript 2022. 9. 7. 13:30

정규표현식은 어디에 쓸까? 정규표현식(Regular Expression)은 줄여서 정규식이라고 하는데 문자열에서 특정 내용을 찾거나 대체 또는 뽑아낼때 사용한다. - 많은양의 전화번호 데이터를 추출해야 할 때 - 로그인 또는 회원가입시 사용자가 입력하는 아이디, 이메일, 전화번호 등이 올바른지 검정할 때 - 코드를 짤때 특정 변수의 이름을 바꾸고 싶은데, 해당 변수의 이름을 포함하고 있는 함수는 제외하고 싶을 때 - 문자열에 포함된 공백이나 특수문자를 제거하고 싶을때 정규표현식의 단점 가독성이 좋지 않다. 주석이나 공백을 허용하지 않으며 여러가지 기호를 붙여서 사용하기 때문이다. 자주 사용하는 정규표현식 숫자 ^[0-9]*$ 영문자 ^[a-zA-Z]*$ 한글 ^[가-힣]*$ 영어&숫자 ^[a-zA-Z0-..

Javascript 2022. 9. 1. 11:19

클로져(Closure)가 무엇일까? 클로저는 내부함수의 변수가 외부함수의 변수에 접근할 수 있는 것이다. 함수와 함수가 선언된 어휘적 환경(lexical environment)의 조합을 통해 만들어진 것인데 이 환경은 클로저가 생성된 시점의 유효 스코프 내에 있는 모든 지역 변수로 구성된다. 그래서 클로저가 포함된 내부 함수에서 외부 함수의 스코프에 접근할 수 있다. 일반적으로 함수가 실행될 때 생성된 컨텍스트는 함수가 종료될 때 가비지컬렉션의 수집대상이 되어 사라진다. 하지만 클로져 패턴이 사용된 경우에는 내부함수의 변수가 언제 외부함수의 변수를 참조할지 알 수 없기 때문에 외부함수가 종료되어도 가비지 컬렉션의 수집대상이 되지않고 메모리상에 남아있게 된다. 이런 이유로 클로저 패턴을 남발하게 되면 메모..

Javascript 2022. 8. 24. 09:47