전체 글 (5) 썸네일형 리스트형 [자바스크립트] 해시테이블(HashTable)을 만들어보기 자료구조 중에서 해시 테이블은 빠르게 데이터를 검색할 수 있는 자료구조입니다.내부적으로 버킷(배열)을 관리하여 중복되는 데이터가 생기지 않게끔 관리하고, 각각의 key를 미리 작업된 해시 함수를 통해서 고유의 index를 생성하고 이를 활용하여 데이터를 검색하는 로직을 가집니다. 특히 해시테이블에서 제일 중요한 부분인 인덱싱 충돌을 방지하기 위해서는 해시 함수를 잘 활용하는 것이 중요합니다. 위의 이미지처럼 특정 키를 해시 함수에 의해 변환되어 인덱스로 바꾸는 과정을 거치게 됩니다.필자는 2가지 해시 함수를 활용해서 해시테이블을 작성할 예정입니다. 해시 테이블을 구현하는 방법에는 다양한 방법이 있겠으나, 필자는 배열을 이용해서 해시 테이블을 구현하였습니다.크게 다뤄볼 메서드는 다음과 같습니다. hash(.. [자바스크립트] Array 인터페이스에 대해서 알아보자 문득 Array 인터페이스에 대해서 알고 싶어졌다.배열(Array) 내에서 사용할 수 있는 api는 어떤 것이 있으며 각각의 특징에 대해서 알아보자 1. length : number/* 배열의 길이를 알 수 있음 가장 큰 인덱스보다 1이 더 크다.*/const arr = [];console.log(arr.length); // 0 2. toString() : string/* array의 값을 문자열로 표현*/const arr = ["1", "2"];console.log(arr.toString()); // 1,2 3. toLocaleString() : string/* 배열을 문자열로 반환 국제화(지역화) 처리함*/const date = new Date("2025-01-01");const numb.. classnames 라이브러리 구현해보기(for 자바스크립트) classnames 라이브러리는 React에서 스타일을 사용하신 분이라면 알고 있을 겁니다.React에서 className을 활용해서 스타일을 다음과 같이 지정해 줍니다. setGroup(e.target.value)}> {groups.map((value) => { return {value}; })} 위와 같이 설정하면 다음과 같이 React 환경 내에서 클래스를 암호화해줍니다. 다중 클래스를 적용하기 위한 방법은 여러 가지가 있습니다.템플릿 리터럴 방식으로 클래스 이름을 넘겨줄 수도 있고, 배열의 형태로 넘긴 후 문자열로 합칠 수도 있지만 가독성이 많이 떨어집니다.이를 개선하기 위해서 나온 방식이 classnames입니다. 전체 코드는 다음과 같습니다. /* classnames 함수.. create-react-app 환경에서 폴더 절대경로 설정하기 (feat. craco) 목적CRA(create-react-app) 환경에서는 디렉토리 구조를 간결하게 하기 위해서 webpack에 설정이 들어있는 config와 script 폴더를 숨겨놓습니다.커스텀을 하기 위해서는 npm run eject를 이용해서 숨겨져있는 폴더를 보여주는 방법이 있겠지만 이렇게 되면 이전 상태로 돌아갈 수 없게 돼서 신중하게 해야 합니다.특히 경로 설정이나 크로스 브라우징을 위한 바벨 설정과 같이 작업하고 있는 웹 애플리케이션에 따라서 다르게 대응해야 하는 경우에 커스텀의 중요성이 높아집니다. npm run eject 말고 사용자가 CRA(create-react-app) 환경에서 커스텀 할 수 있는 방법이 있습니다. 그것이 바로 craco를 활용한 환경설정입니다. 설치패키지의 최신 버전과 별칭 설정을 위.. 리액트는 함수 컴포넌트(function component)를 구성하는가 함수형 컴포넌트(functional component)를 구성하는가 리액트를 공부를 하다가 아래의 discussion을 보게 되었다. https://github.com/reactjs/react.dev/pull/863 Rename "functional component" to "function component" by gaearon · Pull Request #863 · reactjs/react.devRelated to discussion in https://mobile.twitter.com/getify/status/993127777057550336 Yay or nay?github.com 리액트는 함수형 컴포넌트(functional component)를 구성하는가 함수 컴포넌트를 구성하는가에 대한 논의를 펼친 부분인데결론적으로 말하면 리액트는 함수 컴포넌트(functio.. 이전 1 다음
