티스토리

치춘짱베리굿나이스
검색하기

블로그 홈

치춘짱베리굿나이스

blog.chichoon.com/m

항상 행복하세요

구독자
11
방명록 방문하기
공지 블로그 모두보기

주요 글 목록

  • 비동기와 콜백 함수 ver. 2023 비동기와 콜백 함수 ver. 2023 https://blog.chichoon.com/520 비동기 처리와 Promise 비동기 처리와 Promise 동기 (Synchronous) 와 비동기 (Asynchronous) const [testValue, setTestValue] = useState(0); const handleOnClick = () => { setTestValue(testValue + 1); setTestValue(testValue + 1); setTestValue(testValue + 1); setTestValue(t blog.chichoon.com 비동기와 Promise에 관해서 한번 글을 적은 적이 있었는데 이번에는 2023 ver. 느낌으로 좀 더 업그레이드해서 적어보려 한다 맨날 공부.. 공감수 0 댓글수 0 2023. 9. 19.
  • 호이스팅 Hoisting console.log(a); // 1 ?! var a = 1; 자바스크립트 단골 질문인 호이스팅이다 호이스팅 자체는 어떻게든 이해가 가더라도, 그 원리까지 공부하자니 온갖 선행 개념들이 많아 이 김에 정리해볼까 한다 왜 발생하고 어떻게 발생하는지 알아보도록 하자 설명 Hoist라는 영단어는 무언가를 끌어 올린다는 뜻을 가지고 있다 뜻을 풀었으니 한줄요약하자면 호이스팅은 변수나 함수의 선언을 맨 위로 끌어올린 것처럼 동작하는 현상이다 실제로 변수나 함수 선언이 최상단으로 끌어올려진 것은 아니고, 자바스크립트 엔진의 특성상 끌어올려진 것 처럼 동작하는 것 뿐이라고 한다 발생 이유 https://chichoon.tistory.com/921 실행 컨텍스트에 대해 필독하고 오자 (호이스팅은 실행 .. 공감수 0 댓글수 0 2023. 8. 24.
  • 실행 컨텍스트 실행 컨텍스트 호이스팅을 알아보기 전에 실행 컨텍스트에 관해서 짚고 넘어갈 필요가 있다 호이스팅이랑 같이 적으려다가 실행 컨텍스트 쪽 분량이 너무 방대해지는 바람에 호이스팅이랑 분리함… 설명 자바스크립트에서 사용되는 객체로, (자바스크립트는 진짜 모든 것이 객체 같다…) 실행할 코드에 제공할 변수, 함수 등의 정보들을 모아놓는 공간이라고 말할 수 있겠다 쉽게 말하자면 코드의 실행 환경을 객체로 저장해둔 것이라고 생각하면 좋다 이 실행 컨텍스트는 콜 스택에 적재되어 함수가 순서대로 실행될 수 있도록 한다 콜 스택 (호출 스택) https://blog.chichoon.com/701 자세한 것은 이 포스팅을 참조하자 코드가 실행될 때마다 실행 컨텍스트 (프레임) 가 쌓이는 공간이다 말 그대로 스택이라 LIFO.. 공감수 0 댓글수 0 2023. 8. 23.
  • any, unknown, never any, unknown, never any와 unknown 둘이 상당히 비슷해 보이는데 살짝 다른, 특별한 타입 키워드이다 never는 갑자기 생각나서 추가했다 any let a: any = 1; any 쓰면 애니추천 모든 타입이 할당될 수 있는 타입이다 메타몽 같은 타입이라고 생각하면 된다… any는 무엇이든 될 수 있다 any를 쓴다는 것은 사실상 “타입 체크를 하지 마시오” 라고 말하는 것과 같다 특징 let a: any = 1; a = [1, 2, 3]; a = "hello"; a = { name: "abc" } 모든 타입이 할당될 수 있다는 것은, 위처럼 모든 타입의 값들을 할당받을 수 있다는 뜻이다 any는 무엇이든 될 수 있기 때문에! 위처럼 어떠한 값을 대입하든 오류가 발생하지 않는다 le.. 공감수 0 댓글수 0 2023. 8. 21.
  • var, let, const 차이점 var, let, const 차이점 사실 지금은 var를 잘 안 쓰긴 한데 왜 안 쓰게 됐는진 잘 몰라서… 중복 선언 var var a = 1; var a = 2; var a = 3; var는 중복 선언이 가능하다 새로 선언했을 때 초기화한 값이 이전 값을 덮어씌우는 방식으로 작동한다 코드가 길어졌을 때 값을 재할당하는 실수가 발생할 가능성이 높고 값이 어디서 바뀌었는지 파악하기도 어려워진다는 단점이 있다 var a = 1; var a; // 무시됨 초기화 없이 새로 선언만 할 경우 해당 라인은 무시된다 let let a = 1; let a = 2; // 오류 let은 중복 선언이 불가능하며, 해당 변수가 이미 선언되었다는 오류가 발생한다 const const a = 1; const a = 2; // 오.. 공감수 0 댓글수 0 2023. 8. 17.
  • 문자열의 특정 문자 변경하기 문자열의 특정 문자 변경하기 let string = "hello world"; string[2] = "a"; console.log(string); 자바스크립트에서는 문자열의 특정 문자를 인덱스를 통해 변경할 수 없다 인덱스가 문자열의 특정 문자의 포인터를 가리키는 C언어 등과 다르게 자바스크립트는 문자의 참조를 가리키지 않기 때문 그럼 어떻게 let string = "hello world"; string = string.substring(0, 2) + "a" + string.substring(3); console.log(string); 문자열을 잘라서 다시 이어붙이는 수고를 해야 한다 쩝 function replaceAt(string, index, replace) { return string.substr.. 공감수 0 댓글수 0 2023. 8. 8.
  • 2차원 배열에서 값 단 하나만 바꾸고 싶은데 모든 줄이 다 바뀌는 경우 뜨악 const arr = new Array(5).fill(new Array(3).fill(0)); arr[1][1] = 1; console.log(arr.join("\n")); 위와 같은 코드를 이용하여 2차원 배열을 만들고 한 칸의 값을 변경해 보았다 모든 줄의 값이 다 변경되는 것을 볼 수 있다 이 이유는 fill() 메서드가 참조만 복사해서 배열을 채우므로, 깊은 복사가 되지 않는 탓이다 new Array() 가 fill 에서 단 한 번만 호출되고, 그 참조로 5개 원소가 채워지는 것이다 C언어로 치자면, 2차원 배열의 각 행이 같은 주소값을 가리킨다고 이해하면 된다 fill 메서드는 원시값으로 배열을 채울 때만 이용하도록 하자 해결법 const arr = Array.from({length: 5}.. 공감수 0 댓글수 0 2023. 8. 8.
  • this in JavaScript this 매우 매우 헷갈리는 그 this이다 전역 스코프에서의 this 브라우저 console.log(this); 브라우저에서의 전역 스코프에서 this는 Window 객체를 가리킨다 Node.js node.js 환경에서의 this는 현재 module.exports 객체를 가리킨다고 한다 브라우저처럼 Global 객체를 가리킬 것 같지만 아니다 const a = 2; // 영향 X module.exports.a = 3; console.log(this); 따라서 해당 객체에 값을 넣으려면 module.exports 를 해 주어야 한다 console.log(globalThis); globalThis 가 global 객체를 가리킨다 함수 호출 시의 this 단순 호출 function foo() { consol.. 공감수 0 댓글수 0 2023. 7. 26.
  • 클로저 클로저 스코프, 렉시컬 스코프 먼저 렉시컬 스코프와 스코프에 관해 읽고 오자 내가 아는 클로저는 이 캐릭터 뿐이다 자바스크립트에서의 클로저란 무엇일까… 설명 MDN에서의 설명 A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). 클로저는 함수와 함수가 선언된 어휘적 환경 (Lexical Scope) 의 조합이다. MDN에 따르면 그렇단다 이게 무슨 말일까? 예시 function foo() { const str = "Hello World!"; function bar() { // 함수 bar의 선언부 console... 공감수 0 댓글수 2 2023. 7. 18.
  • UnhandledPromiseRejection UnhandledPromiseRejection [UnhandledPromiseRejection: 이 오류는 async 함수 내에서 catch 블록 없이 예외가 던져졌거나, promise가 .catch() 체인을 통해 핸들되지 않은 채 reject되었을 때 발생합니다. Promise는 다음의 이유로 reject 되었습니다: "window is not initialized"] 필자가 프로젝트에 Next.js 를 써서 그런진 모르겠지만 빌드를 할 때마다 window 객체가 존재하지 않을 때의 예외처리가 제대로 되어있지 않다는!! 오류를 겪었다 서버사이드 렌더링 시에는 당연히 window 객체가 존재하지 않겠죠? 문제는 검색해본 대로 try-catch문을 여기저기 달아봐도 오류 핸들링이 되지 않는 것이었다… 해.. 공감수 0 댓글수 0 2023. 7. 17.
  • [Typescript] 인덱스 시그니쳐 인덱스 시그니쳐 interface Record { [key: string]: string; } 이러한 코드를 언젠가 본 적이 있을 것이다 나도 종종 썼는데 이게 인덱스 시그니쳐인 줄은 몰랐었다 인덱스 시그니쳐란 { [key: T]: U } 위와 같은 형식으로, T와 U 모두 타입을 의미한다 인덱스 시그니쳐는 키 (Key) 와 값 (Value) 의 타입을 정확히 명시해야 하는 경우이면서 객체가 형식일 때 사용되는 타입이다 { 'chichoon': { site: 'blog.chichoon.com', name: 'chichoon', }, 'nongdamgom': { blog: 'nagano-market.co.jp', name: 'nongdamgom', } 'babo': { blog: 'babo.com', na.. 공감수 0 댓글수 0 2023. 7. 14.
  • 이벤트 버블링과 캡쳐링 이벤트 버블링, 캡쳐링 다른 과제 얘기하다가 나왔는데 사실 내가 이벤트 버블링과 캡쳐링에 관해 확실히 짚고 넘어가질 않아가지고 약간 얼떨떨했던 기억이… 이번 기회에 좀 되짚고 가려고 한다 세 가지 이벤트 흐름 이벤트 흐름이란? 이벤트가 발생하였을 때 DOM 트리에서 이를 수신하는 세 가지 단계를 뜻한다 1. 캡쳐링 단계 window (최상위 요소) 부터 이벤트가 발생한 위치 (target) 까지 이벤트가 전파되는 단계이다 이벤트는 최상위 요소에서 시작해 아래로 전파된다 2. 타깃 단계 이벤트가 실제 target 으로 전달되는 단계이다 캡쳐링 단계에서 최상위부터 전파되던 이벤트는 타깃에 도착한 뒤 실행된다 3. 버블링 단계 이벤트가 target 으로부터 상위 요소로 전파되는 단계이다 타깃 단계에서 실행된 .. 공감수 1 댓글수 0 2023. 7. 13.
  • 스코프, 렉시컬 스코프 스코프와 렉시컬 스코프 원래 클로저, 커링도 같이 적으려고 했다가 분량조절 실패로 렉시컬 스코프 부분을 따로 분리했다 스코프 특정 변수에 접근할 수 있는 범위를 의미한다 스코프는 변수를 다른 변수와 구분할 수 있는 규칙이 되며, 같은 이름을 갖더라도 어느 스코프에 속해 있는지에 따라 변수를 구분한다 이름이 같더라도 변수가 속한 스코프에 따라 서로 다른 변수로 인식한다는 뜻이다 function foo() { let n = 2; // foo 스코프 } function bar() { let n = 3; // bar 스코프 } function baz() { let n = 4; // baz 스코프 } 위의 예시에서 foo, bar, baz 내의 변수 n은 이름이 모두 같아 언뜻 보면 식별이 불가능할 것 같지만, .. 공감수 0 댓글수 0 2023. 6. 26.
  • [Violation] took 1000⬆️ms [Violation] took 1000⬆️ms 이게 뭐지 앞에서 this 바인딩 문제를 해결하니 이번엔 이상한 경고가 출력된다 대충 이 핸들러 호출하고 종료되기까지 1016초 걸렸으니 왠만하면 비동기로 동작하게끔 하는 게 좋겠다 라는 의미이다 또한 이 경고는 숨길 수가 없다고 한다 원인은 경고 출력용 alert 함수 때문이었는데, alert로 출력된 경고 메시지의 ‘확인' 버튼을 눌러야 함수가 종료되었다고 판단하기 때문에 확인 버튼을 언제 누르냐에 따라 위의 경고 메시지의 시간이 달라진다 테스트해보니 3초 뒤에 클릭하면 대충 3초 조금 넘는 시간이 걸렸다고 나왔다 만약 경고 메시지의 확인 버튼을 10분 뒤에 누르면 아마 600,000ms 걸렸다고 나오지 않을까… alert 함수는 위의 함수 종료를 지연시.. 공감수 1 댓글수 0 2022. 9. 21.
  • 이벤트 핸들러 this 오류 이벤트 핸들러 this 오류 문제 클래스 안에 있는 메서드를 핸들러로 부착하니 클래스의 멤버 변수들을 찾지 못하는 상황이 발생했다 처음에는 메서드가 프라이빗 메서드라 그런 건가? 싶어서 이리저리 고쳐봤는데, 알고 보니 this가 클래스 인스턴스를 가리키지 않고 이벤트가 걸린 요소를 가리켜서 그런 것이었다 원인 https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener MDN 문서에 따르면 이벤트 수신기 (이벤트 핸들러) 의 this는 이벤트가 걸린 대상 요소를 가리키게 된다고 한다 (= e.currentTarget이 가리키는 요소와 같다) 디버깅하느라 별 짓을 다 했는데 이런 이유가 있었다 해결 DOM요소.addEventListe.. 공감수 1 댓글수 0 2022. 9. 21.
  • 모듈과 모듈 번들러 모듈과 모듈 번들러 이 글은 웹팩과 웹팩 설정 관련 정리 포스팅을 적기 위한 빌드업이다 모듈 모듈이란 특정 기능을 가진 작은 코드 단위로, 웹팩에서는 하나의 파일을 하나의 모듈로 부른다 계산기를 만든다고 하면, 덧셈을 담당하는 파일, 뺄셈을 담당하는 파일 등 세부 기능 단위로 파일을 분리해서 그 함수를 다른 파일에서 가져다 쓰게 되는데, 각각의 파일이 모듈이라고 할 수 있다 한 파일 내에는 같은 주제의 함수 여러 개가 존재하고, 이를 내보내면 다른 모듈에서 가져와 사용하는 식으로 큰 기능을 구현한다 자그마한 테스트용 스크립트 파일이나 간단한 파일 입출력 연산 정도면 파일 한개로 구현이 가능하겠지만, 프로젝트 규모가 커지다 보면 절대 하나의 파일에 모든 기능을 몰아넣을 수 없고, 설렁 넣는다 해도 한 파일.. 공감수 0 댓글수 0 2022. 9. 12.
  • 콜 스택 (호출 스택) 콜 스택 (호출 스택) 개념 프로그램이 함수 호출을 추적할 때 사용한다 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하는지, 다음에는 어떤 함수를 동작하여야 하는지 등을 제어한다 스택의 LIFO (후입선출) 특성을 생각하면 호출 스택도 비슷한 원리로 동작함을 알 수 있다 메모리 구조에서 스택이 의미하는 것이 바로 이 콜 스택이다 힙이랑 다른 점 스택은 액세스가 빠르고, 힙은 상대적으로 느리다 힙은 사용자가 직접 변수 할당 및 해제를 관리해줘야 하지만, 스택은 관리할 필요가 없다 (CPU가 알아서 관리해줌) 힙은 메모리 단편화가 일어날 수 있지만, 스택은 그렇지 않다 스택 내의 변수는 해당 스코프 내에서만 접근할 수 있지만, 힙 내의 변수는 (주소값만 알고 있다면) 전역적으로 접근 .. 공감수 0 댓글수 0 2022. 8. 27.
  • 자바스크립트 일반함수 vs 화살표함수 일반 함수 vs 화살표 함수 (람다식) 참고로 필자는 자바스크립트 입문을 let, const, 화살표함수로 했기에 그것만 주구장창 썼는데 이걸 왜 쓰는지는 명확히 이해하지 못했다 (그냥 일반함수랑 똑같이 작동한다고 생각했음) 언젠가 두 개의 차이를 정리해봐야겠다 막연한 생각은 했었는데 그게 지금이 될 줄은 일반 함수 function foo() { console.log("foo"); } 평범하게 작성한 함수이다 const bar = function foo() { console.log("foo"); } 변수에 할당하고 싶다면 이렇게 작성한다 화살표 함수 const foo = () => { console.log("foo"); } 화살표를 이용해서 조금 더 간결하게 작성되는 함수이다 ES6에서 추가되었으며, 람.. 공감수 0 댓글수 0 2022. 8. 27.
  • 자바스크립트에서의 Symbol Symbol 뭐 하는 녀석인지? 태초에 자바스크립트는 원시 자료형 5개와 객체 자료형 1개 총 6개의 자료형으로 이루어져 있었다 Number, String, Boolean, null, undefined 그리고 객체 Object가 그것이었는데, ES6 (2015년) 에 원시자료형팀 환상의 식스맨으로 Symbol이 합류했다 심볼은 객체의 고유 식별자로 활용할 수 있는 원시자료형으로, 쉽게 말해 객체 내부 프로퍼티의 키를 설정할 때 사용할 수 있다 심볼을 사용하면 프로퍼티 키가 겹치지 않고 고유한 값으로 설정되므로, 키가 중복으로 설정됨으로써 발생하는 충돌을 막을 수 있다 프론트엔드에서 클래스명을 겹치지 않게 설정하기 위해 CSS module을 사용하거나, CSS-in-JS 라이브러리들 (Styled Comp.. 공감수 0 댓글수 0 2022. 8. 20.
  • 자바스크립트에서의 싱글톤 패턴과 static 자바스크립트에서의 싱글톤 패턴과 static 싱글톤의 의미 Singleton 이름의 ‘Single’ 에서 뭔가 한 개..? 하나의…? 라는 뜻이 연상된다 싱글톤은 특정 클래스에 인스턴스를 단 하나만 생성 (메모리를 단 한 번만 할당) 하여 사용하는 패턴을 의미한다 (= 메모리를 단 한 번만 할당한다) 특징 인스턴스가 딱 하나만 생성된다 (대개 private, static 등의 키워드를 이용하여 구현한다) ‘단 한 개’ 만 생성되는 인스턴스는 전역으로 참조될 수 있으며, 다른 객체들이 이 공유된 인스턴스에 접근할 수 있어 데이터 공유가 편리하다 메모리를 한 번만 할당하면 되기 때문에 효율이 좋다 인스턴스가 ‘단 하나' 임을 보장하고 싶을 때 주로 사용한다 단점 일반 클래스보다 더 복잡하며, 비동기적인 상황.. 공감수 0 댓글수 0 2022. 8. 8.
  • Set, Map Set 객체 특징 ES6에서 새로 도입한 자료구조이다 일반적인 배열과 비슷하게 원시 값, 객체 참조 모두 담을 수 있으며, 순회가 가능하다 다만 배열과 다른 점은, Set은 같은 값이 단 한 번만 나타날 수 있다 (중복 없음) 중복이 없는 유일한 값들의 집합이라고 생각하자 배열의 중복을 제거하고 싶을 때 잠깐 사용하거나, 처음부터 중복 없는 배열로 사용하고 싶을 때 쓰면 좋다 NaN과 undefined도 담을 수 있는데, Set에서 NaN은 여러 개 들어올 수 없다 (원래 NaN === NaN은 false이다) Set 객체에서 +0과 -0은 같은 값 취급된다 생성하기 const set = new Set(); // 빈 Set 객체 생성 console.log(set); // Set(0) {} const se.. 공감수 0 댓글수 0 2022. 7. 30.
  • 자바스크립트에서의 함수형 프로그래밍 함수형 프로그래밍 굳이 ‘자바스크립트에서의' 라는 문구를 넣은 것은… 예제 작성할 때 자바스크립트로 작성했기 때문이다 특별한 의미는 없다… 정의 객체지향과는 또 다른 프로그래밍 패러다임 ‘자료 처리를 수학적 함수의 계산으로 취급하고, 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임’ …이라고 하는데 이 말만 봐서는 뭔 얘긴지 아리송하다 객체지향은 여러 종류의 객체들을 유기적으로 엮어 프로그램을 완성시키는 기법 함수형 프로그래밍은 기능을 작은 함수 단위로 쪼개고, 작은 함수의 연산 반환값을 이용하여 큰 함수를 만들고, 이 큰 함수들로 더 큰 함수에 필요한 연산을 계산하고… 쌓아올리는 방식으로 프로그램을 완성시키는 기법 쉽게 말해 프로그램을 이루는 작은 연산 하나하나를 만들 때에도 함수의 계산을 이용하는 .. 공감수 0 댓글수 0 2022. 7. 30.
  • 자바스크립트에서의 객체지향 (2) 프로토타입 프로토타입 기반 언어 프로토타입 기반 언어? 자바스크립트에 클래스… 문법이 있긴 하지만 이건 ES6에 와서야 생긴 문법이고, 근본적으로 자바스크립트에는 클래스 개념이 없다고 보아야 맞다 대신 자바스크립트에는 프로토타입 개념이 있어 이를 이용하여 클래스를 흉내낼 수 있다 프로토타입 기반 언어는 객체의 원형인 프로토타입을 선언하고, 이 프로토타입 객체를 이용하여 새로운 객체를 만들어낸다 = 클래스랑 비슷한 방식으로 동작하는 것이다! 자바스크립트에서 함수는 객체인가요? 자바스크립트의 대부분 요소는 객체인가요? 자바스크립트의 대부분 요소는 객체인가요? 자바스크립트의 대부분 요소는 객체인가요? 전혀 관계없는 거 (함수 관련) 검색하다가 함수는 객체라는 글을 보고 꽂혀서 배열도? 클래스도? 하면서 찾아보니까 다 객.. 공감수 0 댓글수 0 2022. 7. 27.
  • 자바스크립트에서의 객체지향 (1) 객체지향 기본 객체지향 올 것이 왔다 자바스크립트 프로그래밍을 하면서 그 편의성 때문에 클래스를 종종 이용하는데, 물론 잘 알고 쓰는 것은 아니다 심지어 자바스크립트의 클래스는 정석적인 클래스도.. 아니었다고 한다 (하하) 간단하게나마 정리하고 적어도 왜 쓰는지는 알고 쓰는 것이 좋겠다 객체지향? 기존에는 프로그램을 명령어들의 집합이라고 생각했다면, 객체 지향 프로그래밍은 모든 데이터를 객체 (object) 취급한다 프로그래밍에서 필요한 모든 데이터들을 추상화시켜 상태와 행위를 가진 객체로 만들고, 객체들을 이리저리 조합하여 객체간 상호작용을 통해 프로그램을 구성한다 말 그대로 객체를 지향하는 프로그래밍인데, 지향이라고 하니까 좀 헷갈릴 수 있다 객체를 주축으로 사용하는 프로그래밍 방법론이라고 생각하자 객체지향의 특징.. 공감수 0 댓글수 0 2022. 7. 26.
  • 자바스크립트의 대부분 요소는 객체인가요? 자바스크립트의 대부분 요소는 객체인가요? 전혀 관계없는 거 (함수 관련) 검색하다가 함수는 객체라는 글을 보고 꽂혀서 배열도? 클래스도? 하면서 찾아보니까 다 객체였다 오죽하면 저 문장이 자동완성이 될까 싶어서 토막글로 기록해본다 사실 좀많이놀랐음 자바스크립트에서는 함수도 객체 취급된다 엄밀히 따지자면 자바스크립트에서 함수는 속성과 메서드를 가질 수 있는 일급 (first-class) 객체이고, 호출할 수 있다는 특징을 가지고 있으며, Function 생성자로 만들어진 객체이다 배열도 함수처럼 특별한 유형의 객체이다 자바스크립트에서 클래스는 class 키워드로 선언되었을 뿐인 함수이기 때문에 클래스도 객체다 사실상 원시 요소 (primitives) 를 제외하면 거의 다 객체이고, 이 원시 요소들마저도 객.. 공감수 0 댓글수 0 2022. 7. 26.
  • require, import, export 다른 파일에서 함수 가져오기 작업을 하다 보면 한 파일에 함수가 매우매우매우매우… 많아져서 보기 싫어질 때가 많다 파일을 분리하고, 해당 파일에서 함수를 불러오는 식으로 작업하면 한 파일당 한두 개의 함수에 집중할 수 있기 때문에 코드가 깔끔해진다 프론트엔드 컴포넌트를 만들 때도 거의 무조건 (특정 컴포넌트 안에서만 사용되는 한두줄짜리 컴포넌트가 아닌 이상) 한 파일에 컴포넌트 1개 룰을 지키면서 코딩하다 보니 이제 각 파일별로 주제가 명확하지 않으면 코드 읽기가 어려운 지경에 왔다 다른 파일에서 모듈을 불러오는 방법은 크게 두 가지가 있는데, require와 import이다 사실 다른 게시글에서 적었지만 정보가 상당히 빈약해서.. 삭제 후 더 자료검색해서 새로 작성하였다 require const Rea.. 공감수 0 댓글수 0 2022. 7. 25.
  • Throttle & Debounce Throttle & Debounce 예제에 useEffect가 들어가서 React 관련 게시글로 뺄까 고민해봤는데 그냥 자바스크립트 / 타입스크립트로 지정하였다 Throttle 지정된 시간 동안 함수를 최대 한 번만 호출하도록 한다 (일정 시간이 지나기 전까지 재호출을 방지한다) 특정 함수를 한번 호출했을 경우 지정한 시간 (예를 들면 1초) 이 흐르기 전까지 재호출이 되지 않도록 막는다 구현하기 ... let timeoutValue; if (!timeoutValue) { timeoutValue = setTimeout(() => { console.log(stateValue); // 여기에 throttling으로 실행시킬 함수 및 코드 배치 timeoutValue = null; // timeoutValue.. 공감수 0 댓글수 0 2022. 5. 18.
  • 비동기 처리와 Promise 비동기 처리와 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씩 증가하지 않는 이유가 ‘비동기’ 적인 작동방식 때문이라고 했었는데,.. 공감수 0 댓글수 0 2022. 5. 13.
  • [Typescript] Type vs Interface 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.. 공감수 0 댓글수 0 2022. 5. 9.
  • spread, rest 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.. 공감수 0 댓글수 0 2022. 4. 12.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

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

    © Kakao Corp.