Front-end
-
[Webpack, plugin] 자주 사용하는 플러그인을 알아보자!Front-end 2022. 5. 5. 20:27
안녕하세요! 오늘은 웹팩을 공부하면서 알게 된 자주 사용하게 되는 플러그인들을 포스팅해보려고 합니다! 🥰 BannerPlugin 처음으로 배너 플러그인에 대해서 알아보겠습니다! 배너 플러그인은 빌드의 정보등을 dist 폴더에 문자열로써 담을 수 있는 플러그인입니다! 이 것은 웹팩이 기본으로 제공하는 플러그인으로써 어떻게 사용하는지 한 번 확인해보도록 합시다! 우리가 빌드를 실행할 때 현재 빌드된 버전의 기본적인 정보를 담을 수 있겠죠? 예를 들어서 깃의 HEAD의 대한 정보라던가, 언제 이 빌드가 진행되었는가에 대한 정보를 담을 수 있을 겁니다! 그럼 bannerplugin을 사용하기 위한 웹팩 설정을 살펴봅시다! /webpack.config.js const webpack = require('webpac..
-
[styled-component] ThemeProvider로 다크모드 구현해보기!Front-end/React 2022. 4. 13. 19:08
안녕하세요! 오늘은 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 지정해보자!Front-end 2022. 4. 10. 18:06
안녕하세요! 오늘은 프로젝트 도중 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을 사용해보자!Front-end/State management 2022. 4. 8. 18:46
안녕하세요! 오늘은 상태관리를 위한 패키지 중 하나인 "Recoil"에 대해 알아보도록 하겠습니다! 상태관리를 위한 패키지 중에는 많은 것들이 있는데요. 대표적으로 "Redux"가 있죠! 👏🏻 저는 개인적으로 리덕스의 작동 방식이 너무 복잡하다고 느껴서 Recoil을 상태관리에 이용해볼려고 하고 있습니다! 물론, 대형 프로젝트에서 Redux는 그 힘을 충분히 발휘할 수 있겠지만, 소규모 프로젝트와 토이 프로젝트를 할 때에는 오히려 걸리적거리더라고요! 하지만 Recoil은 react hooks와 비슷한 재질(?) 이라는 느낌이 들어서 사용하는데 어색하지도 않고 직관적이라 개인적으로 좋은 것 같습니다! 저는 recoil을 연습하기 위해, 다크모드가 있는 간단한 투두 앱을 구현해보았습니다 😀 https://6..
-
[React-query] 리액트 쿼리를 사용해보자!Front-end/React 2022. 3. 29. 19:20
React query는 왜 사용하나?! 리액트 쿼리를 사용하기 전에, 왜 이것이 그렇게 유용할까요? 리액트 쿼리의 장점은 다양한데 그 중 몇 가지를 읊어보자면 1. react-query 자체 캐싱 2. fetch 과정 간소화 3. 다양한 hooks 정도가 있을 것 같습니다. 그럼 리액트 쿼리의 사용 방법을 알아봅시다! npm install react-query 우선 당연히 패키지를 다운로드 받아야합니다. 그리고 리액트 앱에 queryclientprovider을 제공해줘야 합니다. Provide queryClient import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); Reac..
-
[꿀팁, 데이터베이스 string 개행] 데이터베이스 string 개행하는 법Front-end 2022. 2. 14. 20:16
안녕하세요! 오늘도 개발 중 꿀팁을 발견해 공유할려구 합니다 ㅎㅎ 보통 설명란 같은 경우는 input을 textarea로 쓰는 경우가 많죠. 그래서 띄어쓰기를 해가며 문자를 작성할텐데, 작성할 때는 그렇게 하더라도 막상 출력하고 나면, 개행을 무시한 채 일자로 나옵니다. 이러한 문제를 쉽게 해결할 수 있는 방법이 있습니다. const Body = styled.div` white-space: pre-wrap; ` 무려 css 단 한 줄로 해결이 된다는 사실! 이런 간단한 것을 몰랐다니! 오늘도 반성을 하게 됩니다! 보통 일반적으로 /n 같은 태그들은 그대로 출력이 됩니다만, 이 css를 작성해주면, 자동으로 파싱해주는 것 같습니다! 굉장히 잘 실행되는 것을 볼 수 있습니다! 오늘도 간단한 꿀팁을 공유합니다..
-
[상태관리, Front-end] props drilling? 상태관리 라이브러리의 등장 배경 확실히 알아보기Front-end/State management 2021. 12. 15. 19:28
안녕하세요! 오늘은 프론트엔드에서의 상태관리가 등장한 배경과 해결방안등에 대해서 공부하며 알아본 내용을 포스팅하도록 하겠습니다. 저도 이전에 상태관리 라이브러리를 이게 왜 필요한지도 모르고 배우기만 하고, 실제로 어떠한 프로젝트를 진행했는데 그 개념조차 제대로 모르니까 사용을 안하게 되게 되더라고요 ㅠㅜ.. 그래서! 오늘은 우리가 상태관리가 왜 필요한지. 먼저 알아보고! 느끼고! 간단하게 사용해보도록 합시다 🥳 #1. Props Drilling? 여러분 혹시 프론트앤드 개발하던 도중 중첩된 컴포넌트들 때문에 진작 필요한 정보는 너무 하위 컴포넌트라 컴포넌트를 넘기고.. 넘기고.. 넘기고.. 했던 경험 있으신가요? 있으시다면 여러분은 이미 props drilling을 경험한 것입니다 😤 사실 저도 이전에 ..
-
[Typescript,React] Typescript로 Form,UseState 사용해보기Front-end/React 2021. 12. 14. 18:04
안녕하세요! 오늘은 React + Typescript의 환경에서 useState와 form에서의 타입선언 등을 알아보겠습니다! 자바스크립트를 사용하다가 처음으로 타입스크립트로 프로젝트를 진행할 때, 타입스크립트에 익숙하지 않은 사람들이 힘들어하는 부분일 것이라 생각해서 정리해보도록 하겠습니다! #1. Form event with react+typescript 저도 처음 타입스크립트환경에서 리액트로 프로젝트를 할 때 form의 타입을 무엇으로 설정하는지 몰라 한참 찾았던 기억이 있습니다 ㅠㅠ javascript에서는 form의 event의 타입을 지정해주지 않아도 진행이 되지만, 타입스크립트는 event가 어디서 발생하는지에 대한 타입을 지정해달라고 에러를 내뱉습니다. 간단하게 말하면 타입스크립트는 inp..