치춘짱베리굿나이스

자바스크립트의 대부분 요소는 객체인가요? 전혀 관계없는 거 (함수 관련) 검색하다가 함수는 객체라는 글을 보고 꽂혀서 배열도? 클래스도? 하면서 찾아보니까 다 객체였다 오죽하면 저 문장이 자동완성이 될까 싶어서 토막글로 기록해본다 사실 좀많이놀랐음 자바스크립트에서는 함수도 객체 취급된다 엄밀히 따지자면 자바스크립트에서 함수는 속성과 메서드를 가질 수 있는 일급 (first-class) 객체이고, 호출할 수 있다는 특징을 가지고 있으며, Function 생성자로 만들어진 객체이다 배열도 함수처럼 특별한 유형의 객체이다 자바스크립트에서 클래스는 class 키워드로 선언되었을 뿐인 함수이기 때문에 클래스도 객체다 사실상 원시 요소 (primitives) 를 제외하면 거의 다 객체이고, 이 원시 요소들마저도 객..

다른 파일에서 함수 가져오기 작업을 하다 보면 한 파일에 함수가 매우매우매우매우… 많아져서 보기 싫어질 때가 많다 파일을 분리하고, 해당 파일에서 함수를 불러오는 식으로 작업하면 한 파일당 한두 개의 함수에 집중할 수 있기 때문에 코드가 깔끔해진다 프론트엔드 컴포넌트를 만들 때도 거의 무조건 (특정 컴포넌트 안에서만 사용되는 한두줄짜리 컴포넌트가 아닌 이상) 한 파일에 컴포넌트 1개 룰을 지키면서 코딩하다 보니 이제 각 파일별로 주제가 명확하지 않으면 코드 읽기가 어려운 지경에 왔다 다른 파일에서 모듈을 불러오는 방법은 크게 두 가지가 있는데, require와 import이다 사실 다른 게시글에서 적었지만 정보가 상당히 빈약해서.. 삭제 후 더 자료검색해서 새로 작성하였다 require const Rea..

Throttle & Debounce 예제에 useEffect가 들어가서 React 관련 게시글로 뺄까 고민해봤는데 그냥 자바스크립트 / 타입스크립트로 지정하였다 Throttle 지정된 시간 동안 함수를 최대 한 번만 호출하도록 한다 (일정 시간이 지나기 전까지 재호출을 방지한다) 특정 함수를 한번 호출했을 경우 지정한 시간 (예를 들면 1초) 이 흐르기 전까지 재호출이 되지 않도록 막는다 구현하기 ... let timeoutValue; if (!timeoutValue) { timeoutValue = setTimeout(() => { console.log(stateValue); // 여기에 throttling으로 실행시킬 함수 및 코드 배치 timeoutValue = null; // timeoutValue..

비동기 처리와 Promise 동기 (Synchronous) 와 비동기 (Asynchronous) const [testValue, setTestValue] = useState(0); const handleOnClick = () => { setTestValue(testValue + 1); setTestValue(testValue + 1); setTestValue(testValue + 1); setTestValue(testValue + 1); setTestValue(testValue + 1); }; ... {`${testValue}`} add 1 앞에서 prevState에 관해 짧게 정리할 때 슬쩍 본 코드이다 testValue가 한번에 5씩 증가하지 않는 이유가 ‘비동기’ 적인 작동방식 때문이라고 했었는데,..

Type vs Interface 드디어 대망의 타입스크립트에 발을 들이게 되었다 예에에ㅔㅔㅇ에에에에전 프로젝트에서 잠깐 깔짝해본 (에러범벅만 기억에 남은) 타입스크립트를 다시금 손대면서 기본적으로 알아야 할 것 같은 사항들을 정리해본다 type과 interface는 둘 다 새로운 자료형 (타입) 을 정의하고 이름붙일 수 있지만, 보편적으로 interface를 사용하기를 권장하고 있다 왜때문일까? 공통점 type TGame = { name: string; genre: string; cost: number; } const rainWorld: TGame = { name: 'rainWorld', genre: 'adventure', cost: 12000, }; interface IGame { name: strin..

spread 문법 배열 또는 객체 안에 있는 내용물들을 전개하는 역할을 한다 배열에 스프레드 구문을 사용할 경우, 배열을 감싸는 대괄호가 사라지고 내용물만이 반환된다 배열 스프레드를 이용하여 배열 합치기 let arr1 = [var1, var2, var3]; let arr2 = [...arr, var4, var5]; //[var1, var2, var3, var4, var5] let arr3 = [...arr, ...arr] //[var1, var2, var3, var1, var2, var3]; 스프레드 구문은 한 배열을 만들 때 여러 번 사용 가능하다 객체 스프레드를 이용하여 객체 합치기 let obj1 = { var1: 'hello', var2: 'good afternoon&#39..

비구조화 할당 / 구조분해 할당 배열이나 객체의 속성을 해체하여 개별 변수에 그 값을 담을 수 있는 문법 구조를 분해해서 각각의 원소를 할당하기 때문에 구조분해 또는 비구조화 할당이라고 불린다 쉽게 말하면 오른쪽의 배열 / 객체 원소를 왼쪽의 [] 또는 {} 로 감싸진 변수들에 각각 할당해주는 문법이다 배열 비구조화 할당 let [a, b] = [1, 2] // a = 1, b = 2 좌측 배열의 길이와 우측 배열의 길이가 같을 경우, 순서대로 일대일 대응한다 let [a, b, c] = [1, 2, 3, 4, 5] // a = 1, b = 2, c = 3 좌측 배열의 길이가 우측 배열의 길이보다 짧을 경우, 좌측 배열 기준으로 값을 할당한다 let [a, b, c] = [1, 2]; // a = 1, ..

undefined Boolean(undefined) //false Number(undefined) //NaN String(undefined) //"undefined" 선언은 되었지만 값이 할당되지 않은 상태 ⇒ 초기화하지 않은 변수 Boolean 문맥에선 false 반환 Number 문맥에선 NaN 반환 null Boolean(null) //false Number(null) //0 String(null) //"Number" 아무런 값도 나타나지 않음 값 자체가 없다는 뜻 (undefined) 이 아니라 값은 존재하지만 어떠한 유효한 값도 아니라는 뜻 Boolean 문맥에선 false 반환 Number 문맥에선 0 반환 NaN Boolean(NaN) //false Number(NaN) //NaN Strin..