FRONTEND 36

재귀...(recursion) with 순열, 조합 알고리즘 구하기

재귀란...? 사실 재귀의 사전적 의미자체를 모르는 사람은 없을 것이다. 단지 적용이 어려울뿐... 오늘은 그래서 내가 뭔가 a-ha! moment가 왔던 부분에 대해 정리를 해보고자 한다. 그래서 도대체 뭘 깨달았냐고 ? 지금 와서 돌아보면 당연한 거지만, 몇시간 전만 해도 이해가 도저히 안되던 부분이라 정리를 해보고자 한다. 우선, 중복되는 순열을 구하는 법에대해 이해했다. 사실, 이전 블로그 글에 순열과 조합을 구하는 방법에 대해 정리를 하기는 했었다. 하지만 이번에 학습을 하면서 약간, 내 기준으로는 많은 발전이 있어 다시 정리를 한다. 그래서 뭐를 깨달았다는건데 ??? 사실 예전에는 재귀를 사용할때, 위와 같이 aux(input, temp.concat('sth'), count+-1) 이라는 방식..

FRONTEND/JavaScript 2021.07.21

재귀적으로, while문으로 dfs구현하기 (feat. 재귀함수 undefined)

기초가 부족한 탓인지, 요즘 알고리즘, 재귀가 갑자기 더 어렵다고 느껴지기 시작한다.(원래 어려웠지만... 예전에는 당연하게 넘어갔던 것들이 지금 와서 발목을 잡기 시작한다.) 그래서 알고리즘에 자주 나오는 dfs를 구현하면서 재귀에 관련하여 정리를 해보기로 헀다. 우선, Tree구조로 우리가 탐색할 자료를 클래스를 이용하여 만들어 보기로 했다. 위의 상황에서 아래와 같은 코드를 작성하게 되면, 위와 같은 형식의 tree 구조가 만들어지게 된다. 여기까지는 큰 어려움이 없을텐데... 오늘 focus를 두고 싶은 것은, 여기에서 내가 찾고싶은 value를 가지고 있는 해당 객체를 return 하는 함수를 구현 하는 것이다. 우선, 위에서 정의한 dfsTest를 input이라는 배열에 담아 놓았고, 이 배열..

FRONTEND/JavaScript 2021.06.13

useEffect의 정의와 사용방법에 대하여.(feat. side effect 란 무엇인가?)

우선, useEffect에 대해 얘기를 하기전에 "side effect"라는 것에 대해 짧게 정의해보고자 한다. side effect 란?? 일반적으로 React에서 side effect라 함은, React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 일컫는다. (이러한 sideeffect는 짧게 'effect' 라고 불려진다.) 왜냐하면, 이러한 작업들은 다른 컴포넌트에 영향을 줄 수 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문이다. 그렇다면, 이제 원래 우리가 알고 싶어했던, useEffect에 대해 알아보자. useEffect 란?? effectHook, 즉, useEffect는 함수 컴포넌트 내에서 위에서 설명한 side effect를 수행할 수 있게 해..

FRONTEND/React 2021.06.12

fetch는 도대체 어떻게 사용하는 걸까?

오늘은 내가 HA를 치르면서 내가 안다고 생각했지만, 그렇지 못했던 것들에 대해 정리해 볼 생각이다. 그 첫번째로 fetch를 들겠다. What is Fetch and how to use it? Mdn에 따르면, fetch api는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있으며, XML HttpRequest와 같은 비슷한 API가 존재하지만, 새로운 Fetch API는 좀 더 강력하고 유연한 조작이 가능하다. 나는 도대체 뭔말인지 모르겠다. 아래의 예를 보며 자세히 알아보자. fetch를 사용하는 구조는 아래와 같다. 그래. 사용하는 방법은 대강 알겠다. fetch에다가 접속할 url을 넣고, .then을 통해 콜백함수를 호출하고, 받아온 response에다가 json()메소드를..

FRONTEND/React 2021.06.12

async & await

async 란? · 쉽게 Promise객체로 만드는 방법(by using async function) · promise chaining을 계속 하다 보면 가독성이 떨어지게 된다. · async & await은 promise를 동기적으로 실행되는 것 처럼 보여주는 API · 기존의 promise위에 좀 더 간편함을 추가한 syntactic sugar 왜 비동기처리는 필요한 것일까? · JS엔진에서는 {} 안에 있는 항목들을 동기적으로 실행하게 된다. · 이때 만약 {}안에 시간이 오래 걸리는 항목이 있게 되면, 문제발생! · 그러므로 이렇게 시간이 필요해 보이는 항목들은 비동기적으로 처리 ✔️ Promise?(상황극) => 내가 언제 data를 받아 올 수 있을지 모르지만, 약속하는 것! => Promis..

FRONTEND/JavaScript 2021.06.08

Stack 과 queue 자료구조에 대하여

Stack 구조란? ✔️LIFO(Last In First Out)구조를 가지는 자료구조 · 원통형의 구조에 순서대로 하나씩 쌓여져 가는 구조. · 뺄때는 위에서 부터 하나씩 뺄 수 있는 구조. · 실사용 예: 브라우저의 뒤로 가기, 앞으로 가기 기능을 구현 4... 3 2 1 Queue 구조란? ✔️FIFO(First In First Out)구조를 가지는 자료구조 · 원통형의 구조에 쌓되, 하나씩 밑으로넣어가는 구조 · 뺄때는 위에서 부터 하나씩 뺄 수 있는 구조. · 실사용 예: 브라우저의 뒤로 가기, 앞으로 가기 기능을 구현 1 2 3 4...

FRONTEND/JavaScript 2021.06.06

재귀적 구조를 짤때 주의할 점(feat. Tree 타입구현)

이번에는 바보 같지만, 내가 자주 실수 하는 부분에 있어 잊지 않기 위해 포스팅을 한다. 클래스 tree라는 것이 있고, 해당 구조는 아래와 같다고 하자. class Tree { constructor(value) { this.value = value; this.children = []; } 여기에서 value를 가지고 있는지 탐색을 할 수 있는 contains이라는 메소드를 만들고자 하면, contains(value){ if(this.value === value) return true; for(let i = 0; i< this.children.length; i++){ if(this.children[i].contains(value)) return true } return false } 로 하면 된다. 굉장..

FRONTEND/JavaScript 2021.06.06