문제출처 생각 주어지는 문자열이 사전의 몇번째에 있는지 리턴하는 문제 총 5개의 알파벳이고 각 글자당 5개의 가짓수가 생김 5^5 =>3125갯수의 사전단어가 생기고 모든 경우를 탐색해야함 dfs로 모든 경우 탐색 풀이 코드 order = 0 def solution(word): answer = 0 dic = {} lst =["A","E","I","O","U"] def dfs (s): global order if len(s) > 5: return dic[s] = order; order += 1 for i in lst: if(len(s+i) > 5): return dfs(s + i) dfs("") return dic[word]

Next.js는 React Framework 💪 SEO를 위한, SSR을 해주는 프레임워크라고만 알고있었다. 서버에서 미리 렌더링하는 것, 클라이언트에서 렌더링하는 것의 속도차이를 먼저 영상으로 확인해보고 글을 진행합니다. pre-render 유무의 따른 속도차이비교 클라이언트 렌더링 서버 pre-rendering 깜빡거리는건 새로고침입니다. 👏 Next.js가 해주는 것들 React에서 고려했어야할 것들을 해준다. 웹팩과 같은 번들러로 코드를 번들 바벨과 같은 컴파일러를 사용해 변환(브라우저에 적용되지 않을 수 있는 코드를 문법에 맞도록 트랜스파일링) 코드스플리팅으로 production 최적화 성능 또는 SEO를 위한 Pre render (SSR, CSR을 사용) 추가로, Next.js는 다음과 같은 ..

