[React] 함수형 프로그래밍이란?

함수형 프로그래밍 🧐 함수형 프로그래밍이란? 함수를 함수로 넘기거나 함수가 함수를 결과로 내놓는 것이 가능하다. 다른 함수를 조작하고, 함수를 인자로 받거나 반환하는 것이 가능한 고차함수 개념을 사용한다. 고차함수란? 아래와 같이 함수를 인자로 받거나 함수를 반환하는 함수 const createScream = logger => message => logger(message.toUpperCase() + "!!!") 자바스크립트에서도 함수가 1급 시민, 즉 정수나 문자열 같은 다른 일반적인 값과 마찬가지로 취급 할 수 있기 때문에 함수형 프로그래밍을 지원한다. 함수를 변수, 객체, 배열에 넣을 수 있으며, 다른 값과 맟나가지로 함수를 다른 함수에 인자로 넘길 수 있고, 반환할 수 도 있다. ///함수를 변수..

→2020.07.05

Front-end

webpack(웹팩)이란 무엇인가?

🙋‍♂️ 종종 React, vue와 같은 프레임워크를 이용해 웹을 만들 때, webpack이라는 단어를 많이 보실 수 있을 것입니다.web-pack이라는 단어를 볼때마다, '음, web-pack은 자주 등장하니 프레임워크를 구성하는 중요한 라이브러리겠지' 라고 생각하며 넘어갔을 수도 있습니다.하지만 그냥 넘어가는 것보다 간단히 무엇을 하는 라이브러리인지 알고 가는 것 또한 중요하다고 생각합니다.👉 webpack 이란 무슨 라이브러리일까요?webpack에 대한 위키백과의 설명을 보면,웹팩(Webpack 또는 webpack)은 오픈 소스 자바스크립트(JS) 모듈 번들러이다.웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다.이라고 볼 수 있는데,즉, webpack은 모듈 번들러 ..

→2020.07.04

Front-end/React

[React] 차근차근 Todo List 만들기 with Typescript- (3) ListItem Component

TODO LIST 만들어보기 React with Typescript (리액트 + 타입스크립트) (3) 참고 영상 : https://www.youtube.com/watch?v=ODvirqIC09A ※ typescript를 사용해서 만들기 때문에 VSCODE를 사용하신다면 tslint라는 확장프로그램을 사용하시면 typescript에 맞지 않는 문법들에 대해 경고 혹은 에러 밑줄을 확인 하실 수 있습니다. ListItem 컴포넌트는 앞서 언급했듯이 Todo List 기능에서 만들어진 각각의 할 일들에 대한 컴포넌트입니다. 우선 TodoListItem.tsx을 만들어주고 기본적인 틀을 만들어봅시다. import React from 'react'; export const TodoListItem = props =..

→2020.07.02

Front-end/React

[React] 차근차근 Todo List 만들기 with Typescript- (2) 구조 설계

TODO LIST 만들어보기 React with Typescript (리액트 + 타입스크립트) (2) ☞ 구조 설계 참고 영상 : https://www.youtube.com/watch?v=ODvirqIC09A React를 이용해 웹 애플리케이션을 만들기 전 해야할 중요한 것은 웹 애플리케이션을 몇 개의, 무슨 기능을 하는 컴포넌트들로 구성을 할지 정하는 것이 중요합니다. 따라서 Todo List에 들어갈 컴포넌트들을 정해보겠습니다. 이 기능에는 List를 추가 할 부분, List를 보여줄 부분들로 구성해보겠습니다. AddForm Component : 할 일을 추가해 줄 컴포넌트 List Component : 할 일들을 보여 줄 컴포넌트 ListItem Component : 각각의 할 일들의 컴포넌트 ☞ ..

→2020.07.02

Front-end/Vue

[Vue] 차근차근 Todo List 만들기 with typescript - (5) Axios 연동 후 JSON 객체 받아오기

TODO LIST 만들어보기 Vue with Typescript (뷰 + 타입스크립트) (5) ☞ Axios란? axios는 HTTP 클라이언트 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 실행합니다. 내부적으로 AXIOS는 직접적으로 XMLHttpRequest를 다루지 않고 “AJAX 호출”을 할 수 있습니다. 따라서 Axios를 사용해 프로젝트 내에 있는 JSON 파일에 저장되어 있는 itemList를 Store에 itemList에 저장시켜보겠습니다. ☞ 우선 알아둬야 할 점은, Vuex의 원리입니다. 아래 그림과 같이 vuex는 크게 State, Mutations, Actions로 구성이 가능합니다. 앞서 만들어봤듯이, state는 클래스의 멤버와 같은 역할이고, mutation은 메서드..

→2020.06.30