프론트엔드
-
[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..
-
[Prettier, ESLint] Prettier을 세팅해보자!git,협업 2022. 4. 8. 16:21
안녕하세요! 오늘은 Prettier를 초기 세팅해보고, ESLint와 함께 사용하는 법을 알아보도록 하겠습니다. 🥳 우선 Prettier란 무엇일까요? Prettier는 우리가 작성한 코드를 아름답게(?) 만들어 주는 확장 프로그램 입니다! 우리가 미처 신경쓰지 못한 들여쓰기, 쿼트 등을 정의한 스타일로 Prettier가 만들어 줄 것 입니다. 우선 Prettier를 다운로드 받아 보도록 합니다! npm install -D prettier eslint-config-prettier eslint-plugin-prettier 우리는 Prettier를 eslint와 함께 사용할 것이기 때문에 관련 플러그인도 같이 다운로드 받아주도록 합니다! (editer.formatOnSave는 빼주세요!) 다운로드를 완료 했..
-
[this, 화살표 함수] Javascript this 완전정복!javascript 2022. 3. 31. 16:43
안녕하세요! 오늘은 좀 개념적인 부분인 자바스크립트의 this에 대해서 알아보도록 하겠습니다. 우선 this는 생성자 혹은 메소드에서 객체를 가리킬때 쓰입니다. this 때에 따라 다른 값을 가리킵니다. 어디에서 선언되냐에 따라서 그 값이 바뀝니다. global scope 에서 사용될 때 this 는 전역 객체를 가리킵니다.(window 객체) 함수에서 사용될 때에도 this 는 전역 객체를 가리킵니다. 객체에 속한 메소드에서 사용될 때 this 는 메소드가 속한 객체를 가리킵니다. 객체에 속한 메소드의 내부함수에서 사용될 때 this 는 전역 객체를 가리킵니다. 생성자에서 사용될 때 this 는 이 생성자로 인해 생성된 새로운 객체를 가리킵니다. 글로써 보는 것보다 코드와 함께 설명하면 훨씬 이해하기 ..
-
[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..
-
Event bubbling, 이벤트 버블링이란?javascript 2022. 3. 25. 20:23
안녕하세요 박상준입니다. 오늘은 이벤트 버블링에 대해 공부해보는 시간입니다! 🤔 What is the event bubbling? 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다. HTML요소는 트리 형식이죠? 그렇다면 그 랜딩페이지에서 가 최상위 요소가 됩니다. 그 밑으로 자식 요소들이 있죠. 브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 가집니다. 이 것을 ' 이벤트 버블링' 이라고 합니다. What is the event Capture? 이벤트 캡쳐링은 반대로 브라우저로부터 이벤트가 발생한 요소까지 이벤트를 전달합니다. 이벤트 버블링과 정반대인 것이죠. 이 것은 이벤트리스너의 옵션으로써 구현할 ..