JavaScript

Redux... 너란 녀석

0. Redux를 배우게 된 계기 요즘 회사에서 Redux 기술을 사용하고 있기 때문에 나도 이 기술과 진득하게 대면하게 되었다. 기왕 배울 거 기본부터 제대로 배우기 위해 생활코딩 님의 무료 Redux 강의를 들었으며, 이를 통해 배운 내용들을 정리해보려고 한다. 1. Redux [생활코딩 - Redux] 개요 A predictable state container for JavaScript app JS로 만든 애플리케이션을 위한 예측 가능한 상태들의 연속 애플리케이션의 복잡성을 낮추고, 우리의 코드가 어떤 결과를 가져올지 예측 가능하게! Single Source of Truth Redux는 하나의 상태이며, 상태는 그냥 객체 Redux는 하나의 객체에 애플리케이션의 모든 데이터를 중앙 집중적으로 모아서..

NextJS 기본적인 사용 방법 정리

설치 방법 npx create-next-app or yarn create next-app TypeScript 연동 프로젝트 루트에서 tsconfig.json 파일을 생성하면 NextJS가 자동적으로 디폴트 값을 설정해줌 touch tsconfig.json TypeScript 설치 npm install --save-dev typescript @types/react @types/node 설치 이후에는 npm run dev 로 한 번 실행해야 tsconfig.json 에 옵션이 설정됨 pages 폴더 관련 규칙 폴더 밑에 js 파일을 만들고 export default 를 지정하면 해당 파일명을 URL로 사용하는 페이지 생성 가능 function 의 이름은 무엇이든 상관 없음 다만 파일명이 index.js 라면..

데이터 흐름과 비동기 작업

React 데이터 흐름 React 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이다. 따라서 먼저 컴포넌트를 만들고, 다시 페이지를 만드는 상향식(bottom-up) 방법을 사용한다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다는 점이다. 이러한 컴포넌트를 활용한 설계 방식은 이전 시간에 배웠다. 이제는 데이터를 어디에 둘지 생각해야 한다. 컴포넌트는 바깥에서 props를 이용해서 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달 받을 수 있다. 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 이는 데이터 흐름이 하향식(top-down)임을 뜻한다. 이 원칙은 단방향 데이터 흐름(one-way data flow)라는 키워드로 통한다...

React의 이벤트 처리

React의 이벤트 처리 방식은 DOM의 이벤트 처리 방식과 유사하다. 단, 몇 가지 문법에서의 차이가 있다. React에서 이벤트는 소문자 대신 camelCase를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수를 전달한다. 이러한 차이점을 뚜렷하게 표현하자면 다음과 같다. //HTML의 이벤트 처리 방식 Event //React의 이벤트 처리 방식 Event onChange input, textarea, select와 같은 Form 엘리먼트는 사용자의 입력값을 제어하는 데 사용된다. React에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리하고 업데이트한다. onChange 이벤트가 발생하면 e.target.value를 통해 이벤트 객체에 담겨있는 in..

State & Props

Props props의 특징 컴포넌트의 속성(property)을 의미한다. 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. 부모 컴포넌트로부터 전달받은 값이다. React 컴포넌트는 JavaScript 함수와 클래스로 props를 함수의 전달인자(argument)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다. 객체 형태이다. props로 어떤 타입의 값이라도 넣어서 전달할 수 있도록 props는 객체의 형태를 가진다. 읽기 전용이다. props는 외부로부터 전달받은 후 변하지 않는 값..

SPA & Router

SPA (Single Page Application) SPA의 등장 배경 전통적인 웹 사이트는 페이지 이동 시 매번 페이지 전체를 불러와야 했다. 하지만 SPA는 업데이트가 필요한 부분만 새로 불러올 수 있다. 웹 사이트가 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이의 상호작용 증가는 트래픽 증가와 사용자 경험의 저하를 야기했다. 따라서 1990년대 후반에, HTML 문서 전체가 아니라 업데이트에 필요한 데이터만 받아서 JavaScript가 이 데이터를 조작하여 HTML 요소를 생성하고 화면에 보여주는 방식이 개발되었다. SPA의 개념 서버로부터 완전한 새로운 페이지를 대신 갱신에 필요한 데이터만 받아서 이를 기준으로 현재 페이지를 업데이트함으로써 사용자와 소통하는 웹 애플리케이..

React 기본 개념

What is React? 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다. 리액트는 선언형이고, 컴포넌트 기반이고, 다양한 곳에서 활용할 수 있다는 특징이 있다. 선언형 (Declarative) 리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS 로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 컴포넌트 기반 (Component-Based) 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다. 범용성 (Learn Once, Write Anywhere) 리액트는 JavaScrip..

class, 그리고 JS의 객체 지향

클래스를 이용한 모듈화 객체지향 JavaScript 객체 지향 프로그래밍은 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. 여기에서 청사진을 바탕으로 한 "객체"는 인스턴스 객체(instance object), 줄여서 인스턴스라고 부른다. "청사진"은 클래스라고 부른다. 객체를 만드는 방식은 일반적인 함수를 정의하는 것과 비슷하다. function Car(color) {} let avante = new Car("blue"); let mini = new Car("cyan"); let beetles = new Car("red"); 이 때, 함수를 이용하는 방법이 조금 다르다. 그냥 실행하는 것이 아니라 new 키워드를 활용해서 만든다. 이는 새로운 인스턴스를..

고차함수

First-class citizen JavaScript에는 특별한 대우를 받는 일급 객체(first-class citizen)가 있다. 대표적인 일급 객체 중 하나가 함수이다. 함수는 다음과 같은 부분에서 특별하게 취급된다. 변수에 할당(assignment)할 수 있다. 다른 함수의 인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 반환될 수 있다. 변수에 함수를 할당할 경우 주의해야 할 점은 호이스팅이 되지 않는다는 것이다. 하지만 호이스팅의 경우를 제외하면, 변수에 함수를 할당하는 함수 표현식이나 기존에 알고 있던 함수 선언식이나 크게 다르지 않다. 다만 함수 표현식의 경우 함수가 변수에 저장될 수 있다는 사실을 분명하게 보여준다. What is higher order function?..