개발소발닭발

리액트 컴포넌트의 라이프 사이클은 크게 3가지로 나눌 수 있습니다. 마운팅 업데이트 언마운팅 마운팅 - 한 번 실행 constructor - 컴포넌트의 속성과 상태를 설정하는 단계입니다. componentWillMount - 컴포넌트가 DOM에 삽입되기 전에 실행됩니다. 여기서 상태를 바꾸더라도 재랜더 되지 않습니다. componentDidMount - 컴포넌트가 DOM에 삽입되고 난 후 실행됩니다. DOM 반영 완료. 모든 엘리먼트에 접근 가능합니다. 서버 랜더링에서는 실행 안됩니다. Ajax 요청에 적당합니다. 업데이트 - 여러 번 실행 componentWillReceiveProps - 컴포넌트가 새로운 속성을 받을때 실행됩니다. 처음에는 실행되지 않습니다. 상위 속성이 바뀌었건 안바뀌었건 재랜더 되..

지극히 개인적으로 드는 생각을 남겨봅니다. 공통 장점 프로젝트 전체를 관통하는 틀이 생긴다. 따라서 관리가 용이해 진다. 컴포넌트 기반의 개발 패러다임. 화면 구성이나 기능을 컴포넌트 묶음으로 개발하니 재사용성이 좋고 분할 정복이 잘된다. 모델 기반으로 프론트 협업도 가능하다. 효율이 좋다. 제이쿼리나 기타 라이브러리를 사용하면 데이터가 바뀌면 돔을 찾아서 업데이트하거나 통째로 다시 그렸는데, 뷰 업데이트는 프레임워크에 맡기고 모델구성과 비즈니스로직에 집중할 수 있게 된다. 반복 작업이 줄어든다. 모델은 스토어, 뷰 / 로직은 컴포넌트단에서 관리하는 구조를 만들기 쉽다. 그리고 아주 자연스럽게 뷰 모델을쓰게 되니 전체 틀도 일정한 패턴에 맞게 쉽게 구조화 된다. 쾌적한 성능. 충분한 생태계 create-..

자바스크립트는 스크립트 언어입니다. 말 그대로 클래스 언어가 아니라 스크립트 언어죠. 우리가 작성한 스크립트 구문을 해석하고 실행하는 엔진은 어떻게 동작하는 건지 알아보겠습니다. 왜 알아봐야 하냐면, 자바스크립트가 어떻게 동작하는지를 알아야 코딩하고 이해할 수 있는 코드가 있습니다. setTimeout(function(){},1) 여러 이벤트 리스너들의 순차적 동작들 자바스크립트 엔진은 크게 3가지 영역으로 나누어 집니다. 콜 스택 힙 이벤트 큐 이벤트 루프 3가지라고 해놓고서는 이벤트 루프를 끼워 팔았습니다. 1. 콜 스택. 프런트 개발을 해보았다면 익숙한 이름입니다. (크롬 개발자 도구를 보다 보면 콜 스택이 착착 쌓이는 것을 확인할 수 있습니다. 가끔은 에러 코드에서 만날 때도 있고요 ; ) ) 자..

VueJS는 컴포넌트 기반의 프레임워크다. 화면 속 보이는 랜더 영역이나 특정 기능들을 컴포넌트 단위로 나누어 개발하게 되고 이를 화면에 넣었다 뺏다, 업데이트하면서 동작한다. 그리고 이러한 컴포넌트는 Template과 Script로 구성된다. (원한다면 Style 포함 가능. Template 제외 가능) 당연하게도 이러한 이유로 Template는 어떠한 마크업 태그 안에 들어 있어야 한다. 위와 같은 동작을 하다 보니, 컴포넌트들은 필연적으로 생명주기를 가지게 되는데 이를 잘 알아두어야 개발할 때 편하다. VueJS 공식 문서에서 제공하는 생명주기 다이어그램은 다음과 같다. 1. beforeCreate 가장 먼저 실행되는 훅이다. this.$el로 대변되는 DOM이 아직 생성되지 않았기에 접근할 수는 ..

