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