본문 바로가기

WEB

 (47)
[JS] 리덕스(redux)가 무엇인가? 리덕스란? 리덕스는 프론트엔드 상태관리 라이브러리이다. 상태관리는 상태를 영어로 직역하면 state이다 즉, 리액트에서 사용하는 state를 관리하는 라이브러리이다. 하지만 꼭 리액트에만 치우쳐져 있지않고 순수한 자바스크립트에서도 사용할 수 있다는 점은 유의하자. 탄생계기 웹에 담는 데이터들이 방대해지고 관리해야할 상태(state)들이 방대해지면서 복잡하고 관리가 어려워 관리할 라이브러리가 자연스럽게 생겨났다. 기존에 컴포넌트 A 컴포넌트 D에 접근하려면 A -> B -> C -> D 접근해야했다. 하지만 리덕스를 사용하면 A -> Store -> D 로 접근할 수 있게 되어 좀 더 효율적이게 변하였다 즉, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 ..
[AJAX] AJAX가 무엇인가 & 사용방법 AJAX(Asynchronous Javascript And XML) AJAX는 자바스크립트 라이브러리 중 하나이며 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML, Json 데이터들을 주고받는 기술이다. 다시말해 비동기 방식으로 새로고침없이 서버와 클라이언트가 통신할 수 있도록 도와주는 라이브러리다. AJAX 사용 방법 jQuery Ajax를 사용한다. Axios 라이브러리를 사용한다. 자바스크립트 기본 함수인 fetch()를 사용한다. 최근에는 jQuery를 사용하지않고 Axios나 fetch()를 사용한다.따라서 React에서 사용하려는 나에게는 호환성도 관련문서가 많은 Axios를 사용하는 것이 ..
[Node.JS] express를 사용해보자 1. Node.js 설치가 필요하다. 구글에 Nodejs 검색 후 가장 먼저 나오는 사이트에 들어가 설치를 하도록 합시다. 10버전 이상이 필요하니 이전에 설치하셨던 분들은 신버전으로 다시 설치하십시오. (중요) 설치 경로 임의로 바꾸시면 npm 어쩌구 이런 명령어가 안먹을 수 있습니다. 경로는 건들지말고 C드라이브 기본 경로로 냅둡시다. (더 중요) 2. VS code 에디터가 필요합니다. 비쥬얼 스튜디오 코드 Visual Studio Code 라고 부르는 에디터인데 역시 구글 검색해서 설치합니다. 설치 후 실행까지 하도록 합시다. (바탕화면에 아이콘이 안보이면 검색메뉴에서 검색해보세요) 3. 작업 폴더를 만들고 에디터로 오픈합니다. 설마 폴더 만드는 법은 설명 필요없겠죠? 에디터로 오픈하려면 에디터 ..
[Node.JS] Node.JS를 서버로 사용하는 이유 Node.js는 자바스크립트 실행기 이전 게시글에서도 말했다 싶이 Node.js는 크롬 브라우저에 V8 즉, JavaScript 런타임이다. 그런데 이 엔진을 왜 이토록 Server 프로그래밍에 사용되는 이유가 무엇일까? 장점 자바스크립트를 동일하게 사용해서 서버단 로직을 처리할 수 있다는게 가장 큰 장점! 새로운 언어를 습득하지 않고도 자바스크립트를 활용해 서버기술을 빨리 개발/응용할 수 있습니다. 개발이 빠르고 쉽다. 서버 설치부터 화면 띄우는 것까지 금방 처리 됩니다. Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능 로컬에서 서버만 켜봐도 얼마나 가볍게 돌아가는지 알 수 있다. 이벤트 기반 비동기방식이라 서버 무리가 적다. Non-blocking I/O 이 무엇인가?..
[Node.JS] Node.js의 정체 JavaScript와 Node.JS Node.js를 알기위해선 먼저 JavaScript에 대해서 알아야한다. JavaScript는 HTML을 컨트롤 하기위해서 사용하던 언어였다. 지금과는 다르게 그다지 영향력이 크지않았다. 하지만 이 언어가 주목받게 되는 일이 생기는데 바로 크롬 브라우저의 탄생과 그 궤를 같이한다. JavaScript 구동 엔진인 V8의 등장 크롬, 파이어폭스, 익스플로러 이런 브라우저들이 자바스크립트를 읽고 해석하는 역할을 한다. 자바스크립트를 빠르게 읽고 해석하면 웹사이트 렌더링 성능도 빨라지니 브라우저 개발자들은 자바스크립트를 해석할 수 있는 엔진 개발에 열성이었다. 그러다가 구글 사내에 있던 ‘크롬 브라우저 개발자’들이 문제를 일으킵니다. 자바스크립트 해석엔진인 V8이라는 프로그..
[JS ES6+] spread 연산자 spread 연산자라고하는 ES6 문법이다. array나 object 자료형에 사용할 수 있으며 의미는 중괄호나 대괄호를 벗겨주세요~ 라는 뜻이다. 다시말해 …[1,2,3] 이런식으로 쓰면 그 자리에 1,2,3 이 남는다. 괄호 벗기기용 연산자이다. 그런데 이걸 이용하는 두번째 용도도 있는데 array나 object 자료형을 shallow/deep copy할 때 많이 사용한다. React state를 수정할 때 많이 쓰인다. deep copy를 해야지만 원본 상태에 영향을 전혀 미치지않기 때문이다. let data1 = [1,2,3]; let data2 = ...data1; // 1,2,3 let data3 = [...data1]; // [1,2,3] data1에 있던 자료들을 괄호 벗긴 다음에 다시 a..
[JS ES6+] destructuring(구조 분해 할당) array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶을때 사용하는 문법이다. [‘Kim’, 20] 이라는 array Kim이랑 20이라는 값을 각각 변수에 저장하고 싶으면 어떻게 하는가? let array = ['Kim', 20]; let name = array[0]; // 'Kim' let age = array[1]; // 20 이런 반복적인 할당 방법이다. 물론 문제는 없다. 이런 반복적인 작업을 개선시켜준 문법이 구조 분해 할당이다. let [name, age] = ['Kim', 20] console.log(name); // 'Kim' console.log(age); // '20' 각각 name = ‘Kim’, age = 20 이라는 변수가 생성된다. 왼쪽 오른쪽 형식을 똑같이 맞춰주시면 자동으..
[JS ES6+] 화살표 함수 (=>) 사용법 화살표 함수 바로 코드부터 보자. let func = (arg1, arg2, ...argN) => expression 이렇게 코드를 작성하면 인자 arg1..argN를 받는 함수 func이 만들어진다. 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환한다. 아래 함수의 축약 버전이라고 할 수 있다. let func = function(arg1, arg2, ...argN) { return expression; }; 좀더 예를 들어보면 let sum = (a, b) => a + b; /* 위 화살표 함수는 아래 함수의 축약 버전입니다. let sum = function(a, b) { return a + b; }; */ alert( sum(1, 2) ); // 3..

티스토리툴바