본문 바로가기

JavaScript

Front-End 2023. 8. 22. useEffect 의 첫번째 인자로 async 함수를 넘기면 안돼는 이유 React 사용시 useEffect 훅에 async 함수를 넘겨서 다음과 같은 에러를 겪은적이 한두번씩 있을것 이라고 생각합니다. useEffect 의 콜백 함수 인자는, 콜백함수 자기 자신과 return 되는 클로저 함수를 통해 동작 하는 함수입니다. 이 클로저 함수는 clean-up 기능을 담당합니다. 하지만 async 함수는 Promise 객체를 리턴 하는 함수입니다. 따라서 내부에 clean-up 함수가 포함되어 있더라도, useEffect 가 전달받은것은 그저 Promise 객체이기 때문에, useEffect 훅에서 cleanUp 함수를 전달받을수가 없게됩니다. function useEffect (cleanUp, deps) { ... if (typeof cleanUp === 'function' ..
CS/알고리즘 2023. 6. 19. [JS 알고리즘] - 이진 검색 (Binary Search) 아래 강의를 듣고 내용을 정리한 포스트 입니다. https://www.udemy.com/course/best-javascript-data-structures/ 이진 검색은 선형 검색에 비해 훨씬 빠르게 검색을 완료할수 있습니다. 하나의 항목을 확인 할때마다 남은 항목의 절반을 없앨수 있습니다. 하지만 정렬된 리스트를 대상으로만 작동하므로 데이터가 정렬되어 있어야 합니다. 아래와 같이 정렬된 데이터가 있다고 가정해보겠습니다. const US_States = [ "Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "..
CS/알고리즘 2023. 6. 18. [JS 알고리즘] - 선형 검색 (Linear Search) 아래 강의를 듣고 내용을 정리한 포스트 입니다. https://www.udemy.com/course/best-javascript-data-structures/ 먼저, 여기에서 다루는 검색은 JS 의 배열 에 대한 검색 입니다. 선형 검색 (Linear Search) 아래와 같이 모든 미국의 주 이름을 담아둔 배열 데이터가 있다고 가정해 보겠습니다. 그리고 사용자가 주소를 입력해야하는 상황이라고 가정해보겠습니다. 우리는 사용자가 입력한 내용을 이 데이터 안에서 찾아야 합니다. const US_States = [ "Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "G..
CS/알고리즘 2023. 5. 22. [JS 알고리즘 - 재귀5] 순수 재귀 아래 강의를 듣고 내용을 정리한 포스트 입니다. https://www.udemy.com/course/best-javascript-data-structures/ 이번 포스트는 이전내용과 이어집니다 https://yoonocean.tistory.com/64 [JS 재귀 - 4] 헬퍼 메소드 재귀 아래 강의를 듣고 내용을 정리한 포스트 입니다. https://www.udemy.com/course/best-javascript-data-structures/ JavaScript (JS) Algorithms and Data Structures Masterclass 정렬, 리스트, 힙 스택을 포함한 12개의 알고리즘과 10 yoonocean.tistory.com 지난 헬퍼메소드 재귀에서 예시로 들었던 문제를 다른 방식..
CS/알고리즘 2023. 4. 26. [JS 알고리즘 - 재귀4] 헬퍼 메소드 재귀 아래 강의를 듣고 내용을 정리한 포스트 입니다. https://www.udemy.com/course/best-javascript-data-structures/ JavaScript (JS) Algorithms and Data Structures Masterclass 정렬, 리스트, 힙 스택을 포함한 12개의 알고리즘과 10개 이상 자료구조 학습으로 기술 면접 완벽하게 대비! www.udemy.com 헬퍼 메소드 재귀라는 설계 패턴에 대해 알아보겠습니다. 이 패턴은 재귀 알고리즘을 사용할 때 유용하게 활용됩니다. 그럼 먼저, 기존의 팩토리얼과 같은 단일 단독 함수에 대해 이해해봅시다. single standalone function 기존의 팩토리얼 같은 풀이법은 함수 외부에서 호출하면, 팩토리얼은 자체 코드..
CS/알고리즘 2023. 4. 24. [JS 알고리즘 - 재귀3] 통상적인 재귀의 잠재적 위험 아래 강의를 듣고 내용을 정리한 포스트 입니다. https://www.udemy.com/course/best-javascript-data-structures/ JavaScript (JS) Algorithms and Data Structures Masterclass 정렬, 리스트, 힙 스택을 포함한 12개의 알고리즘과 10개 이상 자료구조 학습으로 기술 면접 완벽하게 대비! www.udemy.com 이번에는 재귀 솔루션을 작성할때 흔히 발생하는 함정에 대해 알아보도록 하겠습니다. 1. 종료 조건이 없는 경우 가장 흔한 실수 중 하나는 종료 조건이 없는 경우입니다. 종료 조건이 없으면 콜 스택에 계속 함수가 쌓이게 되고, 'maximum call stack size exceeded' 에러가 발생합니다. 노드..
CS/알고리즘 2023. 4. 22. [JS 알고리즘 - 재귀2] 재귀 함수의 작성 조건 아래 강의를 듣고 내용을 정리한 포스트 입니다. https://www.udemy.com/course/best-javascript-data-structures/ JavaScript (JS) Algorithms and Data Structures Masterclass 정렬, 리스트, 힙 스택을 포함한 12개의 알고리즘과 10개 이상 자료구조 학습으로 기술 면접 완벽하게 대비! www.udemy.com 이번 글에서는 재귀 함수를 작성할 때 반드시 고려해야 하는 두 가지 전략에 대해 알아보겠습니다. 1. 종료 조건의 존재 재귀 함수를 작성할 때 가장 중요한 것 중 하나는 종료 조건(base case)을 설정하는 것입니다. 종료 조건은 재귀가 멈추는 시점으로, 루프에 중단점이 있어야 하는 것처럼 재귀적으로 무한히..
CS/알고리즘 2023. 4. 22. [JS 알고리즘 - 재귀1] 재귀와 콜 스택 의 관련성 이해하기 아래 강의를 듣고 내용을 정리한 포스트 입니다. https://www.udemy.com/course/best-javascript-data-structures/ JavaScript (JS) Algorithms and Data Structures Masterclass 정렬, 리스트, 힙 스택을 포함한 12개의 알고리즘과 10개 이상 자료구조 학습으로 기술 면접 완벽하게 대비! www.udemy.com 재귀는 프로그래밍에서 솔루션 작성에 관한 새로운 사고 방식입니다. 이 글에서는 재귀에 대한 개념과 그 유용성을 이해하고, 재귀 함수 작성의 두 가지 핵심 구성 요소를 배울 것입니다. 또한, 콜 스택이라는 개념과 그것이 재귀와 어떤 관련이 있는지 알아봅니다. 재귀 함수란 무엇인가? 재귀 함수는 자기 자신을 호출하..
Front-End 2023. 4. 17. HTML, CSS, JavaScript의 주요 차이점은 무엇일까? 경력이 만 1년 정도 되어 이직을 준비하고 있는 요즘, 내가 얼마나 내 직무에 대해 이해하고 있고, 기술을 얼마나 이해하고 작업하는지, 내가 준비되어 있는지 궁금해졌습니다. 그래서 gpt 에게 아래처럼 물어봤습니다. 난 이직을 준비하는, 경력 만 1년된 프론트엔드 개발자야. 네가 면접관이 된거처럼 나한테 기술면접 질문을 해줄래? 이 질문에 대해 10가지 면접 질문이 들어왔습니다. 그중 첫번째가 제목과 같습니다. 막상 실제 상황이라고 생각하고 답하려니 벌써부터 숨이 막히더군요. 제가 생각한 답변과 그 내용에 대해 좀더 깊이 기록해 보겠습니다. 나의 답변 html 은 어떠한 리소스 요청에 대해 우리가 웹 브라우저를 통해서 볼수 있는 문서이고, DOM 구조와 외부 리소스에 대한 정보를 담고 있습니다. css ..
npm 2023. 4. 17. npm 에 내가만든 패키지 배포하기 - (1) : React 컴포넌트와 Custom Hook 을 패키지로 만들기 지난 포스팅에 이어서 이번에는 어떻게 리액트 컴포넌트와 커스텀 훅 코드를 패키지 형태로 배포하는지 그 과정을 공유 해볼까합니다. 만약 패키지를 배포 하기위해 개발환경 세팅부터 해야한다면, 여기를 눌러주세요 npm 에 내가만든 패키지 배포하기 - (0) : 프로젝트 세팅 가이드 이전에 사이드 프로젝트를 진행하면서, 특정 UI 옆에 tooltip 말풍선 을 출력하는 형태의 React 컴포넌트를 개발해본적이 있습니다. 언젠가는 이걸 라이브러리화 해서 npm 에 배포해보자는 생각이 있 yoonocean.tistory.com 저의 경우, 배포할 소스의 entry 지점을 src 폴더로 지정했기 때문에, 패키지로 만들 원본 소스 코드를 src 폴더에서 관리합니다. 또한 타입스크립트로 개발을 하기때문에, 트랜스파일링..

티스토리툴바