Redux 직접 작성한 예제를 기반으로 작성 코드와 같이 보시면 더욱 도움될 것 같습니다 0. flow 이전 글 에서 크게 달라지는 것이 없다. Action, Reducer은 완전하게 동일하다. 달라지는 점은, Context API에선 전역 데이터에 접근하기 위해 Provider에 등록했고 Reducer를 호출하기 위한 Context도 생성해주었다면 Redux에선 useDispatch 를 통해 reducer에 action을 전달해줄 수 있다. 또한 useSelector 를 사용해 useContext 를 사용하지 않고 바로 전역 데이터를 가져올 수 있다. Flow는 다음과 같다. Store(전역 데이터 저장공간)생성 하위 컴포넌트에서 접근할 수 있도록 Provider로 전역 데이터 내려주기 하위데이터에서 ..

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. - 공식문서 위의 말처럼 기계적인 props전달 코드를 없앨 수 있는 방법 중 하나다. 전역데이터를 공유하는 방법이며 로그인 유저, 테마 등의 데이터를 관리한다. Context API란 전역상태관리의 방법 중 하나이며 redux, react-router, styled-components이 이를 기반으로 구현되어있다. React패키지에서 제공하는 기능이다. (써드파티 라이브러리 X) Context API 시작 전, 알아야할 것 1. Context 객체의 형태로 전역 데이터를 담는 store라고 생각할 수 있다. const MyContext = React.createContext(defa..

redux의 배경이되는 Flux패턴과 이를 기반으로한 redux를 이해하기 위해 작성 Facebook에서는 알림기능에서 에러가 반복되어 양방향 데이터흐름의 MVC패턴에서 예측되지 않는 문제점을 해결하기 위해 Flux패턴을 도입했다고 한다. What is Flux ? 시작하기전 읽어보면 좋은 글 - flux패턴 시작하기전 보면 좋은 만화 - flux 패턴 MVC Facebook에서 사용했던 해당 패턴은 새로운 기능이 추가될 때 복잡도를 증가시키고 예측하지 못할 버그가 존재했다. 구체적으로는 알림기능이었는데, 양방향 데이터흐름이 만들어내는 예측하지못할 버그가 계속 발생하여 이를 해결하기 위해 flux패턴을 도입했다고 한다. Flux flux는 클라이언트 Web App을 만드는데 사용하는 아키텍쳐다. MVC와..

Drag Event HTML Tag에 draggable 속성을 주면 해당 요소를 드래깅할 수 있다. 농담곰 웹 API에서 지원되는 Events는 다음과 같다. Drag Event 이벤트 설명 onDrag Item을 잡았을 때 발생 onDragEnter 잡은 Item이 다른 Item이랑 겹쳤을 때 발생 onDragLeave 잡은 Item이 다른 Item을 떠났을 때 발생 onDragOver 잡은 Item이 다른 Item과 겹쳐졌을 때 milli sec마다 발생함 onDragStart Item을 잡기 시작했을 때 발생 onDrop 잡은 Item을 적절한 곳에 놓았을 때 발생 onDragEnd 잡은 Item을 놓았을 때 발생 이 중에서 내가 DnD를 구현하기 위해 사용했던 이벤트는 다음과 같다. onDragS..

TS - Type, Interface, Generic, React에서 TS 정리 Type Test해보는 사이트 각 Component 폴더에서 types.ts 를 분리해 import로 사용함. 1. 함수 function formatDate(d : Date) : string{ ... return ... } 매개변수에 대한 타입(Date) : 으로 지정 Return Type(string) : 으로 지정 const formatDate = (d : Date | number, delimiter?: string) => { ... } ? 는 Optional | 는 Date or number 2. 타입 let value : any; //타입을 지정합니다. value = 'abc'; value = 123; ... enum..

실행컨텍스트 실행컨텍스트는 코드가 실행되기 위해 필요한 환경 이미지출처, 내용참고사이트 자바스크립트가 call Stack으로 코드를 처리하는 것은 알고있다. 이 Call Stack에 쌓이는 것은 함수다. 쌓인다고 해서 내부 로직이 실행되는 것이 아니다. 이 함수가 실행되려면 필요한 것들이 있다. 함수 내부에서 사용되는 변수나 전달받은 arguments, 내부 함수, 해당 함수의 스코프가 어떻게 되어있는지 등에 대한 관련 정보들이 어딘가에 선언되어있어야 작성된 함수가 올바르게 수행될 수 있다. 이 정보들을 담는 환경(공간)이 "실행컨텍스트"이다. 실행컨텍스트란, 코드가 실행되기 위해 필요한 환경이다. 실행컨텍스트 스택 Global EC는 브라우저 종료시까지 사라지지 않는다. call stack과 같다보면 ..

호이스팅 먼저 염두에 둘 것들. 여기서 한가지 염두에 두고 글을 읽어야할 것이 있는데, JS엔진이 행하는 컴파일과정, 실행과정을 나누어서 생각을 해야한다. 컴파일은 말 그대로 실행전, 인터프리터가 코드를 실행할 수 있도록 준비해놓 단계이고 실행은 바이트코드로 이루어진 기계어를 실행하는 것이다. 호이스팅 ? 코드 실행 전, 컴파일 단계에서 메모리에 함수, 변수가 메모리에 저장되어(var한정, var는 선언과 동시에 초기화가 이루어짐으로서 메모리가 할당된다.) 선언문이 끌어올려지는 것처럼 표현되는 것. 선언과 할당을 분리해서 생각해야함. 선언부터 처리됨을 기억. Hoisting은 아래에 있는 것을 들어올린다라는 뜻이다. JS에서는 선언된 변수 및 함수를 코드의 상단으로 끌어올리는 것으로 얘기한다. 그럼 정말..

이전글에서는 자바스크립트 엔진이 js를 어떻게 읽고 해석하는지에 다뤘습니다. 해당 글은구성요소와 이벤트루프가 어떻게 돌아가는지에 대한 글입니다. ? 자바스크립트 엔진이 또 다른 일을 해 ? V8은 single thread으로 되어있는 실행 엔진이고 상당히 많은 일을 한다. js코드를 해석, 실행도 하며 callStack을 다루며 memory 할당도 관리하고 GC도 하며 .. 등등을 담당한다. 뭐 엄청나게 많은 일을 하지만 여기선 이벤트루프 관련 글이기에 해당 부분만 다룬다. 자바스크립트 엔진의 구성요소 메모리들을 저장하는 영역인 Heap, 함수의 호출시점을 기억하는 Call Stack으로 이루어져있다. Memory Heap 함수나 변수들을 저장하는 공간. C의 경우 개발자가 할당한 메모리에 대해선 해제를..