비실이의 개발 성장기

Javascript를 처음 접했을 당시, 타입이 엄격하지 않음과 더불어 함수가 변수처럼 어떠한 함수의 인자로 전달될 수 있고, 함수의 반환 결과로도 사용 가능하다는 것에 매력을 느꼈었다. Javascript에서 함수를 자유롭게(?) 사용가능한 이유는 함수를 일급 객체(First-class citizen) 로 취급하기 때문이었다. 어떠한 특징이 있으면 일급 객체라고 부르는 것일까 라는 생각이 들어 위키백과를 찾아봤다. 일급 객체란? '컴퓨터 프로그래밍 언어 디자인에서 일반적으로 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.' 일급 객체가 되기위한 조건 1. '변수나 데이터 구조안에 담을 수 있다.' testList 배열을 선언한 뒤, 0번째 인덱스에 익명함수를 추가했다. 2. '파라미터..

getDerivedStateFromProps() 와 getSnapshotBeforeUpdate() 메서드는 React v16.3.0 에서 새로 추가된 lifecycle 메서드다. 새로 추가 된 getDerivedStateFromProps(), getSnapshotBeforeUpdate() 메서드와 deprecated 예정 인 componentWillMount(), componentWillUpdate(), componentWillReceiveProps() 메서드를 혼용하여 사용하면 warning이 발생하게 된다. componentWillMount(), componentWillUpdate(), componentWillReceiveProps() 에서 처리하던 로직은 getDerivedStateFromProps..

React 릴리즈 버전이 16.4.x 버전까지 올랐다는 걸 React 공식페이지나 여러 기술블로그를 통해 알고 있었다. 하지만, 변경 된 사항들에 대해 글을 읽기만 했을 뿐 간단한 예를 만들어서 해보지는 않았다. 최근 이직 준비로 인한 시간이 생겨 변경 된 사항들을 직접 해보고 있다. 오늘은 React v16.0 에 새로 추가 된 componentDidCatch() 함수에 대해 알아보고 이 함수를 어떠한 경우 사용하면 좋을지에 대해 알아보려한다. React 프로젝트는 수 많은 UI 컴포넌트 트리로 구성되어 있다. 화면 렌더링이 시작되면 수 많은 UI 컴포넌트 들이 각자 역할에 맞게 수행되며 가장 마지막에 위치한 컴포넌트의 역할이 끝나면 페이지 렌더링이 완료된다. 만약 렌더링 도중 어떠한 컴포넌트에서 런타..

javascript가 최초 나왔을 당시, 웹 페이지의 규모는 지금과 같이 크지 않았다. 그러나 컴퓨터의 성능이 향상되고, 네트워크 속도가 빨라지며 웹 페이지 규모도 점차 커지게 되었다. 웹 페이지 규모가 커지다보니 javascript 코드 규모 또한 커지게 되었고, 중복되는 기능도 많았다. 그러다보니 중복되는 기능들을 하나의 모듈로 만들어 소스 코드의 규모를 줄이고, 재사용성을 좋게 하였다. 하지만, 이 당시 javascript 모듈 사용을 위한 방법에는 정해진 표준이 없었다. 표준 없이 뒤죽박죽 개발을 하면 개발자들간에 혼선이 생기게 되고, 언어 사용성이 떨어지게 된다. 이를 막기위해 CommonJS 와 AMD (Asynchronous Module Definition) 방식의 모듈 사용이 등장하게 된다..

javascript에는 유용한 함수들이 정말 많은 것 같다. 그 중에 보통 함수와는 달리 아무리 예제를 봐도 이해가 잘 가지 않던 함수가 있었다. 그 함수는 바로 reduce() reduce 는`줄이다` 라는 의미를 가지고 있다. javascript 에서도 reduce() 는 배열을 순회하며 인덱스 데이터를 줄여가며 어떠한 기능을 수행 할 수 있다. reduce() 함수 설명 시 가장 많이 사용하는 예제를 가져왔다. 1234567const numberList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const initValue = 0; const totalResult = numberList.reduce((initialValue, currentValue, currentIndex, ar..

Redux 등장배경facebook에서 react와 함께 소개한 Flux 아키텍쳐를 구현하기 위한 라이브러리컴포넌트 간 state 데이터를 효율적으로 관리하기 위해 등장Flux 와 MVC 패턴의 차이MVC 패턴은 앱의 규모가 커지면 그에따라 Model과 View가 늘어나기에 프로젝트가 복잡해진다.Model과 View가 1:1관계가 아니므로 데이터 관리도 어렵다는 단점이 있다.Flux 특징은 http://2dubbing.tistory.com/26 [flux 아키텍쳐란?] 포스팅 참고Redux는 facebook에서 만든 라이브러리는 아님.Redux는 React에 의존적이지 않음. (React 프로젝트가 아니더라도 Redux 사용이 가능함을 뜻함)React로 개발한 어플리케이션에 새로운 기능을 추가 -> 그만큼..

react-router 공식사이트 : https://reacttraining.com/react-router/web/guides/philosophy react-router v4가 릴리즈 되면서 변경 된 사항 react-router 패키지가 Web, App 용으로 분리.react-router: react-router-dom + react-router-native react-router-dom : Web용 react-routerreact-router-native : App용 react-router기존 npm 패키지에서 npm un -S react-router 명령어로 기존 react-router 패키지 삭제기존 npm 패키지에서 npm i -S react-router-dom 명령어로 react-router-d..

function outerFunc() { var foo = "Foo"; return function() { console.log(foo); } } var closure = outerFunc(); closure(); 위 스크립트가 실행되면 아래 그림 좌측부터 우측 순서로 실행컨텍스트가 생성됩니다. 실행 컨텍스트는 함수가 호출되는 시점에 생성되며, 이 때 실행 컨텍스트 내부의 SCOPE 객체는 함수가 어디에 선언되었는지에 따라 결정되게 됩니다. 그 다음, 호출 스택에 아래와 같은 순서로 실행컨텍스트가 push / pop 됩니다. push 전역 실행컨텍스트 push outerFunc 실행컨텍스트 pop outerFunc 실행컨텍스트 push anomyFunc 실행컨텍스트 pop anomyFunc 실행컨텍스트 ..