Front-end/React
[React] 함수형 프로그래밍이란?
함수형 프로그래밍 🧐 함수형 프로그래밍이란? 함수를 함수로 넘기거나 함수가 함수를 결과로 내놓는 것이 가능하다. 다른 함수를 조작하고, 함수를 인자로 받거나 반환하는 것이 가능한 고차함수 개념을 사용한다. 고차함수란? 아래와 같이 함수를 인자로 받거나 함수를 반환하는 함수 const createScream = logger => message => logger(message.toUpperCase() + "!!!") 자바스크립트에서도 함수가 1급 시민, 즉 정수나 문자열 같은 다른 일반적인 값과 마찬가지로 취급 할 수 있기 때문에 함수형 프로그래밍을 지원한다. 함수를 변수, 객체, 배열에 넣을 수 있으며, 다른 값과 맟나가지로 함수를 다른 함수에 인자로 넘길 수 있고, 반환할 수 도 있다. ///함수를 변수..
[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 =..
[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 : 각각의 할 일들의 컴포넌트 ☞ ..
[React] 차근차근 Todo List 만들기 with Typescript- (1) 프로젝트 생성
TODO LIST 만들어보기 React with Typescript (리액트 + 타입스크립트) (1) ☞ 프로젝트 만들기 참고 영상 : https://www.youtube.com/watch?v=ODvirqIC09A 프로젝트 만들기 - CRA (create-react-app) 이용 yarn create react-app [프로젝트 명] --typescript or npx create-react-app [프로젝트 명] --template typescript yarn start or npm start 를 하면 아래와 같은 초기 페이지를 볼 수 있다. ☞ 기본적인 페이지를 없애고 새로운 페이지를 만들어보자 rm App.css App.test.tsx index.css logo.svg serviceWorker.ts..