개발여행의 블로그

리액트란? 자바스크립트 라이브러리 중 하나로 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. 그는 PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다. 2011년 페이스북의 뉴스피드에 처음 적용되었다가 2012년 인스타그램닷컴에 적용되었다. 2013년 5월 JSConf US에서 오픈 소스화되었다. (출처-위키피디아) 리액트는 어떻게 등장했는가? 리액트가 존재하기 전, 이미 많은 라이브러리와 프레임워크들이(Jquery, Backbone, AngularJS 등) 존재했다. 특히 jQuery가 등장했을 때 엄청난 센세이션이었던 것으로 들었다. 수많은 브라우저에 맞춰 ..

React에는 총 9개의 Life Cycle 메서드가 존재한다. 먼저 메서드의 접두사 별로 나눠서 그 차이를 알아보자! will : 작업을 작동하기 전에 실행되는 메서드 did : 어떤 작업을 작동한 후에 실행되는 메서드 라이프사이클은 mount, update, unmount 이렇게 세 가지의 카테고리로 나뉜다. 차례대로 하나씩 알아보자! mount DOM이 생성되고 웹 브라우저 상에 나타나는 것 mount 될 때 호출하는 메서드 ✅ constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 ✅ getDerivedStateFromProps : props에 존재하는 값을 state에 넣을 때 사용하는 메서드 ✅ render : UI를 렌더링하는 메서드 ✅ componentDidMo..

모던 자바스크립트 deep dive를 공부하면서 정리한 글입니다. Reference - 모던 자바스크립트 deep dive 인터넷 주소창에 URL을 입력했을 때 사용자가 web 페이지를 보기까지 어떤 과정을 거치는가? 먼저, 간단하게 렌더링 과정을 정리해보면 아래와 같다. 1. 브라우저가 HTML, JavaScript, CSS, image, font file 등의 리소스를 서버로 요청하고 응답받기 2. 브라우저의 렌더링을 담당하는 엔진은 응답 받은 HTML과 CSS를 parsing하여 DOM(document obeject model)과 CSSOM(css object model)을 생성 3. DOM와 CSSOM을 결합하여 Render Tree 생성 4. 브라우저의 자바스크립트 엔진은 응답 받은 JavaSc..

지난 포스팅에서 iterble과 the iterable protocol 그리고 iterator와 the iterator protocol에 대해 알아보았다. https://developerntraveler.tistory.com/135 [JavaScript] 왜 Object(객체)는 Iterable object가 아닌것일까? 콘솔에 이것저것 작성하면서 놀고(?) 있을 때 문득 Object는 왜 iterable 하지 않은지 의문이 생겨서 폭풍 서치를 시작했다. (맞지 않은 내용이 있다면 댓글 부탁드립니다. 미리 감사합니다!) Iterable이 developerntraveler.tistory.com 이번 포스팅에서는 the iteration protocols의 예시를 살펴볼 것이다. String은 built-i..

콘솔에 이것저것 작성하면서 놀고(?) 있을 때 문득 Object는 왜 iterable 하지 않은지 의문이 생겨서 폭풍 서치를 시작했다. (맞지 않은 내용이 있다면 댓글 부탁드립니다. 미리 감사합니다!) Iterable이란? iteration protocol을 따르는 객체를 iterable이라고 한다. 쉽게 말하면 iterable은 배열을 일반화한 object인 것이다. '반복 가능한'이라는 의미의 iterable을 풀어서 생각해보면, 반복 가능한 객체가 iterable object가 되는 것이다. 예를 들어, 배열, 문자열 등이 iterable이다. 그럼 여기서 Iteration protocol 은 무엇인가? 먼저 protocol에 대해 정리해보자! 컴퓨터와 컴퓨터 혹은 컴퓨터와 다른 장비 사이에서 데이..

설명 문자열 s가 주어질 때 s의 각 문자가 c와 떨어진 최단거리를 반환하는 문제이다. 예를 들어, s = 'test' , c = 'e' 일 때 [1, 0, 1, 2]를 반환해야 한다. (t는 e에서 1만큼 떨어져있고, e는 0, s는 1, 마지막 t는 2만큼 떨어져있기 때문이다.) Problem Given a string s and a character c that occurs in s, return an array of integers answer where answer.length == s.length and answer[i] is the distance from index i to the closest occurrence of character c in s. The distance between ..

parseInt 문자열에서 숫자만 추출해보자! 설명 parseInt를 사용하지 않고 문자열에서 추출한 정수를 반환 function extractNumbers(string) { let result = 0; if (typeof string !== "string") { return false; } for (const char of string) { if (!isNaN(char)) { result = result * 10 + Number(char); } } return result; } parseInt를 사용하지 않고 문자열 '00ab30c4' 에서 숫자 304만 반환받으려면 자릿수를 이용해서 반환값을 계산할 수 있다. result = result * 10 + Number(char); 구문에서 1) char에 ..

회문 문자열이란? 앞에서부터 읽거나 뒤에서부터 읽거나 모두 동일한 문자열이다. 문제 문자열이 주어졌을 때 회문 문자열인지 아닌지 출력하는 코드를 작성해보자! 입력 & 출력 길이 100 이하의 공백 없는 문자열 ex1) TEST -> false 출력 ex2) teeT -> ture 출력 풀이 두 가지 방법 정도로 해결할 수 있다. 1) Array.prototype.reverse()를 활용해서 거꾸로 뒤집어진 문자열 생성 후 같은지 확인. Array.prototype.reverse() 2) 문자열의 앞과 뒤의 짝을 맞춰서 같은 문자인지 비교. 문자열의 맨 앞과 맨 뒤 비교, 두 번째 문자열과 끝에서 두 번째 문자열 비교 이렇게 반복해서 다른 문자가 있을 경우 false를 리턴한다. 코드 1) reverse ..

유클리드 호제법 (유클리드 알고리즘)은 2개의 자연수의 최대공약수를 구하는 알고리즘이다. * 최대공약수 : GCD(Greatest Common Divisor) 양의 정수 A, B가 존재하고 A가 B보다 크다는 전제하에 A를 B로 나눈 나머지를 r이라고 칭한다. 이때 A와 B의 최대공약수는 B와 r 사이의 최대공약수와 같다. 이것이 유클리드 호제법이다. 그 이유를 살펴보자! A는 어떤 수 * 최대공약수, B는 어떤 수 * 최대공약수로 나타낼 수 있다. 즉 아래와 같이 나타낼 수 있다. (최대공약수이기 때문에 더 이상 약수는 존재하지 않아야 하므로 a와 b는 서로소이다.) 여기서 증명해야 할 것은 A와 B의 최대공약수는 G이므로 A를 B로 나눈 나머지가 r이었을 때, B와 r의 최대공약수도 G인지 확인해야 ..

이 글은 '모던 자바스크립트 Deep Dive' 내용을 발췌한 글입니다. 논리 연산자를 사용한 단축 평가 논리곱(&&) 또는 논리합(||) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가 논리곱 (&&) 연산자 > 논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환 > 논리곱 연산자는 좌항에서 우항으로 평가가 진행 'One' && 'Two' 첫 번째 피연산자 'One'은 Truthy 값이므로 true로 평가된다. 하지만 이 시점까지는 위 표현식을 평가할 수 없다. 두 번째 피연산자까지 평가해야 위 표현식을 평가할 수 있다. 즉, 두 번째 피연산자가 위 논리곱 연산자 표현식의 평가 결과를 결정한다. 이때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자..