본문 바로가기

javascript6

(LeetCode) 5. Longest Palindromic Substring (JavaScript) 문제 Given a string s, return the longest palindromic substring in s. 문자열 s가 주어졌을때 s의 substring 중 제일 긴 팰린드롬 문자를 찾아라 🤡 팰린드롬(Palindromic)이란? 거꾸로 읽어도 제대로 읽는 것과 같은 문장이나 낱말, 숫자, 문자열(sequence of characters) 등을 말한다. 풀이 팰린드롬 찾기 함수 팰린드롬은 길이가 짝수인 경우와 홀수인 경우로 나뉜다. 짝수인 경우 abba aa abccba ... 홀수인 경우 aba a abcba ... /** * 팰린드롬 문자열 찾기 함수 * * @param {string} s - Palindrome 검사할 문자열 * @param {string} i - Palindrome .. 2022. 8. 11.
Storybook에서 Failed to execute 'createElement' on 'Document' 에러 발생 🤔 증상 svg 파일을 로드하는 컴포넌트를 Storybook에서 불러왔으나 위와 같은 메세지가 발생하였다. 바쁘신 분은 바로 😀 조치 사항 확인 🧐 원인 1. svg 파일 로드를 위한 패키지 설치 webpack에서 svg 파일을 로드하기 위해서 아래 패키지를 설치하였다. npm install -D @svgr/webpack # 또는 yarn add -D @svgr/webpack 2. 기존의 storybook의 main.js의 webpack 설정 소스 코드 svg 파일을 로드하기 위해서는 webpack 설정이 선행 되어야하고 본인은 아래와 같이 설정하였음. module.exports = { webpackFinal: async (config) => { config.module.rules.unshift({ te.. 2021. 9. 8.
Recoil의 설치 및 기본 개념 🥸 Recoil은 왜 개발 했을까? 호환성 & 단순함 측면을 봤을때는 다른 상태 관리 라이브러리 보다 React 자체에서 제공해주는 상태 관리 기능을 사용하는 것이 좋습니다. (useState 라던지…) 하지만 React도 한계가 있습니다. (미친듯이 거대한 상태 트리라던가… 미친 랜더링을 야기할 수 있다… 무서웡…) 그럼 어떤 장점이 있을까? Native하다! (동시성 모드 같은 새로운 React 기능들과 호환 가능!… 내가 동시성 모드를 잘모른다는건 함정;;) 사용하는데 간편하다 (hooks 사용자라면 더더욱!) ⚙️ 설치/세팅 방법 1. 설치 잘쓰는게 어렵지! 설치 방법은 쉽다! 🥲 당연히 프로젝트 Root 디렉토리로 이동한 후 아래 명령어를 실행해준다 Recoil은 계속 개발 중입니다! night.. 2021. 5. 25.
[JavaScript] Vanilla JS로 상태 관리 모듈(redux) 만들기 개요 Vanilla JS로 hot한 상태 관리 모듈 redux를 만들어보려고 한다. 우아한 테크러닝 3기 (TypeScript & React)에서 김민태님의 강좌를 참고하였습니다. 해당 문서에는 redux의 기본 패턴인 Flux 패턴에 대한 기본적인 개념이 있어야 합니다. 본문 기본 Store 생성 함수 만들기 상태를 관리하는 객체 store를 만들어 줍니다. redux.js에서 기본 store 생성 함수 정의 Reducer 만들기 & Reducer를 통한 상태 업데이트 reducer는 상태를 업데이트 해주는 주최 입니다. dispatch는 store의 상태를 업데이트 하는 주최 입니다. 상태 값의 구독자 등록 함수 & 출판 함수 만들기 subscribe 함수는 상태 값이 업데이트되면 수신할 객체를 등록.. 2020. 9. 4.
[JavaScript] Safari에서 iPad 판단 하는 방법 (UserAgent, Navigator) 이 글로 버그 잡았으면 !!!! 댓글 하트 구독 박으세요 어서 보통 JavaScript에서 접속한 단말의 종류(ex. 데스크탑, 모바일)를 판단하는데 UserAgent라는 값을 참고함. 아니 근데 이런 양아치 애플님들이 작년부터 iPad의 데스크톱화를 말하면서 Safari에서 Mac Desktop 모델들과 같은 UserAgent 값을 보내주기 시작했다. 위와 같이 Google Chrome 착한 친구들은 브라우저에서 알아서 iPad인지 판단해서 User Agent 값을 넣어주더라... iPad Pro's UserAgent by Chrome iPad: CPU OS 13_6 like Mac OS X MacBook Pro's UserAgent by Chrome Macintosh, Intel Mac OS X 10.. 2020. 8. 21.
[JavaScript] clearTimeout / setTimeout 함수와 Singleton 패턴을 이용한 딜레이 함수 구현 개요 JavaScript의 setTimeout 함수를 이용하면 N초 뒤에 callback 함수를 실행 시킬 수 있다. 그런데 이때 기존에 실행된 callback 함수를 취소하고 다시 실행 시키고 싶을때는 어찌해야될까? 아래 예제는 clearTimeout / setTimeout 함수를 이용해서 singleton 패턴으로 중복 없는 delayed callback 함수의 예제이다. 본문 추가적으로 테스트 함수와 사용예제를 추가한 github 링크이다. https://github.com/minemanemo/js-example/tree/master/delayed-function 2020. 8. 21.