front-end
-
[Webpack, plugin] 자주 사용하는 플러그인을 알아보자!Front-end 2022. 5. 5. 20:27
안녕하세요! 오늘은 웹팩을 공부하면서 알게 된 자주 사용하게 되는 플러그인들을 포스팅해보려고 합니다! 🥰 BannerPlugin 처음으로 배너 플러그인에 대해서 알아보겠습니다! 배너 플러그인은 빌드의 정보등을 dist 폴더에 문자열로써 담을 수 있는 플러그인입니다! 이 것은 웹팩이 기본으로 제공하는 플러그인으로써 어떻게 사용하는지 한 번 확인해보도록 합시다! 우리가 빌드를 실행할 때 현재 빌드된 버전의 기본적인 정보를 담을 수 있겠죠? 예를 들어서 깃의 HEAD의 대한 정보라던가, 언제 이 빌드가 진행되었는가에 대한 정보를 담을 수 있을 겁니다! 그럼 bannerplugin을 사용하기 위한 웹팩 설정을 살펴봅시다! /webpack.config.js const webpack = require('webpac..
-
[꿀팁, 데이터베이스 string 개행] 데이터베이스 string 개행하는 법Front-end 2022. 2. 14. 20:16
안녕하세요! 오늘도 개발 중 꿀팁을 발견해 공유할려구 합니다 ㅎㅎ 보통 설명란 같은 경우는 input을 textarea로 쓰는 경우가 많죠. 그래서 띄어쓰기를 해가며 문자를 작성할텐데, 작성할 때는 그렇게 하더라도 막상 출력하고 나면, 개행을 무시한 채 일자로 나옵니다. 이러한 문제를 쉽게 해결할 수 있는 방법이 있습니다. const Body = styled.div` white-space: pre-wrap; ` 무려 css 단 한 줄로 해결이 된다는 사실! 이런 간단한 것을 몰랐다니! 오늘도 반성을 하게 됩니다! 보통 일반적으로 /n 같은 태그들은 그대로 출력이 됩니다만, 이 css를 작성해주면, 자동으로 파싱해주는 것 같습니다! 굉장히 잘 실행되는 것을 볼 수 있습니다! 오늘도 간단한 꿀팁을 공유합니다..
-
[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..
-
[Styled-component] styled-component 좀 더 똑똑하게 쓰기Front-end/React 2021. 12. 13. 17:22
안녕하세요. 오늘 포스팅할 주제는 'styled-component'입니다! 리액트를 사용하는 분이라면 다양한 css 라이브러리를 사용하실텐데 저는 CSS-IN-JS의 대표적인 라이브러리 중 하나인 styled-component를 사용 중입니다. 하지만 요즘 styled-component의 재사용성을 제대로 사용하지 않는 저를 발견하고 styled-component의 다양한 기능과 재사용성을 더욱 심도있게 사용해보자라는 마음에 포스팅을 하게 되었습니다! 우리 모두 styled-component를 제대로 사용해 보도록 합시다! #1 Styled-component의 props전달을 잘 사용하자. 같은 h2 태그를 가진 element를 사용해야 한다고 가정해보겠습니다. 둘 다 부제목이지만 다른 폰트 사이즈를 사..