Given two strings: s1 and s2 with the same size, check if some permutation of string s1 can break some permutation of string s2 or vice-versa (in other words s2 can break s1). A string x can break string y (both of size n) if x[i] >= y[i] (in alphabetical order) for all i between 0 and n-1. Example 1: Input: s1 = "abc", s2 = "xya" Output: true Explanation: "ayx" is a permutation of s2="xya" whic..
Given a string s of zeros and ones, return the maximum score after splitting the string into two non-empty substrings (i.e. left substring and right substring). The score after splitting a string is the number of zeros in the left substring plus the number of ones in the right substring. Example 1: Input: s = "011101" Output: 5 Explanation: All possible ways of splitting s into two non-empty sub..
이 글은 Mobx 공식문서를 토대로 재해석한 글입니다. 서론 Mobx의 철학은 "애플리케이션의 상태로 부터 파생될수 있는 모든것들은 파생되어야한다" 입니다. 액션 이벤트는 액션을 일으킵니다. 애플리케이션의 state는 오로지 action을 통해서만 변경해야합니다. action은 state를 변경할뿐 아니라, 때로는 Side Effect를 일으킵니다. Side Effect 프로그래밍에서 사이드 이펙트란 함수 내부에서 함수 외부에 접근하여 영향을 주는 행위를 의미합니다. 예를들어 함수 내부에서 Disk I/O가 일어난다던지 네트워크 요청을 한다든지 하는것은 영향 범위가 함수 내부를 벗어났으므로 Side Effect가 발생한것입니다. Mobx가 관리하는 State는 Observable(관찰가능한)하며 최소한으..
이 글은 독자가 Promise에 대한 이해가 있다고 가정하고 진행합니다. class Component { handleClick = () => {}; handleClick(); } 클래스에서 메소드를 선언할때 arrow function을 사용하는 첫번쨰 방법(@babel/plugin-proposal-class-properties로 트랜스파일링 해야함)과 그냥 function을 사용하는 두번째 방법이 있습니다. function을 사용하는 경우 아래처럼 굉장히 불편한 상황을 겪게 됩니다. class Component { constructor() { this.handleClick = this.handleClick.bind(this); // 2. this바인딩을 매번 해줘야 해서 귀찮다.. } // 1. func..
Given an array of strings, group anagrams together. Example: Input: ["eat", "tea", "tan", "ate", "nat", "bat"], Output: [ ["ate","eat","tea"], ["nat","tan"], ["bat"] ] Note: All inputs will be in lowercase. The order of your output does not matter. 풀이방법 우선 anagrams이 뭔지 찾아봤더니 그냥 어떤 문자열내의 문자를 섞었을때 나올 수 있는 다른 문자열들이란 의미였다. 예를들어, eat에서 a를 맨 뒤로 보내면 eta가 된다. 이 둘은 anagram이다. 그래서 우선 간단하게 풀 수 있는 방법을 생각해봤다..
문제 설명 스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다. 노래는 고유 번호로 구분하며, 노래를 수록하는 기준은 다음과 같습니다. 속한 노래가 많이 재생된 장르를 먼저 수록합니다. 장르 내에서 많이 재생된 노래를 먼저 수록합니다. 장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록합니다. 노래의 장르를 나타내는 문자열 배열 genres와 노래별 재생 횟수를 나타내는 정수 배열 plays가 주어질 때, 베스트 앨범에 들어갈 노래의 고유 번호를 순서대로 return 하도록 solution 함수를 완성하세요. 제한사항 genres[i]는 고유번호가 i인 노래의 장르입니다. plays[i]는 고유번호가 i인 노래가 재생된 횟수입니..
클래스형 컴포넌트를 작성해보신분들은 Class의 형태로 리액트 컴포넌트를 정의하고 그것을 인스턴스화해서 화면에 컴포넌트를 렌더링 하는 과정을 알고 있을겁니다. 그럼 Elements는 대체 뭘까요? 지금까지의 UI 라이브러리들은 자식 컴포넌트의 생성과 제거의 책임을 부모 컴포넌트에게 돌렸습니다. 그래서 부모 컴포넌트의 값이 바뀌면 그 부모컴포넌트에서 자식을 새롭게 갱신하는 작업을 해줬어야 했죠. 부모 컴포넌트는 자식 컴포넌트 관리뿐만아니라 본인이 가지고 있는 DOM Node도 관리해야합니다. 부모에게 너무 많은 역할을 맡긴것입니다. state가 늘어날수록 코드는 제곱으로 늘어납니다. 그리고 부모가 자식을 직접적인 참조로 가지고 있기 때문에 부모와 자식이 아주 강하게 묶여 있다는 단점도 있었죠. 리액트는 이..
blog.cloudboost.io/3-reasons-why-i-stopped-using-react-setstate-ab73fc67a42e 3 Reasons why I stopped using React.setState Since a few months I’ve stopped using React’s setState on all my new React components. Don’t get me wrong, I didn’t stop having local… blog.cloudboost.io 나는 리액트 컴포넌트의 local state 관리 방식을 사용하지 않기로 했다. 리액트 초심자에게 setState는 다소 까다롭다. 아래 상황을 보자.나는 리액트 컴포넌트의 local state 관리 방식을 사용하지 않..
- Total
- Today
- Yesterday
- reactdom
- rendering scope
- Next.js
- javascript
- reducer
- async
- reflow
- await
- computed
- state
- react
- mobx
- props
- type alias
- server side rendering
- hydrate
- typescript
- Babel
- storybook
- return type
- react hooks
- useEffect
- useRef
- Polyfill
- es6
- Action
- atomic design
- webpack
- design system
- promise
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |