오늘 당신은 무엇을 하시나요?
안녕하세요! 오늘은 웹팩을 공부하면서 알게 된 자주 사용하게 되는 플러그인들을 포스팅해보려고 합니다! 🥰 BannerPlugin 처음으로 배너 플러그인에 대해서 알아보겠습니다! 배너 플러그인은 빌드의 정보등을 dist 폴더에 문자열로써 담을 수 있는 플러그인입니다! 이 것은 웹팩이 기본으로 제공하는 플러그인으로써 어떻게 사용하는지 한 번 확인해보도록 합시다! 우리가 빌드를 실행할 때 현재 빌드된 버전의 기본적인 정보를 담을 수 있겠죠? 예를 들어서 깃의 HEAD의 대한 정보라던가, 언제 이 빌드가 진행되었는가에 대한 정보를 담을 수 있을 겁니다! 그럼 bannerplugin을 사용하기 위한 웹팩 설정을 살펴봅시다! /webpack.config.js const webpack = require('webpac..
안녕하세요! 오늘은 styled-components의 ThemeProvider를 통해 간단하게 다크모드를 구현해보도록 하겠습니다! 중간에 recoil이 잠깐 등장하는데! recoil이 궁금하신 분은! 🧐 https://sangjuntech.tistory.com/27 [상태관리, Recoil] Recoil을 사용해보자! 안녕하세요! 오늘은 상태관리를 위한 패키지 중 하나인 "Recoil"에 대해 알아보도록 하겠습니다! 상태관리를 위한 패키지 중에는 많은 것들이 있는데요. 대표적으로 "Redux"가 있죠! 👏🏻 저는 개 sangjuntech.tistory.com 여기에서 recoil에 대해 알아보면 좋을 것 같습니다 ㅎㅎ 👀 자 그럼 같이 ThemeProvider를 알아볼까요! 우선 ThemeProvider..
안녕하세요! 오늘은 프로젝트 도중 Array 타입지정을 하는 방법을 알아보겠습니다! 🥷 우선 기본적으로 interface는 object를 다룹니다. interface IFood { name: string; leftTime: string; } 이런 식으로 말이죠! 그렇다면 이 인터페이스를 배열에 사용하고 싶으면 어떡해야할까요? 우리는 이 오브젝트를 가진 배열을 타입으로 지정해줘야 한다면 우리는 어떠한 행위를 해야할까요?! 🤔 그 것은 바로 IFood를 가지는 Array를 새로 만들어주어야 합니다! 한 번 코드로 확인해봅시다! interface IFood { name: string; leftTime: string; } interface IFoods extends Array {} 자 우린 IFood objec..
안녕하세요! 오늘은 상태관리를 위한 패키지 중 하나인 "Recoil"에 대해 알아보도록 하겠습니다! 상태관리를 위한 패키지 중에는 많은 것들이 있는데요. 대표적으로 "Redux"가 있죠! 👏🏻 저는 개인적으로 리덕스의 작동 방식이 너무 복잡하다고 느껴서 Recoil을 상태관리에 이용해볼려고 하고 있습니다! 물론, 대형 프로젝트에서 Redux는 그 힘을 충분히 발휘할 수 있겠지만, 소규모 프로젝트와 토이 프로젝트를 할 때에는 오히려 걸리적거리더라고요! 하지만 Recoil은 react hooks와 비슷한 재질(?) 이라는 느낌이 들어서 사용하는데 어색하지도 않고 직관적이라 개인적으로 좋은 것 같습니다! 저는 recoil을 연습하기 위해, 다크모드가 있는 간단한 투두 앱을 구현해보았습니다 😀 https://6..
안녕하세요! 오늘은 Prettier를 초기 세팅해보고, ESLint와 함께 사용하는 법을 알아보도록 하겠습니다. 🥳 우선 Prettier란 무엇일까요? Prettier는 우리가 작성한 코드를 아름답게(?) 만들어 주는 확장 프로그램 입니다! 우리가 미처 신경쓰지 못한 들여쓰기, 쿼트 등을 정의한 스타일로 Prettier가 만들어 줄 것 입니다. 우선 Prettier를 다운로드 받아 보도록 합니다! npm install -D prettier eslint-config-prettier eslint-plugin-prettier 우리는 Prettier를 eslint와 함께 사용할 것이기 때문에 관련 플러그인도 같이 다운로드 받아주도록 합니다! (editer.formatOnSave는 빼주세요!) 다운로드를 완료 했..
무엇에 관심이 있으신가요?
-
[Webpack, plugin] 자주 사용하는 플러그인을 알아보자!
안녕하세요! 오늘은 웹팩을 공부하면서 알게 된 자주 사용하게 되는 플러그인들을 포스팅해보려고 합니다! 🥰 BannerPlugin 처음으로 배너 플러그인에 대해서 알아보겠습니다! 배너 플러그인은 빌드의 정보등을 dist 폴더에 문자열로써 담을 수 있는 플러그인입니다! 이 것은 웹팩이 기본으로 제공하는 플러그인으로써 어떻게 사용하는지 한 번 확인해보도록 합시다! 우리가 빌드를 실행할 때 현재 빌드된 버전의 기본적인 정보를 담을 수 있겠죠? 예를 들어서 깃의 HEAD의 대한 정보라던가, 언제 이 빌드가 진행되었는가에 대한 정보를 담을 수 있을 겁니다! 그럼 bannerplugin을 사용하기 위한 웹팩 설정을 살펴봅시다! /webpack.config.js const webpack = require('webpac..
-
[styled-component] ThemeProvider로 다크모드 구현해보기!
안녕하세요! 오늘은 styled-components의 ThemeProvider를 통해 간단하게 다크모드를 구현해보도록 하겠습니다! 중간에 recoil이 잠깐 등장하는데! recoil이 궁금하신 분은! 🧐 https://sangjuntech.tistory.com/27 [상태관리, Recoil] Recoil을 사용해보자! 안녕하세요! 오늘은 상태관리를 위한 패키지 중 하나인 "Recoil"에 대해 알아보도록 하겠습니다! 상태관리를 위한 패키지 중에는 많은 것들이 있는데요. 대표적으로 "Redux"가 있죠! 👏🏻 저는 개 sangjuntech.tistory.com 여기에서 recoil에 대해 알아보면 좋을 것 같습니다 ㅎㅎ 👀 자 그럼 같이 ThemeProvider를 알아볼까요! 우선 ThemeProvider..
-
[Typescript, Array] interface Array type 지정해보자!
안녕하세요! 오늘은 프로젝트 도중 Array 타입지정을 하는 방법을 알아보겠습니다! 🥷 우선 기본적으로 interface는 object를 다룹니다. interface IFood { name: string; leftTime: string; } 이런 식으로 말이죠! 그렇다면 이 인터페이스를 배열에 사용하고 싶으면 어떡해야할까요? 우리는 이 오브젝트를 가진 배열을 타입으로 지정해줘야 한다면 우리는 어떠한 행위를 해야할까요?! 🤔 그 것은 바로 IFood를 가지는 Array를 새로 만들어주어야 합니다! 한 번 코드로 확인해봅시다! interface IFood { name: string; leftTime: string; } interface IFoods extends Array {} 자 우린 IFood objec..
-
[상태관리, Recoil] Recoil을 사용해보자!
안녕하세요! 오늘은 상태관리를 위한 패키지 중 하나인 "Recoil"에 대해 알아보도록 하겠습니다! 상태관리를 위한 패키지 중에는 많은 것들이 있는데요. 대표적으로 "Redux"가 있죠! 👏🏻 저는 개인적으로 리덕스의 작동 방식이 너무 복잡하다고 느껴서 Recoil을 상태관리에 이용해볼려고 하고 있습니다! 물론, 대형 프로젝트에서 Redux는 그 힘을 충분히 발휘할 수 있겠지만, 소규모 프로젝트와 토이 프로젝트를 할 때에는 오히려 걸리적거리더라고요! 하지만 Recoil은 react hooks와 비슷한 재질(?) 이라는 느낌이 들어서 사용하는데 어색하지도 않고 직관적이라 개인적으로 좋은 것 같습니다! 저는 recoil을 연습하기 위해, 다크모드가 있는 간단한 투두 앱을 구현해보았습니다 😀 https://6..
-
[Prettier, ESLint] Prettier을 세팅해보자!
안녕하세요! 오늘은 Prettier를 초기 세팅해보고, ESLint와 함께 사용하는 법을 알아보도록 하겠습니다. 🥳 우선 Prettier란 무엇일까요? Prettier는 우리가 작성한 코드를 아름답게(?) 만들어 주는 확장 프로그램 입니다! 우리가 미처 신경쓰지 못한 들여쓰기, 쿼트 등을 정의한 스타일로 Prettier가 만들어 줄 것 입니다. 우선 Prettier를 다운로드 받아 보도록 합니다! npm install -D prettier eslint-config-prettier eslint-plugin-prettier 우리는 Prettier를 eslint와 함께 사용할 것이기 때문에 관련 플러그인도 같이 다운로드 받아주도록 합니다! (editer.formatOnSave는 빼주세요!) 다운로드를 완료 했..