4학년 졸업을 앞두고 취업준비를 하다보면 GET, POST 방식의 차이점에 대해 줄줄 외게 됩니다. TCP, UDP의 차이와 더불어서요. 이제는 레벨업(?)을 했다고 치고 GET, POST 그리고 그 외의 HTTP 메서드에 대해 알아 봅시다. 마지막으로는 기본적인 HTTP 응답 코드 몇가지에 대해서도 간략하게 알아 봅시다. 1. GET - 가져오다 라는 의미 - URL에 요청 데이터를 포함시켜 전송합니다. - http Header에 포함되어 전송합니다. - 전송 데이터 길이에 제한이 있다. - 캐싱 가능. 2. POST - 제출하다 라는 의미 - URL에 데이터가 노출되지 않습니다. - http Body에 포함되어 전송합니다. - 전송 데이터 길이에 제한이 없다. - 캐싱 불가능. 3. PUT - POS..

서버와 통신하는 어플을 개발 하다보면 Rest api에 대해 알게 되고 이를 이용해 개발 하게 됩니다. Restful api를 설계하고 만드는 일은 백엔드 개발자의 몫이지만, 사용하는건 클라이언트 개발자의 몫인거죠. 우리가 사용할 서버측의 api가 어떻게 구성되어 있는지 알아야 전반적인 데이터의 흐름을 알 수 있고 용이하게 사용 할 수 있습니다.. 그럼 시작해보겠습니다. 1. Rest란 무엇인가. Representational State Transfer 의 약자입니다. 해석하기가 난해한데요, "대표되는 상태 전달" 보다는 "상태의 변화를 표현" 이라 이해하는게 더 다가올 것 같습니다. 2. http 메서드. http 메서드에는 GET, POST 이외에도 PUT, DELETE가 있습니다. (PATCH, O..

자바스크립트는 객체지향을 클래스로도, 프로토타입으로도 구현할 수 있다. 클래스는 es6 문법이니 추후 포스팅할 예정이고 이번에는 프로토타입에 대해 알아보자. 이것은 클래스 방식보다 더 강렬하고 강력하게 느껴질 수도 있다. 언제나 그렇듯 검정화면. 1 2 3 4 5 6 7 8 function Person(age){ this.age = age this.printAge = function(){ console.log(this.age); } } var leesukkyu = new Person(34); cs #1 자바스크립트의 클래스는 함수로 구현이 가능하다. 이러한 함수를 생성자 함수라 부른다. (보통 대문자로 시작) #8 34세의 사람 인스턴스를 생성자 함수를 통해 생성. #2 인스턴스의 멤버 변수로 age 등..

Javascript array에는 다양한 내장 함수들이 있습니다. ES6에서 새롭게 생긴 함수들은 아니지만, 이른바 선언형 프로그래밍을 하게 될 때 많이 사용하게 되는 Array 함수들입니다. 장황한 설명은 필요치 않은 것 같아, 간단하게 정리해봤습니다. var arr = [1,2,3,4,5] 1. forEach - 전체를 순회할 때 // 전체를 순회. arr.forEach((item, index, array) => { console.log('돈다'); }) 2. map - 원본 배열 안 건들고 새로운 배열을 만들 때 - 이건 전부다 해당 // 모든 배열의 값을 1 증가. arr.map((item, index, array) => { return item + 1 }) 3. some - 원본 배열 중 하나 ..

이번 시간은 ES6에서 Symbol과 함께 나름 고급 개념이라 생각되는 프록시와 리플렉트에 대해 알아보겠습니다. 리플랙트는 이전에도 있었지만 둘 다 처음 듣는 분도 계실겁니다. 먼저 프록시부터 시작하겠습니다. 프론시는 대리자라는 개념입니다. 어떤 의미인지 감이 안 오신다고요? 먼저 인터셉터라는 개념을 먼저 알아야 하는데요. 개발을 진행하다 보면 하나의 레이어를 만들어 어떤 기능을 가상화하는 경우가 생깁니다. 이게 무슨 소리냐! 검정 화면으로 이해해 보겠습니다.

구조 분해 할당 이건 정말 완전 쿨하다. 화살표 함수가 this를 변수에 담아두는 행동(_this, _self의 추억이여...)들을 사라지게 했다면, 이건 더 많은 부분들을 사라지게 해준다. 그렇다면 구조 분해 할당이 무엇인지 바로 검정 화면으로 알아보자. (이름에 어떤 기능인지 설명이 되어 있다는 사실!) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // #1 구조 분해 사용 케이스 1 var a, b; [a, b] = [10, 20]; // #1 이용 안한 케이스 1 var a, b; a = 10, b = 20; // #2 구조 분해 사용 케이스 2 var a, b, rest; [a, b, ...rest] = [10, 20..