코딩성장기

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

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

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

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

이번에는 바보 같지만, 내가 자주 실수 하는 부분에 있어 잊지 않기 위해 포스팅을 한다. 클래스 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 } 로 하면 된다. 굉장..

이번에는 주어진 인접행렬에서, from 에서 to로 갈 수 있는 길이 있는지 여부를 출력하는 함수를 만들어 보려고 한다. 이 문제를 작성하는 이유는 내가 보다 queue 데이터 정리 방식과 while문의 사용에 익숙해지기 위함이다.

Q. http 란 무엇인가? A. Hyper Text Transfer Protocol의 약자. · client와 server간에 데이터를 request, resoponse하는 protocol 즉, 서버와 클라이언트가 어떻게 데이터를 주고 받을지 정한 규칙 Q. AJAX 란 무엇인가? A. · Asynchronous JavaScript And XML 의 약자. · 자바스크립트의 라이버러리 중의 하나로, 웹페이지에서 동적으로 서버와 클라이언트가 데이터를 주고 받을 수 있는 기술 · 대표적인 브라우저 API로는 XMLHttpRequest, fetch 가 존재 Q. XML 이란 무엇인가? A. eXtensible Markup Language의 약자. HTML과 마찬가지로 Markup Language의 일종. ·..

앞서 우리는 비동기적인 것을 제어하는 방법으로 콜백함수를 살펴 보았다. 하지만, 이렇게 작성할경우, 코드의 이해가 매우 힘들어 질수 있다는 단점이 있었다. 이러한 콜백헬을 극복하기 위해서 나타난 개념이 바로 Promise이다. Promise var Promise: PromiseConstructor new (executor: (resolve: (value: any) => void, reject: (reason?: any) => void) => void) => Promise ✔️ 위에서 볼 수 있듯이, Promise는 첫번째 인자로 executor함수를 받게 된다. ✔️ JavaScript에 내장되어 있는 object ☑️ "성공한 상태(State)" 인지, "실패한 상태(State)" 에 대한 이해가 필요..