Javascript 공부/TIL18 200207(금) : Uncontrolled vs. Controlled Component in React React의 컴포넌트를 설명할 때 Uncontrolled Component와 Controlled Component라는 개념이 있다. 이 둘에 대해서 살펴보자. 1. 왜 uncontrolled와 controlled 컴포넌트에 대해 알아야 할까? React는 내부의 상태(state)를 '신뢰 가능한 단일 소스(Single Source of Truth)'로 관리하려는 설계 원칙을 가지고 있다. 즉 자식 컴포넌트가 data가 필요할 경우, 해당 data는 가장 가까운 공통 부모 컴포넌트에게서만 props의 형태로 전달받아서 사용해야 한다. 대부분의 HTML 엘리먼트들(ex. 등)은 엘리먼트가 내부적으로 어떤 데이터를 가지지 않기 때문에 문제될 것이 없다. 하지만 HTML 엘리멘트 중 자체적으로 특정 data를 .. 2020. 2. 7. 200206(목) : Static Method vs. Instance Method 자바스크립트에서 Static Method와 Instance Method는 어떤 차이가 있는지 정리하는 글이다. 1. Static Method 정적 메소드는 클래스의 인스턴스 없이도 호출이 가능하지만, 클래스가 인스턴스화되면 호출이 불가능하다. 다른 static method 내부에서 기존의 static method에 접근하고자 할 때에는 this keyword를 사용할 수 있다. class 키워드를 이용해서 구현할 때에는 static 키워드로 선언할 수 있다. 생성자 호출을 할 함수를 이용해서 구현할 때에는 직접 함수에 메소드를 추가하는 방식으로 선언할 수 있다. // 1. class 키워드와 static 키워드를 이용해서 정적 메소드를 선언하는 경우. class StaticMethodCall { stat.. 2020. 2. 6. 200131(금) : CORS 지난 글에 이어 이번에는 CORS에 대한 조사를 통해서 왜 오류가 발생했는지, 어떻게 해결할 수 있는지 작성해보고자 한다. 1. CORS란? CORS(Cross-Origin Resource Sharing)이란, 추가 HTTP 헤더를 사용하여 브라우저에게 한 출처(ex. a)에서 실행 중인 웹 응용 프로그램의 다른 출처(ex. b)의 선택된 자원(ex. json data)에 대한 접근 권한을 알려주는 메커니즘이다. 웹 응용 프로그램은 자신과 다른 출처를 가진 리소스를 요청할 때, cross-origin HTTP 요청을 실행한다. 도대체 이게 무슨 말이냐.. 할 수 있으니 우선 cross-origin HTTP 요청부터 살펴보자면, 예를 들어 http://soldonii.com 이라는 사이트의 프론트엔드 자바.. 2020. 1. 31. 200130(목) : Fetch API 이번주는 바닐라코딩 break week이고, 다음 주부터 3주간 리액트를 배우기에 복습 차원에서 리액트로 아주 간단한 앱을 미니 프로젝트로 살짝 만들어보려고 했다. 그런데 처음부터 난관에 부딪혔다;; componentDidMount() 메소드 내부에서 fetch를 이용해서 원하는 데이터를 요청하고 받아와서 state에 저장하려고 했는데, 아래와 같은 에러가 계속 떴다. 사실 쉽게 해결할 수 있는 방법은 stackoverflow에서 찾을 수 있어서(해결책 링크) 계속 앱을 만들어봐도 되지만... ken님은 항상 모든 에러 메시지를 면밀히 살펴보고 꼼꼼히 조사해보기를 권장한다. 사실 그게 맞긴 하지만 항상 시간 내에 뭔갈 하다보면 그게 쉽지 않은데, 그래도 이번에 break 주간인 김에 내가 원하는 걸 못 .. 2020. 1. 30. 200129(수) : Deep copy vs. Shallow Copy 오늘은 자바스크립트에서 객체를 복사하는 방법에 대해서 포스팅하고자 한다. 그 동안 shallow copy, deep copy 같은 용어와 그 방법에 대해서 여기저기서 들어봤으나 한 번도 제대로 된 주제로 다뤄서 글을 쓴 적은 없었기에 작성한다. 1. '복사'란 간단하지 않다. 자바스크립트에서 복사는 참으로 간단한 듯 하지만 실은 매우 복잡한 문제라 생각한다. 데이터 타입이 원시값인 경우, 즉 string, number, undefined, null, boolean의 경우만 존재한다면 복잡할 것이 전혀 없다. 하지만 객체(배열 포함), 함수 등을 복사할 경우, 그리고 해당 객체 내에 nested 형태의 객체가 또 존재할 경우에는 문제가 복잡해진다. 단순히 stack overflow에만 봐도 자바스크립트의 .. 2020. 1. 29. 200125(토) : Merge Sort, Quick Sort Bubble Sort와 Insertion Sort를 정리한 지난 글(link)에 이어 본 글에서는 Merge Sort와 Quick Sort를 정리한다. 1. Merge Sort 1) Merge Sort의 특징 Merge Sort와 Quick Sort는 기본적으로 'DIVIDE AND CONQUER' 알고리즘과 'RECURSION'이 사용된다. Bubble과 Insertion은 모든 요소를 한 번 이상씩 방문하며 반복문 안에 반복문이 중첩되는 형태이기 때문에 시간복잡도에서 O(n^2)를 피할 수 없었다. 하지만 'DIVIDE AND CONQUER'를 하는 순간 방문해야 하는 element의 수가 절반으로 줄어들기 때문에 훨씬 효율적인 알고리즘이 된다. [Big O] Best Case : O(n log n).. 2020. 1. 25. 200124(금) : Bubble Sort, Insertion Sort 이번 주에는 대표적인 정렬 알고리즘에 대해서 배우는 한 주였다. 총 4개의 정렬 알고리즘 - Bubble, Insertion, Merge, Quick -을 두 편의 글로 나누어서 1) 특징(시간/공간 복잡도, 장/단점 등), 2) 정렬 알고리즘 로직, 3) 구현 방법을 중심으로 정리하고자 한다. 본 글에서는 우선 Bubble Sort와 Insertion Sort를 정리한다. 정렬 알고리즘과 관련된 첫 글인만큼, 본격적으로 Bubble Sort를 알아보기 전에 도대체 왜 정렬 알고리즘을 배워야하는지에 대해서부터 살펴보자. 다들 아시다시피 자바스크립트에는 이미 내장된 Array.prototype.sort() 메소드가 존재한다. (Sort MDN 문서) 이를 사용하면 복잡한 정렬 로직을 알지 못해도 충분히 쉽.. 2020. 1. 24. 200118(토) : 비동기 - 콜백과 프라미스 1. 비동기 프로그램에서 '지금'에 해당되는 부분과 '나중'에 해당되는 부분 사이의 관계가 비동기 프로그램의 핵심이다. '나중'은 '지금'의 직후를 의미하지 않는다!(즉, 코드에서 '지금' 요청을 보내자마자 바로 응답을 받아서 실행할 수 있지 않다!) AJAX로 예를 들자면, AJAX는 비동기적으로 '지금' 요청하고, '나중'에 결과를 받는다. '지금'부터 '나중'까지 "기다리는" 가장 간단한 방법은 '콜백 함수'라는 장치를 이용하는 것이다. const data = ajax("http://some.url.1"); console.log(data); // data 변수에 원하는 값은 담겨있지 않다! ajax("http://some.url.1", function cbFunc(data) { console.log.. 2020. 1. 18. 200117(금) : this 1. This this가 무엇인지 정확하게 알기 위해서, 죽을 때까지 아래 세 문장만큼은 잊지 말자! this는 1) 함수 자신을 가리키는 것도 아니고, 2) 함수 내부의 스코프를 가리키는 것도 아니다!! this는 '함수 호출 시점'에 바인딩되며, this가 무엇을 가리킬지는 전적으로 '함수를 호출하는 방식'에 달려있다!! 따라서 1) this가 포함된 함수 호출 스택을 추적해서 함수 호출 시점을 파악한 후, 2) 해당 함수가 어떤 방식으로 호출되었는지를 확인해야 한다!! 1) 호출부 this가 무엇을 가리킬지 이해하기 위해서는 '함수를 호출한 지점'을 확인하면 될 것 같지만, 생각보다 쉽지 않다. 중요한 것은 '호출 스택(현재 실행 지점에 오기까지 호출된 함수의 스택)'을 생각해야 한다. functi.. 2020. 1. 17. 이전 1 2 다음
